Anzeige

Divs mit "float" richtig anpassen

Divs mit "float" richtig anpassen | PSD-Tutorials.de

Erstellt von zer02288, 24.06.2011.

  1. zer02288

    zer02288 ZeroEnna

    Dabei seit:
    14.08.2008
    Beiträge:
    177
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe CS4 Collection
    Kameratyp:
    Canon EOS 7D
    Divs mit "float" richtig anpassen
    Hallo Leutz,

    ich hab ne Seite auf der ich gleich große Divs hab die alle der Bildschirmauflösung passend verteilt werden. Wenn man einen anklickt soll er größer werden um mehr Inhalt anzeigen zu können. Der "große" Div sorgt aber dafür das sich die anderen nicht mehr auf der linken Seite verteilen.

    Nun das Problem, wie bekomm ich die speziellen Divs ganz nach links und folgend (sieh Bild)?

    [​IMG]


    (CSS: boxopen ist die große Box ;) )
    PHP:
    1. #box{
    2.    margin-left:15px;
    3.     margin-top:15px;
    4.     width:230px;
    5.     height:200px;
    6.     background:url(../pix/box.png) no-repeat left top;
    7.     float:left;
    8. }
    9.  
    10. #boxopen{
    11.    width:720px;
    12.     height:auto;
    13.     margin-left:15px;
    14.     margin-top:15px;
    15.     background:#F00;
    16.    float:left;
    17. }
    THX für jede Hilfe :D

     
    #1      
  2. MyBad

    MyBad localhorst

    Dabei seit:
    18.12.2006
    Beiträge:
    1.977
    Geschlecht:
    männlich
    Divs mit "float" richtig anpassen
    AW: Divs mit "float" richtig anpassen

    Hi.

    Könntest du noch dein HTML-MArkup posten. So kann dir leider keiner helfen.

    Ich rate aber dennoch mal drauf los:
    Du müsstest eine linke und eine rechte Spalte definieren.
    Links kommen dann die kleinen DIV-Container rein und rechts der Große.
     
    #2      
  3. zer02288

    zer02288 ZeroEnna

    Dabei seit:
    14.08.2008
    Beiträge:
    177
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe CS4 Collection
    Kameratyp:
    Canon EOS 7D
    Divs mit "float" richtig anpassen
    AW: Divs mit "float" richtig anpassen

    Das mit den Spalten geht nicht da der große Div mal rechts und mal links stehen kann.
    Im Prinzip soll der große Div ein angeklickten kleinen Div darstellen. Dadurch kann er mal rechts oder mal links stehen.
    Ist alles noch in Bauphase ;)

    HTML:
    1. <div class="content">
    2.         <div id="box">
    3.             <img src="pix/test.jpg" alt="ZEROENNA Portfolio" id="boxpix" />
    4.             <p id="boxtext">Project Master "Sweat"</p>
    5.             <p id="boxtext2">Short Descript or Underline</p>
    6.         </div>
    7.         <div id="boxopen">
    8.             <img src="pix/test2.jpg" alt="ZEROENNA Portfolio" id="boxopenpix" />
    9.             <p id="boxtext3">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem    
    10.             ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem
    11.             ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem
    12.             ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem
    13.             ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem</p>
    14.         </div>
    15.         <div id="box">
    16.         </div>
    17.         <div id="box">
    18.         </div>
    19.         <div id="box">
    20.         </div>
    21.         <div id="box">
    22.         </div>
    23.     </div>
    Hier mal ein Beispiel für die Funktionsweise und Anordnung der Divs
    Klick Mich
     
    #3      
  4. molly_68

    molly_68 Guest

    Divs mit "float" richtig anpassen
    AW: Divs mit "float" richtig anpassen

    Sowas ist doch am leichtesten mit einer pop-up box oder lightbox zu lösen, denke ich mal so...
     
    #4      
  5. zer02288

    zer02288 ZeroEnna

    Dabei seit:
    14.08.2008
    Beiträge:
    177
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe CS4 Collection
    Kameratyp:
    Canon EOS 7D
    Divs mit "float" richtig anpassen
    AW: Divs mit "float" richtig anpassen

    Daran hatte ich auch schon gedacht aber ich wollte es vermeiden eine pop-up box zu haben. es sollte sich möglichst alles auf der einen seite abspielen. (ich hoffe ihr versteht mich ;) )
     
    #5      
  6. CayZ

    CayZ Pixel Slider

    Dabei seit:
    07.01.2011
    Beiträge:
    216
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Photoshop CS 5; Dreamweaver; C4D R12
    Divs mit "float" richtig anpassen
    AW: Divs mit "float" richtig anpassen

    Naja, aber ich denke mal das es mit einem Jawa-script gelöst wurde...schau doch einfach mal in den Quelltext und google dann die java scripts vllt findest du ja was passendes...
     
    #6      
x
×
×