css - ein div zentriert und im body 2 hintergründe auf repead-x, wie kein überlappen

seero · 06.01.2011

hallo freunde der seichten coding fabrik.

ich habe folgendes html/css problem.
ich habe ein div(x) mit wight:100% und height:100% über den ganzen body gespannt.
in diesem div(y) befindet sich ein zweiter, welcher durch magin-left:auto und margin.right:auto zentriert ist.

nun wollte ich zwei hintergründe im div(x), die per repead-x zum div(y) laufen.
diese überlappen sich dann jedoch.

ich hab schon etliches versucht, ich komm einfach nicht weiter :hmpf:

hier noch einmal der code und ein bild zum verständnis.
html

Code:

<body>
    <div id="x">
        <div id="y"></div>
    </div>
</body>

css

Code:

div#x    {
    width:100%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
        background-image:url(img1.jpg), url(img2.jpg);
        background-repeat:repead-x, repead-x;
        background-position:top left, top right;
}
div#y    {
    width:900px;
        height:650px;
        margin-top:30px;
    margin-right:auto;
    margin-left:auto;

Silvio · 06.01.2011

AW: css - ein div zentriert und im body 2 hintergründe auf repead-x, wie kein überlap

seero schrieb:

Code:

div#x    {
    width:100%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
        background-image:url(img1.jpg), url(img2.jpg);
        background-repeat:repead-x, repead-x;
        background-position:top left, top right;
}

Ich habe momentan keine Möglichkeit, Deinen Code zu prüfen, aber hier zwei Anmerkungen:
1. Warum nimmst Du nicht margin:auto;? left und right, muss doch nicht sein

2. Schreibfehler in der CSS, es muss heißen:
background-repeat:repeat-x; (und auch nur einmal)

Ich hoffe, ich habe Dich richtig verstanden und konnte etwas helfen.

seero · 06.01.2011

AW: css - ein div zentriert und im body 2 hintergründe auf repead-x, wie kein überlap

ja da hast du wohl recht, css zu voll gemüllt, wäre auch kürzer möglich

ähm ja sorry war nen tippfehler von mir, aber nu im forum, in der css-datei is richtig geschrieben.
aber dank dir auch aus kleinen fehlern lernt man...

meine fragestellung und das problem bleiben jedoch dennoch weiter bestehen.

stroyer · 06.01.2011

AW: css - ein div zentriert und im body 2 hintergründe auf repead-x, wie kein überlap

wieso spaltest du divx nicht in 50%rechts und 50% links mit zwei hintergründen?
Wäre auch kompatibler...

also zwei divs nebeneinander

sokie · 06.01.2011

AW: css - ein div zentriert und im body 2 hintergründe auf repead-x, wie kein überlap

warum überhaupt einen Div über das gesamte Fenster spannen?

seero · 06.01.2011

AW: css - ein div zentriert und im body 2 hintergründe auf repead-x, wie kein überlap

Okay auch wIeder war, Div(x) line ich mir sparen und es über den Body machen.
DIV(x) in 2 teile packen geht nicht, da ja DIV(y) den stadart relativ zu DIV(x) hat, damit ich es mit Margin zentrieren kann.

stroyer · 06.01.2011

AW: css - ein div zentriert und im body 2 hintergründe auf repead-x, wie kein überlap

es ginge sehrwohl, wenn die zwei teile in einem hintergrund-div sind.

Code:

<body style="width:100%;height:100%;background:...;text-align:center;">
  <div style="width:100%;position:absolute;top:0px;">
    <div style="width:50%;float:left;background:bg1;"></div>
    <div style="width:50%;float:left;background:bg2;"></div>
  </div>
  <div style="width:900px;margin:auto;text-align:left;">
  </div>
</body>

etwas in die richtung stelle ich mir darunter vor.

seero · 06.01.2011

AW: css - ein div zentriert und im body 2 hintergründe auf repead-x, wie kein überlap

au sehr gute idee, hat fast klasse geklappt, muss nur noch nen bissl mit dem z-index fummeln, so dass ich es immer im hintergrund habe und nicht im vordergrund.

aber sehr geile idee.
klar durch die absolute positionierung reißt man den div ja raus aus dem fluss, klar, manchmal ist man wie vernagelt.

danke dir

Problem gelöst :daumenhoch

:

stroyer · 06.01.2011

AW: css - ein div zentriert und im body 2 hintergründe auf repead-x, wie kein überlap

Code:

<body style="(width:100%;height:100%;)background:...;">
  <div style="width:100%;position:absolute;">
    <div style="width:50%;float:left;background:bg1;"></div>
    <div style="width:50%;float:left;background:bg2;"></div>
  </div>
  <div style="width:100%;position:absolute;text-align:center;">
    <div style="width:900px;margin:auto;text-align:left;">
    
    </div>
  </div>
</body>

wenns mich nicht täuscht, müsste es so besser gehen (hatte ich egentlich im Kopf)

sokie schrieb:
warum überhaupt einen Div über das gesamte Fenster spannen?

text-align:center im Body kann bezüglich DIV-Positionierung in manchen Browsern Probleme bereiten.

seero · 06.01.2011

AW: css - ein div zentriert und im body 2 hintergründe auf repead-x, wie kein überlap

wichtig ist mir es zu verstehen und nicht zu kopieren, daher wart ihr mir eine große hilfe, danke, hat alles klasse geklappt.
und ----> ich hab verstanden warum und wieso und mich auch mal wieder dran erinnert, den quelltext nen bissl sauberer zu halten.

Danke danke :danke:

stroyer · 06.01.2011

AW: css - ein div zentriert und im body 2 hintergründe auf repead-x, wie kein überlap

zu verstehen ist das wichtigste.
mit css3 wirds dann noch schöner

Code:

body>div{width:100%;position:absolute;}
body>div:nth-child(2){text-align:center;}
body>div:first-child>div:first-child{width:50%;float:left;background:bg1;}
body>div:first-child>div:nth-child(2){width:50%;float:left;background:bg2;}
body>div:nth-child(2)>div{width:900px;margin:auto;text-align:left;}

Code:

<body>
  <div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div>
    
    </div>
  </div>
</body>