kniffliges css Background problem.

von **woli** » 15.03.2007, 07:34

Ich habe das Basis design schonmal als jpg bereit gestellt um mein problem besser deutlicher zu machen.

Design:

Horizontal Gradient Background (logo gehört zu BG)
Menu soll teils unter dem Logo liegen.

the screenshot: http://img15.imgspot.com/?u=/u/07/72/23/csshelp1173933804.jpg

1.Problem: Das Horizontal Gradient Hintergrund Bild (Logoname Modelo einbezogen als BG) verschiebt sich
bei unterschiedlichen Auflösungen...

Das hintergrund Bild (Gradient) mit dem Logo name "Rodelo" setze ich auf background-image:
url('bg.jpg')

2) Aufgrund der verschiebung bei den verschiedenen Auflösungen liegt das HintergrundBildLogo
nicht unter dem menu, sondern je nachdem weiter entfernt.

Welche Lösungs möglichkeiten gibt es?

Mein Anfangs Idee für das 2te Problem war es das Logo nicht als Bg zu nutzen sondern als
durchsichtiges .gif . Somit kann ich das LogoBild mit dem Menu positionieren.
Was haltet ihr von dieser Idee?

von **Laus** » 15.03.2007, 10:41

Hallo

Zu 1.
Erstelle für den Body ein HG Bild das mindestens 700px breit und ca 5px hoch ist (wegen der verschiedenen Auflösungen) mit der linken Anfangsfarbe und positioniere es im Hintergrund des body auf der linken Seite mit background: url(url deines bildes) repeat-y left #hgfarbe;.
Zusätzlich weist du dem body als HG Farbe die Farbe deines HG Bildes rechts zu. Damit hast du schon mal die beiden Grundfarben.
Dann legst du ein Div um den gesamten Inhalt mit einer festen Breite zB: 860px und positionierst ihn mit margin: 0px auto; in der Mitte der Seite.
Als HG Bild für diesen Container nimmst du deinen Farbverlauf von links nach rechts. Da kannst du jetzt auch das Logo mit einbinden da sich dieses HG Bild ja nicht mehr gegenüber dem Menü verschiebt.

Damit hätte sich deine Zweite Frage eigentlich auch schon erledigt.

Ich hoffe du hast verstanden wie ich das meine.

Gruß Xaver

von **woli** » 16.03.2007, 04:04

viele dank fuer die antwort:

Beispiel gradient links schwarz und rechts weiss

<style>
html, body {
background: url(bg.jpg) repeat-y left #000;
background-color: #fff;
}
</style>

ich glaube das es so gemeint wurde oder?

von **Laus** » 16.03.2007, 13:20

Fast

Code: Alles auswählen: <style> html{ margin:0; padding:0; height:100%; } body { background: url(bg.jpg) repeat-y left #fff; height:100%; } #wrapper { margin:0 auto; text-align:center /* für IE*/ width:860px; min-height:100%; background: url(farbverlauf.jpg) repeat-y left #fff; } #header{ background: url(logo.png) no-repeat left ; height: so hoch wie dein logo; } ul#navi { float:left; margin-top:-50px;/* oder mehr um die navi über das logo zu legen*/ usw...... usw....... } </style>

Das bg.jpg müsste Schwarz sein und die hintergrundfarbe weis.
Das farbverlauf.jpg ist dein Farbverlauf von schwarz nach weis.
Das logo.png mit transparentem Hintergrund.

Das ganze in HTML

Code: Alles auswählen: <body> <div id="wrapper"> <div id="header"></div> <ul id="navi"> <li>.......</li> </ul> <div id="content"> .....Inhalt der Seite...... </div> </div> </body>

Schau dir das mal so an.

Gruß Xaver

von **woli** » 20.03.2007, 03:59

Leider habe ich es nicht so hingekriegt wie ich es wollte aber ich habe deine idee anders umgesetzt mit dem box model.

- wrapper zentriert dort das horzizontal gradient hintergrund bild auf gesetzt mit dem logo als hintergrund bild. und es der size ist konstant. no resizing.

- ein body background erstellt die link haelfte die farbe vom linken horizontal background und rechts die farbe des rechten horzontal background.

nun das problem mit dem bottom part.

Leider kommen wieder die probleme mit dem resolution aber diesmal fuer den bottom. WIe kriege ich das hin, dass es automatisch auf 100% height gesetzt wird. Weil sonst sieht man den 2 farbigen hintergrund bild und nicht den gradient bg.

ich hoffe man versteht was ich meine.

von **Laus** » 20.03.2007, 06:42

Für 100% höhe sollte dir -->dies<-- oder auch -->dies<-- eine gute hilfe sein.

Gruß Xaver

von **woli** » 20.03.2007, 13:31

und nochmals vielen dank!

Also ich habe es weiterhin versucht

Anschauliches Problem http://bechild.de/test/

Das Container habe ich mit einem Background gefüllt und auf 100% gesetzt.
Mit inet explorer wird das Container mit dem gradient BG gefüllt (so wäre es perfect), aber mit firefox wird es nicht bis 100% gefüllt. Firefox braucht eine xxx px angabe um es zu füllen.

Wie kriegt man es hin, dass firefox 100% auch versteht?

von **Laus** » 22.03.2007, 09:43

Hallo

Du hast das clear vergessen!!
in deinem css steht zwar

Code: Alles auswählen: div#footer{clear:left;width:100%}

aber im Html hast du diesen footer nicht eingebaut! Einfach bei

Code: Alles auswählen: Contact</b></h1> </div><div id="footer"></div></div> </body> </html>

einfügen dann klapts.

Gruß Xaver

von **woli** » 22.03.2007, 14:36

das footer sollte eigentlich raus, habs nun auf http://www.bechild.de/test/ geändert.

Durch das adden vom height:100% im html,body{margin:0;padding:0} tag
wurde mein problem mit dem 100% height FAST gelöst

bei 1024x768 1280 x 800 zeigt ineternet explorer und firefox alles wunderbar an.

Aber

Wenn ich auf 800x600 mit firefox teste, dann treten die Selben probleme wie früher auf, das es nicht die 100% anzeigt.

Bei Inet explorer mit 800x600 klappt allles gut.

von **Laus** » 22.03.2007, 17:28

wie schon gesagt du hast das clearen vergessen.

Benutze entweder den leeren footer zum clearen wie ich dir oben bereits beschrieben habe oder benutze -->clearfix:after<-- , das behebt dein Problem.
Lerne die -->grundlagen des float<-- verstehen und wende es richtig an dann kannst du solche Probleme ganz leicht vermeiden.

Gruß Xaver

von **woli** » 23.03.2007, 00:22

Vielen dank, ich werde mir mal die grundlagen durchlesen.

kniffliges css Background problem.

kniffliges css Background problem.

danke

danke!

versucht

uhm leider nicht

okay

Ähnliche Beiträge zu "kniffliges css Background problem."

Wer ist online?