'Text showing behind logotype and menu

I'm a complete beginner, trying to make html and css work for me, and I need help! I will have a go at describing my problem in English.

In my top left corner I have a logotype with position: "fixed" since I want it to stay when I scroll down. Below it I have some text. When I scroll down on the page, my logotype stays put, but the text shows on each sides of it (and behind it). I want it to be like a white (same color as the logotype background) block on the entire top of the page, so that the text doesn't show on the sides. Or even better, some way to make it so that the text doesn't go all the way up when I scroll, but stays under the logotype (and menu).

I hope I'm making myself understood and that someone have the solution.:)

<div class="title"><a href="index.html"><img src="bilder/logga.jpg" class="title" alt="Bokhandeln">
        </a></div>

    <div class="info">
    <h3>Öppettider</h3>
        Måndag-fredag 10-18 <br>
        Lördag 10-15<br>
        Söndag stängt<br>

        <h5>Avvikande öppettider</h5>
        Lördag den 11/6 stängt <br>
        Lördag den 17/6 stängt
</div>



.title a {
    position: fixed;
    text-decoration: none;
    display: block;
    border: 2px solid white;
    padding: 10px;
    padding-bottom: 5%;
    background-color: white;
   
}

.title {
    background-color: white;
    height: 20%;
    position: fixed;
    left: 0%;
    top: 0%;
    display: block;
    padding-left: 10px;
    z-index: 3;
}

.info {
    position: relative;
    padding-top: 8%;
    display: block;
    z-index: 1;
}

Jenny

htmlcssposition


Solution 1:[1]

It should simply be a matter of making the appropriate "site header" container element of your logo (whatever it may be called e.g. #header or .menu-bar) fixed (instead of the logo), and then setting the background-color for it to the desired color (e.g. #ffffff).

This should have the "body" content then scroll up and under the entire site header.

P.S. If you could add a code block of the html itself to your question, that will help others to provide you with more accurate/specific answers. :-D

Hi Jenny,

Ok, I think the below will work better for you. A few notes:

  • I changed your white colours to blue/green/red for better visibility during testing.
  • I added a .logo class to set the height for your href image (reasoning for this is next).
  • The biggest issue was the percentage based height/padding. With fixed pixel 'px' values your .title/.info overlap issues go away. The values I set are arbitrary, as I don't know your logga.jpg image size, so adjust all the px values accordingly (don't forget to adjust the .info margin-top value so that it is not covered by the .title).
  • .title was set to 100% width, so that .info text to the right of the .logo will not be seen.
  • I changed your .title 10px padding to margin - padding is part of the clickable link, margins are not.
  • Redundant rules are /*commented out*/.
  • FYI: Measurements (px, em, %, etc...) are not needed for Zero '0' values - 0===0.

And a couple of beginner pointers for you:

  • For better readability try to organise your CSS consistently. E.g. I use a "Top to Bottom / Outside In" approach. So the .title rule would come before .title a (Top > Bottom), and declarations within each rule would go in order from position... right down to your font-size, and misc properties like cursor, etc. (Outside > In). There are other ways, no 1 is necessarily right/wrong, but pick one and stick to it - https://webdesign.tutsplus.com/articles/outside-in-ordering-css-properties-by-importance--cms-21685
  • Consistent indentation/returns in your html/css will also improve readability (as per my solution).

Hope that helps! :-)

HTML

</html>
<head>
</head>
<link rel="stylesheet" href="style.css">
<body>
  <div class="title">
    <a href="index.html"><img src="bilder/logga.jpg" class="logo" alt="Bokhandeln"></a>
  </div>
  <div class="info">
    <h3>Öppettider</h3>
        Måndag-fredag 10-18 <br>
        Lördag 10-15<br>
        Söndag stängt<br>

    <h5>Avvikande öppettider</h5>
        Lördag den 11/6 stängt <br>
        Lördag den 17/6 stängt
  </div>
</body>
</html>

CSS

.title {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 50px;
    padding-left: 10px;
    background-color: blue;
}

.title a {
    position: fixed;
    /*display: block;*/
    /*border: 2px solid green;*/
    margin: 10px;
    /*padding-bottom: 5%;*/
    background-color: red;
    text-decoration: none;
}

.title .logo {
    height: 30px;
}

.info {
    position: relative;
    z-index: 1;
    display: block;
    /*padding-top: 8%;*/
    margin-top: 70px;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions