PDA

View Full Version : Can anybody see what i'm doing wrong here?



nikee
Jan 25th, 2009, 08:48 PM
Hey, i was just wondering what i'm doing wrong here.

I used four div tags.

1st...: The content wrapper...
2nd..: The header image, floated to the left.
3rd...: The search panel, floated to the right
4th...: The menu bar, its suppose to be displayed under the other divs.


This is how it looks now (viewed in FF3 and IE8):
(http://www.freeimagehosting.net/uploads/043559e38d.png)

This is how its suppose to look (viewed in IE7)
(http://www.freeimagehosting.net/uploads/d5318d098b.png)


I marked the divs with green borders, so its easier to see. Check the source if you need.

Site:
http://blubbz.com/new_test/


Any ideas why its stuck at the top? :confused:

Thanks.
-Nike

Common
Jan 25th, 2009, 08:53 PM
We can't tell ya much if we can't see your code!

Excavator
Jan 25th, 2009, 09:00 PM
Hello nikee,
Make your CSS look like this:

.main-content .menu-bar {
height: 37px;
width: 950px;
clear: both;
background: url(images/menu-bar.jpg);
border: 1px solid green;
}


I marked the divs with green borders, so its easier to see. Check the source if you need.
It's good that your watching where your elements are going but adding a border can cause you more trouble than it's worth. The box model (http://www.w3.org/TR/CSS21/box.html)includes the border in the width so that could cause float drop in a tight layout.
I always use different background colors instead.

nikee
Jan 25th, 2009, 09:24 PM
Common, there is a link in the post to the site. You could check the source code there.

Excavator, Thanks, It worked perfectly, I'm still learning CSS. :D

nikee
Jan 25th, 2009, 10:10 PM
There is one more thing. I used the <li> tag for the menu, and when someone hovers over a link i want it to show a background image. But when i do that, it looks like this:

http://rapid-photo.com/uploads/ScreenShot-64.png

As you can see, the background image appears behind the text, only, and not behind the whole menu item.. Is there a way to fix that? I don't want to use div tags for the menu, because IE7- dont support that. It will look crappy then.


CSS:

.main-content .menu-bar ul .menu-item {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin-right: 20px;
float: left;
display: inline;
height: 37px;
line-height: 37px;
color: #FFFFFF;
}
.main-content .menu-bar ul .menu-item a{
color: #FFFFFF;
text-decoration: none;
}
.main-content .menu-bar ul .menu-item a:hover{
color: #C0DDEC;
background-image:url(images/menu-item-hover.jpg);
background-repeat: repeat-x;
}

Excavator
Jan 25th, 2009, 10:25 PM
Link is dead right now...

nikee
Jan 25th, 2009, 10:28 PM
aah, sorry..

http://blubbz.com/new_test/

Excavator
Jan 25th, 2009, 10:42 PM
.menu-item a:link, .menu-item a:active, .menu-item a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 0 10px;
float: left;
display: inline;
height: 37px;
line-height: 37px;
text-decoration: none;
color: #FFFFFF;
}
.menu-item a:hover{
color: #C0DDEC;
background:url(images/menu-item-hover.jpg) repeat-x;
}

I grouped the ones that are styled the same together. You may need to seperate them later but, since they're all the same now it saves time.
Got rid of the margin-right:20px; and spaced it with the padding: 0 10px; which makes the background image the size the padding - it also makes the clickable area larger.

nikee
Jan 25th, 2009, 10:52 PM
Thanks Excavator, it worked :D

But.. even tho there is no margin or padding at the right or left side of the links, there is a few small gaps. (i removed the padding you added to the right side of the link)

Look at this image:
http://rapid-photo.com/uploads/lalaaaa.png

nikee
Jan 25th, 2009, 11:02 PM
Sorry, nvm the post abowe. I found the prob.

Btw Excavator, how do you know all this? It's amazing, thank you so much for your help, really appreciated! :)

Excavator
Jan 25th, 2009, 11:12 PM
Btw Excavator, how do you know all this? :)

Haha, it's just from hanging around this forum for the last few winters (my off season).

Sure glad I could help :)