Can't center the page on CSS

HTML & CSS
21

This is how I want it to look, (content beginning directly under top nav)

it won’t stay where I want it to I’ve tried all position types even AP but it’s useless.

Please stop trying to AP everything, the only thing on your entire page that needs to AP is the badge image.

If you will take that badge out of your header image like I keep explaining then the top navbar can be floated and your main content will start directly under the navbar.

The header image needs to slice off at the bottom of your nav portion.

Then we can just AP the badge only and set a top margin on your left sidebar to get below the badge. :slight_smile:

Just make the badge with a transparent background, gif or png.

22

Here is the badge, http://www.mediafire.com/i/?nmjtiglnhzn
How would I float the top navbar if the header is going to be on the way?

23

I can’t do anything with that badge image you just linked to.
It is a jpg with a white background.

Also, give me the new header image (without the badge) with everything sliced off under the navbar.

24

Ha wrong file, http://www.mediafire.com/i/?tmy4mh1onem

25

Ok, I got the badge.png
Now I need the header image

26

Here you go,
http://www.mediafire.com/i/?bnz1uwk1zmw

27

The new header image needs to be 800px x 112px and it should look like this
(without the badge)

http://www.css-lab.com/test/header.jpg

The old one is 804px and the spacing was not the same on the left and right side. It threw the whole page of center in the browser because of the extra 4px on the left side. It caused problems with the content div after the heder also.

I need that image if you want me to set this up properly for you. :wink:

EDIT:
I just saw your last post after I replied. Your new image looks nothing like I have explained it should in this post or the previous posts where I tried to explain it. Look at the link I just posted for an example to go by.

Your new image is off center worse than the other one was.

28

Oops sorry, here it is.
http://www.mediafire.com/i/?zk3mmzmcnzy

29

Ok, that’s more like it :slight_smile:

Give me a few minutes to finish up and I’ll upload the page to my temp files and I’ll post it here as well.

30

Great thank you.

31

Ok, what you will need to do is study through the css to see how it relates to the html. I have changed most everything and it would be a long post for me to try to explain it all. If you look at each div/element in the html you will be able to look back at the css and see how it works.

http://www.css-lab.com/test/germz/index.html
http://www.css-lab.com/test/germz/style.css

I also trimmed down that door image in the left column since it was off center also. Then I set it as a block level in the css and centered it up with auto margins. Here is the zip file with everything in it.

http://www.css-lab.com/test/germz/germz.zip

Hope that helps break you from using absolute positioning for page layout. :slight_smile:
(I only used AP in one spot on the whole page, “the badge”)

index.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Prospect Park Police Department</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
<meta name="description" content="What your product is about" />
<meta name="keywords" content="The keywords people will use to search for your product" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />

</head>
<body>
<div id="top"></div>
<div id="wrap">
    <div id="badge"></div>
    <div id="header">
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Personnel</a></li>
            <li><a href="#">Retired</a></li>
            <li><a href="#">Vehicles</a></li>
            <li><a href="#">Community</a></li>
            <li><a href="#">Townwatch</a></li>
        </ul>
    </div>             
    <div id="content">
        <div id="left">
            <ul id="leftnav">
                <li><a href="#">Mission Statement</a></li>
                <li><a href="#">Contact Directory</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Support the PPPD</a></li>
                <li><a href="#">Prevent Crime</a></li>
                <li><a href="#">Report</a></li>
                <li><a href="#">Police Units</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">FAQs</a></li>
            </ul>
            <img src="images/door.jpg"/>
        </div><!--end left-->                
        <div id="main">
            <div id="slide">
                <p>Slideshow Div</p>
            </div>
            <h2>Message from Chief John Saddic.</h2>
            <p>Hello and welcome to the Prospect Park PD Web Site.  Please excuse us while our site is undergoing a complete redesign.</p> 
            <p>The Prospect Park Police Station is located at 720 Maryland Ave., along with the Library and the Borough Offices (right across the street from the SEPTA Train Station)</p> 
            <p>The Police Station phone number is (610) 534-2222.  We just installed a new telephone system and you can call at anytime, and if our secretary Mary Kay does not answer you may leave a message for any officer in their individual voicemail.  Below is a list of our officers and their respective extension/voice mailbox numbers:</p> 
            <ul>
                <li>Chief John Saddic – 106</li>
                <li>Sgt. Cliff Engel – 107</li>
                <li>Officer Philip Coffin – 141</li>
                <li>Officer William Bozeman – 130</li>
                <li>Officer John Shemeluk – 131</li>
                <li>Officer Jason Hoover – 132</li>
                <li>Officer Henry O’Neill – 133</li>
                <li>Officer William Musser – 134</li>
                <li>Officer George Brown – 136</li>
                <li>Officer Jonathan Richmond – 137</li>
                <li>Officer John Zebley – 138</li>
                <li>Officer Christopher Bassoline – 139</li>
                <li>Code Enforcement Officer Robert Ticknor - 140</li>
            </ul>
            <p>The office of the Mayor (Don Cook) can be reached at (610) 532-1007 during regular business hours.</p>
            <p>All residents are reminded to dial “9 1 1” in an emergency, or if they need to see a police officer right away.  If you are calling from outside Delaware County the Communications Center can be reached at  (610) 565-6500.</p>
        </div><!--end main--> 
        <div id="footer">
            <p>Copyright &copy; 2008-Your Product's Name Here, All Rights Reserved.</p>
            <p><a href="#">Earnings Disclaimer</a> | <a href="#">Terms of Service</a> | <a href="#">Privacy Policy</a> | <a href="#">Customer Service</a></p>
        </div><!--end footer-->
    </div><!--end content--> 

</div><!--end wrap-->    
</body>
</html>

style.css

/* CSS Document */
body {
    background:#1B1B1B url(images/bg.gif);
    font-size:100%;
    margin:0;
    padding:0;
}
#top{
    position:absolute;
    left:0;
    width:100%;
    height:163px;
    background:url(images/top-bg.gif) repeat-x 0 0;
}
#wrap {
    width:800px;
    margin:0 auto;
    /*background:blue;/*just for page building*/
    position:relative;/*containg block for AP #badge*/
}
#badge{
    position:absolute;
    width:112px;/*image width*/
    height:157px;/*image height*/
    top:5px;
    left:43px;
    background: url(images/badge.png) no-repeat;
}
#header{
    height:29px;/*112px total with padding*/
    padding-top:83px;
    background:url(images/head.png) no-repeat;
}
        ul#nav{
        float:right;
        height:29px;
        margin:0;
        padding:0 30px 0 0;
        list-style:none;
    }
    #nav li, #nav li a{
        float:left;
    }
    #nav li a{
        height:29px;
        line-height:29px;
        padding:0 20px 0 0;
        text-decoration:none;
        color:#FFF;
    }
    #nav li a:hover{
        color:cyan;
    }

#content {
    width:750px;
    padding:0 5px;
    margin:auto;
    background:#FFF;
    overflow:hidden;/*contain floats*/
}
#content h2{margin:0;}

#left{
    float:left;
    width:133px;
    margin-top:55px;
    padding:10px 15px 15px;
    background:#222;
}
#left p{clear:both;}    
#left img {display:block; margin:auto;}
    
    ul#leftnav {
        float:left;
        width:133px;
        margin:0 0 10px 0;
        padding:0;
        list-style:none;
    }
    #leftnav li{
        float:left;
        clear:left;
        margin:3px 0;
        /*border-bottom-image:uri(images/border.gif);*/
    }
    #leftnav li a{
        float:left;
        height:24px;
        line-height:normal;
        text-decoration:none;
        color:#FFF;
    }
    #leftnav li a:hover{
        text-decoration:underline;
        color:cyan;
    }
#main {
    float:right;
    width:580px;
    background:#CDF;/*temp BG just for page building*/
}
#main p {margin:0 .7em .7em;}
#main h2 {margin:0 .4em .4em;}
#main ul {list-style:none;}

#slide{
    height:200px;
    margin:10px 0;
    padding-top:10px;/*just for demo*/
    background:#000;
    color:#FFF;
}
#footer {
    clear:both;
    font: 10px Arial, Helvetica, sans-serif;
    text-align:center;
    color:#999;
    margin:20px 0 10px 0;
    padding:5px 0 0 0;
    border-top: 1px solid #AAA;
}
32

Let’s take the width and left padding off that top navbar. That will keep the list items from dropping if the text is zoomed. It does not need the width and left padding anymore since the BG color is on the header image now.

I just made an edit to the css above but it has not been changed in the links I posted.

The 30px right padding is just to keep it from jamming all the way to the right, you can adjust that to your liking.

[B]ul#nav[/B]{
        [COLOR=Blue]float:right;
        height:29px;[/COLOR]
        margin:0;
        [COLOR=Blue]padding:0 30px 0 0;[/COLOR]
        list-style:none;
    }
33

Hey, it seems that the slider is overflowing the slider div and it’s floating on top on it making it like we had never put a div there,
http://www.mediafire.com/?ktxvkgwtfmw

34

The slider is too wide for the element that it sits in. It’s set to 620px but it looks as though you only have about 580px space there.

I also assume you don’t want the default padding and margins on the ul?
e.g.


#slider1 {
   [B] width: 580px; [/B]/* important to be same as image width */
    height: 200px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
}

#sliderContent, #slider1Content {
    [B]width: 580px; /*[/B] important to be same as image width or wider */
    position: absolute;
    position: absolute;
  [B]  top: 0;
    left:0;
    margin:0;
    padding:0;[/B]

}
35

That made it go to the other corner but now there’s space on top and right when I adjust the width it moves out of place and the slide wrapper is doing nothing.

36

I’m not sure I’m seeing the same as you.:slight_smile:

Have a look at the attached Firefox screenshot and point out what needs changing and we’ll take it form there.

37

I messed up the code so it was leaving space on the left, but there’s some space on the top you can see it black.

38

The black space is the 10px padding you added to #slide.

#slide{
    height:200px;
    margin:10px 0;
  [B]  padding-top:0px;[/B]/*just for demo*/
    background:#000;
    color:#FFF;
}
39

I assume you don;t want that border on the image either ? If so use this:

#slide img{border:none}
40

I made the bg white,
Edit: Nvm, my fault again deleted a line.

Thank you!

Wow I’m useless,
I added

   #nav li, #nav li a{
        float:left;
		border-left: 1px solid #7c7c7c;
		margin:0 4px;
    }

And I now have 2 borders next to each other haha