Bilder mit Überhang in Header einbinden?

[Barnabas]

Hallo!
Ich habe eine Frage! Ich möchte in meinem Header 2 Bilder einbinden, die über den Headerrand hinausgehen (wie im Screenshot) Ich hab schon den ganzen Tag gesucht, aber nichts gefunden! Habe schon tausend mal das Template zerschossen (Xaamp), und und und...
Wenn das Thema schon mal da war bitte ich um Nachsicht! Bin Neu und habe so gut wie keine Ahnung von HTML, CSS und Co! Aber ich bin Neugierig und lerne ständig dazu!...Vielleicht kann mir jemand eine kleine Anleitung geben, wie ich das auf die Reihe bekommen!...

Gruß...Kai  

  [ Für Gäste sind keine Dateianhänge sichtbar ]



Linkback: https://www.modified-shop.org/forum/index.php?topic=8290.0

[h-h-h]

Mache aus den beiden Objekten 2 einzelne Bilder die kommen dann direkt beim Template in den
<div id="header"> Bereich z.B.

Code: XML  [Auswählen]

<img class="paeckchen" src="{$tpl_path}img/päckchen.gif" alt="Bildbeschreibung" />

und in der stylesheet.css folgende Zeile einfügen:

Code: CSS  [Auswählen]

.paeckchen { margin: -20px 0 0 -30px;}

Dann noch ein bisschen mit den Werten experimentieren.

Gruß h-h-h

[Barnabas]

Hallo h-h-h,
Danke für Deine Hilfe! Hat geklappt, wie Du es beschrieben hast! Ich schreibe es hier noch mal, vielleicht hat jemand noch mal die gleiche Frage!?

Gruß...Kai  

Das Bild "päckchen" als .gif in den Ordner: template/xtc5/img ,gelegt!

In der "index.html" unter header eingefügt:

Code: PHP  [Auswählen]

<img class="paeckchen" src="{$tpl_path}img/päckchen.gif" alt="Bildbeschreibung" />
 

In der Stylesheet.css unter #header eingefügt:

Code: CSS  [Auswählen]

#header .paeckchen {
         float:right;
         margin; 20px  -380px;
}
 

Das Ergebnis sieht dann so aus:

  [ Für Gäste sind keine Dateianhänge sichtbar ]

[claudia]

Im CSS ist noch ein Syntaxfehler drin, so wird die letzte Zeile ignoriert. Nach margin müsste ein Doppelpunkt (dann stimmt vermutlich die Anweisung nicht mehr, weil links und rechts -380 Pixel negativer Außenrand sind).

Ansonsten ist der Fall mit den überhängenden Grafiken durch Positionierung lösbar.

[h-h-h]

Hi Sohn des Trostes,
claudia hat recht in deine margin Angabe ist ein/zwei Fehler:

statt margin; 20px  -380px; muss es z.B. margin: 60px 0 0 0; heißen.

Code: CSS  [Auswählen]

margin: 20px 30px;

20px oben/unten, 30px recht/links
oder

Code: CSS  [Auswählen]

margin: 10px 20px 30px 40px;

      10px oben, 20px rechts, 30px unten, 40px links
oder

Code: CSS  [Auswählen]

margin-top: 10px;
margin-left: 20px;
margin-bottom: 30px;
margin-left: 40px;

Die Pixelwerte sind nur Beispiel angaben.
So sollte margin verwendet werden.

Gruß h-h-h

[Barnabas]

Hallo, Ihr Trostlosen!  *scherz*

Ja, da hab ich wohl zu früh die Klappe auf gemacht! Bei "margin" habe ich ausversehen ein ( statt ein ( eingetippt!

Das zweite habe ich so wie oben beschrieben beherzigt! Danke...

P.S. ich wollte eigentlich einen anderen Nickname wählen, nicht "Barnabas" sondern "Barabbas" ich war immer der Meinung, dass der Typ mehr Glück als Verstand hatte! Na, ja egal "Sohn des Nabu" (was immer das auch bedeuten mag) ist ja auch nicht schlecht!

Gruß...Kai