Anzeige

CSS-Problem - wo liegt der Haken?

CSS-Problem - wo liegt der Haken? | PSD-Tutorials.de

Erstellt von besito, 12.09.2008.

  1. besito

    besito Nicht mehr ganz neu hier

    Dabei seit:
    11.12.2007
    Beiträge:
    174
    Geschlecht:
    männlich
    Software:
    Quark, Freehand, CS1 on Mac
    Kameratyp:
    Canon irgendwas
    CSS-Problem - wo liegt der Haken?
    Hi, könnt Ihr mir vielleicht helfen?
    ich verzweifle grad an einem CSS-Rätsel und kanns nicht lösen :uhm:

    ich hab ein 2Spalten-Layout, in der linken 2 Boxen untereinander, in der rechten mehrere DIVs
    wenn ich den Boxen in der linken Spalte Höhenwerte (height: ..px) gebe, sitzt der 2. DIV-Kasten in der rechten Spalte bündig mit der Unterkante der 2 Box links
    wieso?

    Screenshot
    [​IMG]

    HTML
    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    4.  
    5.     <head>
    6.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    7.         <link href="css_test.css" rel="stylesheet" type="text/css"/>
    8.     </head>
    9.  
    10.     <body>
    11.    
    12.     <div id="content">    
    13.     <div id="cont_left">
    14.     <div class="shoutbox" id="box_top">
    15.         <p>obere Box</p>
    16.     </div>
    17.        
    18.     <div class="shoutbox" id="box_down">
    19.         <p>untere Box</p>
    20.     </div>
    21.        
    22.     </div>
    23.    
    24.     <div id="cont_right">
    25.         <div class="fotocontainer2">
    26.         <div class="foto"><img src="testbild.png" alt=""/></div>
    27.         <div class="person2"><h2>Name</h2></div>
    28.         <div class="ie_clearing">&nbsp;</div>
    29.         </div>
    30.         <div class="fotocontainer2">
    31.         <div class="foto"><img src="testbild.png" alt=""/></div>
    32.         <div class="person2"><h2>Name</h2></div>
    33.         <div class="ie_clearing">&nbsp;</div>
    34.         </div>
    35.         <div class="fotocontainer2">
    36.         <div class="foto"><img src="testbild.png" alt=""/></div>
    37.         <div class="person2"><h2>Name</h2></div>
    38.         <div class="ie_clearing">&nbsp;</div>
    39.         </div>
    40.     </div>
    41.    
    42.     <div class="ie_clearing">&nbsp;</div>
    43.     </div>
    44.    
    45. </body>
    46.  
    47. </html>
    CSS
    Code (Text):
    1. * { padding: 0; margin: 0; }
    2. .ie_clearing {clear: both;}
    3.  
    4. #content {position: relative; }
    5. #cont_left { float: left; width: 200px; }
    6. #cont_right { margin-left: 237px; position: relative; }
    7.  
    8. .shoutbox { width: 170px; }
    9. #box_top {height: 140px; }
    10. #box_down {height: 160px; }
    11.  
    12. .foto {float: left; width: 200px;}
    13. .person2 {margin-left: 200px; }
     
    #1      
  2. DavidCaspar

    DavidCaspar Webdesigner

    Dabei seit:
    01.11.2007
    Beiträge:
    409
    Geschlecht:
    männlich
    Software:
    Adobe Design Premium CS 5
    Kameratyp:
    Canon EOS 350D
    CSS-Problem - wo liegt der Haken?
    AW: CSS-Problem - wo liegt der Haken?

    Weil du vieleicht mit Position:relative arbeitest? änder das mal, vielleicht hilfts.

    Außerdem fehlt glaub ich ein geschloßenes </div> tag bei dir im genannten quelltext: "content"
     
    Zuletzt bearbeitet: 12.09.2008
    #2      
  3. besito

    besito Nicht mehr ganz neu hier

    Dabei seit:
    11.12.2007
    Beiträge:
    174
    Geschlecht:
    männlich
    Software:
    Quark, Freehand, CS1 on Mac
    Kameratyp:
    Canon irgendwas
    CSS-Problem - wo liegt der Haken?
    AW: CSS-Problem - wo liegt der Haken?

    hmm nee, leider nich
    habs grad noch mal gecheckt
    und eigentlich hatte ich das nur reingenommen in der Hoffnung, es würde helfen, weil mir noch dunkel im Hinterkopf rumgeisterte, dass man das fürs floaten braucht?
    war aber glaub ich Quatsch
    egal: ob mit oder ohne - der Abstand bleibt stur ;-)
     
    #3      
  4. DavidCaspar

    DavidCaspar Webdesigner

    Dabei seit:
    01.11.2007
    Beiträge:
    409
    Geschlecht:
    männlich
    Software:
    Adobe Design Premium CS 5
    Kameratyp:
    Canon EOS 350D
    CSS-Problem - wo liegt der Haken?
    AW: CSS-Problem - wo liegt der Haken?

    NOch nen tipp wie du es eventuell rausfinden kannst:

    Installier das FIrefox Plugin "Webdeveloper Toolbar" für dein FIrefox.

    Dann gehe auf "Outline" und wähle "online Block level elements" aus oder "outline current element" das hilft fast immer :)
     
    #4      
  5. besito

    besito Nicht mehr ganz neu hier

    Dabei seit:
    11.12.2007
    Beiträge:
    174
    Geschlecht:
    männlich
    Software:
    Quark, Freehand, CS1 on Mac
    Kameratyp:
    Canon irgendwas
    CSS-Problem - wo liegt der Haken?
    AW: CSS-Problem - wo liegt der Haken?

    alle DIVs durchgezählt - fehlt nix :eek:)
    hätte ja beim kürzen was wegkommen können
    ich habs auch im Webdevelopper durchgeprüft und bin nicht weitergekommen

    da siehts übrigens so aus:

    [​IMG]
     
    #5      
  6. besito

    besito Nicht mehr ganz neu hier

    Dabei seit:
    11.12.2007
    Beiträge:
    174
    Geschlecht:
    männlich
    Software:
    Quark, Freehand, CS1 on Mac
    Kameratyp:
    Canon irgendwas
    CSS-Problem - wo liegt der Haken?
    AW: CSS-Problem - wo liegt der Haken?

    ach so:
    wenn ich dem obersten DIV rechts eine feste Höhe gebe, funktionierts
    aber das ist ja eigentlich nicht Sinn und Zweck der Sache
     
    #6      
  7. DavidCaspar

    DavidCaspar Webdesigner

    Dabei seit:
    01.11.2007
    Beiträge:
    409
    Geschlecht:
    männlich
    Software:
    Adobe Design Premium CS 5
    Kameratyp:
    Canon EOS 350D
    CSS-Problem - wo liegt der Haken?
    AW: CSS-Problem - wo liegt der Haken?

    Haste die Page online dann guck ich se mir mal mit Firebug etc genauer an wenn du magst.
     
    #7      
  8. besito

    besito Nicht mehr ganz neu hier

    Dabei seit:
    11.12.2007
    Beiträge:
    174
    Geschlecht:
    männlich
    Software:
    Quark, Freehand, CS1 on Mac
    Kameratyp:
    Canon irgendwas
    CSS-Problem - wo liegt der Haken?
    AW: CSS-Problem - wo liegt der Haken?

    danke Dir :eek:)
    hab Dir mal eine PN geschickt
     
    #8      
  9. Jooohny

    Jooohny Gesperrt

    Dabei seit:
    17.06.2008
    Beiträge:
    122
    Geschlecht:
    männlich
    Ort:
    Wenden (Sauerland)
    Software:
    Photoshop CS3 ................ Dreamwaver CS3 ................ Cinema 4D V11 ................
    Kameratyp:
    Samsung NV24 HD
    CSS-Problem - wo liegt der Haken?
    AW: CSS-Problem - wo liegt der Haken?

    Hi bin jetzt zu faul mir deinen Queltext anzuschauen
    denke aber

    SELFHTML: Stylesheets / CSS-basierte Layouts / Mehrspaltige Layouts

    das dir das hilft wen du den boxen die du entweder rechts oder link´s rein machst den wert margin top:zb10px gipst halten die immer zu der oberen box einen 10px apstant und bei dem teil verzieht sich dann auch so nix mehr

    gruß:Jooohny
     
    #9      
  10. Lobster1956

    Lobster1956 ein Hamburger im Erzgebirge Kreativ-Flatrate-User

    Dabei seit:
    24.03.2008
    Beiträge:
    231
    Geschlecht:
    männlich
    Ort:
    Thalheim
    Software:
    Designsuite CS5
    Kameratyp:
    Olympus E-520
    CSS-Problem - wo liegt der Haken?
    Zuletzt bearbeitet: 13.09.2008
    #10      
x
×
×
teststefan