✔ Link in einem Div aber zentriert

[wachteldonk]

Hallo,

es geht heir zwar in wirklichkeit um eine <ul></li>... Struktur aber das Problem lässt sich glaube ich einfacher so beschreiben

ich habe ein Aufklappmenu und darin dann die Links mit a href,... Problem ist jetzt wenn das div eine padding Definition hat, das dann nur ein Klick direkta uf den Link gezählt wird aber nicht innerhalb des divs.

Wenn ich den paddingwert entfernen siehts halt sch**** aus.) Wie kann ich das ganze so umbieen, das der Link über das komplette div gilt bzw. so. dem <li>

 

[Maik]

Hi,

ohne jetzt deinen Quellcode und die genaue Struktur des Listenmenüs gesehen zu haben, empfehle ich dir, die Links mit display:block auszuzeichnen.

 

[wachteldonk]

Hallo,

das hab ich shcon gemacht. etzt ist aber immer noch das Padding drumrum. Das nicht anklickbar ist. Wie kann man das umgehen?

 

[Maik]

Hi,

indem du die padding-Eigenschaft einfach direkt an die Links übergibst, was das umschliessende DIV somit vermutlich überflüssig macht.

 

[wachteldonk]

Das ganez sieht so aus

<ul>
<li>Hilfe
<ul style="width:160px;">
<li onClick="prompt();">Hilfe</li>
<li><a href="includes/templates/standard/images/linpix/about.gif" rel="lightbox[about]" title="">Alle Infos</a></li>
</ul>
</li>
<li>Abmelden
<ul style="width:140px;">
<li onClick="document.location.href='http://www.test.de'">Abmelden / Logout</li>
</ul>
</li>
</ul>


Das aktuell css sieht ungefähr so aus

ul#Navigation a {
z-index:10;
text-decoration: none;
padding: 5px 10px 5px 10px;
color: white;
display:block;
}

ich habe das padding in den link gepackt aber das kriegt er nicht hin. Vorher war es auf dem li

Mit meirner Alten css Definition udn PAdding läuft die VErsion mit onClick wudnerbar aber ich brauche jetzt den a href um ein ebestehende Software zu integrieren.

 

[Maik]

Hi,

versuch es mal mit dieser Regelerweiterung:

ul#Navigation a {
z-index:10;
text-decoration: none;
padding: 5px 10px 5px 10px;
color: white;
display:block;
width:100%;
}

und subtrahiere in der Breitenangabe für das ul-Element den linken und rechten Innenabstand, damit die Liste wie gewünscht 160px breit angezeigt wird.

 

[wachteldonk]

Hallo,

bringt leider nix. Dann fällt das Ding zusammen Keine Randabstände mehr u.s.w.

Wie machen die das den hier

http://www.dynamicdrive.com/

da oben ist eine menüleiste in grün mit z.B. Forums. Da brauch ich auch nicht auf den Link zu klicken und es geht im ganzen umgebenden "Grünraum" udn die Struktur ist genauso mit ul/li aufgebaut

 

[Maik]

Bei mir fällt da nichts zusammen und die Innenabstände sind auch vorhanden.

Und hier der Auszug aus dem Stylesheet von dynamicdrive:

#ddtoptabs{

margin-left: 4px; /*Opera 8 fix -1px*/

padding: 0;

width: 450px;

height: 27px;

background: transparent;

voice-family: "\"}\"";

voice-family: inherit;

padding-left: 5px;

}



#ddtoptabs ul{

font: normal 10px verdana, arial, sans-serif;

margin:0;

padding:0;

list-style:none;

}



#ddtoptabs li{

display:inline;

margin:0 2px 0 0;

padding:0;

text-transform:uppercase;

line-height: 1.3em;

font-size: 120%;

}





#ddtoptabs a, #ddtoptabs strong{

float:left;

color:#fff;

background: transparent url("tabs_left.gif") no-repeat left top;

margin:0 2px 0 0;

padding:0 0 0 3px;

text-decoration:none;

font-size: 10px;

letter-spacing: 1px;

margin-top: 4px;

font-family:  Arial, Verdana, sans-serif;

border-bottom: 1px solid #FFF;

}



#ddtoptabs a span, #ddtoptabs #current span{

float:left;

display:block;

color:#fff;

background: transparent url("tabs_right.gif") no-repeat right top;

padding:3px 9px 3px 6px;

font-weight:bold;

}



#ddtoptabs a span{

float:none;

}



#ddtoptabs #current a, #ddtoptabs strong{

background-position:0 -300px;

border-bottom: 1px solid #2B6600;

}



#ddtoptabs #current a span, #ddtoptabs #current span{

background-position:100% -300px;

padding-bottom:3px;	color:#fff;

}



#ddtoptabs a:hover{

background-position:0% -150px;

}



#ddtoptabs a:hover span{

color: #fff;

background-position:100% -150px;

}



#ddtoptabs #current a:hover {	background-position:0% -300px; }

#ddtoptabs #current a:hover span { color: #fff;	background-position:100% -300px; }

 

[wachteldonk]

und im Opera? Geht das bei Dir auch im Opera?

HAt sich erledigt.. Opera mal neu gestartet udn er hats mitbekommen Warum stehen LEute auf diesen Krampf?!

 

[Maik]

Auch dort fällt nichts zusammen und die gesetzten Innenabstände werden tadellos angezeigt.