h2 zentrieren

[Toastbrot]

Hallo Leute!

Eigentlich hört sich das Problem ganz einfach an: Eine einfache Überschrift zentrieren.

Das Problem ist, dass diese Überschrift ein Hintergrundbild hat (haben soll), das links neben der Überschrift positioniert wird.

Hier mal der Code:

CSS:

div#content h2 {
   display: inline;
   font-size: 20px;
   text-align: center;
   padding-left: 25px;
   background: url("himbeere_h2.jpg") no-repeat left;
}

Der HTML Code ist einfach eine Überschrift mit beliebigem Inhalt.

Das ganze soll zentriert sein, und das Hintergrundbild soll sich direkt neben der Überschrift befinden (im padding-Bereich).

Greetz
Laura

 

[Efchen]

Inline-Elemente werden zentriert, indem man dem Elternelement "text-align:center" zuweist.

 

[_Thor_]

Nimm das display: inline raus.

 

[Toastbrot]

@Efchen: Ups. Okay, erscheint mir logisch. Aber wie krieg ich es dann in, dass der Rest des Textes nicht mehr zentriert ist?

@Thor: Hatte ich auch zuerst. Das Problem ist, dass block-Elemente sich ja über die ganze verfügbare Breite erstrecken. D.h. das Hintergrundbild wäre am linken Rand, es soll ja aber direkt neben die Überschrift.

Danke euch zweien für die schnellen Anworten!

AD: Un wie kriege ich es dann hin, der Überschrift als inline-Element noch einen Abstand mit margin zu geben? Oder ist es besser über padding des Elternelements?

 

[Efchen]

Ich habs auch nicht verstanden, warum Du das inline setzt. Wird doch alles leichter, wenn Du das nicht machst. Und Deinem Block-Element kannst Du ja eine feste Breite mitgeben, auch in em, dann passt es sich dem Inhalt an.

 

[_Thor_]

Hintergrundbildern kann man auch eine Position geben, die müssen nicht immer nur am Rand liegen. background-position: Hintergrund positionieren: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

 

[Toastbrot]

@Efchen: Tuts eben nicht. Wenn ich dem Element eine Breite von 2em gebe ragt der Inhalt doch über das Element hinaus.

@Thor: Problem dabei: Der Inhalt ist nicht immer gleich groß, dementsprechend hat der Hintergrund auch nicht immer die gleiche Position.

Habs jetzt gelöst und einfach dem Element ne feste Breite gegeben und es nciht mittig posiitoniert. Danke an euch.

 

[Efchen]

@Efchen: Tuts eben nicht. Wenn ich dem Element eine Breite von 2em gebe ragt der Inhalt doch über das Element hinaus.

Das kann ich nicht beurteilen. Ich weiß ja nicht, wie breit der Inhalt ist. 2em erscheint mir aber sehr wenig für eine Überschrift. Das reicht ja nichtmal für ein Wort!

 

[Toastbrot]

Eben. Das war ja nur ein Beispiel, dass das eben nicht funktioniert. Da ich die Überschrift auch noch unterstreiche, kann ich sowies keine Breite angeben.

 

[Efchen]

Versteh ich beides nicht.
Wenn ich eine Größe angebe, die zu klein ist, dann geht es natürlich nicht. Du musst halt die richtige Größe angeben.
Und die Unterstreichung hat keinen Einfluss auf die Breite und umgekehrt. Unterstreichungen sind nur so lang wie der Text.

Aber egal, Du hast ja Deine Lösung.

Ciao,
-Efchen

 

[Toastbrot]

Ja hab ich, die ist zwar nicht optimal, aber egal.

Wenn ich einem Block-Element einen border-bottom zuweise (sry, hab mich vielleicht falsch ausgedrückt), dann ist der über das ganze element.

Und wenn ich diese Formatierung bei mehreren Überschriften habe, dann sind die auch unterschiedlich lang.

 

[Shrax]

Tschuldigung wenn ich das falsch verstehe oder jetzt komisch reinplatze. Aber:

Ups. Okay, erscheint mir logisch. Aber wie krieg ich es dann in, dass der Rest des Textes nicht mehr zentriert ist?

Auch wenn du nun eine andere lösung gefunden hast, verstehe ich nicht was du damit meinst.

css

h2 { 
text-align: center  
font-size: 140%; /* Nur als Beispiel */
color: green; /* Nur als Beispiel */
font-family: Verdana, Arial, sans-serif;  /* Nur als Beispiel */
text-decoration:underline; /* Nur als Beispiel */ }

html

<h2>Hier deine Überschrift die Zentriert ist mit text-align: center; die größe 140% hat, grün ist und wenn Installiert entweder Verdana, Arial oder sans-serif als Schriftart hat. AUßerdem müsste sie unterstrichen sein. </h2>
<p>Dieser Text dürfte nun nichtmehr Zentriert sein </p>

 

[Toastbrot]

Da hast du wohl recht. Aber wo bleibt dann das hintergrundbild? Das wäre am linken Rand, es soll aber direkt neben die Überschrift.

Da h aber ein Blockelement ist, müsste ich ihm eine feste breite zuweisen, die so lang ist wie der text und dann mit padding den bereich für das bild schaffen.

Da ich diese überschrift aber mehrmals verwende und immer unterschiedlichen text drin hab, geht das nicht.

 

[Shrax]

Hm wieso möchtest du ein Bild neben die überschrift. Hab ich das überlesen?

Also so in etwa?

+-------+
|       |
| BILD  |        Überschrift
|       |
+-------+

Hm ich glaub das geht irgentwie so

background: white url(bild.jpg) no-repeat left center;

Also das noch in das css für h2 stecken. Versuchs einfach mal.

 

[Toastbrot]

ja und dann noch die überschrift zentrieren xD mit dem bild zusammen, probiers mal aus ohne feste breite, geht nciht xD