3 replies [Last post]
himi
Offline
newbie
Last seen: 14 years 43 weeks ago
Joined: 2006-11-27
Posts: 2
Points: 0

Now, my layout was perfectly ok, until i put the top navigation. I made it like veerle's navigation: http://veerle.duoh.com/blog/comments/the_xhtml_css_template_phase_of_my_new_blog_part_2/.

Here's how mine looks like:
http://lena.dulce-splash.net/testpgs/x.php.

and this is the css i used for the navigation alone:
#top {
text-align:justify;
line-height:18px;
width:650px;
margin:0;
padding:0;
background:url(bg2.jpg) repeat-y #f0f393;
}

ul#nav {
width:650px;
background-color:#f0f393;
padding:0;
margin: 0;
}

ul#nav li {
list-style-type:none;
float:left;
text-indent:-9999px;
margin:0;
padding:0;
}

ul#nav li a {
border:0;
text-decoration:none;
display:block;
background:url(nav.gif) no-repeat;
margin:0;
padding:0;
}

li#content a:hover,li#content a:focus {
background-position:0 -59px;
}

li#moi a:link,li#moi a:visited {
background-position:-165px 0;
}

li#moi a:hover,li#moi a:focus {
background-position:-165px -59px;
}

li#site a:link,li#site a:visited {
background-position:-284px 0;
}

li#site a:hover,li#site a:focus {
background-position:-284px -59px;
}

li#links a:link,li#links a:visited {
background-position:-403px 0;
}

li#links a:hover,li#links a:focus {
background-position:-403px -59px;
}

li#main a:link,li#main a:visited {
background-position:-522px 0;
}

li#main a:hover,li#main a:focus {
background-position:-522px -59px;
}

body#content-page ul#nav li#content a {
background-position:0 -70px;
}

body#moi-page ul#nav li#moi a {
background-position:-109px -70px;
}

body#site-page ul#nav li#site a {
background-position:-218px -70px;
}

body#links-page ul#nav li#links a {
background-position:-327px -70px;
}

body#main-page ul#nav li#main a {
background-position:-436px -70px;
}

li#content a {
width:165px;
height:59px;
}

li#main a {
width:128px;
height:59px;
}

li#moi a,li#site a,li#links a {
width:119px;
height:59px;
}

I'm sort of new to css, but i do know some things. I dont want the space between the navigation and the header, and the content part. I want everything to be aligned. Help!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 weeks 6 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

sigh. http://www.csscreator.

Verschwindende wrote:
  • CSS doesn't make pies

himi
Offline
newbie
Last seen: 14 years 43 weeks ago
Joined: 2006-11-27
Posts: 2
Points: 0

I put a transitional doctype

I put a transitional doctype instead, but nothing changes. It still has spacing on the navigation.

Edit: ok it worked now! Thanks alot..and sorry for not reading the first post.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 weeks 6 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Yay!

I'm quite impressed that simply adding a doctype fixed it up, now you know why we're so adamant abotu using them Laughing out loud

Glad you got it sorted, anything else we can help with for this site?

Verschwindende wrote:
  • CSS doesn't make pies