Positionierung von Grafik und Text

[Christian]

Hallo Leute,

vielleicht kann mir jemand sagen wie man zwei Elemente gleichzeitig positioniert in CSS.

Es geht um folgendes:
Ich habe in einem Stylesheet die Ueberschrift <h1> formatiert. Dort soll vor der Ueberschrift links ein kleines Viereck hin (eine JPG-Grafik). Das heisst erst kommt das Viereck und dann danach die Ueberschrift. Jetzt kommen die Probleme, ich kann naemlich nur beide Elemente gleichzeitig positionieren.

Weis jemand von euch wie das geht?

Gruesse Christian

[Kai Lahmann]

hi

Ich habe in einem Stylesheet die Ueberschrift <h1> formatiert. Dort soll vor der Ueberschrift links ein kleines Viereck hin (eine JPG-Grafik). Das heisst erst kommt das Viereck und dann danach die Ueberschrift. Jetzt kommen die Probleme, ich kann naemlich nur beide Elemente gleichzeitig positionieren.

Weis jemand von euch wie das geht?

<div><img/><h1>Überschrift</h1></div>
und nu das <div> positionieren.

gruss Kai

[Christian]

Servus Kai,

ja das wusste ich schon.
Aber das Stylesheet ist in einer externen Datei. Es soll sozusagen global gelten. In jeder html Datei steht also nur ein Link, mehr nicht.

Vielleicht weist Du auch wie man das direkt in CSS machen kann?

gruesse

hi

Ich habe in einem Stylesheet die Ueberschrift <h1> formatiert. Dort soll vor der Ueberschrift links ein kleines Viereck hin (eine JPG-Grafik). Das heisst erst kommt das Viereck und dann danach die Ueberschrift. Jetzt kommen die Probleme, ich kann naemlich nur beide Elemente gleichzeitig positionieren.

Weis jemand von euch wie das geht?

<div><img/><h1>Überschrift</h1></div>
und nu das <div> positionieren.

gruss Kai

[Kai Lahmann]

hi

ja das wusste ich schon.
Aber das Stylesheet ist in einer externen Datei. Es soll sozusagen global gelten. In jeder html Datei steht also nur ein Link, mehr nicht.

Vielleicht weist Du auch wie man das direkt in CSS machen kann?

wo ist damit das Problem? Du kannst ja dem <div> 'ne ID verpassen z.B. <div id="kopf"> und dann im CSS mit #kopf{position:absolute;...} arbeiten.

gruss Kai

[Christian]

Danke fuer den Tip, aber das hilft mir allerdings nicht weiter.
Den die Grafik ist als Hintergrundgrafik im Stylesheet direkt eingebunden.
 h1
      { background-position:0px 6px;
     background-image:url(pics/cuadrover.jpg);
     background-repeat:no-repeat;

und dann die Ueberschrift

text-align:left;
     margin-left:10px;
     z-index:1;
     font-size:16pt;
     color:black;
     font-family:Helvetica,Arial;
}

Deshalb steht dann auch in meiner HTML-Datei kein Image-TAG sonder nur ein <h1>.

gruesse Christian

hi

ja das wusste ich schon.
Aber das Stylesheet ist in einer externen Datei. Es soll sozusagen global gelten. In jeder html Datei steht also nur ein Link, mehr nicht.

Vielleicht weist Du auch wie man das direkt in CSS machen kann?

wo ist damit das Problem? Du kannst ja dem <div> 'ne ID verpassen z.B. <div id="kopf"> und dann im CSS mit #kopf{position:absolute;...} arbeiten.

gruss Kai

[Kai Lahmann]

hi

Deshalb steht dann auch in meiner HTML-Datei kein Image-TAG sonder nur ein <h1>.

eh, dann ist doch die Position der Grafik im verhältnix zum Text eh immer fest.. Allerdings befindet sich die Grafik wohl trotz der Konstruktion mit margin direkt hinter dem Text, oder? Ich würd' das eher mit padding lösen.

gruss Kai

[Christian]

Hallo Kai,

eben nicht. Da es eine Hintergrundgrafik ist, steht vorne hinter dem Text. Die Loesung mit padding funktioniert aber!

Danke und viele Gruesse
Christian

hi

Deshalb steht dann auch in meiner HTML-Datei kein Image-TAG sonder nur ein <h1>.

eh, dann ist doch die Position der Grafik im verhältnix zum Text eh immer fest.. Allerdings befindet sich die Grafik wohl trotz der Konstruktion mit margin direkt hinter dem Text, oder? Ich würd' das eher mit padding lösen.

gruss Kai