✔ 3 Zeilen Layout mit Content über den 3 Zeilen

[Moe078]

Hallo zusammen,

mein erster Beitrag in diesem Forum. Normal hilft mir ja Hr. Google und die Forensuche immer gut weiter. Aber wahrscheinlich bin ich einfach zu blöd
zum finden weil ich mit diesem css Problem einfach nicht weiterkomme. Deshalb hoffe ich nicht mit bösen Blicken abgestraft zu werden. Ich kriegs
nämlich selbst nicht auf die Reihe. Bin in css einfach zu unerfahren.

Habe einen Anhang eingefügt. Der sollte das ganze eigentlich darstellen.

Kurz erklärt. Im Prinzip gibt es hinter dem Content 3 Hintergründe.

Einen Hintergrund oben
Einen Hintergrund in der mitte der mit aufgezogen wird (Grafik die gekachelt werden kann)
Einen Hintergrund unten zum Abschluss

Der Content soll über alle 3 Hintergründe gehen. Und den mittleren Bereich dann aufziehen.

Jetzt habe ich den Content zwar über allem liegen (höherer z-index) aber er zieht dann die anderen beiden Bereiche des contents nicht mit.
Das ist mein Problem.

Weils wohl so am schnellsten geht und mir ein Kumpel auf dazu geraten hat hab ich eine Grafik
gemacht und den Code in eine zip Datei gepackt und hier eingefügt. Ich glaube so wäre es mir auch
am liebsten wenn an mich jemand mit einem Problem herantritt.

Oh man, für euch ist das sicher ein "kinkerlitzchen"... aber ich kotz mir jetzt seit Tagen einen ab. Hoffe ihr könnt mir helfen.

ich Danke euch! Vielen Dank.....!

 

[Maik]

Moin und herzlich Willkommen auf tutorials.de

Für dein Vorhaben werden diese vier DIV-Blöcke ineinander verschachtelt, ähnlich der Onion Skinned Drop Shadows-Methode (onion skinned = zwiebelschalig).

<div id="layer_content_top">
  <div id="layer_content_middle">
    <div id="layer_content_bottom">
      <div id="content">
        1test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
        2test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>  
        3test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
      </div>
    </div>     
  </div>
</div>

Das angepasste Stylesheet lautet dann wie folgt, in dem u.a. das Hintergrundbild für #layer_content_bottom an seinem unteren Elementrand positioniert wird, absolute height-Deklarationen entfallen, oder wie im Falle von #layer_content_bottom in eine Mindesthöhe min-height umgewandelt wird, damit die Box mit ihrem Inhalt auch mitwächst, obwohl sie ja eigentlich den unteren Abschluß für den Inhalt bildet, und diverse left:23px-Angaben erübrigt haben.

#layer_content_top
 {
 position: relative;
 background: url(layer_background_content_top.jpg) no-repeat;   
 margin:0 auto;
 left: 23px;
 width: 751px;
 padding-top: 80px;
 } 
 
#layer_content_middle
 {
 position: relative;		
 background: url(layer_background_content_middle.jpg) repeat-y;  
 left: 0px;
 width: 751px;
 }  
 
#layer_content_bottom
 {
 position: relative;		 	
 background: url(layer_background_content_bottom.jpg) left bottom no-repeat;  
 margin-left: auto;
 margin-right: auto;  
 left: 0;
 width: 751px;
 min-height: 284px;
 padding-bottom:20px;
 }  

#content
 {
 padding-left: 20px;
 }

Was den Seitenhintergrund betrifft, so lässt sich neben dem Hintergrundbild noch eine Hintergrundfarbe definieren, die dem Farbton des unteren Bildrandes entspricht, damit bei zunehmenden Inhalt darunter kein weißer Hintergrund erscheint

html 
 { 
 background: #FDE15A url(1000px_verlauf.jpg) repeat-x;   
  
 /* rechten Scrollbalken immer anzeigen */
 overflow-y: scroll;
 }

Noch ein Tipp bzw. Hinweis: zusammengesetzte CSS-Eigenschaftsnamen werden durchgängig kleinschrieben, also "background-image", "background-repeat", usw.

Lediglich in JS, wo sie ohne den Bindestrich notiert werden, beginnt der zweite Namensteil mit einem Großbuchstaben.

In meinen Stylesheets greife ich da grundsätzlich erstmal auf die allgemeine background-Eigenschaft zurück, in der sich alle Angaben zusammenfassen lassen

mfg Maik

 

[Moe078]

Hi Maik,

oh man... du bist ja ein css gott. Bin ich froh das Du mir geantwortet hast. Aber leider passt es noch nicht
ganz. Aber fast....

Im oberen Bereich wird der layer bei 80px abgeschnitten. Da ist die rechte kleine Sonne nur zur hälfte zu sehen. Das konnte ich
korrigieren indem ich das padding-top auf 143px (die grösse des jpegs) gesetzt habe.

Dann rutscht allerdings der Content nach unten. Dies konnte ich korriegieren indem ich beim content
top: -150px;
eingetragen habe. Dann ist der Content da wo er hingehört und der Hintergrund ist sauber zu sehen.
Durch das "-150px" entsteht allerdings jetzt unten ein freier bereich den ich nicht weg bekomme.
Zumal weiss ich nicht ob das "top: -150px" überhaupt erlaubt ist.

Der Content schliesst halt jetzt unten nicht mehr ab.
Und... der Content geht einfach rechts über die Layer hinaus und wird nicht umgebrochen....

Hab das ganze noch einmal gezippt wie ich es jetzt hätte. Da ist nicht viel geändert an dem was Du mir gemacht hast.

Und dann fällt mir noch was auf. Beim Firefox sind die Layer um 1px. nach rechts verschoben (ab Menü). Hab ich auch mal
einen Screenshot hinzugefügt.

Kannst Du noch mal nen Blick draufwerfen bitte....? Das wäre echt super.... 1000x Dank

 

[Maik]

Hi,

wenn du ein Element mit einer relativen Positionierung und der Angabe top:-150px nach oben verrückst, bleibt der ursprünglich eingenommene Raum im Textfluß erhalten, und erzeugt einen Abstand zum nachfolgenden Element.

In diesem Fall empfehle ich dir diese Formatierung für die beiden Blöcke #layer_content_top und #content:

#content
 {
 position: relative; 	
 padding-left: 20px;
 margin-top:-143px; 
 } 	 

#layer_content_top
 {
 position: relative;
 background: url(layer_background_content_top.jpg) no-repeat;   
 margin:0 auto;
 left: 23px;  
 width: 751px;
 padding-top: 143px;
 }

Und achte hierbei darauf, dass im CSS der Selektor #content nicht weiterhin doppelt enthalten ist, so wie in deinem letzten Anhang.

Bei mir wird der Inhalt ganz normal umgebrochen, und wandert nicht rechts über die Boxen hinaus.

Warum FF (3.5.x) die Blöcke um einen Pixel nach rechts verschiebt, kann ich momentan nicht nachvollziehen, im FF 2.x ist dies nicht der Fall. Wenn mir hierzu was einfällt, melde ich mich wieder

mfg Maik

 

[Moe078]

Hey Maik,

erstmal sorry das ich so lange nicht geantwortet habe. Bin gerade im Ausland und konnte bis jetzt nicht antworten.

Werde mich gleich morgen wenn ich nach Hause komme daran setzten und das ganze testen. Das mit dem doppelten
div-Content ist mir auch aufgefallen. Hab ich mich in den hintern gebissen.

Und das mit dem Umbruch des Contents muss ich auch noch mal genau anschauen. Im Firefox gehts im Internetexplorer
nicht. Aber das muss ja gehen. Selbst wenn man beim p-tag ein width angibt funktioniert das ja normalerweise. Deshalb
hat sich da evtl. auch ein Zeichenfehler irgendwo eingeschlichen.

Werd mich gleich morgen und am Freitag dranmachen und mich dann noch einmal melden und mich dann hoffentlich
letztendlich bei Dir bedanken können. Hoffentlich.

Bis die Tage... Danke!

 

[Moe078]

Hey Maik,

so, ich bin in letzter Zeit soviel unterwegs das ich es die ganze Zeit nicht geschafft habe mich wieder um die Seite zu kümmern. Leider ist das Problem noch nicht vollständig erledigt.

Ich habe noch 2 Probleme:

1. Wenn ich den unteren Part mit 143 nach unten schiebe und den oberen part mit -143 wieder zurückhole dann geht das nicht. 143 haut irgendwie eh nicht hin. So wie es jetzt ist wäre es nicht schlecht. Nur fängt er mit dem content eigentlich erst in #layer_content_middle an. Nicht oben!

Der oberer Bereich wird abgeschnitten. Das kann man rechts an der rechten Sonne sehen. Die erscheint nur zu 75%.

Habe alle Deine Tricks getestet. Ich krieg es aber nicht hin. Möglichkeit wäre rechts die Sonne einfach rauszulassen. Dann fällt es nicht auf das hier was "verbogen ist".

2. Der Internetexplorer bricht mir den content nicht um. Im FF passt alles wunderbar. Nur der IEx bricht nicht um. Selbst wenn ich in der style.css beim p-tag ein "width: 300px;" einfüge bricht der FF nach 300px um. Der IEx macht nix.... irgendwo ist da was schief...

Ich hoffe Du hilfst mir nochmal. Auch nachdem ich so lange jetzt nicht geschrieben habe.

Wäre echt super von Dir.....!

 

[Maik]

Du darfst davon ausgehen, dass ich meine Vorschläge hier nicht einfach ins Blaue hinaus geschrieben, sondern zuvor in den unterschiedlichen Browsern überprüft habe.

Und auch im IE wird bei mir der Inhalt umgebrochen.

mfg Maik

 

[Moe078]

Sorry, ich wollte nicht Deine Kompetenz in frage stellen. Falls das falsch rübergekommen ist. Ich habe schon gelesen das
es bei Dir geht.... aus mir spricht die Verzweifelung ;-).

Nachdem es auf meinem Netbook unter Windows 7 auch im Iex nicht umgebrochen wurde habe ich jetzt den Fehler
gefunden. Das <nobr>-Tag aus dem Menü-Layer hatte ich nicht geschlossen! Oh je... wie blöd. Das wäre smit erledigt.

Bleibt jetzt nur noch das erste Problema... da kann ich mir leider auf den Kopf stellen. Das krieg ich so alleine nicht hin.

Kannst Du noch mal schauen bitte?

 

[Moe078]

Hi Maik,

ok. Schade du magst wohl nicht mehr. Ist auch kein Thema. Ich habe den Hintergrund einfach verändert.
Selbst komme ich nicht drauf.

Möchte mich aber dennoch für Deine schnelle und spontane Hilfe bedanken. Echt super! Ohne Dich wäre
das nicht möglich gewesen. Ich danke Dir sehr! Ehrlich...

Gut das es Jungs wie Dich in solchen Foren gibt.....

Beitrag markiere ich als erledigt... das ist er auch.

Also dann... bb... Moe