Navigation und CSS

|SONY| · #1 (**permalink**) 30.07.2006, 13:15

hallo zusammen,

ich habe eine seite gefunden wo ich denke eine für mich gute navigation gefunden zu haben:

http://www.pg87.com/

kann mir bitte jemand einen tip geben wie der css code aussehen könnte mit den roten anführungsstrichen bei dieser navi ?

mfg
sony

superbursche · #2 (**permalink**) 30.07.2006, 14:15

css:

Code:

<style type="text/css">
* {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
}
ul {
	list-style: none;
}
li {
	margin: 2px 0px;
}
a:link,
a:visited,
a:active,
a:hover {
	display: block;
	width: 120px;
	background-color: #fff;
	border-left: 2px solid #FF0000;
	padding: 0px 0px 0px 5px;
	text-decoration: none;
}
a:active,
a:hover {
	border-left: 2px solid #000;
	background-color: #F5F5F5;
	color: #FF0000;
}
</style>

html:

Code:

<ul>
 <li><a href="#">link1</a></li>
 <li><a href="#">link2</a></li>
</ul>

Güße, SB

|SONY| · #3 (**permalink**) 03.08.2006, 19:40

hi SB,

habe mich mal versucht mit deinem vorschlag was auch wunderbar funktioniert, allerings noch mit einer frage bitte.
wenn ich mir nun aber mit dreamweaver die seite anschaue scheint die leftbar (weiß) rote umrandung bzw. die breite der li und uI (weiß) den main (grau) nach rechts zu überlagern !? abschließen müsste es nach rechts dort wo der class headers (dunkelgrün) endet.

über eine info dazu würde ich mich riesig freuen.

mfg
sony

siehe auch: www. bejaflor.eu

der html teil:

Code:

<div id="container">
<div id="leftbar">
			<div class="headers">Allgemein</div>
			<ul class="categorylinks">
				<li><a href="http://www">Das Land Brasilien</a></li>
				<li><a href="http://www">Geschichte</a></li>
				<li><a href="http://www">Bevölkerung</a></li>
				<li><a href="http://www">Leben in Brasilien</a></li>
				<li><a href="http://www">Bildung &amp; Kultur</a></li>
				<li><a href="http://www">Flüge nach Brasilien</a></li>
		</ul>
			<div class="headers">Specials</div>
			<ul class="categorylinks">
			  	<li><a href="http://XXX">Unterkünfte &amp; Hotels</a></li>
			  	<li><a href="http://XXX">Mietwagen</a></li>
			  	<li><a href="http://XXX">Bücher</a></li>
			 	<li><a href="http://XXX">Bildbände</a></li>
			  	<li><a href="http://XXX">Karten &amp; Reiseführer</a></li>
			  	<li><a href="http://XXX">Insidertipps</a></li>
	    </ul>
			<div class="headers">Sport</div>
			<ul class="categorylinks">
                                        <li><a href="http://XXX">Fussball</a></li>
				<li><a href="http://XXX">Tauchen</a></li>
                <li><a href="http://XXX">Volleyball</a></li>	
                <li><a href="http://XXX">Capoeira</a></li>	
                <li><a href="http://XXX">Rafting</a></li>	
                <li><a href="http://XXX">Golf</a></li>	
			</ul>	
</div></div>

die CSS:

Code:

#container {
float:left;
width:145px;
}

#leftbar{
width: 147px;
/*background-color: white;*/
}

#leftbar .headers{
color: white;
font-size: 11px;
font-weight: bold;
background-color: #008D00;
padding: 2px;
text-align: center;
}

{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
}

li {
	margin: 1px 0px;
}
a:link,
a:visited,
a:active,
a:hover {
	display: block;
	width: 141px;
	background-color: #fdfdfd ;
	border-left: 2px solid #FF0000;
	padding: 0px 0px 0px 4px;
	text-decoration: none;
	font-weight: bold;
}
a:active,
a:hover {
	border-left: 2px solid #FF0000;
	background-color: #F5F5F5;
	color: #FF0000;
}

.categorylinks a:visited{color: #449805;}
.categorylinks a:hover {color: #FFFF33;	background: #00D647; text-decoration: none;}

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
hover-Untermenüs beim Zeilenumbruch per CSS "mitnehmen"	HappyPOny	CSS	1	18.07.2015 13:52
Problem mit CSS Dropline menü	horst77	CSS	1	12.08.2009 11:49
Javascript UL Navigation im IE6	ven	CSS	7	29.04.2008 15:29
CSS Navigation mit "umschlossener" Grafik	name	CSS	6	24.09.2007 22:33
Problem mit ie6 und css navigation	Sinclair	CSS	0	29.03.2007 16:00