CSS Problem - verschiedene Background Repeats

GFXShorty · 19. März 2010, 15:07

Hallo Leute,

ich habe mal wieder ein kleines CSS Problem ich denke das sollte für euch kein Problem sein.

Ich möchte via css einen Background repeat erstellen. Das eine als repeat-x und das andere als repeakt unter dem mit dem repeat-x. Bei fragen fragt mich

Quellcode

body {
background-image: url(1.jpg);
background-repeat: repeat-x;
background-image: url(2.jpg);
background-repeat: repeat;
}

nur wenn ich das ganze so mache wird immer eines der beiden repeats überschrieben.

so und noch ein kleines ;),

wie kann die die blaue BOX an die dunkelgraue Box anhängen ohne das sich die dunkelgraue bei automatischer Verlängerung Pufferprinzip darüber schiebt!?

[Blockierte Grafik: http://www9.picfront.org/picture/wJ6Ungxi/thb/boxen.JPG]

mad · 19. März 2010, 20:25

Du musst zwei verschiedene Klassen definieren, innerhalb einer Klasse werden doppelte Definitionen überschrieben.

Allerdings weiß ich nicht, ob deine Herangehensweise so sinnvoll ist. Erstens solltest du bei einfachen Farben auch Farben nutzen und keine Bilder. Dann musst du mal zeigen, wie dein HTML aussieht, denn so richtig verstehe ich noch nicht, was du eigentlich erreichen willst.

GFXShorty · 21. März 2010, 13:59

Hai,

okay dann will ich dir das nocheinmal genauer Erklären:

1. mit dem Footer das der immer am Content hängt, ist so gemeint siehe Bild:
[Blockierte Grafik: http://www9.picfront.org/picture/7GqkJ4Dn/thb/bild.JPG]

2.das mit dem Background repeat war so gemeint, bzw ich möchte diese BG realisieren können:
[Blockierte Grafik: http://www7.picfront.org/picture/epmBhoznn/thb/bg.JPG]

Bisheriger Code:

Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CCS</title>
<style type="text/css">
<!--
#login {
position:absolute;
width:1006px;
height:28px;
z-index:1;
left: 150px;
top: 0;
background-image: url(images/bg_login.jpg);
}
#bilder {
position:absolute;
width:803px;
height:153px;
z-index:2;
left: 150px;
top: 28px;
background-image: url(images/bilder_angeln.jpg);
}
#veranstaltung {
position:absolute;
left:953px;
top:28px;
width:203px;
height:153px;
z-index:3;
background-image: url(images/veranstaltungen.jpg);
}
#navi {
position:absolute;
left:150px;
top:181px;
width:1006px;
height:34px;
z-index:4;
}
#ueber_co {
position:absolute;
left:150px;
top:215px;
width:1006px;
height:23px;
z-index:5;
background-image: url(images/content_oben.jpg);
}
#content {
position:absolute;
left:150px;
top:238px;
width:1006px;
height:145px;
z-index:6;
background-image: url(images/puffer.jpg);
}
#footer {
position:absolute;
left:150px;
top:436px;
width:1007px;
height:40px;
z-index:7;
background-image: url(images/footer.jpg);
}
#content p {
color: #F00;
}
-->
</style>
</head>
<body style="text-align:center;">
<div style="width:1006px;margin:0px auto;text-align:left;">
<div id="login"></div>
<div id="bilder"></div>
<div id="veranstaltung"></div>
<div id="navi"><img src="images/der_verein.jpg" width="131" height="34" /><img src="images/berichte.jpg" width="112" height="34" /><img src="images/termine.jpg" width="112" height="34" /><img src="images/bildergallerie.jpg" width="155" height="34" /><img src="images/sonstiges.jpg" width="131" height="34" /><img src="images/navigation.jpg" width="365" height="34" /></div>
<div id="ueber_co"></div>
<div id="content">
<p> </p>
<p> </p>
<p>HIER IST DER CONTENT - und der FOOTER soll immer an diesem Hängen auch wenn der CONTENT sich automatisch verlängert</p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="footer"></div>
</div>
</body>
</html>

Alles anzeigen

Torben Brodt · 21. März 2010, 16:37

Dazu solltest du dann keine DIVs in der Y-Achse übereinander platzieren. Sondern stattdessen mit der Z-Achse arbeiten.
Deinen grauen Fade Hintergrund machst du als Hintergrund vom gesamten Container (body?) und das andere DIV platzierst du einfach am boden.
Lg

GFXShorty · 22. März 2010, 10:17

Hai d0nut könntest du mir bitte ein einfaches BSP als codegeschnipsel geben oder eine Seite wo ich alles sehr gut nachlesen kann? CSS4U usw. kenn ich...

Wär sehr nett, vielen Dank Nick.

Torben Brodt · 22. März 2010, 18:08

naja, in etwa so

Quellcode

<div style="background-image:url(foo);position:relative">
content
<div style="background-image:url(foo);position:absolute;left:0px;bottom:0px">
bottom
</div>
</div>

GFXShorty · 22. März 2010, 19:00

d0nut schrieb:

naja, in etwa so

Quellcode

<div style="background-image:url(foo);position:relative">

content

<div style="background-image:url(foo);position:absolute;left:0px;bottom:0px">

bottom

</div>

</div>

Okay diesen Teil habe ich verstanden, aber das mit dem Layout noch nicht so ganz:

zum einfachen Verständnis, ich möchte dieses Layout mit CSS realisieren und komplett auf Tabellen verzichten: LINK KLICK

bisher habe ich es wie dieses mit Photoshop erstellt dannach gesliced und Tabellen erstellt und meine Bilder als Background-image gesetzt! Nun möchte ich das aber mit CSS Boxen realisieren, jedoch weiß ich nicht wie ich da eine Art Puffer realisieren.

Torben Brodt · 22. März 2010, 20:19

Puffer realisieren? Ich weiß noch nicht wo das problem ist.
Poste doch schonmal deine css anfänge und versuche, dann dazu konkretere fragen zu stellen.
Mein code hat ein großes hintergrundbild mit dem muster, und im container am boden der seite gibt es den footer mit grünem hintergrund.

GFXShorty · 22. März 2010, 21:28

So das mit dem Puffer habe ich hinbekommen jetzt stimmt nur noch was mit dem BG nicht,

ich habe jetzt via

Quellcode

body {
margin-top: 0px;
margin-bottom: 0px;
background-image: url(bg/2.jpg);
background-repeat: repeat;
}

den grauen Hintergrund eingefügt [Blockierte Grafik: http://www9.picfront.org/picture/hFUtZENU/thb/boxen.JPG], jedoch fehlt mir jetzt immernoch dieser Verlauf von dem grün in das graue welche sich am oberen Rand befinden soll und eine repeat-y eigenschaft besitzen soll! [Blockierte Grafik: http://www11.picfront.org/picture/zDeWIBJUJ/thb/bg.JPG]

Torben Brodt · 23. März 2010, 18:32

Schau nochmal in posting nr. 6
wenn du dort bottom durch top ersetzt und dahinter noch ein background-repeat:repeat-x ergänzt, dann bist du fertig: -)

GFXShorty · 24. März 2010, 17:54

hey d0nut ist aufjedenfall ganz cool und hat soweit geklappt, nur meine gesamte Seite ist jetzt links angeordnet da die gesamte Seite sich im div befindet und dieser mit left:0px angegeben ist, jedoch würde ich dennoch gerne meine Seite mittig haben!

[Blockierte Grafik: http://www9.picfront.org/picture/R6Ax8r9uO/thb/hmm.JPG]

<div style="background-image:url(bg/1.jpg);position:absolute;left:0px;top:0px;background-repeat:repeat-x">
content
</div>

Torben Brodt · 24. März 2010, 18:20

zentriert ausrichten tust du mit: margin-left:auto; margin-right:auto;
siehe dazu aktuell.de.selfhtml.org/artikel/css/ausrichtung/

GFXShorty · 24. März 2010, 20:51

hmm..

jetzt sieht es so aus mit dem BG?

casting-club-saalfeld.de/ccs

GFXShorty · 1. April 2010, 09:24

d0nut hast du noch ne idee? Der streifen ist jetzt nur rechts

Torben Brodt · 1. April 2010, 18:39

ja, warum ist dein background div denn innerhalb des wrappers. Der Wrapper beginnt eben in der Mitte - und nicht ganz links.

CSS Problem - verschiedene Background Repeats

CSS Problem - verschiedene Background Repeats

Quellcode

Quellcode

Quellcode

d0nut schrieb:

Quellcode

Quellcode

Teilen

Benutzer online 2

Tags