CSS - Trennlinie

[bridget]

Hallo liebe Community,

ich arbeiten mich gerade mit dem Little Boxes etwas in das Thema Website und Contao ein. Leider scheitere ich gerade schon in den Anfängen.

Ich möchte die horizontale Navigation nachbauen. Allerdings mit den Trennlinien nicht als Register, sonder links und rechts bis oben. Sollte doch eigentlich nicht so schwer sein, oder? Ich bekomme es trotz etlicher Spielereien nicht hin Ich habe dann auch versucht die Navigation aus dem Buch Websites erstellen mit Contao nachzubauen. Aber auch hier. Könnte jemand mir evtl. sagen was ich falsch mache?

Das ist natürlich erst der Anfang. Hyperlinks ... fehlen noch. Aber ich wollte erst einmal die Basics haben und vor allem kapieren, bevor ich weiter mache.

Code:

#header .mod_navigation {
color: white;
background: url("tl_files/x/hg.jpg") left bottom repeat-x;
padding: 5px 20px 5px 20px;
border-bottom: 6px solid #e7913c;
font-family: arial;
font-weight: bold;
height: 35px;
}

#header .mod_navigation li {
display: inline;
list-style-type: none;
margin: 0;
}

#header .mod_navigation a {
color: white;
padding: 4px 8px 4px 8px;
border-right: 1px solid #ffffff;
border-left: 1px solid #ffffff;
min-width: 78px;
}
Ergebnis:

contao.PNG

lg mel

[RSX]

Hallo mel,

also meines Erachtens muss du dem li jeweils Innen- und Außenabstand (beides sollte gleich groß sein) sowie den Rahmen zuweisen. Z.B. so:

#header .mod_navigation li {
    border-right: 1px solid #DB9D00;
    float: left;
    margin-left: 5px;
    padding-right: 5px;
}

Das Ganze mit dem letzten li wieder aufheben.

#header .mod_navigation li.last {
    border-right: 0 hidden;
}

[delirius]

Ich habe meistens beim a ein display:block, dann ist a gleich gross wie li. Und dann wende ich das meiste CSS auf a an. Versuche es mal. Ansonsten poste doch ein Link damit man es anschauen kann.

#header .mod_navigation a {
display:block;
...
}

[Andreas]

Grundsätzlich ist es eine gute Idee die Formatierung auf die As und SPANs zu setzen, welche man auch mit display:block; formatiert, nicht auf die LIs, auf die LIs nur das Nötigste z.B. das float und so (Erfahrungswerte).

Der Border von A ist so hoch wie A selbst (Padding gehört mit dazu, Margin würde nicht dazu gehören). Der Hintergrund gehört zu dem alles umschließenden DIV, welches höher ist. Schau dir das mit dem Firebug an und korrigiere das Nötige.

[bridget]

Hui, erst einmal vielen Dank für die Antworten.

Für einen Laien alles recht kompliziert Ich habe einfach die einzelnen CSS-Fragmente aus den Büchern zusammen gestöpselt

Naja es funktioniert halbwegs, aber im Detail kommt man da halt nicht weiter. Aber der Strich ist jetzt erst einmal "richtig".

Ich hatte halt gehofft, das "learning by doing" mich weiter bringt. Mal schauen, langsam zweifle ich daran.

lg mel

P.S Ach ja, Link gibt es im Moment noch nicht, weil, die Seite wirklich noch eher stümperhaft ist, und so wollte ich die nicht online stellen. Aber im Zweifelsfall muss es dann wohl sein.

[Andreas]

...Ich hatte halt gehofft, das "learning by doing" mich weiter bringt. Mal schauen, langsam zweifle ich daran...

Nicht aufgeben, das bringt dich auf jeden Fall weiter. Wenn du erstmal den Firebug richtig entdeckt hast und verstanden hast was bei CSS Selektoren, Eigenschaften und Werte sind, dann geht das wie von selbst. Braucht halt ein wenig Zeit.

[bridget]

Sodele, nach dem die Navigation "geruht" hat, noch einmal

Erst einmal mein "gestückeltes" Werk. Wobei ich manches so immer noch nicht ganz verstanden habe. Aber langsam wird es ein bischen besser.

#header .mod_navigation {
	background: url("../bilder/hg_nav.jpg") left bottom repeat-x;
	color: #ffffff;
	padding: 0 18px;
	margin-top: 18px;
	font-family: arial;
	font-weight: bold;
	border-bottom: 6px solid #e7913c;
	}
	
#header .mod_navigation ul {
	float: left;
	width: auto;
	margin-bottom:0;
	}
	
#header .mod_navigation li {
	float: left;
	width: auto;
	list-style-Type: none;
	border-right: 1px solid #ffffff;
	margin: 0;
	}
	
#header .mod_navigation  li.first {
	border-left: 1px solid #ffffff;
	}

#header .mod_navigation a,
#header .mod_navigation span {
	display: block;
	min-width: 78px;
	background-color: transparent; color: #ffffff;
	text-align: center; text-decoration: none;
	padding: 8px;
	}
	
#header .mod_navigation .active,
#header .mod_navigation .trail {
	background-color: #e7772b;
	}
	
#header .mod_navigation a:hover,
#header .mod_navigation a:focus {
	background-color: #e7772b; color: #7b7168;
	}
	
#header .level_2 li {
	clear: both;
	border: none;
	}
	
#header .level_2 {
	position: absolute;
	left: -9999px;
	top: -9999px;
	overflow: hidden;
	display: inline;
	width: 0;
	height: 0;
	z-index: 1;
	padding: 0 18px;
	}
	
#header li:hover .level_2
	{
	left: auto;
	top: auto;
	overflow: auto;
	display: block;
	width: auto;
	height: auto;
	background-color: #efbe9d;
	border: 1px solid #908e8f;
	border-top: 6px solid #e7913c;
	}

#header .level_2 li.first {border: none;}

#header .level_2 li {border-top: 1px solid #908e8f;}

#header .level_2 li:hover a
	{
	background: none;
	color: #7b7168;	
	}
#header .level_2 .active
{
background: none;
color: #7b7168;
}

Wie gesagt, das habe ich mir jetzt erst einmal aus den Büchern zusammen gebaut (irendwann werde ich das dann auch mal selbst probieren, und dann denke ich wächst das Verständnis)

Nun ja, auf alle Fälle weiss ich jetzt nicht, wo und wie ich angeben kann, das die Trennlinien zwischen den li´s die volle Breite haben bzw. wenigstens eine bestimmte Länge.

So wie es im Moment ist, passt sich die Trennlinie an die Länge des Wortes an, was bei langen Worten etwas "naja" ist.

navi.jpg

So, ich wünsche Euch noch eine schöne Restwoche.

lg Melanie

[Andreas]

Nimm mal bei #header .mod_navigation ul das float:left; raus. Und dann die Breite der Listenpunkte bei #header .level_2 li auf width:100%;