Gesamtes Listelement als Link behandeln?

[mario_blank]

Hallo,

<li>
	<ul>
	<h2 style="background-color:#F94242">Admin</h2>
	<div class="admin_on_site">
		<li><a href="<?php bloginfo('url') ?>/wp-admin/">Dashboard</a></li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">Neuer Eintrag</a></li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/edit-comments.php">Kommentare Verwalten</a></li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Profil und Benutzeroptionen</a></li>
		<li><a href="<?php echo wp_logout_url(); ?><?php echo '&redirect_to='.$_SERVER['REQUEST_URI']; ?>">Ausloggen</a></li>
	</div>
	</ul>
</li>

folgendes script macht das hier:

Wenn ich über die Texte in den einzelnen roten Kästchen rolle, werden diese gelb. So hab ich den Link-style im css definiert. Ich würde aber gerne jede FLÄCHE als gesamten Link behandeln und nicht nur den Text in den FLÄCHEN!

Drück ich mich unklar aus? eher schon!

Beispiel.: die Seitenleiste auf CSS-Tricks http://css-tricks.com/
Wie ihr sehen könnt wird jedes Listenelement bis ans Ende als Link behandelt. Wie kann ich das erreichen?

 

[ein schlauer]

li a { display:block;}

 

[mario_blank]

WOW, danke! Klappt wunderbar!

 

[kkapsner]

Den Hauptteil kannst du mit display: block; für die <a>s zum Link machen (so ist das bei deiner Beispielseite gemacht) - ob dann auch die Punkte mit dabei sind ist, glaub' ich, bei den Browsern verschieden... beim FF sind sie auf jeden Fall nicht dabei.

EDIT: Mist - zu langsam.

 

[ein schlauer]

EDIT: Mist - zu langsam.

hehe

Wobei man auch dazu sagen sollte, das es im IE (zumindest im 6'er) es oft nicht so einfach geht.

 

[mario_blank]

egal ob mit Punkten oder ohne, ich schaffs nicht die GANZE Fläche als Link zu deklarieren! Mit display:block habe ich jetzt nur VOM TEXTLINK bis ans Ende der Fläche einen Link, vorne bei den Punkten gilt der LINK nicht.

#sidebar a {
	border:medium none;
	font-weight:bold;
	display:block;
}
#sidebar ul {
	list-style-image:none;
	list-style-type:none;
	margin:0px;
}
#sidebar ul li {
	list-style-type:none;
	padding:10px 0px;
	list-style-image:none;
}
#sidebar ul li ul {
	list-style:none;
	margin:0px;
}
/*ES WERDEN NUR DIE LINKS GRAU HINTERLEGT! ICH WILL ABER DIE GANZE FLÄCHE*/
#sidebar ul li ul a{
	background-color:#ccc;
}
#sidebar ul li ul a:hover{
	background-color:#000;
}
#sidebar ul li ul li {
	/*background:url(images/icon_bullet.png) left center no-repeat;*/
	margin:0px;
	border-bottom:1px dotted #999999;
	padding:2px 0px 2px 14px;
}

Wie ihr sehen könnt werden nur die Links Farbig Hinterlegt. Lass euch nicht von der Roten Farbe der Flächen beeinflussen! Die habe ich mit einem normalen style="background-c..." hinzugefügt, da der Adminpart später mal farbig hervorgehoben werden soll. Das gesamt ADMIN PANEL das ihr im screenshot sehen könnt ist Teil einer Seitenleiste eines Blogs. Ich würde gerne genau so wie auf CSS-Tricks jeder FLÄCHE eine hover-Farbe geben und nicht nur dem Link selbst.

 

[ein schlauer]

Die Punkte sind auch ausserhalb, die kannst du nicht als Link benutzen.

 

[mario_blank]

Die Punkte sind auch ausserhalb, die kannst du nicht als Link benutzen.

was meinst du damit? außerhalb von was? Kann ich das ganze nicht irgendwie umgehen? Ich will einfach nur, dass jede Fläche KOMPLETT als HOVER erkannt wird und eine neue Farbe annimmt!

Das muss ja lösbar sein, beispiel CSS-TRICKS! Mir ist egal ob Punkte verwendet werden oder nicht, nur grundlegend soll der style mit Padding usw. bleiben.

 

[ein schlauer]

was meinst du damit? außerhalb von was? Kann ich das ganze nicht irgendwie umgehen?

li { border:1px solid black}

 

[mario_blank]

li { border:1px solid black}

was hab ich davon, außer einen schwarzen rahmen um alle listenelemente?

 

[mario_blank]

Danke habs geschafft.

 

[ein schlauer]

Danke habs geschafft.

Die Punkte in die Liste zu bekommen? Wohl kaum.

 

[ein schlauer]

Ich hab den padding oben nicht gesehen, darauf muss man auch erstmal kommen, dass sich jemand wundert, dass ein Element nicht vollständig ein anderes element mit einem padding ausfüllt.

Das ganze wäre natürlich einfacher mit einem Beispiel code gewesen.

Aber nebenan hat er auch nur Bruchteile preisgegeben,

 

[dkdenz]

Tja, immer die liebe Müh' mit den X-Foren-Postern...

 

[ein schlauer]

Naja, ich verübel es ihm nicht ganz, da ich seinen CSS Code nicht genau angeschaut hatte habe ich ihm falsche Hinweise gegeben - wie er mir auch

egal ob mit Punkten oder ohne, ich schaffs nicht die GANZE Fläche als Link zu deklarieren! Mit display:block habe ich jetzt nur VOM TEXTLINK bis ans Ende der Fläche einen Link, vorne bei den Punkten gilt der LINK nicht.

dadurch dachte ich, er will die Punkte haben. Und das Posting im anderen Forum war immerhin danach.