menu bar layout problems

Dev Shed Forums Sponsor:

July 23rd, 2004, 11:18 AM

m3avrck

Contributing User

Join Date: Aug 2002

Posts: 86

Time spent in forums: < 1 sec
Reputation Power: 7

menu bar layout problems

hi all! so i'm working on a redesign of our corporate site but i'm having a few problems with this menu i'm coding.

http://washsq.com/test/index.html

if you take a look at this there are 3 problems i can't seem to fix, no matter what i try.

1. why does the padding each menu button extend over the border for the entire div?

2. how can i get the gap between each button to be 0?

3. how can i float this entire menu to the right of the div?

i've tried a lot but nothing seems to work. thanks!

July 23rd, 2004, 12:27 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,672

Time spent in forums: 1 Month 3 Days 14 h 56 m 21 sec
Reputation Power: 687

Try this:

Code:

#menu ul {
	list-style: none;
}

#menu ul li {
    float: right;
    width: 200px;
    text-align: center;
    border: 1px solid #777;
    border-bottom: 0 none inherit;
    }

#menu ul li a {
    text-decoration: none;
    padding: .2em .7em 0;
    color: #999999;
    background-color: #ffffff;
    display: block;
}
		
#menu ul li a:hover {
    color: #ffffff;
    background-color: #fab262
}

#bottom {
    padding: 2px 0;
	border-bottom:7px solid #000000;
}

#wrapper {
	width:760px;
    margin: 0 auto;
}

HTML

	<div id="bottom">
		
		<div id="menu">

			<ul>
            	<li><a href="about.cfm">about</a></li>
             <li><a href="capabilities.cfm">capabilities</a></li>               
				<li><a href="index.cfm">home</a></li>
				
             <li><a href="contact.cfm">contact</a></li>  
             <li><a href="contract.cfm">contract vehicles</a></li>
				<li><a href="employement.cfm">employement</a></li>
			</ul>
		</div>
        <a href="http://www.washsq.com"><img src="llogo.gif" height="27" width="112" alt="Technology Simplified" /></a>
        <p style="font-size: 0; margin: 0; clear: both;">&nbsp;</p>
	</div>
</div>

The menu is too wide to float as one line unless you give each li its own width. I widened the wrapper and centered it. You should be able to take it from here.

cheers,

gary

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

July 23rd, 2004, 01:11 PM

m3avrck

Contributing User

Join Date: Aug 2002

Posts: 86

Time spent in forums: < 1 sec
Reputation Power: 7

thanks man! this is a good base, seems i was floating and using the display:block thing wrong. also totally forgot about the clear, that definetly helped. well on my way now to tweaking it, thanks for the jumpstart!

July 23rd, 2004, 02:35 PM

m3avrck

Contributing User

Join Date: Aug 2002

Posts: 86

Time spent in forums: < 1 sec
Reputation Power: 7

btw, this site had a bunch of great examples that also helped: http://css.maxdesign.com.au/listamatic/index.htm

Viewing: Dev Shed Forums > Web Design > CSS Help > menu bar layout problems

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump