Someone with CSS skills....banner, navbar help
Thread Starter
|
Record Breaker
Joined: Dec 2005
Posts: 1,251
Likes: 0
From:
Someone with CSS skills....banner, navbar help
This should be pretty simple if you know what you're doing...i don't in this case.
I have a banner, and 7 pics that make up a horizontal navbar.
Look at this page: http://www.somesite.com/
The banner/navbar is made with tables. There is NO space between the 7 buttons, or between the buttons and the banner.
I need to do the same using a css file, and this code:
I CANNOT get the 7 buttons next to each other without anyspace inbetween, no matter what i try. Please post the answer in CSS. Thanks.
I have a banner, and 7 pics that make up a horizontal navbar.
Look at this page: http://www.somesite.com/
The banner/navbar is made with tables. There is NO space between the 7 buttons, or between the buttons and the banner.
I need to do the same using a css file, and this code:
Code:
<div id="navMainWrapper"> <div id="navHead"> <a href="http://somesite.com/"><img src=http://www.somesite.com/images/banner.jpg title="www.somesite.com"/></a></div> <div id="navBar"> <ul> <li><img src="http://www.somesite.com/images/company.png"/></li> <li><img src="http://www.somesite.com/images/perform.png"/></li> <li><img src="http://www.somesite.com/images/visuals.png"/></li> <li><img src="http://www.somesite.com/images/bio.png"/></li> <li><img src="http://www.somesite.com/images/press.png"/></li> <li><img src="http://www.somesite.com/images/support.png"/></li> <li><img src="http://www.somesite.com/images/contact.png"/></li> </ul> </div> </div>
Record Breaker
Joined: Mar 2005
Posts: 1,563
Likes: 0
From: Blacksburg, VA
RE: Someone with CSS skills....banner, navbar help
here's what i got so far (kind of close to what i think you want), only works in firefox (trying to figure out why) and there's probably a better way to do it but..
<style type = "text/css">
li.one{
list-style-type: none;
position:fixed;
left: 8px;
top: 135px;
}
li.two{
list-style-type: none;
position:fixed;
left: 125px;
top: 135px;
}
li.three{
list-style-type: none;
position:fixed;
left: 281px;
top: 135px;
}
li.four{
list-style-type: none;
position:fixed;
left: 369px;
top: 135px;
}
li.five{
list-style-type: none;
position:fixed;
left: 506px;
top: 135px;
}
li.six{
list-style-type: none;
position:fixed;
left: 575px;
top: 135px;
}
li.seven{
list-style-type: none;
position:fixed;
left: 677px;
top: 135px;
}
</style>
<div id="navMainWrapper">
<div id="navHead">
<a href="http://revolvedancetheatre.com/"><img
src=http://www.revolvedancetheatre.com/images/banner.jpg
title="www.rEvolveDanceTheatre.com"/></a></div>
<div id="navBar">
<ul>
<li class = "one"><img src="http://www.revolvedancetheatre.com/images/company.png"/></li>
<li class = "two"><img src="http://www.revolvedancetheatre.com/images/perform.png"/></li>
<li class = "three"><img src="http://www.revolvedancetheatre.com/images/visuals.png"/></li>
<li class = "four"><img src="http://www.revolvedancetheatre.com/images/bio.png"/></li>
<li class = "five"><img src="http://www.revolvedancetheatre.com/images/press.png"/></li>
<li class = "six"><img src="http://www.revolvedancetheatre.com/images/support.png"/></li>
<li class = "seven"><img src="http://www.revolvedancetheatre.com/images/contact.png"/></li>
</ul>
</div>
</div>
</div>
<style type = "text/css">
li.one{
list-style-type: none;
position:fixed;
left: 8px;
top: 135px;
}
li.two{
list-style-type: none;
position:fixed;
left: 125px;
top: 135px;
}
li.three{
list-style-type: none;
position:fixed;
left: 281px;
top: 135px;
}
li.four{
list-style-type: none;
position:fixed;
left: 369px;
top: 135px;
}
li.five{
list-style-type: none;
position:fixed;
left: 506px;
top: 135px;
}
li.six{
list-style-type: none;
position:fixed;
left: 575px;
top: 135px;
}
li.seven{
list-style-type: none;
position:fixed;
left: 677px;
top: 135px;
}
</style>
<div id="navMainWrapper">
<div id="navHead">
<a href="http://revolvedancetheatre.com/"><img
src=http://www.revolvedancetheatre.com/images/banner.jpg
title="www.rEvolveDanceTheatre.com"/></a></div>
<div id="navBar">
<ul>
<li class = "one"><img src="http://www.revolvedancetheatre.com/images/company.png"/></li>
<li class = "two"><img src="http://www.revolvedancetheatre.com/images/perform.png"/></li>
<li class = "three"><img src="http://www.revolvedancetheatre.com/images/visuals.png"/></li>
<li class = "four"><img src="http://www.revolvedancetheatre.com/images/bio.png"/></li>
<li class = "five"><img src="http://www.revolvedancetheatre.com/images/press.png"/></li>
<li class = "six"><img src="http://www.revolvedancetheatre.com/images/support.png"/></li>
<li class = "seven"><img src="http://www.revolvedancetheatre.com/images/contact.png"/></li>
</ul>
</div>
</div>
</div>
Record Breaker
Joined: Mar 2005
Posts: 1,563
Likes: 0
From: Blacksburg, VA
RE: Someone with CSS skills....banner, navbar help
alright the code i posted in my previous post is W3C CSS compliant. it's probably still not completely what you need, esp. since it won't work in IE (at least for me).
Thread Starter
|
Record Breaker
Joined: Dec 2005
Posts: 1,251
Likes: 0
From:
RE: Someone with CSS skills....banner, navbar help
Wow, thats an awful lot of work you put in there, calculating each one. But there has to be a way to put em all inline with one command, and it should automatically line em all up. I just can't figure it out. And usually IE is such garbage you need to come up with some hack to get it to do what it should do the first time. Ugh... I'm sure a million people have had this problem before, i just can't find out who...