div statement with mimimum height

[inusrat]

Hi,
is it possible to create a class that will give height of only 1px to your <Div>. I want to have a <DIV> with only one
pix height so that it shows only its border so that i could use that <div> to give bottom border to my last item in the menu (I do not want to give bottom border to all the menu items because than it becomes double border bcz I already have top border..(top border + bottom border= quite thick border) and does not look nice.

i tried the follwing "fill" class to reduce the side of my div but it does not work, I will appreciate your help.

__________________________
div.navilayer div {
width: 140px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
font: 10px verdana;
background: #FFFFFF;
border-right: 1px;
border-right-style: solid;
border-left: 1px;
border-left-style: solid;
font-weight:bold;
}

div.navilayer div.fill {
border-top-width: 1px;
border-top-style: solid;
border-top-color: black;
border-left: 0px;
border-right: 0px;
background: #FFFFE7;
padding-top: 0px;
padding-bottom: 0px;
height: 1px;

}

___________________________

http://www.test420.biz

Thanks

http://www.786Marriage.com

http://www.amasspharma.com

http://www.ambdex.com

 

[Foamcow]

why not make a class for the bottom row that has a bottom border?

http://www.targetgroup.co.uk

http://www.avoncrusade.co.uk

http://www.almanzora.com

 

[inusrat]

Thanks, I guess I never thought of that

Do you know using stylesheet how can I change the text color and the background color when some when bring the mouse over the menu item.

Right know my stylesheet look like this

div.navilayer div {
width: 140px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
font: 10px verdana;
background: #FFFFFF;
border-right: 1px;
border-right-style: solid;
border-left: 1px;
border-left-style: solid;
font-weight:bold;
}

div.navilayer div.fill {
width: 140px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
font: 10px verdana;
background: #FFFFFF;
border-right: 1px;
border-right-style: solid;
border-left: 1px;
border-left-style: solid;
font-weight:bold;
border-bottom-width: 1px;
border-bottom-style: solid;

}

http://www.test420.biz

Thanks

http://www.786Marriage.com

http://www.amasspharma.com

http://www.ambdex.com

 

[Vragabond]

There is no menu items visible in your code (<a> tags) but you can accomplish what you want using pseudo classes. Pseudo classes should work with every tag, but IE sadly supports them only on links. This is how your code would look like (I cleaned up your code a bit to make it more readable):

div.navilayer div {
    width: 140px;
    border: 1px solid #000000;
    border-bottom: none;
    padding: 5px 0px 5px 5px;
    font: bold 10px verdana, sans-serif;
    background: #ffffff;
}
div.navilayer div.fill {
    border-bottom: 1px solid #000000;
}

/* normal link style of a link inside your div */

div.navilayer div a:link,
div.navilayer div a:visited {
    color: black;
    background: white;
}

/* link style on hover */

div.navilayer div a:hover {
    color: white;
    background: black;
}

 

[inusrat]

thank a lot for your help and taking the time to clean up the code............

http://www.786Marriage.com

http://www.amasspharma.com

http://www.ambdex.com