Line up my menu CSS

B

bulb763

Messages
711
Name
Jon
Edit My Images
Yes
I'm struggling.

http://www.jdsshots.com/picpage1_liver_building.html

http://www.jdsshots.com/black.css

I can't get the four menu items to stay in line with the logo. Display:inline doesn't work and I can't think what else to try. Can anyone help? I want it to look like this:

screenshot4.jpg


PS excuse the dodgy colouring it was just so I could see what the divs were doing.
 
You need to either float that logo image to the left and the menu to the right , or divide the header into two divs, one for the logo and one for the menu.

I also recommend using 'class' instead of 'id' for your CSS elements in the HTML. If you have more than one element with the same id name you'll break CSS compliancy. Classes allow you to have multiple elements with the same class name.
 
I've tried floating the image already (take another look at that link now), the menu items move over but they don't line up with the logo like in ^that example :shrug:
 
Messy method, but maybe try adding a bit of top padding/margin to the parent?
 
Aligning stuff to the bottom of divs is not a really reliable solution. I'd do a hybrid of what Matt is saying. Have a second div holder for the menu, align the contents to the right and then have a negative margin on the contents to move it into line. But that's pretty nasty.

Alternatively do the two div method in my first post and add a padding to the list to bring it down into line.
 
KayJay said:
Aligning stuff to the bottom of divs is not a really reliable solution. I'd do a hybrid of what Matt is saying. Have a second div holder for the menu, align the contents to the right and then have a negative margin on the contents to move it into line. But that's pretty nasty.

Alternatively do the two div method in my first post and add a padding to the list to bring it down into line.
Click to expand...
Wow, that's nasty :LOL:
 
See, if people just used Blueprint CSS (Google for it) life would be so much easier.
 
Oi oi, time is money then you have to do things quickly. Sure, a CSS framework might not be the best thing, especially when you look at the source code, but being able to run off a fully functional HTML website prototype in a few hours is no bad thing. Also remember that a framework doesn't necessarily mean you don't have any CSS coding to do, usually quite the opposite. It just makes it easier sometimes :D
 
Got it sorted now, thanks. I went with the 2 div method and it's worked great :)
 
Quick and dirty answer: Add to CSS, massage as appropriate

DIV#menu
{
padding-top: 41px;
}

(Really the Div structure needs tidying up)
 
Anyone with IE see the big gap between the menus and the line underneath them? It's not there in FF or Chrome :confused: What's causing it?
 
You must log in or register to reply here.
Back
Top