Wrapper: Balken über ganze Breite einfügen?

**tilda** · 30.11.2015, 08:31

Guten Morgen,

ich möchte gerne oben am Rand einen schmalen Balken haben, der über die ganze Breite sichtbar ist.
Die Seite selbst ist zentriert und 944px breit. der Wrapper ist auf 100% gesetzt. Der Balken ist per CSS gestaltet.
Wie kann ich diesen nun in den Wrapper legen?

Code:

#wrapper{	width: 100%;margin:0 auto;}
#container{ width: 944px; margin: 0 auto;}
#header{width: 944px;  margin: 0 auto; height:140px !important;z-index:100;}
#main .inside { width: 944px; margin: 0 auto; margin-top: 2%; min-height:500px;}
#footer{width: 944px;margin-top:1.5em;padding-top:1.5em;margin-bottom:1.5em;}

Code:

#balken{background-color:#d7e949;box-shadow: 2px 2px 2px silver;}

Beste Grüße
Tilda

**Kim** · 30.11.2015, 09:17

Gib dem Wrapper doch einfach einen Border.

#wrapper {border-top: 2px solid silver; box-sizing: border-box;}

**tilda** · 30.11.2015, 09:37

Das habe ich nun gemacht.
Zwei Fragen ergeben sich nun daraus:
1. Allerdings muss ich, um den Schatten sichtbar zu machen eine Höhe angeben. (height:0px)
Damit ist der Schatten dann sichtbar. Das betrifft nun auch den Wrapper. Ist das ein Problem?

2. Zum anderen soll es ein paar Buttons geben die ich im Header platziert habe, die im Balken sitzen sollen.
Wenn ich den Header , mit -30px; nach oben schiebe, ixt der Inhalt nicht mehr zentriert.

Code:

#wrapper{	
 	margin:0 auto;
	width: 100%;
	border-top: 30px solid silver; 
border-color:#d7e949;
box-shadow: 2px 2px 2px silver;
		height:0px;
			}

Code:

#header{width: 944px;  margin: 0 auto; height:140px !important;z-index:100;}

mhm?
Beste Grüße

**tilda** · 30.11.2015, 09:43

Ich habe nun einfach die Navi mit -20px nach oben geschoben.
Aber kann man das so machen?

**Samuell** · 01.12.2015, 08:06

Hallo,
generell kann man das wohl schon so machen.
Aber es gibt effektivere Lösungen.

Das hier kannst Du zusammenfassen:

Code:

border-top: 30px solid silver; 
border-color:#d7e949;

Code:

border-top: 30px solid #d7e949;

height: 0; kannst Du ebenfalls eher weglassen.

Wenn Die Buttons in die Navigation gehören, würd ich wahrscheinlich die Navigation auf volle Breite setzen und nicht mit einer Border und negativem Margin tricksen.

**derRenner** · 01.12.2015, 20:54

Hallo,

erstelle dir im Seitenlayout unter 'Eigene Layoutbereiche' einen eigenen Layoutbereich mit der Position 'Unterhalb der Kopfzeile'
Diesen fügst du dann im Layout ein und kannst den stylen wie du möchtest - auch mit dem [shadow]
Weiters kannst du auch in diesen eigenen layoutbereich eigen erstellte Module einfügen » eigenes Modul mit deinen gewünschten Buttons/Navipunkten

Schau mal hier: http://wiewarsdort.at/
Hier habe ich im 'Eigenen Layoutbereich' topbar z.B. ein Suchfenster eingebaut, ohne dass ich etwas aus dem header heraus mit einem negativen margin verschieben musste.