h1 tag und background?

Basti82 · #1 (**permalink**) 23.07.2008, 10:35

Hallo liebes Forum,

habe hier ein kleines Problem mit meinen h1 tag

Habe meine h1 einen Background gegeben, doch wird der h1 tag automatisch auf 100% weite angegeben, nun möchte ich aber das die Hintergrundfarbe durch komplett durchläuft!

Wie bekomme ich es hin, dass die Backgroundfarbe genauso lang ist wie das eingetragene Wort?

Hier mal ein paar Codezeilen

Code:

.content {
	float: left;
	display: inline;
	margin: 0px;
	padding: 0px;
	padding-left: 15px;
	padding-right: 10px;
	width: 425px;
	}

.content h1 {
	margin: 0px;
	padding: 0px;
	padding-left: 2px;
	padding-right: 2px;
	font-family: Arial;
	font-size: 11px;
	color: #00e3fe;
	text-decoration: none;
	font-style: normal;
	text-transform: uppercase;
	background-color: #464646; 
	}

Code:

<div class="content">
   <h1>willkommen bei <span style="color:#FFFFFF;">blabla</span></h1>
   <p>....</p>
</div>

vielen Dank an alle Helfer!

Peter Klein · #2 (**permalink**) 23.07.2008, 10:59

Soll das h1-Tag 100% Breite einnehmen oder soll es kürzer sein?

Das es die 100% einnimmt ist völlig ok, es ist die Voreinstellung, da jedes Element das nicht extra formatiert wird die größtmögliche Breite einnimmt.

Du könntest hingehen und den gesamten text in der h1 in ein span Tag schreiben und diesem die Hintergrundfarbe mit geben. Alternativ dazu besteht die Möglichkeit mit margins zu arbeiten, damit bestimmst du die Länge des h1 Tags.

Basti82 · #3 (**permalink**) 23.07.2008, 11:17

da jede Überschriften unterschiedlich lang sind, kann ich keine feste Breite bestimmen.

mhhh also das mit dem span ist mir auch schon eingefallen... aber dann müsste ich mit 2 span´s ineinander arbeiten :/ ist halt keine schöne Sache!

funktionieren tuts bestimmt, nur der Code sieht das nicht so dolle aus.

andere Möglichkeit gibt es wohl nicht?

Peter Klein · #4 (**permalink**) 23.07.2008, 11:20

Hm,...2 spans sind wirklich nicht schön.

Muss mal überlegen wie man es noch machen kann

mantiz · #5 (**permalink**) 23.07.2008, 11:34

Man kann das h1 ohne Breitenangabe floaten lassen, dabei aber das clearen nicht vergessen.

s. FAQ Punkt 2: http://xhtmlforum.de/40267-faq-h-ufi...ragen-und.html

Basti82 · #6 (**permalink**) 23.07.2008, 11:48

sprich ich müsste es so testen:

Code:

.content h1 {
	float: left;
	margin: 0px;
	padding: 0px;
	padding-left: 2px;
	padding-right: 2px;
	font-family: Arial;
	font-size: 11px;
	color: #00e3fe;
	text-decoration: none;
	font-style: normal;
	text-transform: uppercase;
	background-color: #464646;
	clear: left;
	}

und dann sollte er keine weite von 100% nehmen, oder?

mantiz · #7 (**permalink**) 23.07.2008, 11:50

Das float muss zum h1, ja, aber das clear müsste dann in ein Element, welches dem h1 direkt folgt, z.B. das p, oder man fügt z.B. ein hr ein, welches man auf 1px Höhe und visibility:hidden versieht und diesem dann das clear gibt.

cgdesign · #8 (**permalink**) 23.07.2008, 11:58

Kannst dem H1 ja auch display: inline mitgeben.

Basti82 · #9 (**permalink**) 23.07.2008, 12:09

joar stümmt war Denkfehler...

und "display: inline" mach ich dann immer zu float dazu! war nur eben auf die schnelle

ich teste das mal später!

danke euch!

inta · #10 (**permalink**) 23.07.2008, 12:18

Zitat:

Zitat von Basti82

und "display: inline" mach ich dann immer zu float dazu!

Das macht in der Regel keinen Sinn, da Elemente die floaten in den Block-Level-Kontext wechseln.
Der Hinweis mit dem "display: inline;" war sicher als Alternative zum Float gedacht.

Eigentlich wäre inline-block hier genau richtig, leider kann Firefox bis Version 2 damit nicht umgehen.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Inline Listenelement wird nicht richtig im background befüllt	SteveB	CSS	3	28.04.2011 20:41
Problem mit CSS Style	flo007	CSS	3	25.01.2009 17:08
Float-Reihenfolge?	wolf1985	CSS	0	21.08.2008 01:35
Footer left und right Probleme...	wolf1985	CSS	2	14.08.2008 13:04
Mozilla zeigt DIV zu oft an	cracki	CSS	6	09.03.2008 15:22