Hi, Leute!
Ich bastel bisschen an einer Website.
Oben ist der Header (400px hoch), dann der content, der sich automatisch nach unten verlängern kann; und eben noch den footer.
Der Text soll schon im Header anfangen, daher habe ich den Textblock mit z-index nach oben verschoben. Klappt auch, nur wird der Content nicht mehr entsprechend lang angepasst und der Text geht über die Box!
Seht:
Greydesign
Hat jemand ein Lösungsvorschlag?
Ankündigung
Einklappen
Keine Ankündigung bisher.
div trotz z-index dynamisch verlängern
Einklappen
Neue Werbung 2019
Einklappen
X
-
div trotz z-index dynamisch verlängern
Stichworte: -
-
Zitat von wernersbacher Beitrag anzeigenWenn ich den header als Hintergrundbild habe, kann ich den Container mit dem text direkt per margin ein abstand nach oben geben.
Allerdings würde die hintergrundgrafik des text containers ja wieder den header überlappen.
Wenn der Text kein Hintergrundbild haben soll - dann gebe ihm keins, dann überlappt er auch nichts.
-
Nein. Der BG liiegt im margin. Wenn Du nen Gelben Hintergrund setzt, kannst Du die Box ja auch verschieben, ohne dass alles gelb wird.
Einen Kommentar schreiben:
-
Ja, gut möglich, ich muss wohl umgedacht haben. Nochmal:
Wenn ich den header als Hintergrundbild habe, kann ich den Container mit dem text direkt per margin ein abstand nach oben geben.
Allerdings würde die hintergrundgrafik des text containers ja wieder den header überlappen.
Einen Kommentar schreiben:
-
Zitat von wernersbacher Beitrag anzeigenAja, aber wenn der div-container eine dynamische Höhe haben soll, muss dieser ja als Hintergrund des Elements bzw übgeordnetem Element sein, in dem sich der Text befindet; ansonsten hätte er ja keine Höhe!
Und wenn das Grafik Hintergrudnd es Elements ist, überlappt das ja den Header, da der text schon höher anfangen soll.
Einen Kommentar schreiben:
-
Aja, aber wenn der div-container eine dynamische Höhe haben soll, muss dieser ja als Hintergrund des Elements bzw übgeordnetem Element sein, in dem sich der Text befindet; ansonsten hätte er ja keine Höhe! Und wenn das Grafik Hintergrudnd es Elements ist, überlappt das ja den Header, da der text schon höher anfangen soll.
Da ist es doch piep, ob der header als Element oder als html bzw body Hintergrund angezeigt wird!
Einen Kommentar schreiben:
-
Zitat von wernersbacher Beitrag anzeigenWie meinst du das? 2 Hintergründe für ein Element?
Du hast die Elemente HTML und BODY, die können schon mal Hintergrundbilder bekommen, die auch positioniert werden können.
Die Elemente deines Inhalts liegen da eh schon „drüber“, da ist also u.U. gar keine weitere Positionierung erforderlich.
Und die „runden Ecken“ kannst du bspw. auch dem ersten/letzten Element deines Inhaltes verpassen.
Noch mehr Grundlagenerklärungen geb' ich hier jetzt aber erst mal nicht ab; Erfahrungen mit dem Aufbau von CSS-Layouts kann jeder erst mal selber sammeln.
Einen Kommentar schreiben:
-
Wie meinst du das? 2 Hintergründe für ein Element?
Einen Kommentar schreiben:
-
Zitat von wernersbacher Beitrag anzeigenWie wäre es denn sinnvoll?
Ich sage ja nicht, dass man mit Positionierung/Verschiebung von Elementen nicht arbeiten darf - aber dann sollte man schon halbwegs wissen, was man tut und was sich wie auswirkt.
Einen Kommentar schreiben:
-
ChrisB: Wie wäre es denn sinnvoll?
ByStones: Das liegt wharscheinlich daran, dass das Design fertig ist und deshalb noch nicht ganz sauber ist.
Einen Kommentar schreiben:
-
XHTML 1.0 Strict und CSS 3.0 valid.
Einen Kommentar schreiben:
-
Zitat von wernersbacher Beitrag anzeigenDer Text soll schon im Header anfangen, daher habe ich den Textblock mit z-index nach oben verschoben.
Absolute Positionierung ist für sowas aber kaum geeignet.
Du könntest auf relative umstellen - dann bekommst du aber unten entsprechenden Freiraum.
Ein negatives margin-top hätte dieses Problem nicht.
Allerdings müsstest du m.E. da eigentlich gar nichts irgendwie durch die Gegend schieben, wenn du einfach die Vergabe der Hintergrundbilder etwas sinnvoller gestalten würdest.
Btw.: Den Verschachtelungsfehler im HTML solltest du wenigstens noch ausbauen.
Einen Kommentar schreiben:
Einen Kommentar schreiben: