Avatar billede corax Nybegynder
04. november 2002 - 14:01 Der er 9 kommentarer og
1 løsning

css menu med width problemer

http://www.absolut4u.dk

Jeg har fulgt en dels råd om at lave menuen i ren css, men der har indfundet sig et drilsk problem.

"Bjælkeeffekten" fungerer i IE og Opera - ikke i NS hvor bjælken er for lang.
Hvis jeg i .a menupunkt og .menuaktiv sætter width til auto eller en bestemt længde (f.eks. 116px) fungerer den i Opera og NS, men i IE kan man kun trykke på linket, ved at trykke på selve teksten (bjælkeeffekten er der stadig).

Hvad gør jeg, for at det virker i nævnte browsere, og man skal kunne linke i hele det blå felt ?

Hilsen Corax.
Avatar billede pelkjaer Nybegynder
04. november 2002 - 14:09 #1
Nu har jeg ikke kigget din kode igennem, men du kan kigge på http://peterelkjaer.dk/exp/css.html - den virker i alle browsere - og ser desuden ok ud i nn4 også.
Avatar billede corax Nybegynder
04. november 2002 - 14:38 #2
Der er ingen problemer med en tabelmenu.
Mit problem er kommet, efter jeg lavede menuen kun i css.
Håber stadig på hjælp.
Avatar billede pelkjaer Nybegynder
04. november 2002 - 15:20 #3
Hvad er det så for en menu du taler om. Mig bekendt kan du intet lave i kun css.
Avatar billede corax Nybegynder
04. november 2002 - 15:49 #4
Vi taler sikkert om den samme menu (dén med mørkeblå hovereffekt).
Med css mente jeg, menuen var lavet uden tabeller.

Her er css´en:
.menu {
color: #3399FF;
background-color: #FFFFFF;
font-size: 10pt;
font-family: "arial", sans-serif;
font-weight: bold;
text-align: left;
width: 118px;
display: block;
border: solid 1px #808080;
padding-top: 6px;
padding-bottom: 6px;
}
.menuaktiv {
text-decoration: none;
line-height: 18px;
color: #FFFFFF;
background-color: #3399FF;
width: 100%;
display: block;
padding-left: 12px;
}
a.menupunkt {
color: #0046C5;
line-height: 18px;
text-decoration: none;
background-color: #FFFFFF;
width: 100%;
display: block;
padding-left: 12px;
}           
a.menupunkt:hover {
color: #FFFFFF;
text-decoration: none;
background-color: #0046C5;
width: 100%;
display: block;
padding-left: 12px;
}

Og så i bodyen:
<div class="menu">
<a href="index.htm" class="menuaktiv">Forside</a>
<a href="profil.htm" class="menupunkt">Profil</a>
<a href="salgnyt.htm" class="menupunkt">Salg nyt</a>
<a href="salgbrugt.htm" class="menupunkt">Salg brugt</a>
<a href="diverse.htm" class="menupunkt">Gode r&aring;d</a>
<a href="kontakt.htm" class="menupunkt">Kontakt</a>
</div>

Kan jeg få lidt hjælp ??
Avatar billede knudgert Nybegynder
04. november 2002 - 16:46 #5
Hvad hvis du erstatter width: 100%;
med den aktuelle størrelse, jeg kan ikke lige se om det er 118px eller 130px (eler, hvad der nu kommer til at passe).
Avatar billede corax Nybegynder
04. november 2002 - 16:56 #6
knudgert > Som jeg skriver i spørgsmålet virker menuen ikke i IE, hvis jeg sætter en aktuel størrelse i width.
Jo den fungerer, men man kan kun linke videre, hvis man rammer selve teksten.
Avatar billede knudgert Nybegynder
04. november 2002 - 17:33 #7
Selvf. skal man jo læse det hele du skriver :-)

Det ver bare sjovt, for når jeg laver det med en fast width, så virker det fint også i IE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>z-index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a    {color: black; background: yellow; display: block; width: 150px; text-align: center}
a:hover    {color: black; background: red; display: block; width: 150px; text-align: center}
</style>
</head>
<body>
<a href="http://dr.dk">Danmarks Radio</a>
<a href="http://tv2.dk">TV 2</a>
<a href="http://tv3.dk">TV 3</a>
</body>
</html>
Avatar billede pelkjaer Nybegynder
04. november 2002 - 17:34 #8
Jeg ville nu stadig bruge en tabel til formålet - hvem har fortalt dig at det ikke er en god idé?
Avatar billede corax Nybegynder
06. november 2002 - 09:34 #9
Har sovet på det i week-enden og har endelig fundet ud af det.

Bjælkelængden var ikke ens i IE og NS/Opera.
Det var padding-left: 12px; som de forsk. browsere så forskelligt. Har nu sat 4-5 &nbsp;´er ind istedet - og det virker.

Knudgert får alligevel point grundet svar.

knudgert > Dine understregninger ser underlige ud i Opera6.04
pelkjaer > På NG webdesign_ris+ros er der flere (ikke alle) som mener, en menu som min - ja, hele layoutet, skal foregå i CSS.

Hilsen Corax.
Avatar billede knudgert Nybegynder
06. november 2002 - 22:32 #10
Ja, åbentbart, den foretrækker åbentbart at der bliver brugt a:link og ikke kun a:
Så virker display: block til gengæld ikke.
Men Opera er nu lidt speciel.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester