HTML and CSS - Aligning text and managing scrollbar visibility

Question

HTML and CSS - Aligning text and managing scrollbar visibility

I am currently diving into the world of coding and embarking on the journey of crafting a website for my father. This project not only helps me gain valuable experience but also builds up my portfolio.

Utilizing unsemantic and normalize frameworks, I encountered some challenges along the way:

1) The alignment between the text "Michael Gilsenan" and the navigation bar is proving to be quite tricky. Despite experimenting with line-height adjustments, the text seems to move sporadically in unexpected directions.

2) Implementing a horizontal line under the header using either the <hr> tag or the border-bottom property triggers a scroll bar inside the containing <div> where the <nav> element resides.

After tirelessly searching for solutions over the past 4 hours and delving into numerous resources, exhaustion has started to set in. Apologies if I might be overlooking something glaringly obvious at this point!

Your assistance is greatly appreciated.

<!DOCTYPE html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>      
    <link rel="stylesheet" type="text/css" href="../external/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="../external/css/unsemantic-grid-responsive-tablet.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:400,600" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body class="grid-container">

        <header class="grid-parent">

            <div class="grid-50">
                <a href="" class="headertext">Michael Gilsenan</a>
            </div>

            <div class="grid-50">
                <ul>
                    <li><a href="">About</a></li>
                    <li><a href="">Bio</a></li>
                    <li><a href="">Portfolio</a></li>
                    <li><a href="">Blog</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div>

        </header> <!-- end of header-->

</body>

* {
        margin: 0;
        text-decoration: none;
    }

    hr {
        border-style: solid;
        border-color: #cacaca;
        position: relative;
        top: -40px;
    }

    /* header styles */

    header {
        font-family: 'Open Sans', sans-serif;
        margin-top: 80px;
        overflow: auto;
        border-bottom: solid #cacaca 1px;
    }


    header a {
        color: #332e2d;
    }


    .headertext {
        font-family: 'Montserrat', sans-serif;
        font-size: 300%;
        letter-spacing: -0.01em;
        line-height:
    }

    ul li {
        display: inline; 
    }

    ul {
        word-spacing: 0.5em;
        text-align: right;
    }

html css

Answer 1

Answer №1

When working with the ul

line-height: 55px; /* to match the height of the headertext. */

Dealing with the header

overflow-y: hidden;

Visit this link for more information.

The key was identifying the source of the scrollbar issue. I initially focused on the ul, but upon closer inspection, I discovered that it was actually being added to the header section.

Note: It is recommended to use a proper header tag like <h1> for the headertext instead of simply increasing the text size. Search engines rely on header tags for SEO purposes. You can still modify the size of header tags using CSS while maintaining the semantic structure.

Answer 2

When working with the ul

line-height: 55px; /* to match the height of the headertext. */

Dealing with the header

overflow-y: hidden;

Visit this link for more information.

The key was identifying the source of the scrollbar issue. I initially focused on the ul, but upon closer inspection, I discovered that it was actually being added to the header section.

Note: It is recommended to use a proper header tag like <h1> for the headertext instead of simply increasing the text size. Search engines rely on header tags for SEO purposes. You can still modify the size of header tags using CSS while maintaining the semantic structure.

Answer 3

Answer №2

A scroll bar is being displayed because the overflow property in the style declaration for the header element is set to auto:

header {
  font-family: 'Open Sans', sans-serif;
  margin-top: 80px;
  overflow: auto;                        <-- change or remove this
  border-bottom: solid #cacaca 1px;
}

The auto value allows the browser to decide whether to add scrollbars when content exceeds container dimensions, often resulting in unintended scrollbars. Removing the overflow property or setting it to none will get rid of the scrollbar.

If you are struggling with alignment due to the float-based layout of the unsemantic stylesheet you are using, consider learning and implementing flexbox instead. Here are some recommended tutorials:

What the Flexbox by Wes Bos -
A Complete Guide to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox Froggy -

To achieve your desired layout with flexbox, follow these steps:

Remove unsemantic grid classes from your HTML Replace your CSS with the following

* {
margin: 0;
text-decoration: none;
}

/* hr {
    border-style: solid;
    border-color: #cacaca;
    position: relative;
    top: -40px;
} */

/* header styles */

header {
    display: flex;
    align-items: flex-end;
    height: 80px;
    font-family: 'Open Sans', sans-serif;
    /* overflow: auto; */
    /* border-bottom: solid #cacaca 1px; */
    border-bottom: 1px solid #cacaca;
}

header a {
    color: #332e2d;
}

.header-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;
    letter-spacing: -0.01em;
}

header nav {
  padding: 10px;
  display: flex;
}

header nav ul li {
  display: inline;
  align-items: flex-end;
  margin: 0 20px;
}

I've included comments on certain properties in your CSS file. For a working example, check out this pen:

https://codepen.io/danyadsmith/pen/mKjyKQ

If you're facing challenges due to the grid system you're using, consider moving to flexbox which has broader browser support. Check the flexbox section on Can I Use for more information:

https://caniuse.com/#feat=flexbox

Hope this advice helps you. Good luck!

Answer 4

A scroll bar is being displayed because the overflow property in the style declaration for the header element is set to auto:

header {
  font-family: 'Open Sans', sans-serif;
  margin-top: 80px;
  overflow: auto;                        <-- change or remove this
  border-bottom: solid #cacaca 1px;
}

The auto value allows the browser to decide whether to add scrollbars when content exceeds container dimensions, often resulting in unintended scrollbars. Removing the overflow property or setting it to none will get rid of the scrollbar.

If you are struggling with alignment due to the float-based layout of the unsemantic stylesheet you are using, consider learning and implementing flexbox instead. Here are some recommended tutorials:

What the Flexbox by Wes Bos -
A Complete Guide to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox Froggy -

To achieve your desired layout with flexbox, follow these steps:

Remove unsemantic grid classes from your HTML Replace your CSS with the following

* {
margin: 0;
text-decoration: none;
}

/* hr {
    border-style: solid;
    border-color: #cacaca;
    position: relative;
    top: -40px;
} */

/* header styles */

header {
    display: flex;
    align-items: flex-end;
    height: 80px;
    font-family: 'Open Sans', sans-serif;
    /* overflow: auto; */
    /* border-bottom: solid #cacaca 1px; */
    border-bottom: 1px solid #cacaca;
}

header a {
    color: #332e2d;
}

.header-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;
    letter-spacing: -0.01em;
}

header nav {
  padding: 10px;
  display: flex;
}

header nav ul li {
  display: inline;
  align-items: flex-end;
  margin: 0 20px;
}

I've included comments on certain properties in your CSS file. For a working example, check out this pen:

https://codepen.io/danyadsmith/pen/mKjyKQ

If you're facing challenges due to the grid system you're using, consider moving to flexbox which has broader browser support. Check the flexbox section on Can I Use for more information:

https://caniuse.com/#feat=flexbox

Hope this advice helps you. Good luck!

HTML and CSS - Aligning text and managing scrollbar visibility

Answer №1

Answer №2

Similar questions

Conceal Tooltips with Materialize CSS

Difficulty in implementing jQuery accordion height style using either content or fill option

Using jQuery-Ajax to fetch MySQL data in Perl

When attempting to render HTML containing multiple CSS classes within a JSON request parameter, the styles are not being applied as expected

Adding a watermark or overlay to an image using JavaScript and PHP

Problem with Bootstrap 3 navbar on mobile devices - not tappable or responsive

Margin in Bootstrap Panel Not Set to 0 as Needed

How can we initiate a script once the scroll has reached the designated block using jQuery?

Encountering an issue with Masonry's container.append that is causing an Uncaught TypeError: Object does not possess the filter method

Passing a value from a prop to a click event that is dynamically created within an SVG Vue.js

Refresh a specific div element utilizing jQuery

CSS3 Word Wrapping Tutorial

Having difficulty in closing Sticky Notes with JavaScript

Refreshed page causing hide/show div to reset

Height that is determined in real-time

Ways to incorporate a floating label

How can I modify CSS styles in AngularJS with Bootstrap UI?

When the form is submitted, use jQuery to smoothly transition the page to a specific

Libraries that provide webkit support for all browsers

The class [AdminController] being targeted does not exist