Log in

View Full Version : Tall css menu



designdgraphique
06-02-2008, 12:07 AM
You can view an example of exactly what I'm trying to achieve by visiting the following link. I just posted up what I had created in photoshop. http://designdgraphique.com/images/coplumenumockup.jpg

I'm kinda feeling a little stupid here that I can't figure this out, but thank the cosmos for forums!

What I am trying to do is create a horizontal menu that is approx. 75 px tall with a gray border on the left side of each link, I want the border to be 75 px and I have a background image for each link. I want the text for each link to sit at the bottom with roughly 5 px of padding-bottom. For whatever reasons, I just can't figure out how to make this work. Any help would be greatly appreciated and I can compensate you for your time if it will help.

Thanks in advance!

Wen

Medyman
06-02-2008, 01:24 AM
Start with this (http://www.dynamicdrive.com/style/csslibrary/item/inverted-modern-bricks-menu/), and then go from there.

designdgraphique
06-02-2008, 02:07 AM
This is great example of incorporating that top border, my issue is getting the length of the left border to be 75 px tall. Would you know of a resource where I can see how the css is structured in order to apply that to the menu I'm trying to create? Thanks again for that example, I'll definitely be able to use similar css in this menu. Cheers!

Medyman
06-02-2008, 12:57 PM
The CSS to that menu is included on the page! A lot of the CSS lines that control styling are commented out as well.

To add a height of 75pixels, just add the highlighted below to the CSS:

#modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/
border-top: 1px solid white;
height:75px;
}

To add a gray border to the left, add this:

#modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/
border-top: 1px solid white;
border-left: 1px solid gray;
}