Pointer 1 regel te hoog, waarom?

Status
Niet open voor verdere reacties.
P

pieter53

Gebruiker
Lid geworden
1 jan 2007
Berichten
297
Ik was wat aan het spelen en maakte het navolgende.
Een soort vertikaal-schuivend-menuutje.
Het lijkt te werken, maar de muis pointer staat 1 regel te hoog!
Iemand een idee waarom?
(HTML en CSS gevalideerd en correct bevonden.)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>test4</title>
  <style type="text/css">
body {
background: #accaca none repeat scroll 0% 50%;
}
a:link {
color: #0000cc;
text-decoration: none;
}
a:visited {
color: #660066;
text-decoration: none;
}
a:hover {
color: #0000ff;
text-decoration: underline;
}
a:active {
color: #aa3366;
text-decoration: none;
}
var {
border-style: solid;
border-width: 1px;
width: 20em;
background-color: #cccccc;
overflow: hidden;
visibility: visible;
height: 1.3em;
display: block;
font-style: normal;
}
var:hover {
border: 1px solid #000000;
width: 20em;
color: black;
overflow: visible;
height: 18em;
background-color: #cccccc;
z-index: 100;
position: relative;
}
.vak {
padding: 30px;
}
  </style>
</head>
<body>
<br>
<var>
<span style="font-weight: bold; padding-left: 20px;">De
vereniging
</span><br>
<a class="vak" href="http://www.debinnenvaart.nl/">Home.</a><br>
<a class="vak"
 href="http://www.debinnenvaart.nl/wie_is_wie/categorie/9/">Bestuur.</a><br>
<a class="vak" href="http://www.debinnenvaart.nl/pagina/36/">Promotiefilm.</a><br>
<a class="vak" href="http://www.debinnenvaart.nl/pagina/25/">Ontstaan.</a>
</var>

<var><span
 style="font-weight: bold; padding-left: 20px;">Rene
Siegfried</span>
<br>
<a class="vak" href="#">Het schip.</a><br>
<a class="vak" href="#">Het museum.</a><br>
<a class="vak" href="#">Het documentatie
centrum.</a><br>
<a class="vak" href="#">De winkel.</a><br>
</var><br>
<br>
</body>
</html>
 
padding

Heey Pieter53.

Je had bij "var" in het CSS padding op 30 gezet, amar niet aangegeven welke kant op.
Zelf ben ik niet zo goed met CSS, maar door padding in padding-left te veranderen, doet hij het.;).

Werkende code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>test4</title>
  <style type="text/css">
body {
background: #accaca none repeat scroll 0% 50%;
}
a:link {
color: #0000cc;
text-decoration: none;
}
a:visited {
color: #660066;
text-decoration: none;
}
a:hover {
color: #0000ff;
text-decoration: underline;
}
a:active {
color: #aa3366;
text-decoration: none;
}
var {
border-style: solid;
border-width: 1px;
width: 20em;
background-color: #cccccc;
overflow: hidden;
visibility: visible;
height: 1.3em;
display: block;
font-style: normal;
}
var:hover {
border: 1px solid #000000;
width: 20em;
color: black;
overflow: visible;
height: 18em;
background-color: #cccccc;
z-index: 100;
position: relative;
}
.vak {
[COLOR="Red"]padding-left: 30px;[/COLOR]
}
  </style>
</head>
<body>
<br>
<var>
<span style="font-weight: bold; padding-left: 20px;">De vereniging</span><br>
<a class="vak" href="http://www.debinnenvaart.nl/">Home.</a><br>
<a class="vak" href="http://www.debinnenvaart.nl/wie_is_wie/categorie/9/">Bestuur.</a><br>
<a class="vak" href="http://www.debinnenvaart.nl/pagina/36/">Promotiefilm.</a><br>
<a class="vak" href="http://www.debinnenvaart.nl/pagina/25/">Ontstaan.</a>
</var>

<var><span
 style="font-weight: bold; padding-left: 20px;">Rene
Siegfried</span>
<br>
<a class="vak" href="#">Het schip.</a><br>
<a class="vak" href="#">Het museum.</a><br>
<a class="vak" href="#">Het documentatie
centrum.</a><br>
<a class="vak" href="#">De winkel.</a><br>
</var><br>
<br>
</body>
</html>

Veel plezier.....:thumb:
 
Je bent GEWELDIG!, maar tevens stom dat ik niet op het idee kwam het te proberen...
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan