tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
188
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 25.11.09 20:41 #1
    Avatar von awortmeier
    awortmeier awortmeier ist offline Mitglied Gold
    Registriert seit
    Jun 2009
    Beiträge
    164
    Hallo,
    ich bekomm meine Link Fomatierung nicht hin, egal was ich mach es wird schlimmer.

    Link
    Ich möchte, dass der "obere" Text (Startseite, Profil, Referenzen...) weiß, groß und dick geschrieben ist und bei Hover blau, groß und dick werden.
    Der "untere" Text (subscribe) soll grau, klein und normal sein und bei Hover weiß, klein und normal werden.

    Irgendwie bekomm ich das einfach nicht hin...

    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>Diverses</span>
						<span class="subScribe">&Uuml;briggebliebenes</span>
					</a>
				</li>
			</ul>
		</div>
		<div class="image"></div>
	</div>
    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
75
76
77
78
79
80

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

    die dazugehörigen Selektoren für Nachfahren lauten so:
    Code css:
    1
2
3
4
5
6
7
8
9
10

    .menu a .subScribe {
    font-size:              11px;
    font-weight:            normal;
 
    color:                  #4E4E4E;
}
 
.menu a .subScribe:hover, .menu a .subScribe:active {
    color:                  #FFFFFF;
}


    mfg Maik
     
    Zitieren Zitieren
« Untermenü in Listenmenü blendet sich direkt wieder aus | Problem mit Verschiebungen u.s.w »