Einen 100px Streifen oben erzeugen ?

Status
Nicht offen für weitere Antworten.
T

Trash

Erfahrenes Mitglied
Hallo,
ich habe eine Website wo die ersten 109px auf dem Bildschirm also ganz oben am Browser, eine bestimmte Farbe haben soll. Geht das eleganter als eine Tabelle zu erstellen ? Evtl. gibt es in CSS ein Element wo man Höhe und Breite und Abstände zu den Rändern deklarieren kann, so dass der BG in 2 Farben erscheint, die ersten 109 eine Farbe und der Rest in einer anderen...

Danke
 
Wie wärs mit einem div ?
HTML: 
div.header { width:100%; height:109px; background-color:#FFFFFF; }
body { vertical-align:top; }
[...]
<body>
  <div class="header"></div>
</body>
 
Zuletzt bearbeitet:
Hi,
danke für die Antwort. Habe aber noch eine Frage... background-color müsste ich doch problemlos durch background-image ersetzen können oder ? und wie bekomme ich unter <div class="header"></div> noch eine Zeile die ca. 550px groß ist und halt unter dem obigen sitzt ?

es geht ja nicht das ich schreibe height:500px und das ganze dann header2 nenne, es müsste ja sein, ab 109px height:500; oder so ;) Und im moment ist es so, dass der BG der jetzt mit CSS erstellt wurde ganz oben ist und dadrunter die folgende Tabelle kommt, aber die table soll ja auf dem bg liegen ..

Versteht ihr mich ? ;)
 
Zuletzt bearbeitet:
Trash hat gesagt.:
Versteht ihr mich ? ;)
Zum Vergrößern anklicken....
Nein, tun wir nicht (ich nicht)... :confused: Jedenfalls nicht so ganz! :-)

Wie auch immer, Dein erster Post klingt ja so, als ob du ganz oben 109 Pixel eine bestimmte Farbe haben willst und den Rest untendrunter in einer anderen ("so dass der BG in 2 Farben erscheint, die ersten 109 eine Farbe und der Rest in einer anderen").

Dann müsstest Du doch einfach dem normalen body eine background-color verpassen.

Und ja, das kann man natürlich auch durch background-image ersetzen.

Sodale und das hier "es geht ja nicht das ich schreibe height:500px und das ganze dann header2 nenne, es müsste ja sein, ab 109px height:500; oder so" müsste eigentlich schon gehen... In diesem Fall einfach noch ein DIV untendrunter.

"aber die table soll ja auf dem bg liegen"
Eventuell für die Tabelle position:relative setzen und die eigentliche Position mit top und left setzen. :)
 
div.header2 { width:100%; height:550px; background-color:#FFFFFF; position: absolute; top: 109px; }

Das sollte es sein ;)
 
Hi,
ersteinmal Vielen Dank für eure Hilfe es klappt auch schon relativ gut.

Mit

Code: 
<body class="body">
<div class="new_header"></div>
<div class="new_bottom"></div>

hab ich nun 2 durchgehende Background-Bilder untereinander. Das einzige Problem ist die Tabelle die eigentlich darüber liegen soll ... diese wird durch new_header und new_bottom unter diese beiden geschoben. Ich denke das ist somit eigentlich kein wunder, weil der code für die table ja erst danach kommt...also nach den beiden div's ...relative hat nicht geholfen...und was meinst du mit top und left ? die soll einfach in der mitte sitzen und ganz oben das habe ich mit margin-top: 0px; und align="center" im html code eigentlich auch gut hinbekommen ;)) Dadurch das alle Elemente untereinander und nicht übereinander angeordnet werden, reicht bei dem header2 oder in meinem fall bottom auch ein top:0px ;)
 
Zuletzt bearbeitet:
loel jetzt sitzt die Table genau auf dem bg indem ich top:-650px; gemacht habe... Ich habe zwar ein CSS Buch, verstehe aber nicht was position:relative; macht. Da steht "Das Element wird am vorhergehenden Element ausgerichtet".. Weclhes vorhergehende ?
 
Trash hat gesagt.:
loel jetzt sitzt die Table genau auf dem bg indem ich top:-650px; gemacht habe... Ich habe zwar ein CSS Buch, verstehe aber nicht was position:relative; macht. Da steht "Das Element wird am vorhergehenden Element ausgerichtet".. Weclhes vorhergehende ?
Zum Vergrößern anklicken....
Body zum Beispiel. Eben das übergeordnete Element. Also z. B.:
Code: 
<body>
  <table>...</table>
</body>
Will heißen, body ist hier das übergeordnete Element, und die Tabelle wird, sofern position auf relative gesetzt ist, relativ zum body ausgerichtet. Also z. B.:
Code: 
<body>
  <table style="position:relative;top:10px;left:10px;">...</table>
</body>
Dann müsste sich die Tabelle 10 Pixel nach unten rechts verschoben vom Ursprung des body, sozusagen (der oben links ist), befinden.
Naja und so könntest du die Tabelle dann zum Beispiel oben ausrichten.

Die Standardeinstellung position:absolute ist dann wieder ein bisschen was anderes, gell... Da wirken sich die top/left-Werte dann relativ auf die eigentliche (ursprüngliche) Position des Elements aus. Soll heißen: Weil du top:-650px angegeben hast (und position:absolute die Standardeinstellung ist), wurde die Tabelle um 650px nach oben von ihrer eigentlichen Position verschoben.
Ich hoffe, das macht Sinn. :-)
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück