• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Alle Boxen anzeigen bei veränderung von der Browsergröße

supra93

Neues Mitglied
Moin,
ich lerne momentan html und css. Dies ist mein erstes "Thema". Da ich einfach zu keiner Lösung komme, dachte ich ich versuche mal mein Glück.
Mein Code:
HTML:
<html>
<head>
<link href="boxdesign.css" type="text/css" rel="stylesheet"></link>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Boxen</title>
</head>
<body>

        <div id="box1">1</div>
        <div id="box2">2</div>
        <div id="box3">3</div>
        <div id="box4">4</div>
        <div id="box5">5</div>
        <div id="box6">6</div>
        <div id="box7">7</div>
        <div id="box8">8</div>
        <div id="box9">9</div>


</body>
</html>

CSS:
Code:
#box1 {
        background-color: green;
        min-width: 100px;
        height: 30px;
        position: absolute;
}

#box2 {
        background-color: yellow;
        min-width: 100px;
        height: 30px;
        position: absolute;
        margin-left: 200px;
}

#box3 {
        background-color: red;
        min-width: 100px;
        height: 30px;
        position: absolute;
        margin-left: 400px;
}

#box4 {
        background-color: brown;
        min-width: 100px;
        height: 30px;
        position: absolute;
        margin-left: 600px;
}

#box5 {
        background-color: purple;
        min-width: 100px;
        height: 30px;
        position: absolute;
        margin-left: 800px;
}

#box6 {
        background-color: maroon;
        min-width: 100px;
        height: 30px;
        position: absolute;
        margin-left: 1000px;
}

#box7 {
        background-color: blue;
        min-width: 100px;
        height: 30px;
        position: absolute;
        margin-left: 1200px;
}

#box8 {
        background-color: lightblue;
        min-width: 100px;
        height: 30px;
        position: absolute;
        margin-left: 1400px;
}

#box9 {
        background-color: teal;
        min-width: 100px;
        height: 30px;
        position: absolute;
        margin-left: 1600px;
        white-space: nowrap;
}
Mein Problem:
Wenn ich die Seite auf ganzer größe habe kann ich alle Boxen sehen, aber wenn ich sie kleiner mache sehe ich nicht mehr alle, wie kriege ich es hin das die Boxen passend bei veränderung untereinander gereiht werden?

Danke im vorraus.
 
Indem du sie nicht absolut positionierst, sondern floatest. Oder den Weg über "display: inline-block" gehst. Hat allerdings den Nachteil, dass IE<8 nicht immer mitspielt.
 
okey, das mit dem "display: inlineblock" kenn ich leider noch nicht, und float habe ich schonmal benutzt um zu positionieren.
 
Überall 'position:absolute' und 'margin-left: ..px' löschen,
stattdessen überall 'float:left' einfügen. Dann klappt es.
 
Zurück
Oben