[CSS] Positionierung von divs

[Sinane]

Huhu,

hab da (mal wieder) ein Problem:

Ich will rechts ein div machen, welches ein Werbebanner enthalten soll, allerdings sollen links davon sowohl Navigation als auch Inhalt liegen.
So siehts aus:



Wie bekomme ich das schwarze Rechteck da unten weiter hoch?


GRUß Sinane

 

[MyBad]

AW: [CSS] Positionierung von divs

Zeig uns doch mal deinen Quelltext (HTML & CSS)!

 

[Gegenstrom]

AW: [CSS] Positionierung von divs

so wie ich das vom screen sehe, hast du den werbebanner gefloatet

spontaner lösungsansatz
<div class="container">
<div class="header"> </div>
<div class="navi"> </div>
<div class="content"> </div>
</div>
<div class="werbung"> </div>
damit kannste in den container alles reinpacken was zu deiner eigentlichen seite gehört und den werbebanner haste seperat daneben und floatest den dann links
da er nicht im container drin ist, floatet sich der banner dann nur an den container

 

[Sinane]

AW: [CSS] Positionierung von divs

Container schmaler und Rest daneben... Das klingt plausibel Aber zwei Fragen noch: Wird dieses div auch größer, wenn der Container grüßer wird? Und wenn nein: Kann iiiiiirgendwie überprüfen, wie groß ein div ist?

Warum? Das div rechts mit der Werbung soll 600px hoch sein. Cool wäre, wenn man dann schauen könnte, ob der Container größer ist, und wenn ja, dass dann ein weiteres div unter dem Werbebanner angezeigt wird.

 

[micr0]

AW: [CSS] Positionierung von divs

Wenn ich richtig verstanden habe suchst du diese Lösung. Ist wirklich simple und effektiv. Simple Clearing of Floats

Du packst alle divs (am besten mit einem float definieren) die unten gleich enden sollen in einen divcontainer und definierst diesen dann in deinem CSS stylesheet mit overflow:auto ....

So wird die rechte braune werbefläche genau so lang sein wie dein Inahltscontainer!

gruss micr0

 

[PCFreund]

AW: [CSS] Positionierung von divs

Ich mach das immer mit 'ner absoluten Positionierung (position: absolute und dann mit margin-top und margin-left anpassen, ...
Ist wirklich Simple und ich komm selber ganz gut damit zurecht :lol:

 

[fexx]

AW: [CSS] Positionierung von divs

Ich mach das immer mit 'ner absoluten Positionierung (position: absolute und dann mit margin-top und margin-left anpassen, ...
Ist wirklich Simple und ich komm selber ganz gut damit zurecht :lol:

Das ist aber nicht die beste Lösung ... Ich würde die divs floaten ... Damit sie zueinander relativ positioniert sind Lediglich den werbungs DIV könnte man absolute positionieren, damit er im
Quelltext unten auftaucht ...

 

[Sinane]

AW: [CSS] Positionierung von divs

Hm also das hat jetzt erstmal geholfen, alles ist richtig positioniert.



Jetzt steht nur noch die Frage im Raum: Wenn z.B. der Inhalt größer ist als das Werbebanner Richtung unten, gibt es ne Möglichkeit, ein div nur dann anzuzeigen, und zwar so, dass die Werbung nicht versteckt angezeigt wird, wenn nur das 120x600-Banner angezeigt wird? Denn soweit ich weiß, ist das bei den Advertisern nicht gerne gesehen und führt bei Affiliate-Managern zum Ausschluss.

 

[fexx]

AW: [CSS] Positionierung von divs

Was genau meinst du? Also, ich dich richtig verstanden habe, dann kannst du dem werbe DIV durch seinen content definieren ... Also Höhe und breite ... Dann ist er quasi nicht da (sichtbar), wenn kein Banner drin ist ... Vorrausgesetzt er hat keine styles wie Background oder padding etc. ... dann würde ich ihn aber auf jeden Fall absolute positionieren ... Sonst konnte es zum Problem kommen, wenn er keinen Inhalt hat ;-)

 

[Sinane]

AW: [CSS] Positionierung von divs

Ja, das könnte ich, aber es soll ja dann, wenn der Content nicht höher als das Werbebanner ist, nicht angezeigt werden, aber auch nich versteckt, so dass kein View gezählt wird. Aber ich glaube, das ist 'ne Angelegenheit für PHP/JS, ich weiß nur nich, ob ich die Frage im entsprechenden Unterforum nochmal posten soll oder das hier stehen lassen soll...

Aber jetzt was anderes:



Bei Pfeil 1 - Der Abstand sollte eig nur 4px haben, sow wie über dem dunklen div, aber offenbar ist das mehr. Daher ist denk ich mal auch bei Pfeil 2 der Abstand da, der aber eig nur entstehen dürfte, wenn der Content größer wird (sieht genauso aus, wenn ich das Video rausnehme, also ist der Content nicht übergroß). Leider finde ich den Fehle nicht....

Code dazu:

<div id="outer">
<div id="header">&nbsp;</div>
<div id="container">
         <div id="topnav">$topnav</div>
         <div id="navigate">$navigate</div>
         <div id="content">$site_content</div>
</div>
<div id="rightad">&nbsp;</div>
<div id="footer">$footer</div>
</div>

#outer {
         margin: 0px auto;
         width: 850px;
}

#container {
         margin: 0px auto;
         width: 730px;
         align: center;
         min-height: 400px;
         background: none;
         float: left;
}

#header {
         margin: 0px auto;
         width: 100%;
         height: 175px;
         background: url(../images/header.png) no-repeat center top;
         overflow: hidden;
}

#topnav {
         margin: 0px auto;
         width: 730px;
         height: 40px;
         align: center;
         background: url(../images/topnav.png) no-repeat;
         border: none /*1px solid #800000*/;
}

#navigate {
         margin: 4px auto 4px;
         width: 714px;
         height: 20px;
         background: #000;
         filter:alpha(opacity=75);
         -moz-opacity:0.75;
         -khtml-opacity: 0.75;
         opacity: 0.75;
}

#content {
         margin: 0px auto;
         width: 730px;
         min-height: 532px;
         background: url(../images/content-bg.png) repeat;
         border: none;
}

#rightad {
         margin: 0px auto;
         width: 120px;
         min-height: 600px;
         background: #906F6F;
         border: none /*1px solid #800000*/;
         float: left;

}

#footer {
         margin: 0px auto;
         width: 850px;
         min-height: 100px;
         background: url(../images/content-bg.png) repeat;
         clear: both;
}

 

[Sinane]

AW: [CSS] Positionierung von divs

Mhm weiß keiner? :''(

 

[fexx]

AW: [CSS] Positionierung von divs

gib mal bitte deinen link ...

 

[Sinane]

gib mal bitte deinen link ...

Siehe Post 8^^

Bitte, ich muss das mal fertig bekommen, aber ich finde keine Lösung...