✔ Divs nebeneinander in einer Div

Moin,

solange für den Block #PageContainer keine Startposition von oben festlegt wird, ergibt sich seine Position im Textfluß weiterhin durch die Höhe des vorangegangenen Elements.

Die Box unterhalb von #PageContainer wird dann wiederum mit der entsprechenden top-Deklaration relativ positioniert:

CSS: 
#FootContainer { 
    position:relative;
    top:300px;
}

socke999 hat gesagt.:
ach, ja stimpt, aber im IE muss man erster clip und dann position declarieren ...
Zum Vergrößern anklicken....

Falsch, in welcher Reihenfolge die beiden CSS-Eigenschaften im Regelblock genannt werden, ist unerheblich. Vielmehr müssen bei der clip-Eigenschaft die Kommata zwischen den einzelnen Werten entfernt werden, wenn die Browser im "Standardsmode" laufen (Stichwort: Doctype-Switch).

Im Internet Explorer funktioniert clip im standardkonformen Modus nur dann, wenn bei der Wertzuweisung auf die – gemäß CSS 2.1 nun zwingend vorgeschriebenen – Kommata verzichtet wird. Auch Version 7 ist von diesem Fehler betroffen.
Zum Vergrößern anklicken....

mfg Maik
 
Also ich hab das jetzt mal so gelöst:
Code: 
#PagingBorder
{
	width:400px;
	height:300px;
	border:#333 1px soloid;
}

#PageContainer
{
    width: 1000px;
    height: 302px;
    clip:rect(0px 400px 300px 0px);
	position:absolute;
    overflow:hidden;
}

#PageClear
{
	clear:both;
}

.Page
{
	width:400px;
	height:250px;
	float:left; 
} 

.FooPage
{
	border:#000 1px solid;
	width:500px;
	height:100px;
}
HTML: 
<body>

<a href="#" onclick="javascript:nextPage();">next</a>
<a href="#" onclick="javascript:previousPage();">prev</a>

<div id="PagingBorder">
    <div id="PageContainer">    
            <div id="Page1" class="Page"  style="background-color:#9F3;"> PAGE 1</div> 
            <div id="Page2" class="Page" style="background-color:#03F;"> Seite 2</div>
            <div id="PageClear"></div>
    </div>
</div>

<div class="FooPage">Der text steht wieder drunter </div>
weiter geht der Text hier
</body>

So funktioniert es zumindest das ich nix sonst positionieren muss...
Allerdings hab ich da so ein Abstand zwischen #PagingBorder und FooPage und weiß nicht woher er kommt bzw. wie man ihn verkleinern kann ...
 
Versuch's mal hiermit, damit das Element keinen Raum im Textfluß einnimmt:

Code: 
#PageClear
{
	clear:both;
        font-size:0;
	line-height:0;
	height:0;
	margin:0;
	padding:0;
}


mfg Maik
 
Danke, brauch dann doch keinen Link :-)

Vergleich mal die Höhenangaben der Mutter- und Nachfolgeboxen (.Page) miteinander ;)

mfg Maik
 
Hmm, also ich blick da jetzt nicht mehr so ganz durch =)
also wenn ich die höhe von #PagingBorder anpasse, also bei height: 250px würde es zum Beispiel genau passen dass kein Abstand mehr ist,
aber ich verstehe nicht, wieso! =)

denn mit eine Height von 250px müsste es eingentlich doch noch von #PageContainer verdeckt sein ...

Ach ich hab da jetzt voll den durchblick verloren :confused:
 
Der Abstand ergibt sich einfach durch die diskrepanten Höhenangaben: für die beiden äußeren Boxen existiert eine Höhe von 302px, für die inneren Boxen aber nur 250px, und die Position von .FooPage richtet sich nunmal an der Höhe von #PagingBorder aus.

Entweder senkst du für die beiden äußeren Boxen die Höhe auf 250px ab, oder stockst die Höhe der inneren Boxen .Page um 50px auf, damit sich die Lücke zu .FooPage schließt.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück