tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
6
ZUGRIFFE
661
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 18.11.09 16:02 #1
    Avatar von awortmeier
    awortmeier awortmeier ist offline Mitglied Gold
    Registriert seit
    Jun 2009
    Beiträge
    164
    Hallo,
    ich habe eine Listen-Navigation, die <li>-Elemente haben alle padding: 5px;
    nun ändert er die Farbe der Links nicht wenn in diesen "Padding-Bereich" kommt.
    Wie bekomm ich das hin, dass er auch dort die Schriftfarbe wechselt.

    HTML:
    HTML-Code:
    	<div class="menu">
		<span class="left">
			<ul>
				<a href="#">
					<li>
						<div>Startseite</div>
						<div class="subScribe">Aktuelle Themen</div>
					</li>
				</a>
				<a href="#">
					<li>
						<div>Referenzen</div>
						<div class="subScribe">Meine Arbeiten</div>
					</li>
				</a>
				<a href="#">
					<li>
						<div>Kontakt</div>
						<div class="subScribe">Schreiben Sie mir...</div>
					</li>
				</a>
				<a href="#">
					<li>
						<div>Profil</div>
						<div class="subScribe">Wer bin ich?</div>
					</li>
				</a>
				<a href="#">
					<li>
						<div>Misc</div>
						<div class="subScribe">&Uuml;briggebliebenes</div>
					</li>
				</a>
			</ul>
		</span>
		<span class="image"></span>
	</div>
    CSS:
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

    .menu {
}
 
.menu ul {
    width:              150px;
 
    margin-top:         0px;
    margin-bottom:          10px;
 
    padding-left:           0px;
 
    background-color:       #FFFFFF;
 
    list-style:         none outside;
 
    border-bottom:          2px solid #4E4E4E;
}
 
.menu li {
    border-top:         2px solid #4E4E4E;
    border-left:            2px solid #4E4E4E;
    border-right:           2px solid #4E4E4E;
 
    padding:            5px;
    padding-top:            5px;
    padding-bottom:         5px;
    padding-left:           5px;
    padding-right:          5px;
 
    font-size:          13px;
    font-weight:            bold;
 
    color:              #0170B5;
}
 
.menu li:hover {
    background-color:       #0170B5;
}
 
.menu a:link, a:visited, a:active {
    color:              #0170B5;
 
    text-decoration:        none;
}
 
.menu a:hover {
    color:              #FFFFFF;
}

    Vielen Dank.
     
    Zitieren Zitieren
  2. 18.11.09 17:05 #2
    Maik Tutorials.de Gastzugang
    Hi,

    ich hab mir das Ergebnis im Browser nicht näher angeschaut, da deine Listen-Navigation im Markup grundsätzlich falsch ausgezeichnet ist.

    Das <a>-Element ist nicht das unmittelbare Nachfolgeelement des <ul>-Elements, sondern das <li>-Element, das einen Listeneintrag auszeichnet, und beispielsweise einen Verweis enthalten kann.

    Desweiteren dürfen die verwendeten Inline-Elemente <span> und <a> keine Block-Elemente (<ul> u. <div>) enthalten - lies dir hierzu mal die HTML-Elementreferenz für Inline-Elemente durch.

    mfg Maik
     
    Zitieren Zitieren
  3. 18.11.09 17:07 #3
    Avatar von awortmeier
    awortmeier awortmeier ist offline Mitglied Gold
    Registriert seit
    Jun 2009
    Beiträge
    164
    Ok,
    mach ich wenn ich zuhause bin
     
    Zitieren Zitieren
  4. 18.11.09 17:17 #4
    Maik Tutorials.de Gastzugang
    Abschliessend kannst du entweder die padding-Deklaration anstelle des <li>-Elements auf das <a>-Element anwenden, damit beim "Berühren" des Innenabstandes seine Schriftfarbe geändert wird, oder du nutzt mit deinem derzeitigen Stylesheet diesen Selektor für Nachfahren:
    Code css:
    1

    .menu li:hover a {color:#fff;}
    Ein valides Markup für die Listen-Navigation vorausgesetzt, damit der Selektor auch funktioniert

    Und wozu überhaupt die Wiederholung nach der allgemeinen padding-Eigenschaft?
    Code css:
    1
2
3
4
5

    padding:            5px;
padding-top:            5px;
padding-bottom:         5px;
padding-left:           5px;
padding-right:          5px;

    mfg Maik
     
    Zitieren Zitieren
  5. 19.11.09 10:56 #5
    Avatar von awortmeier
    awortmeier awortmeier ist offline Mitglied Gold
    Registriert seit
    Jun 2009
    Beiträge
    164
    Irgendwie bin ich zu doof dafür...

    Hier mein validier HTML-Code:
    HTML-Code:
    <div class="menu">
		<div class="left">
			<ul>
				<li>
					<a href="#">
						<span>Startseite</span>
						<span class="subScribe">Aktuelle Themen</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>Referenzen</span>
						<span class="subScribe">Meine Arbeiten</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>Kontakt</span>
						<span class="subScribe">Schreiben Sie mir...</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>Profil</span>
						<span class="subScribe">Wer bin ich?</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>Misc</span>
						<span class="subScribe">&Uuml;briggebliebenes</span>
					</a>
				</li>
			</ul>
		</div>
		<div class="image"></div>
	</div>
    Und hier mein CSS-Code:
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

    .menu span {
    display:            block;
}
 
.menu ul {
    width:              150px;
 
    margin:             0px;
    margin-bottom:          10px;
 
    padding-left:           0px;
 
    background-color:       #FFFFFF;
 
    list-style:         none outside;
 
    border-bottom:          2px solid #4E4E4E;
}
 
.menu li {
    border:             2px solid #4E4E4E;
    border-bottom:          0px;
 
    padding:            5px;
 
    font-size:          13px;
    font-weight:            bold;
}
 
.menu li:hover {
    color:              #FFFFFF;
 
    background-color:       #0170B5;
}
 
.menu a:link, a:visited {
    color:              #0170B5;
 
    text-decoration:        none;
}
 
.menu a:hover, a:active {
    color:              #FFFFFF;
 
    text-decoration:        none;
}
 
.subScribe {
    padding-left:           20px;
 
    font-size:          11px;
    font-weight:            normal;
 
    color:              #4E4E4E;
}
 
.left {
    float:              left;
}
 
.image {
    display:            block;
 
    float:              right;
 
    width:              450px;
    height:             200px;
 
    margin-top:         1px;
 
    background-color:       #000000;
    background-image:       url(../images/meer.png);
    background-repeat:      no- repeat;
}

    Wenn ich nun meinem <a>-Element die 5px Padding gebe, zerschießt er das ganz komisch.
    Angehängte Grafiken Angehängte Grafiken  
     
    Zitieren Zitieren
  6. 19.11.09 11:32 #6
    Maik Tutorials.de Gastzugang
    Ich erkenne hiermit keinen Unterschied zur vorherigen Formatierung:
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    .menu li {
    border:             2px solid #4E4E4E;
    border-bottom:          0px;
 
    /*padding:            5px;*/ /* auskommentiert = deaktiviert */
 
    font-size:          13px;
    font-weight:            bold;
}
 
/* Neu */
.menu a {
    display:block;
    padding:5px;
}

    mfg Maik
     
    Zitieren Zitieren
  7. 19.11.09 12:10 #7
    Avatar von awortmeier
    awortmeier awortmeier ist offline Mitglied Gold
    Registriert seit
    Jun 2009
    Beiträge
    164
    Ok, hab das nicht gepeilt.
    Danke Maik.
     
    Zitieren Zitieren
« css code geht nicht unter IE7 | Spaltengröße anpassen? »

Ähnliche Themen

  1. Schriftfarbe nachhaltig ändern
    Von Jack0 im Forum Photoshop
    Antworten: 3
    Letzter Beitrag: 06.08.10, 12:12
  2. Schriftfarbe ändern
    Von Westbär im Forum C/C++
    Antworten: 2
    Letzter Beitrag: 19.03.08, 18:36
  3. Schriftfarbe der Konsole ändern
    Von priest im Forum C/C++
    Antworten: 6
    Letzter Beitrag: 05.02.08, 18:10
  4. Schriftfarbe ändern in Datenbank
    Von Airwastl im Forum PHP
    Antworten: 4
    Letzter Beitrag: 02.03.07, 19:50
  5. hg-farbe und schriftfarbe ändern mit funktion?
    Von ~fUnNyFrIsCh~ im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 02.04.03, 13:31