CSS layout - not being centered

[wrathican]

hey guys this is my website that im making:

 

http://ls12style.co.uk/projects/LS12Style/

 

if you view it in firefox, you will see that the content is all left-alinged. this is a problem because i want it to be centered.

also there is a problem with the background for the content section there is a gap at the top and the bottom.

i also want the links to be aligned vertically in the middle.

 

any ideas on how to fix these problems?

 

Thanks

Wrathican

[mikemessiah]

Here you go,

 

Try that. The reason for the gaps were because of the margin and padding on the H1 and p.

 

the reason for the alignment was because of the margin: 0 auto; being on the #header and not the #container

 

Just look at it in IE and tell me if it looks ok.

 

/* Layout */

body {
text-align:center;
}



#container {
width: 650px;
margin:0 auto;
}

#header {
width: 100%;
height:100px;
margin:0;
}

#login {
position: relative;
width:100%;
text-align:right;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;
margin-bottom: 2px;
margin-right: 10px;
margin-top: 2px;
height: 20px;
vertical-align:middle;
}

#navi { margin:0; padding:0;
position:relative;
float:none;
width:100%;
height: 30px;
background-image:url(images/ls12navbar.gif);
background-repeat:repeat;
text-align:center;
vertical-align: middle;
}

#membersnav {
        margin:0; padding:0;
position: relative;
width:100%;
height: 30px;
background-image:url(images/ls12navbar.gif);
background-repeat:no-repeat;
text-align:center;
}

#spacer {
        margin:0; padding:0;
position: relative;
width:100%;
height:20px;
}

#conttop {
        margin:0; padding:0;
position: relative;
width:100%;
height: 20px;
background-image:url(images/ls12bg_01.gif);
background-repeat:no-repeat;
}

#content {
        margin:0; padding:0;
position: relative;
width:100%;
background-image:url(images/ls12bg_02.gif);
background-repeat:repeat-y;
background-position:top;
background-position:left;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;
text-align:left;
padding-left:30px;
padding-right:20px;
}

#contbottom {
        margin:0; padding:0;
position: relative;
width:100%;
height: 20px;
background-image:url(images/ls12bg_03.gif);
}

#footer {
        margin:0; padding:0;
position: relative;
width:100%;
height: 20px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#999999;
}


/* Presentation */


h1#cont {
        margin:0; padding:0;
        padding: 5px 0 5px 0;

}

p.cont {
        margin:0; padding:0;
        padding:3px 0 3px 0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;

}

input.submit {
        margin:0; padding:0;
background-color: #FFFFFF;
font-family:Arial, Helvetica, sans-serif;
border: #000000 1px solid;
font-size: 10px;
color: #000000;
width: 25px;
}

input.text {
        margin:0; padding:0;
background-color: #FFFFFF;
color: #000000;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
width: 50px;
}

[wrathican]

ah, thats perfect thanks alot.

[ToonMariner]

margin: 0 auto; would be my choice of centering a page.

[wrathican]

Argh! i was creating some new pages for the site today and making some changes to the template i use. i updated the files that use the template, but for some reason there is not a gap at the bottom of the content whats going on?

 

Thanks in advanced

[GameYin]

Show us the code relating to it.

[haku]

And please start new threads for new issues.

[GameYin]

Well, this could be answered easily right here.

 

As for the gap, if you want a gap before the bottom content, try using top margins. If you want a gap after the bottom content, then use bottom margins.

[dbrimlow]

You can't "nest" paragraphs. This is contributing to that gap.

 

<h1 id="cont"><!-- InstanceBeginEditable name="title" -->Welcome<!-- InstanceEndEditable --></h1>
<p class="cont"><!-- InstanceBeginEditable name="content" -->
<p class="cont">
Welcome to the new LS12Style website. Please Register.
</p><!-- InstanceEndEditable --></p></div>

 

This causes the page to be invalid which will create cross-browser issues.

 

Also, you are listing your (pseudo) links in the wrong order. When you list all four a:link states they MUST be listing in the following order: "a:link, a:visited, a:hover, a:active" (L.V.H.A.  aka/"LoVeHAte").

 

a:hover must ALWAYS be listed AFTER a:link and, when designated, a:visited.

 

You don't need the following in the css context of your page for ANY of your elements - remove them as they have no effect:

 

1. position:relative

2. vertical-align:middle

3. float:none

4. if you want font-family:Arial, Helvetica, sans-serif and font-size:12px as your page default, just put it in the body tag of your css. This way you don't have to repeat it everywhere else constantly, as you do. You would only designate family and size for any element that you want DIFFERENT than the page default.

 

 

Also, why are you using a table for your navigation? It defeats the purpose of clean, semantic markup and css. It is unnecessary, just adds more code to your page and makes it not very  "accessible". You can accomplish the same thing using a list by designating it as "display:inline". In your case, as follows (a quick no frills example):

<div id="navi">
        <ul>
        <li><a href="index.php">Home</a> | </li>
        <li class="nolink">About Us | </li>        
        <li><a href="gallery.php">Pictures</a> | </li>
        <li><a href="videos.php">Videos</a> | </li>
        <li><a href="contact.php">Contact Us</a></li>
      </ul>
</div>

 

Here is the css:

#navi ul {
margin:5px;
padding:0;
list-style: none
}
#navi li {
margin:0;
padding:0;
display:inline
}
#navi li a:link, #navi li a:visited {
color:#000
}
#navi li a:hover, #navi li a:active {
color:#666
}
#navi li .nolink {
color:#000
}

 

Good luck.

 

 

 

 

 

[wrathican]

wow, im amazed. thanks for the fantastic advice, and no, this is NOT sarcasm. that really helps!

i didnt know that about lists and navigation.

 

also, i didnt notice the nesting of the <p>. thanks for poiting that out!

 

thanks alot!

[wrathican]

hmm, the navigation link is good. but the problem is i want the content to be vertically aligned in the middle. i used the table so i would get that effect.

[mikemessiah]

I dont ever use tables only Divs but I am not sure what you want to achieve?

[dbrimlow]

Simply designate "text-align: center" on the ul element.

 

#navi ul {

margin:5px;

padding:0;

list-style: none;

text-align: center

}

 

There is so much you can do with lists. Here is one of the best css aids ever created online for beginners - maxdesign/listutorial.

 

I pointed the link to the tutorial on lists, but everything on this is site is great - listomatic, floatutorial and the most important css learing aid that explains what css rules are all about ... selectutorial.

 

Some of the content is a little old-in-the-tooth (particularly in the floatutorial), but it all still holds up as, in my opinion, as the finest way to show beginners the true magic of lists with css and the rules of selects.