CODEWITHSUNDEEP
htmlcss
tesseract4d
tesseract4d

Reputation: 41

header won't appear on webpage

I'm building a site layout, and for whatever reason, the header won't appear in the html version of the document (the text doesn't appear at all). I'm trying to figure out how to section off the page, so that text can be inserted quickly and relatively easily (kind of like building a template). I'm also trying to add a menu bar and a small footer. The layout is supposed to be as follows: a gradient, overlayed with the content. The content layout involves a header, with a menu bar directly below it and the rest of the content is broken down into two sections ("left" and "main") and the bottom is a very small footer (just enough to hold a copyright). The code is as follows:

HTML:

<!DOCTYPE html>
<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <title>Welcome to AskMeMore.Org!</title>
</head>
<body>
    <div id="background">
        <img src="gradient.jpg" height="50%" width="100%" />
    </div>
    <div id="overlay">
        <div id="content">
            <div id="body">
                <div id="header">Header</div>
                <div id="left">Hi</div>
                <div id="main">Welcome</div>
            </div>
        </div>
    </div>
</body>
</html>

CSS:

#background {
    background-repeat:repeat-x;
    position:relative;
    z-index:1;
}
#overlay {
    position:relative;
    top:-975px;
    left:15%;
    z-index:10;
    background-color:#FFFFFF;
    width:70%;
}
#content {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    background-color:#FFFFFF;
}
#header {
    background-color:#FFFFFF;
    position:absolute;
    top:0;
    left:0;
}
#body {
    background-color:#FFFFFF;
}
#left {
    position:absolute;
    top:0;
    left:0;
    background-color:#FFFFFF;
    width:25%;
    padding-top: 20px;
    padding-left: 20px;
}
#main {
    position:absolute;
    top:0;
    right:0;
    background-color:#FFFFFF;
    width:71%;
    padding-top: 20px;
    padding-left: 20px;
}

Upvotes: 3

Views: 3618

Answers (4)

Ansgar Wiechers
Ansgar Wiechers

Reputation: 200573

The setting top:-975px moves your overlay-div (and its entire content) 975 pixels above the top of the browser window.

Upvotes: 1

Mike Campbell
Mike Campbell

Reputation: 7978

I'm not sure what you're trying to achieve exactly here, but the reason that Header isn't showing is because you have positioned it in exactly the same place as your other element(s); they are covering it up.

I strongly recommend that you read some CSS tutorials, there are some very easy to follow ones explaining how to do exactly what I think you're trying to achieve.

A quick google offers: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

Upvotes: 1

Chris
Chris

Reputation: 27627

The problem is that your left and main divs are both set to top: 0 whcih means they overlap the header which is also set to top: 0. Because left and main have opaque (white) backgrounds they block the behind content.

The following is a fiddle where I've just played around a bit with background colours. I've made the header red (to make it easy to see exactly where it is) and the left and main transparent. here the header is visible.

http://jsfiddle.net/chrisvenus/RVxqM/

If you comment out the line that sets left to transparent then the line above will set it to green and you can see immeditely how this blocks out the red header cell.

There are two solutions. Firstly and probably best is to make your gradient a proper CSS background image rather than an img that has content moved over it.

Second option would probably be to create a containing div to do the absolute positioning and then position its children more traditionally (ie the header as normal and the left and main floated or whatever is appropriate.

The exact solution depends on your own circumstances but this tells you why its going wrong and will hopefully allow you to find the solution that fits you best.

Upvotes: 0

user1622689
user1622689

Reputation: 31

You are using an image immediately after div#background. I think you want a background for the entire page so remove this:

<div id="background">
    <img src="gradient.jpg" height="50%" width="100%" />
</div>

    #background {
    ..remove all styles
    background-repeat:repeat-x; // not required because you never used a background

Only use the overlay div and use this as a style for #overlay:

background: #00ff00 url('gradient.jpg') no-repeat center;

Upvotes: 0

Related Questions