Anzeige

div container nehmen margin nicht

div container nehmen margin nicht | PSD-Tutorials.de

Erstellt von JoLe05, 15.06.2012.

  1. JoLe05

    JoLe05 Nicht mehr ganz neu hier

    Dabei seit:
    18.10.2009
    Beiträge:
    228
    Geschlecht:
    männlich
    div container nehmen margin nicht
    hey leute! immer wieder stoße ich auf folgendes problem bei meinen tryouts Websites zu bauen... Ich habe z.b 2 divs (1x links gefloatet und 1x rechts gefloatet) diese bilden den header... der nächste div sollte dann einen margin-top von 30px haben jedoch klebt dieser div an den beiden anderen! wie genau kann man dieses problem lösen... ich poste euch hier mal den entsprechenden code und danke euch schonmal für die hilfe...

    PHP:
    1.  
    2. <body>
    3. <div id="wrapper">
    4. <div id="social"></div>
    5. <div id="logo"></div>
    6.     <div id="topnavi"><jdoc:include type="modules" name="topnavi" /></div>
    7.     <div id="slider"><jdoc:include type="modules" name="slider" /></div>
    8.     <div id="breadcrumbs"><jdoc:include type="modules" name="breadcrumbs" /></div>
    9.     <div id="content">
    10.         <div id="navi_left"><jdoc:include type="modules" name="navi_left" /></div>
    11.         <div id="contentaaa"><jdoc:include type="component" /></div>
    12.     </div>
    13.     <div id="links"><jdoc:include type="modules" name="links" /></div>
    14.     <div id="footer"><jdoc:include type="modules" name="footer" /></div>
    15. </div>
    16. </body>
    17.  
    und das css
    Code (Text):
    1.  
    2. *{
    3.     margin: 0;
    4.     padding: 0;    
    5. }
    6.  
    7. a {
    8.     text-decoration: none;    
    9.    
    10. }
    11. body{
    12.     background: url(../images/hg-body.jpg);
    13. }
    14.  
    15. #wrapper{
    16.     width: 960px;
    17.     margin: 0px auto;
    18.     height: 1500px;
    19. }
    20.  
    21. #social{
    22.     margin-top: 10px;
    23.     width: 960px;
    24.     height: 50px;
    25. }
    26.  
    27. #logo{
    28.     float: left;
    29.     width: 190px;
    30.     height: 100px;
    31.     background: #FFF;
    32.     margin-top: 10px;
    33.     margin-right: 10px;
    34. }
    35.    
    36. #topnavi{
    37.     float: right;
    38.     width: 760px;
    39.     height: 100px;
    40.     margin-top: 10px;
    41.     background: #FFF;
    42. }
    43.  
    44. #topnavi ul{
    45.     margin-top:10px;
    46.     margin-left: 20px;    
    47. }
    48.  
    49. #topnavi li{
    50.     float: left;
    51.     list-style: none;
    52.    
    53. }
    54.  
    55. #topnavi li a {
    56.     display: block;    
    57.     line-height: 80px;
    58.     font-family: 'Fredericka the Great', cursive;
    59.     font-size: 24px;
    60.     color: #333;
    61.     border: 1px dotted #999;
    62.     text-align: center;
    63.     padding-left: 20px;
    64.     padding-right: 20px;
    65. }
    66.  
    67.  
    68. #slider{
    69.     clear: both;
    70.     width: 960px;
    71.     height: 200px;    
    72.     background: #009;
    73.     margin-top: 20px;
    74. }
    75.  
    76. #breadcrumps{
    77.    
    78. }
    79.  
    80. #content{
    81.      width: 960px;
    82.     height: 200px;    
    83.     background: #009;
    84.     margin-top: 20px;
    85. }
    86.  
    87. #links{
    88.    
    89. }
    90.  
    91. #footer{
    92.    
    93. }
    94.  
    95.  
     
    #1      
  2. Jonnsn

    Jonnsn fortgeschrittener

    Dabei seit:
    08.02.2007
    Beiträge:
    33
    Geschlecht:
    männlich
    Software:
    Photoshop, Gimp, Illustrator, Inkscape, Notepad++, PHPStorm, Eclipse, TYPO3 CMS
    div container nehmen margin nicht
    Zuletzt bearbeitet: 15.06.2012
    #2      
  3. JoLe05

    JoLe05 Nicht mehr ganz neu hier

    Dabei seit:
    18.10.2009
    Beiträge:
    228
    Geschlecht:
    männlich
    div container nehmen margin nicht
    ich habe den slider mit clear: both; doch gecleared und das sollte dann auch funktionieren.... jedoch klebt der container jetzt an div head und logo, der margin wird also nicht genommen

    um es vll besser verständlich zu machen... ich möchte dass der div slider einen margin-top: 20px; von den beiden divs oberhalb hat und nicht das das margin-top vom seitenrand ausgeht...

    Doppelposting zusammengetackert. Verwende den »Bearbeiten«-Button, wenn du etwas ergänzen möchtest.

    Wex
     
    Zuletzt von einem Moderator bearbeitet: 18.06.2012
    #3      
  4. Jonnsn

    Jonnsn fortgeschrittener

    Dabei seit:
    08.02.2007
    Beiträge:
    33
    Geschlecht:
    männlich
    Software:
    Photoshop, Gimp, Illustrator, Inkscape, Notepad++, PHPStorm, Eclipse, TYPO3 CMS
    div container nehmen margin nicht
    AW: div container nehmen margin nicht

    Das war vielleicht nicht ganz deutlich: Das Margin wird beim clearenden Element nicht funktionieren, höchstens du rechnest die Höhe des höchsten floatenden Elements mit ein. Das clearende Element sitzt immer direkt unter dem höchsten floatenden Element. Du müsstest also erst clearen und dann dein Element mit margin-top einbauen.
    HTML:
    1. <div id="topnavi"><jdoc:include type="modules" name="topnavi" /></div>
    2. <div style="clear:both"></div>
    3. <div id="slider"><jdoc:include type="modules" name="slider" /></div>
     
    #4      
  5. JoLe05

    JoLe05 Nicht mehr ganz neu hier

    Dabei seit:
    18.10.2009
    Beiträge:
    228
    Geschlecht:
    männlich
    div container nehmen margin nicht
    AW: div container nehmen margin nicht

    ich habs jetzt genau so gemacht und siehe da es funktioniert.... vielen dank aber ich versteh noch immer nicht ganz warum.... :)
     
    #5      
  6. reimundas

    reimundas Noch nicht viel geschrieben

    Dabei seit:
    01.08.2009
    Beiträge:
    2
    Geschlecht:
    männlich
    div container nehmen margin nicht
    AW: div container nehmen margin nicht

    ganz sauber ist es, wenn du deine beiden float divs, links und rechts, in einen wrapper , sprich ein weiteres div packst. In diesem wrapper kommen dann drei divs, links rechts und ein clear div. Dann sollte es auch browser übergreifend keine Probleme geben.

    Und zum Verständnis:
    Wie soll der div slider auch ein margin-top annehmen, wenn die beiden vor ihm liegenden divs aus gar nicht mehr "real" sind, sondern fließen.
     
    #6      
  7. s4f

    s4f Aktives Mitglied

    Dabei seit:
    14.06.2010
    Beiträge:
    250
    Geschlecht:
    männlich
    div container nehmen margin nicht
    AW: div container nehmen margin nicht

    wenn du links+rechst in ein div packst, dann brauchst du nicht unbedingt ein clear (schöner?ja!).
    das nachfolgende div (mit dem margin-top) kriegt kein float, weil dein wrap nicht gefoatet wurde (nur die kinder vom wrap erben es).

    und es muss nicht immer ein div zum clear missbraucht werden,
    hr tut's auch,
    aber das ist ein altes thema;-)
     
    #7      
  8. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.075
    Geschlecht:
    männlich
    Ort:
    Ö
    div container nehmen margin nicht
    AW: div container nehmen margin nicht

    Zu viele divs sind aber auch nicht wirklich sauber. Und das clear-div kann man sich in 99% der Fälle sparen, es reicht meistens auch aus, dem umschließenden div ein overflow:auto zu geben.
    Clearen an sich ist jedoch nie verkehrt, die leeren clear-divs sind oft unnötig.
     
    #8      
x
×
×