Content is appearing over fixed header

6 days ago 6
ARTICLE AD BOX

The text which I expected to appear below the header instead starts at the top of the page. Why?

It's simply because of

.divContent { position: fixed; top: 40px;

You told it exactly where to be on the page. Where everything else is placed is irrelevant to that. If you don't want it there then you have to change the fixed position, or change your approach.

One solution is just to push it down by the expected height of the header:

.divContent { position: fixed; top: 320px;

Demo:

.divBackground { position: fixed; top: 0; left: 0; width: 100%; bacground-image: url("Tea/Dogwood.jpg"); background-attachment: fixed; } .divContent { position: fixed; top: 320px; left: 300px; bottom: 40px; right: 80px; overflow: scroll; scrollbar-color: #FFFFC0 #FFFFC0; } .divTitle { position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 1000; } .divHeading { font-family: Cinzel; font-size: 50px; } divFancy { font: Ballet; font-size: 75px; } .divBallet { font-family: "Ballet", cursive; font-size: 100px; font-weight: 600; font-style: normal; line-height: 70px; height: 65px; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN"> <HTML> <HEAD> <meta name="description" content="A Gentleman's Guide To A Ladies' Tea"> <link href="https://fonts.googleapis.com/css2?family=Cinzel:[email protected]&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Ballet:[email protected]&family=Cinzel:[email protected]&display=swap" rel="stylesheet"> <TITLE>A Gentleman's Guide to Ladies' Tea</TITLE> </HEAD> <BODY TEXT="#A50D09" LINK="#361ABA" VLINK="#A50D09" ALINK="#FF0000" background="Tea/Dogwood.jpg" style="background-attachment:fixed;"> <center> <div class="divBackground"> <div class="divTitle"> <div class="divHeading"> <br> A Gentleman's Guide <br> To A <br> </div> <div class="divBallet"> Ladies' Tea </div> </div> </div> <div class="divContent"> Frog </div> </BODY> </HTML>

Note this might not be perfect as you're expressing absolute font sizes and allowing those bits to overflow their own containers. A bigger rethink might be sensible but this answers your immediate questions.

P.S. As an aside, the <center> tag is deprecated and should not be used anymore

I'd also advise against doing things like putting some style attributes directly on elements (like you have with the body tag). It'll be easier to manage your code and trace problems if you keep all the style rules in the CSS block rather than scattering it across different parts of the code.

ADyson's user avatar

If you prefer position to be fixed, then you can apply a top that places it below the header and a left to place it in the middle using calc.

.divBackground { position: fixed; top: 0; left: 0; width: 100%; bacground-image: url("Tea/Dogwood.jpg"); background-attachment: fixed; } .divContent { position: fixed; top: 280px; left: calc(50% - 2em); bottom: 40px; overflow: scroll; scrollbar-color: #FFFFC0 #FFFFC0; } .divTitle { position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 1000; } .divHeading { font-family: Cinzel; font-size: 50px; } divFancy { font: Ballet; font-size: 75px; } .divBallet { font-family: "Ballet", cursive; font-size: 100px; font-weight: 600; font-style: normal; line-height: 70px; height: 65px; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN"> <HTML> <HEAD> <meta name="description" content="A Gentleman's Guide To A Ladies' Tea"> <link href="https://fonts.googleapis.com/css2?family=Cinzel:[email protected]&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Ballet:[email protected]&family=Cinzel:[email protected]&display=swap" rel="stylesheet"> <TITLE>A Gentleman's Guide to Ladies' Tea</TITLE> </HEAD> <BODY TEXT="#A50D09" LINK="#361ABA" VLINK="#A50D09" ALINK="#FF0000" background="Tea/Dogwood.jpg" style="background-attachment:fixed;"> <center> <div class="divBackground"> <div class="divTitle"> <div class="divHeading"> <br> A Gentleman's Guide <br> To A <br> </div> <div class="divBallet"> Ladies' Tea </div> </div> </div> <div class="divContent"> Frog </div> </BODY> </HTML>

Lajos Arpad's user avatar

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.

Read Entire Article