mehrteiliger hintergrund

timse201 · 19. August 2008

ich möchte gerne ein hintergrundbild aufteilen, so dass es für jede auflösung stimmt
oben: top no repeat
unten: bottom no repeat
und in der mitte repeat

wie geht das?

Kranky · 20. August 2008

Ich würde es mit 3 DIV-Containern lösen. Zuerst machst du aus deinem Hintergrund 3 Teile: einen oberen, einen unteren und die Mitte.

Und dann:

Code:

#oben {
  background-image:url(oben.png);
  /*background-repeat wird nicht benötigt, da das DIV nur so groß ist, wie das oben.png*/
  width:600px;
  height:50px;
}
#mitte {
  background-image:url(mitte.png);
  width:600px;
  /*height wird nicht benötigt, da die Höhe variabel sein soll*/
}
#unten {
  background-image:url(unten.png);
  /*background-repeat wird nicht benötigt, da das DIV nur so groß ist, wie das unten.png*/
  width:600px;
  height:50px;
}

Code:

<div id="oben"></div>
<div id="mitte">Dieser DIV-Container hat eine veränderbare Höhe</div>
<div id="unten"></div>

timse201 · 21. August 2008

Kranky schrieb:

Code:

#oben {
  background-image:url(oben.png);
  /*background-repeat wird nicht benötigt, da das DIV nur so groß ist, wie das oben.png*/
  width:600px;
  height:50px;
}
#mitte {
  background-image:url(mitte.png);
  width:600px;
  /*height wird nicht benötigt, da die Höhe variabel sein soll*/
}
#unten {
  background-image:url(unten.png);
  /*background-repeat wird nicht benötigt, da das DIV nur so groß ist, wie das unten.png*/
  width:600px;
  height:50px;
}

das kommt in den head bereich wahrscheinlich?

Kranky schrieb:
Code:

<div id="oben"></div> <div id="mitte">Dieser DIV-Container hat eine veränderbare Höhe</div> <div id="unten"></div>

und das in den body?
werd das leider erst übermorgen ausprobieren können deshalb frag ich

vielen dank

Kranky · 21. August 2008

Den oberen Teil kannst du in folgendermaßen in den Head einbauen:

Code:

<head>
...
<style type="text/css">
[HIER DER CODE]
</style>
...
</head>

Und ja, das untere kommt in den Body. Deinen Seiteninhalt fügst du dann ganz einfach in den mittleren DIV-Container ein.

timse201 · 21. August 2008

klappt nicht ganz

http://pc0tweak.lima-city.de/Beta-Test/Menu.html

Kranky · 22. August 2008

404 Not Found

timse201 · 22. August 2008

versuchs nochmal
ab und zu gibts n paar probleme vom anbieter

Kranky · 25. August 2008

Ich habe die Datei mal etwas überarbeitet.
http://www.jens-bringewatt.de/web/index/Menu.html

Wenn du noch Fragen dazu hast, werde ich dir die gerne versuchen zu beantworten.

timse201 · 25. August 2008

danke

der link funktioniert aber nicht

Kranky · 25. August 2008

Oh, sorry... habe gestern die Homepage umgezogen und die neue Verzeichnisstruktur noch nicht im Kopf

http://www.jens-bringewatt.de/Menu.html

mumpel · 25. August 2008

Du musst jetzt mal sagen/zeigen, wie das aussehen soll. Wie soll denn da der Content drin sitzen?

#mitte {
background-image:url(mitte.png);
width:600px;
/*height wird nicht benötigt, da die Höhe variabel sein soll*/
}

Eigentlich muss eine height in % angegeben werden, sonst weiß der Browser nicht, dass es flexibel ist. background-repeat:repeat-y fehlt auch noch.

Ich würde es etwas anders machen:
Als erstes würde ich mal einen CSS-Reset benutzen, dass dir die Ränder auf 0 setzt und externe Stylesheets benutzen. Deinen schwarzen Hintergrund würde ich als Background für <body> definieren. Die Taskbar würde ich von dem Hintergrund freistellen und in einen <div> legen. Dann würde ich das blaue Mittelstück der Taskbar ebenfalls als Hintergrund mit y-repeat definieren. Das obere und untere Ende kommen dann in eigene <div>, die du per CSS-Position positionierst.

Du wirst aber Probleme haben, die Höhe auf 100% zu setzen, da es bei HTML4 keine 100% Höhe gibt. Der Content definiert die Höhe. Da musst du ggf. per JS ran.

Das wird aber sehr frickelig. Eine bessere Lösung ist, auf den komischen Krackel-Hintergrund zu verzichten und eine einfarbige Fläche zu nutzen. Da bekommst du später auch keine Probleme mit der Lesbarkeit. Dann definierst du nur noch dein blaues Taskbar-Stück als Hintergrund mit y-repeat und positionierst den Startbutton+Quickstart und die Systray mit Uhr auf einzelnen <div> mit position: absolute. Die Sache würde noch einfacher gehen, wenn du die Taskbar unten oder oben reinsetzt. Macht ja auch so keinen Sinn. Die Taskbar sieht an der Seite ganz anders aus.

Kranky · 25. August 2008

mumpel schrieb:
Eigentlich muss eine height in % angegeben werden, sonst weiß der Browser nicht, dass es flexibel ist. background-repeat:repeat-y fehlt auch noch.

Wenn du DIVs keine feste Höhe und Breite gibst, sind die so groß, wie der Inhalt. Gibst du eine feste Breite, sind die so hoch, wie der Inhalt. Ich habe jetzt schon viele Seiten erstellt und in vielen Browsern getestet und meine "Content-Bereich-ohne-Höhenangabe"-Methode hat überall gepasst.

mumpel · 25. August 2008

Richtig. Aber das Mittelstück soll ja nicht so groß, wie der Inhalt (Bildhöhe) sein, sondern 100%. Zumal die Div-Höhe auch nur am Inhalt abgemessen wird. Und da das Bild als Background geladen wird, hat es keine Höhe.

Oder steh ich auf dem Schlauch?

timse201 · 25. August 2008

vielen vielen dank

noch eine frage im internet explorer bekomm ich unten einen weißen rand
im firefox/opera oben einen weißen rand

eigentlich wollt ich ja genau das machen, dass der hintergrund für jeden browser und für jede auflösung endlich passt

ist das nicht so das wenn kein height angegeben wird sofort height:auto genommen wird?
also müsst es passen

edit:
so den oberen rand im ff und opera hab ich weg
doch die mitte ist nicht dynamisch zur auflösung

http://pc0tweak.lima-city.de/Beta-Test/mainmenu.html

Kranky · 27. August 2008

morgot schrieb:
so den oberen rand im ff und opera hab ich weg
doch die mitte ist nicht dynamisch zur auflösung

Die Höhe passt sich ja auch dynamisch zur Menge des Inhalts an

timse201 · 27. August 2008

ja das is mir klar nur soll sie sich nach der größe des browserfensters anpassen

Kranky · 27. August 2008

Ah sorry, hab dich falsch verstanden. Im Anhang findest du hoffentlich die Lösung zu deinem Problem.

Alle DIVs sind mit position:fixed; an einer Stelle fest. Das obere ist mit top:0px; oben ausgerichtet, das untere mit bottom:0px; unten und das mittlere mit top:89px; und bottom:316px; dazwischen ausgerichtet.

Außerdem habe ich mit z-index noch das mittlere DIV vor das untere DIV gelegt, damit bei kleinen Seiten der Inhalt über dem Footer steht.

mumpel · 27. August 2008

Dass man Top und Bottom angeben kann, war mir neu. Danke für den Tipp!

Kranky · 27. August 2008

Ich habe auf css4you gelesen, das man top oder bottom angeben kann aber hab es einfach ausprobiert und hat dann im IE7 und FF3 funktioniert.

mehrteiliger hintergrund

Ensign

Lt. Junior Grade

Ensign

Lt. Junior Grade

Ensign

Lt. Junior Grade

Ensign

Lt. Junior Grade

Ensign

Lt. Junior Grade

Commodore

Lt. Junior Grade

Commodore

Ensign

Lt. Junior Grade

Ensign

Lt. Junior Grade

Anhänge

Commodore

Lt. Junior Grade

Ähnliche Themen