nicht angemeldet
3 horizontale Farb-Streifen als BG
Hallo zusammen
ich versuche mittels CSS 3 unterschiedl. breite Farbstreifen über die gesamte Bildschirmbreite zu platzieren.
Ich habe es auch hinbekommen, frage mich allerdings, ob das so "normal" ist bzw ob man ds lieber anders lösen sollte.
Mein CSS
#top1 {
background-color:#ff0000;
width:100%;
height:110px;
position:absolute;
left: 0px;
top: 0px;
}
#top2 {
background-color:#00ff00;
width:100%;
height:20px;
position:absolute;
left: 0px;
top: 118px;
}
#top3 {
background-color:#0000ff;
width:100%;
height:40px;
position:absolute;
left: 0px;
top: 135px;
}
und im HTML dann:
<body>
<div id="top1"></div>
<div id="top2"></div>
<div id="top3"></div>
...
*******
wie gesagt: es funktioniert. Aber "macht man das so"?
danke und gruß
benben
-
Hallo!
wie gesagt: es funktioniert. Aber "macht man das so"?
Wenn die "Balken" wirklich in Pixel bemessen sind würde ich es so machen:
#three_bars {
background:#farbe1 url(two_colors.gif) repeat-x;
}two_colors.gif besteht aus 2 Balken, die Hintergrundfarbe wird darunter angezeigt.
Vorteil: nur 1 Kontainer mit 3 Hintergrundstreifen/-farben über die man noch bequem andere Sachen platzieren kann.
Grüße, Matze
-
servus
#three_bars {
background:#farbe1 url(two_colors.gif) repeat-x;
}super. so hab ichs jetzt gemacht. vielen dank!!
-
Bzw. gleich
body { background:#farbe1 url(two_colors.gif) repeat-x; }Vorteil: überhaupt kein Extra-Container.
Grüße, Christian
-
Bzw. gleich
body {
background:#farbe1 url(two_colors.gif) repeat-x;
}> > »» Vorteil: überhaupt kein Extra-Container. Wenn ich mich nicht irre, darf auch <body> eine id bekommen ;) Grüße, Matze-
Wenn ich mich nicht irre, darf auch <body> eine id bekommen ;)
Perfekt aus der Affäre gezogen. :D
Christian
-
Perfekt aus der Affäre gezogen. :D
Aber nur weil deine Argumentation lückenhaft war ;)
Nein, ich wusste bei der Frage nicht ob der Hintergrund für <body> bestimmt ist.
Ich hatte wegen den merkwürdigen Angaben zur Breite und Position nur den Verdacht.
Um es dann trotzdem noch allgemein zu halten habe ich die ID verwendet.Aber mein Beispiel ist auch nicht "perfekt" und erfordert unbedingt, dass der Inhalt den Kontainer vertikal in der Höhe über das Bild streckt. Mit einer Breite von <body> liegt es dann am Inhalt ob dieser weitere Zeilenumbrüche erzeugt. Ggf. streckt sich der Inhalt auf breiten viewports horizontal und man sieht von den Streifen nichts mehr.
Der selbe Effekt, wenn man nur die Schrift, nicht die Grafiken zoomt.
Der Kontainer (das kann auch <body> sein) verlangt in dem Beispiel also eine mindesthöhe um den gewünschten Effekt zu erzielen.Ich vermute aber der OP liest das hier eh nicht mehr ;)
Grüße, Matze
-
-
-
-