CSS - Mehrere DIVs untereinander mit Freiräumen dazwischen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
attribut
bestehen
boxen
code
container
display
element
folgendem problem
header
layout
liste
listen
pixel
position
problem
sagen
setzen
text
verkleinern
-
Hallo liebe Community und CSS-Gurus !
Ich schlage mich seit knapp einer Woche mit folgendem Problem 'rum:
ich möchte, 5 DIVs formatieren.
Eine soll nach recht ( über float:right; kein Problem ), die anderen 4 sollen linksbündig bleiben, untereinander angeordnet werden, zwei sich berührende Boxen brauchen jeweils einen Abstand von 5 px und die letzte Box soll genau mit dem Wrapper indem alle 5 liegen, abschließen.
Margin-top brachte nur mäßigen Erfolg ( beim verkleinern des Fensters verkleinern sich sie 4 linksbündigen Boxen, der Wrapper nicht und somit werden die 4 Boxen dann zu klein.
Mit Listen (ul) hab' ichs auch schon versucht. Versucht und versagt: die einzelnen <li> lassen sich nicht so mit Freiräumen versehen, wie ich das gern' hätte.
Bleibt noch zu sagen: Das ganze Layout soll relativ ( also in % ) umgesetzt werden, damit sich bei egal welcher Auflösung immer in etwa die gleiche Aufteilung ergibt.
Eine Grafik zur Illustration gibt es <a href="http://der-kay.lima-city.de/Grafik.png">Hier</a>.
Falls es keine Patentlösung gibt, wäre auch ein kleiner Workshop "Rechnen mit Margins" ganz toll, denn die verhalten sich leider selten so, wie ich es von ihnen erwarte.
Bin dankbar für jede Idee.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Könntest du mal eine Beispielseite mit Markup und CSS erstellen?
Bei floatenden Boxen musst du generell darauf achten, dass du diese ordentlich clearst, wenn du andere Elemente daran orientieren willst . -
Hier ist das Layout in Aktion:
http://der-kay.lima-city.de/test2.html
in meiner Auflösung passt es ganz genau, ich habe aber auch 'ne kleine Auflösung.
Ich denke bei dir (und allen anderen ) wird's unschön aussehen. -
Ich habe dir mal ein Beispiel zusammengeworfen.. Es scheint sogar sehr gut zu funktionieren, bis auf einen kleinen Pixelrundungsfehler in Webkit.
<!doctype html> <html> <head> <style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0; } #header { position: relative; height: 10%; margin-bottom: -2.5px; padding-top: 2.5px; z-index: 2; background: #aaa; } #footer { position: relative; height: 10%; margin-top: -2.5px; padding-top: 2.5px; z-index: 2; background: #aaa; } #content { height: 80%; background: #bbb; } #wrapper { height: 100%; width: 100%; margin: 0; padding: 0; list-style: none; } #wrapper li { position: relative; height: 25%; width: 20%; background: #ddd; } #wrapper li.right { float: right; } #wrapper a { display: block; position: absolute; bottom: 2.5px; left: 0; right: 0; top: 2.5px; background: #ccc; } #wrapper li.right a { bottom: 0; } </style> </head> <body> <div id="header">Header</div> <div id="content"> <ul id="wrapper"> <li class="right"><a>Nav_1</a></li> <li><a>Nav_2</a></li> <li><a>Nav_3</a></li> <li><a>Nav_4</a></li> <li><a>Nav_5</a></li> </ul> </div> <div id="footer">Footer</div> </body> </html>
Die Theorie dahinter ist, die eigentlichen Links absolut auf den ganzen Container auszubreiten und dann aber oben und unten jeweils 2.5 Pixel abzuziehen. Danach werden der Header und der Footer noch je um 2.5 Pixel vergrössert, damit sie den übrigen Teil verdecken. -
Wow... und das sogar noch mit Listen ( mittlerweile meine Todfeinde )
Tausend Dank, euphoria, du hast mein Problem gelöst
Ich wollte von position eigentlich die Finger lassen, da es in mehreren Quellen im Internet
als unfein bezeichnet wurde.
Ich muss nochmal blöd fragen: trotz Angaben in Pixeln wird die Seite bei jeder Auflösung so dargestellt ? -
Ob es nun Listen sind oder andere Blockelemente ist eigentlich total egal, aber ich verwende für Navigationen gern Listen.
Relativ gesehen ja. Du kannst ja das Browserfenster vergrössern / verkleinern und den Effekt anschauen. Genauso wird es sich auch bei verschiedenen Auflösungen verhalten.
Probleme gibt es nur, wenn das Browserfenster auf ~100px verkleinert wird, da dann der Text überschwappt, aber das kannst du mit
bei den Linksoder eineroverflow:hidden;
undmax-height
Angabe im Body verhinden.max-width
Oder aber du setzt die Zeichengrösse auch auf einen relativen Wert.
unfein? Da würde mich mal interessieren, wieso das so bezeichnet wird. Eines der mächtigsten CSS-Attribute überhaupt, das öfters den Tag rettet. (Sofern richtig benutzt.)position -
Der "überschwappende" Text wird entweder versteckt oder es wird ne Scrollbar an den Container "getackert" das stellt also kein Problem dar.
Auf welcher Website bzw. welchem Blog ich das mit position gelesen habe, lässt sich jetzt leider unmöglich mehr sagen, bei der Masse an Seiten die ich in den letzten Tagen besucht habe.
Ich umgehe, wenn möglich, Listen weil ich versucht habe eine Liste in einen Container zu setzen.
Das war nicht schwer aber nachdem ich die Bullets entfernt, padding für html und body auf null gesetzt und margin für links und rechts auf je 2.5 % gesetzt hatte, bekam ich eine vertikale Scrollbar, obwohl die Liste ja nur aus 4 Elemente bestand und der Container gerade mal 20 % der Seitenhöhe ausmachte.
Und weil ich Scrollbars absolut hasse (jedenfalls da, wo keine hingehören) habe ich auch eine Abneigung gegen Listen entwickelt.
Für horizontale Navigationen mit display:inline sind Listen ja wunderbar, aber vertikal... naja, das Problem ist ja jetzt glücklicherweise gelöst.
[Womit bewiesen wäre: Lima-City hat die beste Community westlich des Urals] -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
