css woes

[yuu]

I am having issues with writing some script, and hope someone has the answer. My script is constantly floating left and wont center and if I remove the float my script gets all jumbled up on top of itself and looks tacky. This is what I got.

<span class="center-footer">
<ul id="footer-links-primary">
<li>
<a href="/kuno/about">About</a>
</li>
<li>
<a href="/kuno/copyright_center">Copyright</a>
</li>
<li>
<a href="/kuno/advertising_overview">Advertising</a>
</li>
</ul>
<ul id="footer-links-secondary">
<li>
<a href="/kuno/terms">Terms</a>
</li>
<li>
<a href="/kuno/privacy">Privacy</a>
</li>
<li>
<a href="/kuno/Report">Report a bug</a>
</li>
</ul>
<?php } ?>
</span>
<br style="clear:both;"/>

and for the css part...

#footer .center-footer{
	    padding: 12px 30;
		display: block;
		float: left;
		margin-bottom: 5px;		
	}

	#footer .footer-links {
    color: #666666;
    font-size: 13px;
    overflow: hidden;
    text-shadow: 0 1px 1px #FFFFFF;
}

#footer ul {
    margin-bottom: 0;
    margin-top: 3px;
    overflow: hidden;
    text-shadow: 0 1px 1px #FFFFFF;
}
#footer #footer-links-primary {
    margin-top: 20px;
}
#footer-links-secondary {
    font-size: 11px;
}
#footer-links-primary li, #footer-links-secondary li {
    float: left;
    line-height: normal;
    margin: 0 20px 0 0;
    padding: 1px;
}
#footer-links-primary a, #footer-links-secondary a {
    color: #666666;
    font-weight: bold;
}
#footer-links-primary {
    margin-top: 20px;
}

anyone got the correct way to go about this? I have been at it for 3 hours. Pretty sad hu?

[mavigozler]

First of all, it looks you are trying to contain a block element (<ul>) with an inline element (<span>). That's not how it works.

Most problems are solved when you first validate the HTML in your document. Did you do that?

I imagine when you validate, you will see 95% of your problems go away.

Read this

[yuu]

bow would it be written? I am a really newbie at this. If I had something to reference it would help me. thanks.

[mavigozler]

bow would it be written? I am a really newbie at this. If I had something to reference it would help me. thanks.

You need to take the time to learn HTML and CSS. To get a working knowledge of HTML would take you 1-2 days, and maybe the same for CSS, depending on how fast your read, browse and work the learning curve. It will be the best. If you go for the official "recommendations" (standards), you should learn to browse quickly.
http://www.w3.org/community/webed/wiki/HTML
http://www.w3.org/Style/CSS/learning

Now as to your problem, you probably want to contain the two ul elements in a div, but really you should post a link to the page (if it is on server) or post whole HTML document or post it to JSFIDDLE and provide a link.

A general rule on centering block elements:

1. you need to set a fixed width in the contained element (say "width:35em;" or whatever is a good width
2. You need to set margin-left and margin-right to "auto". The best way to do it is "margin:Xem auto;" where Xem is whatever you want for the top and bottom, if they are the same.

3. floating for centering a single block element is not necessary. Floating inline elements and list items does not make sense, since they are contained in blocks that can be floated.

4 The floated element should come before the element(s) that are not floated in the flow of content.

5. Clearing a float is straightforward. However some have advised on clearing a float with a float. You can google it to check out this kind of styling.