kostenloser Webspace werbefrei: lima-city


CSS - Mehrere DIVs untereinander mit Freiräumen dazwischen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    der-kay

    Kostenloser Webspace von der-kay

    der-kay hat kostenlosen Webspace.

    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.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. c**********h

    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 .
  4. Autor dieses Themas

    der-kay

    Kostenloser Webspace von der-kay

    der-kay hat kostenlosen Webspace.

    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.
  5. e******a

    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.
  6. Autor dieses Themas

    der-kay

    Kostenloser Webspace von der-kay

    der-kay hat kostenlosen Webspace.

    Wow... und das sogar noch mit Listen ( mittlerweile meine Todfeinde ) ;-)

    Tausend Dank, euphoria, du hast mein Problem gelöst :biggrin:


    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 ?
  7. e******a

    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
    overflow:hidden;
    bei den Linksoder einer
    max-height
    und
    max-width
    Angabe im Body verhinden.
    Oder aber du setzt die Zeichengrösse auch auf einen relativen Wert.

    position
    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.)
  8. Autor dieses Themas

    der-kay

    Kostenloser Webspace von der-kay

    der-kay hat kostenlosen Webspace.

    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]
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!