nicht angemeldet
Div Boxen horizontal nebeneinander floaten
Hallo,
ich habe ein float Problem komme einfach nicht weiter und wäre euch sehr dankbar für eure Hilfe!
Ich habe mehrere Boxen die ich in zwei übergeordnete Boxen (#mainbox1 und #mainbox2) gesteckt habe.
Nun hätte ich gerne das diese beiden 'mainboxen' nicht untereinander floaten, so wie sie es jetzt gerade tun sondern horizontal nebeneinander.
Könnt ihr mir helfen?
<style type="text/css" media="screen">
#mainbox1
{ background-color: green; margin-right: 20px; list-style-type: none; top: auto; left: 0px; width: 100%; height: auto; min-width: 1250px; float: left }
</style>
<style type="text/css" media="screen">
#mainbox2
{ background-color: red; list-style-type: none; top: auto; left: auto; width: 100%; height: auto; min-width: 1250px; float: left; }
</style>
<style type="text/css" media="screen">
#MUSIC
{ list-style-type: none; z-index: 10; top: 0px; left: 0px; width: 100%; height: 100%; min-width: 1250px; float: left }
#box1
{ text-align: center; list-style-type: none; margin-top: 15%; z-index: 11; right: 0; left: 0; width: 100%; height: auto; }
</style>
<style type="text/css" media="screen">
#VIDEO
{ list-style-type: none; z-index: 10; top: 0px; left: 0px; width: 100%; height: 100%; min-width: 1250px; float: left }
#box3
{ text-align: center; list-style-type: none; margin-top: 15%; z-index: 11; right: 0; left: 0; width: 100%; height: auto; }
</style>
<style type="text/css" media="screen">
#DIARY
{ list-style-type: none; z-index: 10; top: 0px; left: 0px; width: 100%; height: 100%; min-width: 1250px; float: left }
#box5
{ text-align: center; list-style-type: none; margin-top: 15%; z-index: 11; right: 0; left: 0; width: 100%; height: auto; }
</style>
<style type="text/css" media="screen">
#ABOUT
{ list-style-type: none; z-index: 10; top: auto; left: 0px; width: 100%; height: 100%; min-width: 1250px; float: left }
#box7
{ text-align: center; list-style-type: none; margin-top: 15%; z-index: 11; right: 0; left: 0; width: 100%; height: auto; }
</style>
<style type="text/css" media="screen">
#SHOP
{ list-style-type: none; z-index: 10; top: auto; left: 0px; width: 100%; height: 100%; min-width: 1250px; float: left }
#box8
{ text-align: center; list-style-type: none; margin-top: 15%; z-index: 11; right: 0; left: 0; width: 100%; height: auto; }
</style>
<style type="text/css" media="screen">
#SIGNUP
{ list-style-type: none; z-index: 10; top: auto; left: 0px; width: 100%; height: 100%; min-width: 1250px; float: left }
#box9
{ text-align: center; list-style-type: none; margin-top: 15%; z-index: 11; right: 0; left: 0; width: 100%; height: auto; }
</style>
<div id="mainbox1">
<div id="MUSIC">
<div id="box1">
<a href="#" name="1"><img src="dot.gif"></a>
<a href="#" name="2"><img src="dot.gif"></a>
<a href="#" name="3"><img src="dot.gif"></a>
</div></div>
<div id="VIDEO">
<div id="box3">
<a href="#" name="1"><img src="dot.gif"></a>
<a href="#" name="2"><img src="dot.gif"></a>
<a href="#" name="3"><img src="dot.gif"></a>
</div></div>
<div id="DIARY">
<div id="box5">
<a href="#" name="1"><img src="dot.gif"></a>
<a href="#" name="2"><img src="dot.gif"></a>
<a href="#" name="3"><img src="dot.gif"></a>
</div></div>
<div id="ABOUT">
<div id="box7">
<a href="#" name="1"><img src="dot.gif"></a>
<a href="#" name="2"><img src="dot.gif"></a>
<a href="#" name="3"><img src="dot.gif"></a>
</div></div></div>
<div id="mainbox2">
<div id="SHOP">
<div id="box8">
<a href="#" name="1"><img src="dot.gif"></a>
<a href="#" name="2"><img src="dot.gif"></a>
<a href="#" name="3"><img src="dot.gif"></a>
</div></div>
<div id="SIGNUP">
<div id="box9">
<a href="#" name="1"><img src="dot.gif"></a>
<a href="#" name="2"><img src="dot.gif"></a>
<a href="#" name="3"><img src="dot.gif"></a>
</div></div>
-
ich habe ein float Problem komme einfach nicht weiter und wäre euch sehr dankbar für eure Hilfe!
Ich habe mehrere Boxen die ich in zwei übergeordnete Boxen (#mainbox1 und #mainbox2) gesteckt habe.
Nun hätte ich gerne das diese beiden 'mainboxen' nicht untereinander floaten, so wie sie es jetzt gerade tun sondern horizontal nebeneinander.
#mainbox1
{ ... width: 100%; height: auto; min-width: 1250px; float: left }Entferne alles, was die Box breiter werden lässt als gewünscht.
#mainbox2
ditto
#MUSIC
{ ... width: 100%; height: 100%; min-width: 1250px; float: left }ditto
[code lang=html]<div id="mainbox1">
<div id="MUSIC"> <div id="box1"> <a href="#" name="1"><img src="dot.gif"></a> <a href="#" name="2"><img src="dot.gif"></a> <a href="#" name="3"><img src="dot.gif"></a> </div></div>Hast du den Code gebastelt?
Ich habe den Verdacht. nein!mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Ok, ich habe jetzt ein bisschen 'überflüssiges Zeug' entfernt...
Aber gebracht hat das jetzt leider noch nichts.
Die 'mainboxen' liegen immernoch untereinander.
Ich habe es auch schon mit einer absoluten positionierung mit pixelangabe probiert aber das hat ja dann den Nachteil das es auf unterschiedlich großen Bildschirmen überlappt oder zu weit auseinander driftet.
Deswegen will ich es eben mit float probieren.Wie kommst du darauf das ich den Code nicht gebastelt habe?
Ok, ich habe einige Codes per copy-paste eingebaut, aber ansonsten habe ich alles gebastelt.Wie soll ich jetzt mit den Boxen weiter verfahren?
Gruß
-
Moin!
Ok, ich habe jetzt ein bisschen 'überflüssiges Zeug' entfernt...
Was ist den überflüssiges Zeug?
Aber gebracht hat das jetzt leider noch nichts.
Die 'mainboxen' liegen immernoch untereinander.Glaub ich. Alles was Du bisher gepostet hast, lässt vermuten, dass de Boxen gar nicht nebeneinander floaten können. Du setzt a: eine min width die unglaublich groß ist und b: gleichzeitig eine width von 100%. Wie bekommst Du 2 Boxen nebeneinander wenn jede 100% des ihr zur Verfügung stehenden Platzen einnehmen soll, oder sogar mehr, wenn der Platz keine 1250 Pixel breit ist? Scheint nicht zu dem überflüssigem Zeug gehört zu haben. (Obwohl Beat dich drauf hingewiesen hat)
Ich habe es auch schon mit einer absoluten positionierung mit pixelangabe probiert aber das hat ja dann den Nachteil das es auf unterschiedlich großen Bildschirmen überlappt oder zu weit auseinander driftet.
Das hat auch ganz andere Nachteile.
Wie kommst du darauf das ich den Code nicht gebastelt habe?
Das lasse ich mal Beat erklären... :)
Ok, ich habe einige Codes per copy-paste eingebaut, aber ansonsten habe ich alles gebastelt.
Wie soll ich jetzt mit den Boxen weiter verfahren?
Ihnen Platz geben oder sie weniger Platz einnehmen lassen.
Eventuell hast Du Dein Problem nicht genau beschrieben.
--
Signaturen sind blöd!-
Naja, mit überflüssigem Zeug meinte ich Angaben wie: '...top: 0px;...' usw...
Egal.
Das Ding ist, das Die Boxen width:100% haben müssen damit sie sich an die jeweilige Bildschirmauflösung anpassen.
Und die min-width habe ich nur reingeschrieben damit sich die Boxen nicht verschieben wenn man das Browserfenster kleiner macht...Und, ja..ich bin halt eben noch Anfänger...deswegen copy/paste...und viele unlogische Fragen/Aussagen...sorry!
Das ändert sich noch mit der Zeit.-
Das Ding ist, das Die Boxen width:100% haben müssen damit sie sich an die jeweilige Bildschirmauflösung anpassen.
Hallo,
50% + 50% = 100%
VG
-
Naja, mit überflüssigem Zeug meinte ich Angaben wie: '...top: 0px;...' usw...
Egal.
Das Ding ist, das Die Boxen width:100% haben müssen damit sie sich an die jeweilige Bildschirmauflösung anpassen.
Dann erklaer mir mal, wie Du 2 Elemente nebeneinander stellen willst, die jeweils so breit sind, wie die zur Verfuegung stehende Flaeche. Genau das ist Dein Problem. Du erklaerst Hier allerdings nicht, was Deine Absicht ist.
Und die min-width habe ich nur reingeschrieben damit sich die Boxen nicht verschieben wenn man das Browserfenster kleiner macht...
Du meinst, dass die Boxen ihre Groesse nicht veraendern sollen, oder? Verschieben tut sich da wohl eher nix.
Und, ja..ich bin halt eben noch Anfänger...deswegen copy/paste...und viele unlogische Fragen/Aussagen...sorry!
Das ist ja kein Problem.
Erklaeren muesstest Du allerdings mal genau was das mit der Breit auf sich hat.
--
Signaturen sind blöd!
-
-
-
-