CSS Große Hintergrundfläche einfärben

[Furtano]

Hi,

wie kann ich in CSS die Hintergrundfläche mit einer Hintergrundfarbe meinetwegen 100px herum oder 100px nach rechts mit einfärben. Also nicht nur den Texthintergrund.

Es sind <ul> Elemente.

Beispiel: http://www.bertsch.info/
Bei der oberen Navigationsleiste

Oder wie bei der Rechten Navigationsleiste mit dem gelben Hintergrund (erscheint wenn man auf einen Navigationspunkt geklickt hat?

Padding und Margin bringen nichts

 

[Matze060694]

Hi,
würde eventuell mal probieren, noch einen zusätzlichen div tag mit der gewünschten Breite/Länge darüber bzw. davor zu legen.
MFG, Matze

 

[Nebuk]

Schau sonst mal hier:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm

Da gibts mehrere Hinweise dazu

 

[Furtano]

mit div und padding funktioniert, allerdings verschiebt sich dann das nächste Navigationselement daneben.
Wie kann ich das verhindern?

#navi li{
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 27px;
	float: left;
}

#navi li a {
	color: #cccc99;	
	text-decoration: none;
}

.navibg a:hover{
	color: black;
	background-color: #ccccff;
	padding: 10px 25px 10px 0px;
}

<div id="navibar">
				<ul id="navi">
					<div class="navibg"><li><span style="color: #000000;">|</span> <a href="unternehmen.php">Unternehmen</a></li></div>
					<div class="navibg"><li><span style="color: #000000;">|</span> <a href="bauen.php">Bauen</a></li></div>
					<div class="navibg"><li><span style="color: #000000;">|</span> <a href="brandschutz.php">Brandschutz</a></li></div>
					<div class="navibg"><li><span style="color: #000000;">|</span> <a href="news.php">News</a></li></div>
					<div class="navibg"><li style="position: relative; left: 255px;"><span style="color: #000000;">|</span> <a href="kontakt.php">Kontakt</a></li></div>
				</ul>
</div>

 

[Kausalat]

Das padding müsstest du schon für .navi li a {} festlegen, da die Menüpunkte ansonsten beim Hovern umherspringen.


Die <div>s im <ul>-Element sind fehl am Platz, den waagerechten Trenner könntest du auch problemlos und ohne <span>s als border-right ausführen ...

Wie immer ist ein Online-Validator zu empfehlen.

 

[Furtano]

Kausalat wie soll ich es sonst lösen ohne die <divs> im <ul>?

 

[Kausalat]

Z. B. so.

Merke dir, dass in <ul>- und <ol>-Elementen keine anderen Blockelemente als <li> verwendet werden dürfen (SelfHTML etc. hilft weiter).

 

[Furtano]

Und wie bekomme ich sowas hin mit einem Zeilenumbruch und eine gleiche Breite? (blau sollte :hover sein)

 

[Kausalat]

Zum Beispiel so:

<ul id="...">
<li><a href="..."><span>Unternehmen</span> Ingenieurbüro ABC</a></li>
...
</ul>

#... li a span { 
display: block;
font-size: ...;
}

 

[Daaron]

Na ja, für einen Zeilenumbruch aus einem <span> ein Blockelement zu machen geht, aber viel einfacher wäre ein gut platziertes <br/>...

 

[Kausalat]

@ Daaron:

Damit die "Dachzeile" in einer größeren Schrift erscheint, müsste man sie ohnehin in ein Inline-Element hüllen (oder eben die Unterzeile, was auf dasselbe hinausläuft). Oder wie stellst du dir die Größenformatierung vor?

 

[Daaron]

Stimmt... Syntaktisch wäre aber wohl ein <br> besser, vorausgesetzt man will wirklich verdeutlichen, dass nach der "Dachzeile" ein Zeilenumbruch kommen soll. Also eher <span></span><br/>

 

[Furtano]

Das Display block macht also, dass es vollständig ausgefüllt wird?

 

[Kausalat]

display: block mach aus einem Inline- ein Blockelement. Es wird ein Zeilenumbruch erzwungen.

Wenn du die Pseudoklasse "a" mit der Eigenschaft versiehst, erhältst du eine in der Gesamtbreite anklickbare Zeile, die du mittels padding entsprechend nach oben und unten erweitern kannst.