margin bzw padding wert rechts funktioniert nicht

peerffm

Hallo,
irgendwie bekomme ich das nciht hin das der abstand rechts funktioniert.
folgendes Beispiel.

HTML

<html>
    <body>
    <!-- Hauptseite -->
     <!-- Header -->
     <div id="page">

 
     <div id="header">
 <img src="pics/background.jpg" background-repeat:no-repeat/>
 
     </div>
 

 
 


 </div>

      </body>




</html>

Alles anzeigen

das css dazu

Code

body {
}

div#page {
margin:5% 6% 5% 6%;       

background-color:#BDBDBD;
 
 


}

div#header {
 
margin:0% 50% 5% 6%;  
}

Alles anzeigen

Im Page ist der Header mit einem Bild allerdings funktioniert dort der Abstand rechts nciht. Wenn ich den 2 Wert ändere passiert nie was .

danke und gruß peer

Matrox

Im Css die browserabstände resetten mit dem Universalselector

HTML

* {margin: 0; padding: 0;}

explanator

Das sollte man besser nicht machen, da es allen Elementen die vorgegebenen Abstände nimmt. Man muss dann nachträglich alle Abstände wieder mühsam hinzufügen, was aber bei einigen Formularelementen sogar unmöglich ist.

Besser ist es auf ein CSS Reset auszuweichen, wie es zum Beispiel Yahoo anbietet.
Hier deren Einstellungen um in allen Browsern das gleiche Ausssehen zu haben:

Code

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}

Alles anzeigen

Auch das ist eigentlich nur dazu gedacht, alles auf Null zu setzen, wie man an den H-Elementen sieht. Die Voreinstellung für das H1 Element sieht folgendermassen aus und wird mit diesem Reset völlig ausser Kraft gesetzt:

Code

h1 { 
       display: block;


      font-size: 2em;


      margin-before: 0.67em;


      margin-after: 0.67em;


      margin-start: 0;


      margin-end: 0;


      font-weight: bold; 
}

Alles anzeigen

Man sollte das bedenken, wenn man Reset-Stylesheets einsetzt.

Tags