Thomas: Hintergrundverlauf und Virdergrundbild

Guten Morgen zusammen,

hoffe ihr könnt mir bei einer Kleinigkeit helfen, bin leider schon so lange aus dem HTML raus, dass mir jetzt keine Lösung einfällt.
Das ist die Seite:
http://www.fahrschule-lehning.de/lab/
Zu sehen sind die Hintergrundfarben.. unten drunter (scrollen bitte ;) ) befindet sich ein Bild, das eigentlich mittig über den 3 Hintergrundfarben zu sehen sein soll...
Wenn ich das aber versuche quetscht sich das Bild zwischen die Farben, dh ein weißer Bereich entsteht.
Ich glaube es ist eine simple Lösung... aber ich finde leider über google keinen Rat.
Wäre um eure Hilfe dankbar!

Viele Grüße
Thomas

  1. Hi Thomas,

    Zu sehen sind die Hintergrundfarben.. unten drunter (scrollen bitte ;) ) befindet sich ein Bild, das eigentlich mittig über den 3 Hintergrundfarben zu sehen sein soll...
    Wenn ich das aber versuche quetscht sich das Bild zwischen die Farben, dh ein weißer Bereich entsteht.

    Ich meine, du müsstest in diesem Fall dem Bild-Div eine Position zuweisen.

    ciao
    romy

  2. http://www.fahrschule-lehning.de/lab/
    Zu sehen sind die Hintergrundfarben.. unten drunter (scrollen bitte ;) ) befindet sich ein Bild, das eigentlich mittig über den 3 Hintergrundfarben zu sehen sein soll...
    Wenn ich das aber versuche quetscht sich das Bild zwischen die Farben, dh ein weißer Bereich entsteht.

    Du schlägst da einen problematischen Weg ein.
    Offenbar versuchst du einen Seitenhintergrund zu bauen (absolute Dimensionierung in der Höhe), über welchen du den Inhalt dann legen willst.

    Damit sowas funktioniert, musst du den _Hintergrund_ in ein eigenes <div> packen, das absolut positioniert wird. Damit wird es aus dem normalen Fluss genommen.
    Leider wird es dann über dem Inhalt liegen. Um dies zu umgehen, muss der gesamte inhalt wiederum in ein <div>, welches relativ positioniert ist.
    Du kannst somit mittels höherem z-index bewirken, dass der Inhalt wieder über dem absolut positionierten Hintergrund erscheint.

    Du solltest dir aber gedanken machen betreffs skalierbarkeit. Nicht alle Browser skalieren/zoomen elles gleich. Wenn ein browser nur die Schriftgrösse zoomt, wird jeder erwünschte Bezug zwischen Hintergrundfarben und Inhalt verzerrt.

    Im übrigen empfehle ich dir eine Doctype-Angabe, was dir hilft deine Seite zu validieren.
    Du möchtest auch den <style> Bereich statt inline Style verwenden. Auslagern in ein separates Stylesheet File wird dann viel einfacher.

    mfg Beat

    --
    Woran ich arbeite:
    X-Torah
       <°)))o><                      ><o(((°>o
  3. bastle dir ein Bild mit dem Streifenmuster und lege es per background-Eigenschaft in den Hintergrund des <body> - Fertig!

  4. Hi,

    hoffe ihr könnt mir bei einer Kleinigkeit helfen, bin leider schon so lange aus dem HTML raus, dass mir jetzt keine Lösung einfällt.

    Dein Ansatz ist grundlegend falsch. Du scheinst HTML-Code zu schreiben, um eine bestimmte Form der Darstellung zu erwirken - dies wird im Volksmund "Tabellenlayout" genannt (nach dem am häufigsten hierzu missbrauchten Element) und bringt Dir ausschließlich Nachteile ein. Verfasse statt dessen zunächst den HTML-Code, *ohne an die Darstellung zu denken*, und nutze ihn anschließend in einem CSS-Code, um das gewünschte Layout zu erhalten.

    Ich glaube es ist eine simple Lösung...

    Jupp: Wegschmeißen und neu machen. Lieber in diesem Stadium, wenn Du noch keine Aufwände hattest, als später.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes