nicht angemeldet
dynamischen balken realisiere
hallo,
so ich hoffe erst mal, dass ich den themenbereich und das thema einigermaßen treffend gewählt habe.
zu meinem problem (wird durch die skizze hoffentlich verdeutlicht):
also ich habe einen kontent-bereich (skizze: grüner kasten) auf meiner seite, der im browserfenster immer absolut mittig positioniert ist (horizontal u. vertikal).
das ist kein problem, den hab ich mit css so positioniert, dass er egal wie gross das fenster ist, immer mittig ist.
nun will ich aber vom linken rand des browserfensters bis hin zum anfang des kontent-containers einen einfarbigen balken realisieren, der halt mit der fenstergröße mitwächst oder eben schrumpft. die höhe des balkens ist die gleiche wie die des containers. ich habe den in der skizze grau dargestellt.
ich hab an eine lösung der art gedacht, dass ich ein gif mache, das die höhe des containers und die breite 1 hat und dass dan hintereinander gereiht wird. hab aber keine idee, wie ich das machen soll.
für eure hilfe wäre ich euch sehr dankbar.
greetz
anian
-
Hallo anian ,
das ist kein problem, den hab ich mit css so positioniert, dass er egal wie gross das fenster ist, immer mittig ist.
er hat also auch eine feste Höhe?
nun will ich aber vom linken rand des browserfensters bis hin zum anfang des kontent-containers einen einfarbigen balken realisieren, der halt mit der fenstergröße mitwächst oder eben schrumpft.
ich hab an eine lösung der art gedacht, dass ich ein gif mache, das die höhe des containers und die breite 1 hat und dass dan hintereinander gereiht wird. hab aber keine idee, wie ich das machen soll.
Es könnte so gehen: nimm ein sehr breites Hintergrundbild mit genau der Höhe des Containers. Teile es so zweifarbig auf, wie ich das mit http://www.greenjolly.de gemacht habe. Dann positioniere es als Hintergrundbild mit
body { background-image:url(background.png); background-repeat:no-repeat; background-position: center 200px; }wobei die 200 Pixel bei background-position dem Wert entsprechen sollten, den Du für die vertikale Positionierung des mittigen divs gewählt hast.
Das ganze setzt natürlich voraus, daß Dein Content-Container nicht transparent ist, er sollte mit seiner Hintergrundfarbe den überlappenden Teil des Hintergrundbildes verdecken.
Gruß aus Köln-Ehrenfeld,
Elya
-
Hallo anian,
schau dir mal http://d-graff.de/selfhtml/center4.html an.
Die Lösung gefällt mir zwar nicht wirklich, weil sie so viele Elemente (Divs)
enthält, die nur dem Layout dienen, dürfte aber das tun, was du willst.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin! -
danke euch beiden für die antworten.
ich denke ich werds mit der lösung von dethlef versuchen.muchas gracias vom schliersee
anian-
Hallo,
das hier finde ich auch eine schöne saubere Lösung.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> [code lang=css]<style type="text/css"> <!-- body { margin:0; padding:0; } table { width:100%; height:100%; border-collapse:collapse; } .zeileOben,.zeileUnten { height:auto; } .zelleLinks,.zelleRechts { width:auto; } .zelleLinks { background-color:gray; } .zelleMitte { background-color:green; width:300px; height:200px;} --> </style></head>
<body>
<table>
<tr class="zeileOben"><td colspan="3"></td></tr>
<tr>
<td class="zelleLinks"></td>
<td class="zelleMitte">Inhalt</td>
<td class="zelleRechts"></td>
</tr>
<tr class="zeileUnten"><td colspan="3"></td></tr>
</table>
</body>
</html>[/code]Gruß von Aybee
-