CSS Menu

Da_iMac_Daddy

Da_iMac_Daddy

Not-so-Neo-DumbA$$
I have a problem. I'm using a div tag to make a border around several links. The CSS is called menuborder. Then I want the background color of the links to change to a specific color, well that works (kinda) but I want it to fill the whole space inside the box not just behind the text.

.menu:hover
{
background: #217DC7;
color: white;
}
.menu
{
border-bottom: solid .5px #217DC7;
margin-left: 0;
margin-right: 0;
color:#217DC7
}

.menuborder
{

line-height: .02cm;
max-width: 100px;
padding-right: .05cm;
padding-left: .05cm;
padding-bottom: .05cm;
padding-top: .05cm;
float: right;
border-width: 1px;
border-style: solid;

}
Click to expand...

Any help?

::I had to use quotes cause the code tag wasn't working::
 
well I'm pretty sure that the CSS is right but when the background of the links is colored I want the color to stretch to fill the whole line in th box. Hope that makes more sense
 
If your links are surrounded by a DIV, wouldn't you want to color the DIV's background and not the individual links'?
 
well each individual link isn't in a div it's it's just a link tag (<a>) the div around it is just a border.
 
1. which browser do you test your webpage?

2. if you want to have the whole line to change it's color. you have to use <table> by applying the .css on the <td> tag.

it might not work on some browsers for mac-system.

3. also, you might want to use simple-javascript for that purpose.

hope this will help... =)
 
### rollover.CSS ###

body {background:#fc0;}

h4 {margin:0;padding:0.3em;text-align:center;}

div.menu {
width:125px;
background:#fff3ac;
padding:0;
margin:1em;
border:1px solid #000;
}

div.menu a {
display:block;
margin:0;
width:100%;
padding:0.3em;
font-weight:bold;
border-top:1px solid #000;
color:#00f;
text-decoration:none;
}

html>body div.menu a {width:auto;}

div.menu a:hover {background:#fc0;color:#00f;}



### HTML ###

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pure CSS2 Rollover</title>
<link rel="stylesheet" href="/new/rollovers/demo2.css" type="text/css">

</head>
<body>

Taken from the Webreference page posted by uoba

<div class="menu">
<h4>Experts</h4>
<a href="/dhtml/">DHTML <br></a>
<a href="/graphics/">Graphics <br></a>

<a href="/js/">JavaScript <br></a>
<a href="/xml/">XML <br></a>
</div>

</body>
</html>
 
Um, under the text or to the immediate right of it? If it's under the text, change the float to float:left....if it's to the immediate right, float:center might work, but I'm not sure of that one.

And yikes, the entire menu turns blue when I move the mouse over it, not just the one part I put the mouse in. Is that on purpose?

Heh, I never noticed ya were in DE. So'm I, in Newark.
 
haha cool.
But no the whole menu isn't supposed to change color just the one box. Hmm seems like it only happens in Safari. Well I have the menu set up to float to the right guess I'll have to fiddle with it some more .
 
I just put the menu before the text. Ok it's better now but I want it to be closer to the top. Like closer to the Delaware Beaches header.
 
OK I have gotten the positioning of the menu to work. I don't think it works in Safari yet but I was wondering if someone could take some time to check and help me out with the text. It no longer wraps around the menu causing a problem. I realize it's probably a problem with the fact that I used absolute positioning but how can I get around it?
 
ladi da.... I like talking to myself. Wooooohooo :p

no offense to anyone who reads this I'm bored.

lots of spinning balls.
 
You must log in or register to reply here.
Back
Top