CSS: margin > 0 reisst Lücken ins Layout?

Diskutiere mit über: CSS: margin > 0 reisst Lücken ins Layout? im Web Page Design Forum

  1. 2nd

    2nd Thread Starter MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    Registriert seit:
    25.07.2004
    Hmm, stehe gerade auf dem Schlauch und checks nicht:

    Mein Inhalts DIV hat eine Hintergrundfarbe und li + re Borders mit 1px. So weit, so gut. Wenn ich jedoch eine Headline und einen Absatz einbaue, habe ich über der Überschrift und unter dem Absatz einen Bereich, in dem der Hintergrund und die Borders unterbrochen sind. Setze ich MARGIN/PADDING im CSS von H1 und p auf 0 geht es nahtlos, aber ich brauche natürlich individuelle Abstände.

    HTML:
    #headerHome {
    	position:relative;
    	background-color:#004a80;
    	border-left: 1px #FFFFFF solid;
    	border-right: 1px #FFFFFF solid;	
    }
    
    #contentHome {
    	position:relative;
    	background-color:#004a80;
    	border-left: 1px #FFFFFF solid;
    	border-right: 1px #FFFFFF solid;	
    }
    
    h1 {
    	font-size: 21px;
    }
    
    p {
    	font-size: 12px;
    	color: #77afdb;
    }
    
    
    HTML:
    <div id="headerHome">
       Navigation
    </div>
    
    <div id="contentHome">
    		
       <h1>Willkommen bei uns!</h1>
    
        <p>So schlicht und persönlich kann alles sein...</p>
    </div>
    
    So sieht es zerissen aus:

    [​IMG]

    Mir fällt gerade überhaupt nicht ein, woran das liegen könnte :kopfkratz:
    Jemand eine Idee?

    2nd
     
  2. ThaHammer

    ThaHammer MacUser Mitglied

    Beiträge:
    3.276
    Zustimmungen:
    13
    Registriert seit:
    01.06.2004
    mach mal margin: 0px; bei den Divs.
     
  3. miss.moxy

    miss.moxy MacUser Mitglied

    Beiträge:
    6.558
    Zustimmungen:
    624
    Registriert seit:
    15.05.2004
    Also wenn das ein ähnliches Problem ist, wie das in dem Buch zu
    css-Zengarden, dann wäre padding: 1px 0; auf die divs einen Versuch
    wert… Weiß allerdings nicht, ob das dir was bringt :/
     
  4. 2nd

    2nd Thread Starter MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    Registriert seit:
    25.07.2004
    Hmm, ich habe bei H1 und P den MARGIN auf 0 gesetzt und damit geht es. Die Abstände regulier ich nun über die PADDINGs - so geht es auf jeden Fall erstmal.

    @hammer: Das hatte ich schon probiert - aber daran liegt es nicht. Mein Header-Div wird ja auch nahtlos an an das Content-Div geklebt.

    @lea: Versuche ich auch noch mal, danke!

    Was mich halt so irritiert ist folgendes: Die H1-Überschrift und der Absatz liegen innerhalb des Content-DIVs. Warum macht der MARGIN vom Absatz und von der Überschrift eine Lücke zwischen die DIVs? Meinem Verständnis nach sollte das nicht sein - das ist unlogisch.

    2nd
     
  5. Darii

    Darii MacUser Mitglied

    Beiträge:
    2.066
    Zustimmungen:
    110
    Registriert seit:
    24.02.2004
    Ist aber so. Vertikale margins werden unter bestimmten Umständen zusammengefasst(das Wort trifft es nicht ganz, aber ich wusste nicht, wie ich collapse sinngemäß übersetzen soll).

    Nachzulesen ist das ganze hier.
     
    Zuletzt bearbeitet: 30.08.2006
  6. pichfl

    pichfl MacUser Mitglied

    Beiträge:
    134
    Zustimmungen:
    2
    Registriert seit:
    03.08.2005
    collapse: zusammenfallen.

    und ein padding:0.01em 0; reicht aus, um das zu verhindern.
    (also so klein, dass es der browser nicht mehr als pixel darstellt)
     
  7. 2nd

    2nd Thread Starter MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    Registriert seit:
    25.07.2004
    Danke für die Infos.

    2nd
     
  8. miss.moxy

    miss.moxy MacUser Mitglied

    Beiträge:
    6.558
    Zustimmungen:
    624
    Registriert seit:
    15.05.2004
    Interessant zu wissen, dass das auch mit Werten < 1px funktioniert… ?!
    0.01em klingt layouttechnisch sympathischer als 1px :)
     
    Zuletzt bearbeitet: 01.09.2006
  9. 2nd

    2nd Thread Starter MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    Registriert seit:
    25.07.2004
    Hmm, ich nochmal: Das padding:0.01em 0; auf die DIVs bringt nicht gewünschten Erfolg?!?

    2nd
     
  10. Darii

    Darii MacUser Mitglied

    Beiträge:
    2.066
    Zustimmungen:
    110
    Registriert seit:
    24.02.2004
    Ist das jetzt eine Frage oder eine Aussage?
     
Die Seite wird geladen...
Ähnliche Themen - CSS margin reisst Forum Datum
CSS Selektor - Leerzeichen Web Page Design 12.09.2015
lokale css-Anweisung für macuser.de? Web Page Design 21.07.2015
Auslagerung von Klassen in CSS-File Web Page Design 02.04.2015
CSS Problem mit Breiten von ul/li Web Page Design 07.10.2014
IE 5 MAC CSS Positionsproblem (table/margin) Web Page Design 02.12.2004

Diese Seite empfehlen

Benutzerdefinierte Suche