zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Gesamtes Listelement als Link behandeln?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.09.2009, 15:41
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.07.2009
Beiträge: 469
sepp88 befindet sich auf einem aufstrebenden Ast
Standard Gesamtes Listelement als Link behandeln?

Hallo Leute,

ich bastle an einem Wordpress-Blog und brauche bitte unbedingt eure Hilfe.
Ich will folgendes schaffen. CSS-Tricks Wenn ihr in der Seitenleiste über ein Element hovered seht ihr, dass das komplette Listenelement FARBIG hinterlegt wird -> bis ans Ende und rund-herum.

Genau das gleiche möchte ich für meinen Blog machen. Nun habe ich aber das Problem, dass wenn ich display:block; verwende nicht das GESAMTE element in meiner <li> hinterlegt wird sondern nur der LINK bis ans ENDE des ELEMENTS.

Hier ein screenshot. Lasst euch nicht von der roten Farbe beeinflussen, die habe ich nur da um zuzeigen wie breit und wie hoch jedes Element wäre und was ich hinterlegt haben will.



So siehts bei mir aus:
PHP-Code:
#sidebar a {
    
border:medium none;
    
font-weight:bold;
/*Habe ich hinzugefügt...um die Links komplett bis ans ENDE der Leisten zu haben*/
    
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;

PHP-Code:
<li>
    <ul style="background-color:#FDCECE">
    <h2 style="background-color:#F94242">Admin</h2>
        <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>
    </ul>
</li>
Was muss ich machen damit jede FLÄCHE gesamt als Link behandelt wird und auch gesamt hinterlegt wird??

Geändert von sepp88 (15.09.2009 um 15:54 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.09.2009, 15:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

sepp88, wenn du über Darstellungsprobleme reden willst interessiert dein PHP nicht. Bitte poste immer einen Link zum Problem, keine Codeschnipsel. Siehe auch die Hinweise für Fragende.

Wenn du willst, dass die Links die Li-Elemente ganz ausfüllen, dann dürfen die Li-Elemente kein Padding haben.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.09.2009, 15:53
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.07.2009
Beiträge: 469
sepp88 befindet sich auf einem aufstrebenden Ast
Standard

Wie wird es dann auf CSS-Tricks gemacht? Dort haben die Elemente auch ein Padding?
Mit Zitat antworten
  #4 (permalink)  
Alt 15.09.2009, 15:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Nein, haben sie nicht. Die A-Elemente haben ein Padding!
Mit Zitat antworten
  #5 (permalink)  
Alt 15.09.2009, 16:07
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.07.2009
Beiträge: 469
sepp88 befindet sich auf einem aufstrebenden Ast
Standard

Danke, hat geklappt!
Mit Zitat antworten
  #6 (permalink)  
Alt 15.09.2009, 18:37
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.07.2009
Beiträge: 469
sepp88 befindet sich auf einem aufstrebenden Ast
Standard

Eine Frage habe ich noch, wie gehe ich vor wenn ich eines meiner listen elemente durch einen Nachfahrenselektor (#) eine andere hover-Farbe geben will?

z.b.
PHP-Code:
#sidebar ul li ul li {
    
margin:0px;
    
border-bottom:1px dotted #999999;
    
padding:0px;
}
#sidebar ul li ul li a{
    
display:block;
    
padding:2px 0px 2px 14px;
}
#sidebar ul li ul li a:hover{
    
background-color:#F3F3F3;
    
color:#000;
}
#admin_on_site li a{
    
background-color:#F29989;
}
#admin_on_site li a:hover{
    
background-color:#F94242;

PHP-Code:
<ul>
/*ADMIN_ON_SITE ist der Nachfahrenselektor*/
<li id="admin_on_site">
    <ul>
    <h2 style="background-color:#F94242">Admin</h2>
        <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>
    </ul>
</li>
</ul>
die normale Link Farbe von#admin_on_site li a{} funktioniert, aber #admin_on_site li a:hover{} nicht. Da wird immer noch #sidebar ul li ul li a:hover{} verwendet!!! Wie muss ich admin_on_site li a:hover{} im css definieren damit auch die hover-Farbe funktioniert???

Danke
Mit Zitat antworten
  #7 (permalink)  
Alt 15.09.2009, 18:44
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Google Spezifität CSS
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #8 (permalink)  
Alt 16.09.2009, 11:13
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.07.2009
Beiträge: 469
sepp88 befindet sich auf einem aufstrebenden Ast
Standard

Danke! Juhuu
Mit Zitat antworten
  #9 (permalink)  
Alt 16.09.2009, 11:51
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Dein HTML ist falsch. Nach einem ul muss immer ein li kommen, die Überschrift ist ungültig.
Der Nachfahrenselektor ist ein Leerzeichen keine Raute.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
clearen im 21 Jhr. Muamicus CSS 23 14.12.2010 20:50
ul richtig zentrieren Muamicus CSS 23 14.12.2010 19:28
Definitionsliste in einer Floatumgebung *pi CSS 11 07.01.2009 19:34
Ständig wechselnde Bilder, Werbung Vybsi (X)HTML 17 25.01.2008 00:00
CSS Navigationsproblem thesecretboy CSS 0 12.04.2007 09:12


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:20 Uhr.