Listen mit CSS - klappt nicht

Der_Jan · 24.03.2006

Irgendwie klappt es mit meinem CSS-Menu nicht. Hier die Ausgangssituation. Nun möchte ich den Menüpunkt "Impressum" optisch anders (Schrift kleiner und rechtsbündig) gestalten, jedoch soll es Teil der Auflistung bleiben, also bündig mit den anderen Menüpunkten bleiben.

Kann mir jemand einen Tipp geben, wie ich einzelne Menüpunkte individuell gestalten kann?

Der CSS-Code...

Code:

#navigation 
{ 
width: 16em; 
border-top: 1px solid #efefef; 
border-right: 1px solid #efefef; 
padding: 0; 
margin-bottom: 1em; 
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; 
background-color: #fff; 
color: #efefef; 
} 

#navigation ul 
{ 
list-style: none; 
margin: 0; 
padding: 0; 
border: none; 
} 

#navigation li 
{ 
border-bottom: 1px solid #efefef; 
margin: 0; 
} 

#navigation .subnav li 
{ 
border-bottom: 1px solid #ffbb00; 
margin: 0; 
} 

#navigation li a 
{ 
display: block; 
padding: 5px 5px 5px 0.5em; 
border-left: 10px solid #ffbb00; 
background-colasdfador: #ffbb00; 
color: #afafasadffs; 
text-decoration: none; 
text-align: left;
width: 100%; 
} 

#navigation li a 
{ 
display: block; 
padding: 5px 5px 5px 0.5em; 
border-left: 10px solid #84B027; 
background-color: #fff; 
color: #afafaf; 
text-decoration: none; 
width: 100%; 
} 

html>body #navigation li a { width: auto; } 

#navigation li a:hover 
{ 
border-left: 10px solid #84B027; 
border-right: 5px solid #84B027; 
background-color: #fff; 
color: #000; 
}

...und hier der HTML-Teil

Code:

<div id="navigation"> 
<ul id="navlist"> 
<li><a href="#">Rubrik 1</a></li> 
<li><a href="#">Rubrik 2</a></li> 
<li><a href="#">Rubrik 3</a></li> 
<li><a href="#">Rubrik 4</a></li> 
</ul> 
</div>

Für jeden Tipp dankbar!

Gruß
Der Jan

SilentBob · 24.03.2006

Ich kann Dir nur zu 50% helfen. Mache in HTML so etwas:

HTML:

<li><a href="#" id="impressum">Rubrik 4</a></li>

In CSS kannst Du dann den Link mit dieser besonderen ID ansprechen:

HTML:

#impressum{
 font-size: 90%;
}

Dadurch ist es schon einmal kleiner. Aber mit dem rechtsbündig - mal abgesehen davon, dass ich das sehr ungewöhnlich und auch etwas verwirrend finde - kann ich nicht helfen. Ich hatte noch das hier in die CSS-Anweisung geschrieben:

HTML:

#impressum{
 font-size: 90%;
 text-align: right;
}

Aber leider funktioniert das nicht.

Aber 50% sind ja schon einmal die halbe Miete.

pks85 · 24.03.2006

Vllt. hilft dir das: http://www.alistapart.com/articles/horizdropdowns/ oder das: http://exploding-boy.com/images/EBmenus/menus.html#3

boxi · 24.03.2006

Moin,

so gehts bei mir:

Code:

<html>  
<head>  
<style type=""text/css>
#navigation 
{ 
width: 16em; 
border-top: 1px solid #efefef; 
border-right: 1px solid #efefef; 
padding: 0; 
margin-bottom: 1em; 
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; 
background-color: #fff; 
color: #efefef; 
} 

#navigation ul 
{ 
list-style: none; 
margin: 0; 
padding: 0; 
border: none; 
} 

#navigation li 
{ 
border-bottom: 1px solid #efefef; 
margin: 0; 
} 

#navigation .subnav li 
{ 
border-bottom: 1px solid #ffbb00; 
margin: 0; 
} 

#navigation li a 
{ 
display: block; 
padding: 5px 5px 5px 0.5em; 
border-left: 10px solid #ffbb00; 
background-colasdfador: #ffbb00; 
color: #afafasadffs; 
text-decoration: none; 
text-align: left;
width: 100%; 
} 

#navigation li a 
{ 
display: block; 
padding: 5px 5px 5px 0.5em; 
border-left: 10px solid #84B027; 
background-color: #fff; 
color: #afafaf; 
text-decoration: none; 
width: 100%; 
} 

#navigation li#impressum a
{ 
text-align: right;
font-size: 0.8em;
}


html>body #navigation li a { width: auto; } 

#navigation li a:hover 
{ 
border-left: 10px solid #84B027; 
border-right: 5px solid #84B027; 
background-color: #fff; 
color: #000; 
} 
</style>
</head>  
<body>  
<div id="navigation"> 
<ul id="navlist"> 
<li><a href="#">Rubrik 1</a></li> 
<li><a href="#">Rubrik 2</a></li> 
<li><a href="#">Rubrik 3</a></li> 
<li id="impressum"><a href="#">Impressum</a></li> 
</ul> 
</div>

</body>  
</html>

viele Grüße,
boxi

Der_Jan · 24.03.2006

Hab mich wohl ungenau ausdrückt, deshalb ... neuer Anlauf

Ich habe zwei verschiedene, mit CSS definierte Auflistungen, die ich als Menu einsetzen will.

Auflistung 1
Auflistung 2

Die "Rubrik 4" soll nun zwischen "Rubrik 3" und "Impressum" eingefügt werden (siehe Montage ). Okay, in Photoshop alles kein Problem, aber wie mach ich das mit HTML und CSS? Das Problem ist die Zusammenführung, das Verweben der beiden Programmierungen. Ich nehme an, dass es eigentlich einfach gehen müßte. Lediglich mein Fingerfertigkeit im Umgang mit CSS läßt halt zu wünschen übrig ;-)

Any ideas?

Danke!
Der Jan

hossa · 24.03.2006

so gehts, noch bisschen aufgeräumt:

Code:

<html>  
<head>  
<link rel='stylesheet' type='text/css' href='beispiel.css'>
</head>  
<body>  
<div id="navigation"> 
<ul id="navlist"> 
<li><a href="#">Rubrik 1</a></li> 
<li><a href="#">Rubrik 2</a></li> 
<li><a href="#">Rubrik 3</a></li> 
<li><a href="#" class="impressum">Impressum</a></li> 
</ul> 
</div>

</body>  
</html>

Code:

#navigation 
{ 
width: 16em; 
border-top: 1px solid #efefef; 
border-right: 1px solid #efefef; 
padding: 0; 
margin-bottom: 1em; 
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; 
background-color: #fff; 
color: #efefef; 
} 

#navigation ul 
{ 
list-style: none; 
margin: 0; 
padding: 0; 
border: none; 
} 

#navigation li 
{ 
border-bottom: 1px solid #efefef; 
margin: 0; 
}

#navigation li a 
{ 
display: block; 
padding: 5px 5px 5px 0.5em; 
border-left: 10px solid #84B027; 
background-color: #fff; 
color: #afafaf; 
text-decoration: none; 
width: 100%; 
}
#navigation li a.impressum{
	font-size: 60%;
	text-align: right;
	border-right: 5px solid #fff;
}

html>body #navigation li a { width: auto; } 

#navigation li a:hover 
{ 
border-left: 10px solid #84B027; 
border-right: 5px solid #84B027; 
background-color: #fff; 
color: #000; 
}

boxi · 24.03.2006

dann würd ich ne verschachtelte Liste machen.

Der_Jan · 24.03.2006

N'abend,
- das mit dem Verschachteln hat bei mir halt nicht geklappt, hab mich zwischen diversen id='' <div> und class='' verlaufen.
@ hossa,boxi: Das ist der Durchbruch, jetzt klappts!!!

Danke für eure Hilfe, so wirds klappen. Das Wochenende ist gerettet!

Cheers,
Der Jan

mac-anfänger · 24.03.2006

das würde etwa so aussehen:

HTML:

<ul id="navlist"> 
<li><a href="#">Rubrik 1</a></li> 
<li><a href="#">Rubrik 2</a>
<ul id="subnavi">
<li><a href="#">Rubrik 3</a></li>
</ul>
</li>  
<li><a href="#" class="impressum">Impressum</a></li> 
</ul>

Listen mit CSS - klappt nicht

Der_Jan

Aktives Mitglied

SilentBob

Aktives Mitglied

pks85

Aktives Mitglied

boxi

Mitglied

Der_Jan

Aktives Mitglied

hossa

Aktives Mitglied

boxi

Mitglied

Der_Jan

Aktives Mitglied

mac-anfänger

Aktives Mitglied