[CSS] hover box probleem

**Thomas H.** · 17-06-2007, 13:02

Hoi,

Ik wil graag zo'n soort hover boxje maken bij links. Alles is gelukt, alleen als ik eroverheen ga, komt er een groot wit vlak onder de link..

Als je de CSS ziet, zie je ook dat ik de style nogal groot/lang heb uitgeschreven. Ik weet dat je dit heel erg ver terug kan dringen naar bv maar een regel. maar moet dit in een bepaalde volgorde ofzo? want als ik dat doe werken sommige dingen niet meer...
(voorbeeld: ipv. margin-left:1px;margin-right:1px; > margin: 1px 1px 1px 1px;)

CODES:
CSS:

Code:

 .box_top{
border-style:solid; 
border-color:#AFAFAF; 
border-width:1px; 
height:15px; 
width:898px; 
background-color:#EDEDED;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
color:#414141;
text-align:left;
}

.box_bottom{
border-style:solid; 
border-color:#AFAFAF; 
border-width:1px; 
height:auto;
width:300px; 
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
color:#414141;
border-top-width: 0px;
float:left;
}
.box_bottom_ernaast{
border-style:solid; 
border-color:#AFAFAF; 
border-width:1px; 
height:auto;
width:280px; 
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
color:#414141;
border-top-width: 0px;
float:left;
margin-left:1px;
}

a.item{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
color:#414141;
}
a.item:visited, link, active{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
color:#414141;
text-decoration:none;
}

a.item:hover{
margin:1px 1px 1px 1px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
color:#414141;
border-style:solid; 
border-color:#AFAFAF; 
border-width:1px; 
background-color:#EDEDED;
width:296px;
display: block;
}

HTML:

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="box_top">
<table width="898" border="0">
  <tr>
    <td width="298">Laatste forum topics</td>
    <td width="281">Laatste nieuws</td>
    <td width="305">Google ads</td>
  </tr>
</table>
</div>

<div class="box_bottom">
<a class="item" href="#">Bla</a><br />
<a class="item" href="#">bla</a><br />
<a class="item" href="#">bla</a>
</div>

<div class="box_bottom_ernaast">
blabla<br />
blabla<br />
bla<br />
bla<br />
bla
</div>


<div class="box_bottom_ernaast">
  <p>Goedkope Vliegreis?<br />
    Vergelijk &amp; boek hier eenvoudig<br />
    alle goedkope vliegtickets!<br />
    www.VliegticketsZoeken.nl<br />
    <br />
    Voordelige vliegtickets<br />
    Voordelige vliegtickets boekt u bij<br />
    Arke.nl, Dacht het wel!<br />
    www.arke.nl/vliegtickets<br />
    <br />
    Voordelige vliegtickets<br />
    Voordelige vliegtickets boekt u bij<br />
    Arke.nl, Dacht het wel!<br />
    www.arke.nl/vliegtickets</p>
</div>

</body>
</html>

**Glenn Veugen** · 17-06-2007, 18:02

Wel, om te beginnen, heb je een voorbeeldje online staan?

En met de pseudo-selectors voor links is de volgorde link, visited, hover, active. Anders werkt het geheel niet. Dit kan misschien al een deel oplossen.

Over je margin vraag, als ik het goed heb is de shorthandregel voor margin als volgt:

Code:

margin: top left bottom right;

Ipv de woorden top left bottom right geef je je waarden in px in, als de overal hetzelfde zijn is margin: xpx; voldoende.

En wat er met de volgende css gebeurt, als je over een link gaat, veranderd de achtergrond van je link gewoon (is dit niet de bedoeling gewoon, want zo begrijp ik het toch).

btw: in je hover state geef je een width op, bij de anderen niet. Waarschijnlijk ligt hier je probleem denk ik.

**Thomas H.** · 17-06-2007, 18:33

Het is inmiddels opgelost. waarmee? het toevoegen van

Code:

display: block;

even de "<br/>"tjes weghalen en alles werkt helemaal goed..

**Dirk Bonhomme** · 17-06-2007, 18:39

Origineel gepost door Glenn Veugen

Over je margin vraag, als ik het goed heb is de shorthandregel voor margin als volgt:

Code:

margin: top left bottom right;

het is top right bottom left :)

Wat ook mogelijk is:
margin:1px //top right bottom left = 1px
margin:1px 2px // top + bottom = 1px, left + right = 2px
margin:1px 2px 3px //top = 1px, left + right = 2px, bottom = 3px

**Cédric Siroux** · 17-06-2007, 20:43

bekijk het als een klok :)

wat border betreft:
border:1px solid #123456;

wat font betreft:
font:12px Arial,Verdana;
eventueel font:italic 12px Arial;

**Glenn Veugen** · 17-06-2007, 21:46

Ik twijfelde al over de volgorde :p. Het bekijken als een klok, goede hint eigenlijk...

**Cédric Siroux** · 17-06-2007, 22:51

jah ik gebruikte het zelf de eerste maanden. (dat heb je dan met een slecht geheugen)

**Glenn Veugen** · 18-06-2007, 00:19

Nah, gewoon kwestie van te weinig gebruiken in mijn geval.

[CSS] hover box probleem