CSS - DIV anordnen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bedarf
blocken
code
container
cooler ansatz
display
gruppierung
jemand
machen
position
problem
rechts code
register
setzen
span
tauschen
unteren rand
unteren span
url
wunderbar ausrichten
-
Servus zusammen.
Das Thema ist sicherlich einigen Leid und ich habe über die Suchmaschinen tausende threads gefunden, aber keine Lösung konnte ich irgendwie für mein Problem anpassen.
Ich bekomme es nicht hin, die DIVs nebeneinander zu setzen UND gleichzeitig die breite dynamisch anzupassen.
Undzwar möchte ich 4 divs in einem Container anordnen und das soll dann am Ende etwa so aussehen:
http://666kb.com/i/c2z1ehe9x8itn9693.gif
So in etwa sieht alles aus, was ich bis jetzt probiert habe:
#div1 { width:256px; float:left; } #div2 { height:256px; float:left; } #div3 { width:256px; } #div4 { } .alldiv { margin:3px; border:1px solid black; }
Falls mir jemand bei der Lösung dieses Problems behilflich sein könnte, wäre ich überglücklich.
Wenn es erstmal eine Lösung gibt, bei der die Zwischenräume wegen den doppelten Margins nicht hinhauen soll mir das auch erstmal recht sein.
Beitrag zuletzt geändert: 15.4.2012 18:09:26 von travianinc -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Evtl die Width überall dort wo du keine feste Width definierst hast auf 100% setzten, und beim div4 fehlt float, und beim div1 ist der wert ja eigentlich überflüssig
Beitrag zuletzt geändert: 15.4.2012 18:18:24 von imho -
Dachte ich auch, aber wenn ich float:left im DIV1 weglasse packt ers in die nächste Zeile...
Wenn ich die width auf 100% setze packt ers auch eins drunter und macht da dann die 100%. -
poste bitte auch mal den ganze htmlcode, evtl hilft das weiter
-
Quelle: travianinc.lima-city.de
HTML
<div class="eve-border" id="main"> <div class="eve-border" id="main-avatar"><img src="img/anonymous.jpg"></div> <div class="eve-border" id="main-charinfo"></div> <div class="eve-border" id="main-navbar"> <ul id="site-navigation"> <li><a href="?site=chars">Chars</a></li> <li><a href="?site=market">Market</a></li> </ul> </div> <div class="eve-border" id="main-content"></div> </div>
CSS
#main { border:1px solid green; position:relative; min-width:800px; min-height:500px; margin:10px 50px 25px; background:black; color:#FFF; } #main-avatar { float:left; width:256px; height:256px; } #main-navbar { clear:both; float:left; width:256px; } #main-charinfo { float:left; height:256px; } #main-content { float:left; } .eve-border { border:2px solid white; margin:3px; }
Beitrag zuletzt geändert: 15.4.2012 20:15:18 von travianinc -
Da ist ein div zuviel
<div class="eve-border" id="main"> <div class="eve-border" id="main-avatar"><img src="img/anonymous.jpg"></div> <div class="eve-border" id="main-charinfo"></div> </div> <- Das müsste weg <div class="eve-border" id="main-navbar"> <ul id="site-navigation"> <li><a href="?site=chars">Chars</a></li> <li><a href="?site=market">Market</a></li> </ul> </div> <div class="eve-border" id="main-content"></div> </div> -
Ich hatte aus dem Div noch nen anderes DIV rausgelöscht, weil es meiner Meinung nach keine ROlle gespielt hat und das ganze nur unübersichtlich gemacht hatte. Das sollte aber eigendlich alles hinhauen. Hatte nur ein /div zu wenig gelöscht.
HTM weiter oben bereinigt.
Vollständiges HTML:
<div class="eve-border" id="main"> <div class="eve-border" id="main-avatar"><img src="img/anonymous.jpg"></div> <div class="eve-border" id="main-charinfo"> <div class="panel login-panel"> <form method="post" action="/"> <label for="username">Username:</label><input type="text" value="" name="username" id="username"> <label for="password">Password:</label><input type="password" value="" name="password" id="password"> <input type="submit" value="Sign In" name="submit"><a href="?register" class="register-button">register</a> </form> </div> <div> <p style="margin:auto; width:500px;">Die alte Seite muss einem neuen Projekt weichen. Die alte Seite ist vorübergehend noch <a href="old/">HIER</a> zu erreichen. Wenn noch Bedarf an Funktionen der alten Seite besteht, dann bitte mit mir (Aduain Travian) per EvE-Mail in Verbindung setzen.</p> </div> </div> <div class="eve-border" id="main-navbar"> <ul id="site-navigation"> <li><a href="?site=chars">Chars</a></li> <li><a href="?site=market">Market</a></li> </ul> </div> <div class="eve-border" id="main-content"></div> </div>
/edit
Das muss doch irgendwie möglich sein.
Mit position:absolute probiert. Erfolg: über top, left, right lassen sich die Border wunderbar ausrichten. Problem: das übergeordnete DIV wird nicht mehr in der Höhe vergrößert sondern bekommt eine Scrollbar.
Mit position Relative probiert. Problem: Das übergeordnete DIV kriegt trotzdem die volle Höhe und am unteren Rand ist alles leer.
Bin jetzt vorerst komplett auf fixe Werte in der Breite übergegangen. Wäre trotzdem schön, wenn jemand eine "flexible" Lösung kennt.
Beitrag zuletzt geändert: 16.4.2012 1:22:38 von travianinc -
Meinst du so was?
<div style="padding-left: 10em; padding-right: 10em;"> <span style="float: left; width: 30%;"> <div style="background-color: red;">Span 1</div> <div style="background-color: blue;">Span 2</div> </span> <span> <div style="background-color: green;">Span 3</div> <div style="background-color: yellow;">span 4</div> </span> </div>
Welcher Browser verwendest du? Für IE ist <span> zwingend.
Edit: Ne war ein Trugschluss. Es geht auch mit <div> und display: inline-block; unter IE
Beitrag zuletzt geändert: 17.4.2012 16:53:18 von mpro -
Das ist ein sehr cooler Ansatz.
Auf verschachtelungen hätte man eigendlich auch selber kommen können. xD
Das Problem was ich damit jetzt noch habe und nicht weg bekomme ist die Größenanpassung der unteren Reihe in der Höhe.
Die Breite funktioniert super!
Ich habe schon versucht die Gruppierung zu tauschen und dann die DIVs im unteren Span auf 100% zu setzen, aber irgendwie klappt das nicht.
<div style="padding-left: 10em; padding-right: 10em;"> <span style="height:256px;"> <div style="background-color:red; height:100%; width:256px; float:left;">oben links</div> <div style="background-color:blue; height:100%;">oben rechts</div> </span> <span> <div style="background-color:green; height:100%; float: left;">unten links</div> <div style="background-color:yellow; height:100%;">unten rechts</div> </span> </div>
Die Höhe von "unten rechts" wird sich je nach Inhalt ändern. Der übergeordnete Span verändert seine Höhe auch, nur "unten links" bleibt immer gleich groß.
Beitrag zuletzt geändert: 17.4.2012 18:01:32 von travianinc -
Ja hab ich nicht bedacht. Hier noch ne alternative. nur das mit dem Border funkt nicht ganz.
<div style="padding-left: 10em; padding-right: 10em;"> <div style="display: block; border: solid;"> <div style="display: inline-block; width: 30%; vertical-align: top; background-color: red;"> Span 1 <p>ösdfkjgb</p> </div> <div style="display: inline-block; width: 69%; vertical-align: top; border-left: solid; background-color: blue;"> Span 2 </div> </div> <div style="display: block; border-left: solid; border-right: solid; border-bottom: solid;"> <div style="display: inline-block; width: 30%; vertical-align: top; background-color: green"> Span 3 </div> <div style="display: inline-block; width: 69%; vertical-align: top; border-left: solid; background-color: yellow;"> Span 4 <p>ödfjgbpö</p> </div> </div> </div>
Ich hoffe ich konnte helfen. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
