CSS Forum

**UUilliam** · 02-11-2010, 05:32 PM

I coded my website (mainly in css from previous tips in this forum.)
It worked fine in College
I got home, opened the coding (Yes I saved it.)
and it is mis-aligned, missing part of the navigator and is no longer centered...

Website link to see a live preview: http://www.uuilliam.net/personal

What It should look like when done (I have only coded the top part so far, doing the "gallery" bit next which will require a bit of research...)

here is the code:

CSS

Code:

@font-face {font-family:Calibri; src:url('/font/calibri.ttf');}
@font-face {font-family:Calibri; font-weight:bold; src:url('/font/calibrib.ttf');}
@font-face {font-family:Calibri; font-style:italic; src:url('/font/calibrii.ttf');}

.wrapper {background:none center; margin:0px auto; width: 900px;}

.banner {background:url(images/banner_repeat_x.jpg) #c0c0c0 repeat-x; margin-left:50px; float:left; width:880px; height:150px;}
#logo {background:url(images/banner_logo.jpg) no-repeat; margin-left:21px; width:507px; height:149px;}
#logolink {display: block; width: 507px; height: 149px; background:none no-repeat 0 0;}
#logolink span {display:none;}

.nav  {background:url(images/nav_repeat_x.jpg) repeat-x; width:880px; height:50px; margin-top:-1px; margin-left:50px;}
#navigator {background:url(images/navigation.jpg) no-repeat; margin:0px; width:226px; height:41px;float:left;}
#navlink {padding:5px; margin-top:5px; float:left; text-align:left; display:block; font-family:calibri;} 
#navlink a:link {color:#b5b5b5; margin:0px 0px 0px 5px; font-style:normal; text-decoration:none; font-size:12px;}
#navlink a:visited {color:#2b2b2b; margin:0px 0px 0px 5px; font-style:normal; text-decoration:none; font-size:12px;}
#navlink a:hover {color:#ca0404; margin:0px 0px 0px 5px; font-style:normal; text-decoration:underline; font-size:12px;}
#navlink a:active {color:#2b2b2b; margin:0px 0px 0px 5px; font-style:normal;font-size:12px;}

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Photolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#c0c0c0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="wrapper">

<div class="banner">
<div id="logo">
<a id="logolink" href="index.html" title="logo"><span>logo</span></a>
</div>
</div>

<div class="nav">
<div id="navigator"></div>
<div id="navlink">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="gallery.html">Gallery</a>
<a href="link.html">Links</a>
<a href="contact.html">Contact</a>
</div>
</div>

<div class="gallery">
<div id="gallery_top"></div>
<div class="gallery">
</div>
<div id="gallery_bottom">
</div>

<div class="comment">
</div>

<div class="footer">
</div>

</div>
</body>
</html>

**UUilliam** · 05:54 PM

update: missed "float:left;" in the .nav code
I still didn't have that in college though :/

I still need help to center it, when I center it using <center></center> in the html code (with the code between the start and close tags obvs..) only the "logo" moves to center of the banner, everything else is aligned to the left, perhaps cause my float:left; ? but I have also put in the wrapper tag background:none center no-repeat; which should center it?

**UUilliam** · 02-12-2010, 01:24 PM

bump?

**chrishirst** · 02-12-2010, 06:35 PM

Probably something to do with the whacking great banner shoved in by GoDaddy as "payment" for the "free hosting".

The DOM inspector In SeaMonkey shows nothing at all.

**vangogh** · 02-12-2010, 08:45 PM

I'm with Chris. Most likely it's the banner that's causing the problem. I didn't go through your code in great details, but it looks fine from what I can see.

View the source code of the page online to see the difference.

Try loading it locally so there's no banner and see if it works. If it's not working locally on your computer then maybe some details about the browser and operating system you used at school vs the one you use at home.

**UUilliam** · 09:56 AM

looking at the "how to use floats" sticky I found that when using floats, the parent "div" doesn't contain it anymore, that may be why I cannot center it?

In college they use ehhmn... IE 5 / IE 6 I think

I tried it here with firefox 3.5.30729 then in IE 8 (both look pretty much identical.)

I fixed the space thingie, it appears as I wanted it now, it is just the centering I need to try and do, when I center it, the "banner" centers but nothing else does (using <center> in the html code)

Confirmed: It doesn't center because I have float:left; in it but i need this, otherwise my links do not appear on the navigation bar. Any idea to fix it? or will i need to add center to each css tag?

**LadynRed** · 02-14-2010, 03:05 PM

You can't float and center at the same time. Try adding margin: 0 auto to #navigator to center it.

**UUilliam** · 02-14-2010, 03:25 PM

Tried the magin:0 auto;
but it done nothing then I removed the float:left;
and my links went below the nav bar...

**LadynRed** · 02-15-2010, 02:35 PM

The margin: 0 auto isn't going to work as long as you have it floated.

You also need to make sure you're clearing your floats.

**UUilliam** · 02-16-2010, 09:00 AM

I tried reading the sticky about clearing floats, I understand none of it...
I have changed my design to something I feel looks better and it is also more simplistic (in design atleast...)
Though, I will coninue with this design purely for the education.

my test server for my new design is here:
http://uuilliam.net/personalp/

but having problem with that but since it is a different design, I will make a new thread for that.