✔ Divs nebeneinander in einer Div

S

socke999

Erfahrenes Mitglied
Hallo,
ich habe ein problem das ich einfach nicht schaff zu lösen:

Und zwar:
Ich möchte mehrere Divs nebeneinander Darstellen:
Code: 
#PageContainer
{
	width: 400px;
	height: 300px;
	border: 1px solid #000;
	overflow:hidden;
}

#PageClear
{
	clear:both;
}

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

Soweit funktioniert das auch, wenn ich z.B. so was mache:
HTML: 
<body>
	<div id="Page1" class="Page"> Seite 1</div> 
 	<div id="Page2" class="Page"> Seite 2</div>
       <div id="PageClear"></div>
<body>

Nun möchte ich das allerdings, diese Divs (class="Page") in eine Div hineinpacken:
HTML: 
<body>
<div id="PageContainer">
	<div id="Page1" class="Page"> Seite 1</div> 
 	<div id="Page2" class="Page"> Seite 2</div>
       <div id="PageClear"></div>
</div>
<body>

Nun plötzlich sind die divs die eigentlich nebeneinander sein sollten nicht mehr nebeneinander, sondern wieder untereinander.

Ich muss irgendetwas bei PageContainer vergessen haben!!
Wenn ich bei PageContainer "display:inline" hinzufügen, sind die DIVs zwar nebeneinander, allerdings wird dann die DIV PageContainer nicht mehr richtig dargestellt.

Jemand ne Idee?
 
Ja und ist das ein Problem?
Ich möchte da mit JavaScript so etwas machen, das ich dann jeweils so nach Links und Rechts die seiten (DIV class="Page") weiterschieben möchte, klingt jetzt ein bisschen kompliziert ...
Deshalb hab ich auch:
#PageContainer{ overflow: hidden; }
sodass sich immer nur 1 Seite, also 1 DIV class="Page", in der PageContainer Div dargestellt wird und die anderen sind dann sozusagen außerhalb des sichtbaren Bereichs von #PageContainer (deshalb overflow: hidden)
 
Zuletzt bearbeitet:
Siehst du doch, dass die gleiche Breite ein Problem darstellt. Ansonsten würdest du dich hier wohl kaum zu Wort melden :rolleyes:

Was du neben einer höheren Breite für #PageContainer benötigst, damit darin alle Nachfolgeboxen in einer Zeile floaten, ist die clip-Eigenschaft, um den Anzeigebereich der Mutterbox zu beschränken, damit darin nur eine der Boxen sichtbar ist.

mfg Maik
 
Hm, ok, aber wenn ich das nun mit clip mache:
Code: 
#PageContainer
{
	width: 1000px;
	height: 300px;
	border: 1px solid #000;
	clip:rect(0px, 400px, 300px, 0px);
}

Dann sind zwar die Page DIVs nebeneinander (wegen der ausreichende width,
aber das clip ansich hat gar nix bewirkt ...
Wieso nur?
 
ach sry, hab ich überlesen,
absolut ist aber in meinem fall etwas doof, da ich die #PageContainer eigentlich unter ein Bild positionieren wollte, aber das Bild kann sich dynamisch ändern, also jederzeit eine andere Höhe bekommen ...

Aber das könnte ich ja noch verkraften bzw. irgendwie mit JavaScript vielleicht hinbiegen,
aber so wie ich das sehe, funktioniert clip gar nicht im Internet Explorer 6 und 7

Ich wollte eigentlich so einen Effekt erzielen wie auf der Webseite:
http://www.gucci.com/de/index2.html
Also so wie da im Menü von Gucci, dass da so die Seiten nach links und rechts rollen.

Das hätte ich versucht mit scriptaculous und protorype zu machen, mit diesen Framework hat es auch Gucci gemacht ...

Weiß jemand wie man so etwas sonst realisieren könnte?
Oder kennt sogar einer schon ein fertiges skript?
Wobei ich es schon lieber selbst machen würde...

Wie nennt man den so was? also de Effekt... Damit ich eventuell nachgooglen kann...
 
Zuletzt bearbeitet:
socke999 hat gesagt.:
aber so wie ich das sehe, funktioniert clip gar nicht im Internet Explorer 6 und 7
Zum Vergrößern anklicken....
Und auch hier hast du den Abschnitt nicht vollständig zu Ende gelesen.

CSS: 
#PageContainer
{
	width: 1000px;
	height: 300px;
	border: 1px solid #000;
	clip:rect(0px 400px 300px 0px);
    position:absolute;
}

... funktioniert im IE einwandfrei.

mfg Maik
 
ach, ja stimpt, aber im IE muss man erster clip und dann position declarieren ...

Ok, vielen dank für die Hilfe,
eine Frage hab ich allerdings noch:

Wegen den Absolut, besteht da eine simple möglichkeit die PageContainer div immer unter einem bestimmten Objekt auszurichten, als ob es nicht "absolut" wäre =)

also zum Beispiel:
ich habe eine DIV mit der id="bild", die enthält ein img tag. Das Image kann sich aber jederzeit ändern, also somit sich auch die Höhe, und ich will dass meine Div PageContainer immer genau unter der Div #bild befindet und dabei auch nicht den Text oder andere inhalte die da noch weiter drunter sein könnten überdeckt?

zum Beispiel:
HTML: 
<body>
<div id="bild">
        <img id="dynamischesBild" src="mein bild,png" alt="" />
</div>

<div id="PageContainer">
        .....
        Die beliebigen inhalte
        ....
</div>

<div>
Hier steht nun ein beliebiger Absatz-Text der nicht von PageContainer überdeckt werden sollte 
</div>
</body>



Geht das irgendwie?

HEHE, also ist schon etwas tricki =)
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück