Problem mit div



  • <html>
    <head>
    <title>hhhhhh</title>
    </head>
    <body style="color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee"
    vlink="#551a8b">
    <div style="margin: 0pt auto; width: 700px;">
    <div
    style="left: 9px; height: 24px; width: 180px; background-color: rgb(255, 204, 0);"></div>
    <br>
    <div
    style="left: 9px; height: 168px; width: 180px; background-color: rgb(255, 255, 51);">
    </div>
    <br>
    <div
    style="left: 9px; height: 585px; width: 180px; background-color: rgb(255, 255, 51);">
    </div>
    <br>
    </div>
    </body>
    </html>
    

    Also mann soll die entfernung (abstand) zu den einzelden div selber bestimmen können (und nicht durch <br>),
    ausserdem will ich noch eine reihe div rechts daneben haben.

    ++++++ ++++++
    +----+ +----+
    +----+ +----+
    +----+ +----+
    ++++++ ++++++

    so halt ... ein abgleich ... ein div nben den andern (die formatierung soll aber einzeld da sein).

    Ich hoffe man versteht was ich will und möchte mich mal im vorraus bedanken



  • hmm ... das "bild" is nicht so wirklich richtig 🙂 :

    +++++  +++++  +++++
     +---+  +---+  +---+
     +---+  +---+  +---+
     +++++  +++++  +++++
    
     +++++  +++++  +++++
     +---+  +---+  +---+
     +---+  +---+  +---+
     +++++  +++++  +++++
    
     +++++  +++++  +++++
     +---+  +---+  +---+
     +---+  +---+  +---+
     +++++  +++++  +++++
    


  • Nennt man auch Tabelle (<table>) 🙄

    mehr Infos wären gut, z.B. sollen alle DIVs gleich breit und gleich hoch sein?



  • Über float kannst du mehrere DIVs nebeneinander platzieren und mit margin kannst du dann den Abstand dazwischen festlegen...



  • Neku ... ich sagte <div> nicht <td><tr> 🙄

    Ich habe mir schon sehr oft sagen lassen das man das mit float macht, aber ich komme ehrlich nicht dahinter 😞 ... kann man mir mal ein beispiel zeigen?
    da muss auch nichts großes diviniert sein (größe, farbe etc ... das kann ich selber)



  • *edit* geht nicht im IE6, erst ab IE7 (:

    Kleine Spielerei:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
     <head>
      <title>DIV-Test</title>
      <style type="text/css">
       <!--
       body
       {
         background: #000;
       }
    
       #left
       {
         float:        left;
         margin-right: 20px;
       }
    
       #right
       {
         float:       right;
         margin-left: 20px;
       }
    
       #left>div, #right>div
       {
         background:    #FC0;
         height:        24px;
         margin-bottom: 20px;
         width:         180px;
       }
    
       #left>div+div, #right>div+div
       {
         background: #FF3;
         height:     168px;
         width:      180px;
       }
    
       #left>div+div+div, #right>div+div+div
       {
         background: #FF3;
         height:     585px;
         width:      180px;
       }
    
       #center>div
       {
         background:    #ABC;
         height:        150px;
         margin-bottom: 20px;
       }
       -->
      </style>
     </head>
     <body>
      <div id="left">
       <div></div>
       <div></div>
       <div></div>
      </div>
      <div id="right">
       <div></div>
       <div></div>
       <div></div>
      </div>
      <div id="center">
       <div></div>
       <div></div>
       <div></div>
      </div>
     </body>
    </html>
    


  • nein, dass geht nicht ... wird total anders angeziegt als ich das haben wollte ...
    ach ne ... da wird blos ein schwarzer hintergrund angezeigt



  • Hab doch geschrieben dass der IE6 unfähig ist...
    Wenn du schon etwas mit DIVs aufbauen möchtest nimm den IE7, sonst wirst du Stunden damit verbringen, das für den IE6 kompatibel zu machen!



  • ich benutze den firefox 😉 ... bitte was richtiges



  • Sieht bei mir im Firefox anders aus als im IE7, aber definitiv nicht nur schwarz!



  • Nun sieht es im IE7 und im FF gleich aus:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
     <head>
      <title>DIV-Test</title>
      <style type="text/css">
       <!--
       body
       {
         background: #000;
         margin:     20px;
       }
    
       #left
       {
         float:        left;
         margin-right: 20px;
       }
    
       #center
       {
         margin-left:  200px;
         margin-right: 200px;
       }
    
       #right
       {
         float:       right;
         margin-left: 20px;
       }
    
       #left>div, #right>div
       {
         background:    #FC0;
         height:        24px;
         margin-bottom: 20px;
         width:         180px;
       }
    
       #left>div+div, #right>div+div
       {
         background: #FF3;
         height:     168px;
         width:      180px;
       }
    
       #left>div+div+div, #right>div+div+div
       {
         background: #FF3;
         height:     585px;
         width:      180px;
       }
    
       #center>div
       {
         background:    #ABC;
         height:        150px;
         margin-bottom: 20px;
       }
       -->
      </style>
     </head>
     <body>
      <div id="left">
       <div></div>
       <div></div>
       <div></div>
      </div>
      <div id="right">
       <div></div>
       <div></div>
       <div></div>
      </div>
      <div id="center">
       <div></div>
       <div></div>
       <div></div>
      </div>
     </body>
    </html>
    


  • es soll nicht eins ganz link und eins ganz rechts sein. sondern in der mitte und 3 stück nicht 2



  • Sind doch 3 links, 3 mittig, 3 rechts.


Log in to reply