css positionierung

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • css positionierung

    moinsen,

    ich habe folgende datei "index.html":

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="main.css" />
    </head>
    
    <body>
    <div class="masterbox">
    	<div class="box1">Box1</div>
    	<div class="box2">Box2</div>
    	<div class="box3">Box3</div>
    	<div class="box4">Box4</div>
    	<div class="box5">Box5</div>
    </div>
    </body>
    </html>
    mit dazugehöriger css datei "main.css":

    Code:
    .masterbox {
    	width: 400px;
    	position: relative;
    }
    .box1 {
    	background-color: #FF99FF;
    	float: left;
    	height: 100px;
    	width: 200px;
    	position: relative;
    }
    .box2 {
    	background-color: #33CCFF;
    	float: left;
    	height: 100px;
    	width: 100px;
    	position: relative;
    }
    .box3 {
    	background-color: #33FF66;
    	float: left;
    	height: 200px;
    	width: 100px;
    	position: relative;
    }
    .box4 {
    	background-color: #003333;
    	float: left;
    	height: 300px;
    	width: 100px;
    	position: relative;
    }
    .box5 {
    	background-color: #990000;
    	float: left;
    	height: 100px;
    	width: 200px;
    	position: relative;
    }
    meine frage ist nun folgende:
    wie kann ich die boxen 4 und 5 direkt unter box 1 und 2 positionieren
    ohne die position pixelgenau (absolut) angeben zu müssen?

    vielen dank im voraus!

    mfG
    Guido

  • #2
    du wirst einen weiteren container brauchen:
    Code:
    <div class="masterbox">
    	<div class="box1">Box1</div>
    	<div class="box2">Box2</div>
    	<div class="box3a">
    	    <div class="box3">Box3</div>
    	    <div class="box4">Box4</div>
    	    <div class="box5">Box5</div>
    	</div>
    </div>
    das float: left auf box3a, bei 3-5 lässt du es weg *ungetestet*
    Kissolino.com

    Kommentar


    • #3
      danke, für die schnell antwort.

      jedoch würde dein vorschlag ja bedeuten, dass box3 die angestammte position verlässt.

      mfG
      Guido

      Kommentar


      • #4
        wieso?
        - box3a "schwebt" neben box2
        - box3 wird oben links in box3a positioniert
        - 4 + 5 darunter

        dein stylesheet musst du schon ein bischen anpassen.

        habs getestet, der mozilla machts einwandfrei ... den ie musst du
        überreden.
        Kissolino.com

        Kommentar


        • #5
          box 4 und 5 gliedern sich dann jedoch trotzdem unter box 3 an , die lücke zu box 1 und 2 ist immer noch da.

          mfG
          Guido

          Kommentar


          • #6
            *grml* ich bin heute etwas verplant, sorry

            probier mal:
            Code:
            .masterbox {
            	WIDTH:300px;
            	position: relative;
            	float: left;
            }
            .masterbox1 {
            	position: relative;
            }
            .masterbox2 {
            	position: relative;
            }
            .box1 {
            	background-color: #FF99FF;
            	float: left;
            	height: 100px;
            	width: 200px;
            	position: relative;
            }
            .box2 {
            	background-color: #33CCFF;
            	float: left;
            	margins:0px;	
            	height: 100px;
            	width: 100px;
            	position: relative;
            
            }
            
            .box3 {
            	background-color: #003333;
            	float: left;
            	height: 300px;
            	width: 100px;
            
            }
            .box4 {
            	background-color: #00FF33;
            	float: left;
            	height: 300px;
            	width: 100px;
            
            }
            .box5 {
            	background-color: #990000;
            	float: left;
            	height: 100px;
            	width: 200px;
            
            }
            
            ....
            <div class="masterbox">
            <div class="masterbox1">
            <div class="box1">Box1</div>
            <div class="box2">Box2</div>
            </div>
            <div class="masterbox2">
            <div class="box4">Box4</div>
            <div class="box5">Box5</div>
            </div>
            </div>
            <div class="box3">Box3</div>
            Kissolino.com

            Kommentar


            • #7
              OffTopic:
              du solltest nicht immer klassen verwenden, wenn du nur genau ein element formatieren willst. dafuer sind IDs gedacht ...
              I don't believe in rebirth. Actually, I never did in my whole lives.

              Kommentar

              Lädt...
              X