CSS und ein senkrechter Balken

**Nico** · 10.10.2005 15:43

Hi an alle,

ich möchte neben einem Menue einen senkrechten Balken darstellen, der je
nach länge des Menues "mitwächst".

Das Menue ist mit einem Listenelement umgesetzt und sieht so aus:

HTML-Code:

<div class="sub_navigation">
	<div class="sub_navigation_category">
		<div class="sub_navigation_category_text">Schutz fuer alle</div>
	</div>
	<div id="sub_navigation_line">
		<ul id="sub_navigation_navigation">
			<li><a href="#"><span class="sublink">Die Kombination macht's!</span></a></li>
			<li><a href="#"><span class="sublink">Gesundheit</span></a></li>
			
			<li><a href="#"><span class="sub_navigation_navigation_here"><span class="sublink">Leben</span></span></a></li>
			<li><a href="#"><span class="sublink">Erholung</span></a></li>
		</ul>
	</div>
</div>

Die Formatierung mache ich mit css.

HTML-Code:

.sub_navigation{
	position:absolute;
	left: 5px;
	top: 5px;
	width: 210px;
}
	.sub_navigation_category{
		...
	}
	/* the special text styles for the category field */
	.sub_navigation_category_text{
		...
	}
	
	/* the sub menue is format as list element */		
	#sub_navigation_navigation{
		...
	}
	#sub_navigation_navigation ul, #sub_navigation_navigation li{
		...
	}
	#sub_navigation_navigation li a, #sub_navigation_navigation li a:hover, #sub_navigation_navigation li a:active { 
		...
	}
	#sub_navigation_navigation li a:hover, #sub_navigation_navigation li a:active {
		...
	}
	.sub_navigation_navigation_here{
		...
	}
	.sublink{
		...		
	}

	#sub_navigation_line{
		background-color:#F8A21A;
		width: 5px;
	}

Der letzte Eintrag ist die Linie, die es bei mir darstellen soll, ich habe es schon mit Höhenangaben versucht, aber kein Erfog gehabt.

Kann mir jemand helfen?

vG Nico

**steffenk** · 10.10.2005 15:53

nimm das div sub_navigation_line raus und mach das über die Formatierung der ul:

Code:

.sub_navigation ul {
	list-style:none;
	border-left:5px solid #F8A21A;
}

Du weisst aber, das wir ein CSS-Forum haben ?

**Nico** · 10.10.2005 16:11

... das sah erst ganz gut aus, nur leider kann ich es so nicht nutzen.

Der Grafiker hat mir ein Layout gegeben, welches zwischen der Liste und der
Linie ca. 5px Platz lässt. Auserdem musste ich noch ein Backgroundimage einfügen,
damit ein Pfeil angezeigt werden kann.
Da wird das ganze Menue "auseinander gerissen" wenn ich es so wie Du mache.

... naja, ich habe es mir nicht ausgedacht

grüße

**steffenk** · 10.10.2005 17:20

das ist doch kein Problem, das kannst Du alles mit paddings und margins lösen.

Zeig doch mal die Grafik, wie das Menü aussehen soll

**Nico** · 10.10.2005 21:30

Hi,

also das mit dem margin und padding habe ich noch nicht so kappiert.
Wann muss ich was nehmen? Was ist genau der Unterschied?

Hier ist ein Ausschnitt von dem Menue

der rote Rahmen ist das gesamte Menue und der Grüne ist die Liste.
Jetzt war mein Gedanke, in dem roten Rahmen noch ein 5px breites und
100% hohes <div> zu mit der entsprechenden Hintergrundfarbe zu definieren.

Das klappt aber wie gesagt nicht

Hat jemand eine bessere Idee?

Nico

**steffenk** · 10.10.2005 23:00

zum besseren Verständnis hab ich Dir hier ein Beispiel gemacht, das Dir eigentlich weitehelfen müsste:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Untitled</title>
<style type="text/css">
* {margin:0;padding:0;}
.sub_navigation{
	margin:100px;
	width: 210px;
}
#sub_navigation_navigation {
	
	border-left: 5px solid #F8A21A;
	padding:6px 0px;
}
#sub_navigation_navigation ul {
	list-style:none;
	margin:0;
}
#sub_navigation_navigation ul li {
	margin-left:4px;
	background:#fafbeb;
	border-bottom:1px solid #ede8ca;
}

#sub_navigation_navigation ul li a{
	text-decoration:none;
	padding-left:16px;
	color:#4f493b;
}
#sub_navigation_navigation ul li.sub_navigation_navigation_here {
	background:url(arrow.gif) 0 0 no-repeat #f9fffb;
}
#sub_navigation_navigation ul li.sub_navigation_navigation_here a {
	color:#5c0001;
}	
</style>
</head>

<body>

<div class="sub_navigation">
	<div class="sub_navigation_category">
		<div class="sub_navigation_category_text">Schutz fuer alle</div>
	</div>
	<div id="sub_navigation_navigation">
	<ul>
		<li><a href="#">Die Kombination macht's!</a></li>
		<li><a href="#">Gesundheit</a></li>
		
		<li class="sub_navigation_navigation_here"><a href="#">Leben</a></li>
		<li><a href="#">Erholung</a></li>
	</ul>
	</div>
</div>

</body>
</html>

Ich habs allerdings nur im IE betrachtet und auf die Schnelle gemacht, ev. musst Du mit den Werten padding und margin etwas spielen oder eine Unterscheidung einbauen.

margin ist Aussenabstand und padding ist Innenabstand.
Schau Dir das "Boxmodell" an, dan verstehst Du es besser

**Nico** · 12.10.2005 11:12

Also so langsam bin ich das Meinung, dass ich doch lieber zu Tabellen zurückkomme. Das verstehen wenigstens alle Browser

Jetzt sitzte ich schon vier Tage an dem Layout und es ist immer noch nicht fertig...

Jetzt ist auch noch das Problem aufgetaucht, dass wenn ich Text eingebe, der HintergrundLayer nicht "mitwächst". (siehe Anhang)

Ich bekomme hier gleich die Krise, wenn das so weitergeht.

... vielleicht habe ich ja einfach angefangen, die gesamte Seite falsch zu struckturieren???

ich habe mal die beiden Dateien angehangen, vielleicht weiß ja jemdand mehr als ich...

Danke
Nico

**steffenk** · 12.10.2005 15:56

schade, das Dir sonst keiner hilft, ich hab nur kurz Zeit draufzuschauen.

Dadurch, das Du für container position:absolute; benutzt, nimmst Du sie aus dem Context raus, und sie können nicht mehr mitwachsen.

Du kannst das auch ohne diese Positionierung erreichen, oder du platzierst aussen noch einen Container mit position:relative; , dann richten sich die Container an diesem aus.

Schau Dir doch mal Terry's Tutorial an: http://dislabs.de/index.php?ac=labor&sub=1&id=2

**Nico** · 12.10.2005 17:37

ich gebe ja zu, dass ich mit CSS nicht so fit bin.

Ich habe es jetzt so gelöst, dass ich für den Hintergrund eine 1px hohe Grafik
verwende und diese auf der Y-Achse wiederholen lasse.
Ist nicht schön, aber funktioniert

... das Tut schaue ich mir trotzdem mal an. Vielen Dank

Der Nico

zur Startseite vom TP

Thema: CSS und ein senkrechter Balken

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

CSS und ein senkrechter Balken

margin vs. padding

sch... CSS

Aktive Benutzer

Aktive Benutzer