CSS margin-top funktioniert nicht

maxsteel · 22.05.2010

Hi Leute,
also ich wollte gerade anfangen mein CMS mal wieder eine neue Haube zu verpassen, will grade anfangen mit dem Loginbereich und da stoße ich auf das Problem das margin-top nicht funktioniert. Da ihr ja vollprofis seid dahcte ich ich frag euch einmal.
Hier mal der HTML Code

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Content Managment System (c)2010</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="shortcut icon" href="css/favicon.png">
</head>

<body>

<div id="content_div">
<h2>Vertragsnummer</h2>

</div>
</body>
</html>

und hier der CSS Code:

HTML:

@charset "utf-8";
/* CSS Document */

body {
    color:#0000FF;
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    margin: 0; 
    padding: 0;
    
}

#content_div { 

    margin:0 auto;
    width:600px;
    height:300px;
    background:#336699;
    margin-top:23px;     
} 



h2 {
    display:inline;
    margin-top:40px;
    margin-left:80px;
}

mein Probem ist das ich zwar "vertragsnummer" mit margin-left vom linken rand aus positionieren kann aber nicht mit margin.top.
Ich hoffe ihr könnt mir helfen.
mfg max

cebito · 22.05.2010

AW: CSS margin-top funktioniert nicht

Ich würd mal schwer behaupten, das Ei hast du dir mit "display:inline;" selbst gelegt. Sofern du das unbedingt brauchst (was ich bezweifle) machs mit "display:inline-block;".

Mysth · 22.05.2010

AW: CSS margin-top funktioniert nicht

Du hast dem Content 2 mal Margin zugewiesen, einmal mit 0 auto und einmal mit margin-top vielleicht liegts ja daran.

maxsteel · 22.05.2010

AW: CSS margin-top funktioniert nicht

cebito schrieb:
Ich würd mal schwer behaupten, das Ei hast du dir mit "display:inline;" selbst gelegt. Sofern du das unbedingt brauchst (was ich bezweifle) machs mit "display:inline-block;".

Danke, das war der Fehler. Vielen Dank auch für die anderen Antworten.
mfg max

patrick_l · 22.05.2010

AW: CSS margin-top funktioniert nicht

Hast du es auch schon einmal mit einer anderen Schreibweise probiert?

Code:

h2 {
    display:inline;
    margin-top:40px;
    margin-left:80px;
}

Code:

h2 {
    display:inline;
    margin: 0 0 0 0px;
}

Nullen halt durch die Werte ersetzen Abstand links Oben...

Edit:
Ich bin noch etwas wackelig auf den Beinen in Sachen CSS

cebito · 22.05.2010

AW: CSS margin-top funktioniert nicht

Mysth schrieb:
Du hast dem Content 2 mal Margin zugewiesen, einmal mit 0 auto und einmal mit margin-top vielleicht liegts ja daran.

Nö, da wird dann das letzte genommen

und es ging ja ums h2 und nicht den content div.

Mysth · 22.05.2010

AW: CSS margin-top funktioniert nicht

Oh ok und wieder was dazugelernt, also wenn ich das richtig verstehe wird bei zwei margin anweisungen die letzte angewendet

Myhar · 22.05.2010

AW: CSS margin-top funktioniert nicht

Es wird IMMER die letzte Anweisung angewendet... Auch wenn es mehrere border Definitionen gibt, die letzte ist immer die, die für ein Element zählt.. Macht ja auch Sinn, ein Element kann ja zB keine 2 unterschiedliche Abstände von links haben ;-)

hubspe · 23.05.2010

AW: CSS margin-top funktioniert nicht

Myhar schrieb:
Es wird IMMER die letzte Anweisung angewendet...

das ist leider absolut falsch.

Die Anweisung mit der höheren Spezifität gewinnt erst danach kommt das mit der letzten Anweisung zum Tragen.

display:inline und display:inline-block für h2 ist imho beides Unfug.

Das display:inline; wurde nur versucht weil es zu unerwünschten Collapsing Margins gekommen ist.
Die h2 sollte bestimmt einen Abstand nach oben bekommen, das kann aber wg. den nach oben durchschlagenden Collapsing Margins nicht funktionieren.
Nur das ganze Layout ist ein Stück nach unten gehüpft, aber die h2 ist am oberen Rand stehengeblieben.

Entweder man gibt der H2 einen oberen padding statt margin oder #content_div bekommt einen Rahmen in der HG-Farbe.
Beides verhindert Collapsing Margins.

maxsteel · 26.05.2010

AW: CSS margin-top funktioniert nicht

Hiho Leute,
danke für alles. Ich hätt noch eine kleine Frage

Bei folgendem Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Content Managment System (c)2010</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="shortcut icon" href="css/favicon.png">
</head>

<body>

<div id="content_div">
<div id="content_div_header">
<h1>Kundenlogin</h1>
</div>

<h2>Vertragsnummer</h2>
<div class="textfelder">
<input type="text" name="vertragsnummer"/>
</div>

<h2>Benutzername</h2>
<div class="textfelder">
<input type="text" name="vertragsnummer"/>
</div>

<h2>Passwort</h2>
<div class="textfelder">
<input type="password" name="vertragsnummer"/>
</div>

</div>
</body>
</html>

und hier das CSS:

Code:

@charset "utf-8";
/* CSS Document */

html{
    font-size:10px;
}
body {
    color:#0000FF;
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    margin: 0; 
    padding: 0;
    
}


#content_div { 
    margin:0 auto;
    width:500px;
    height:190px;
    background:#336699;
    margin-top:23px;     
} 

#content_div_header { 
    margin:0 auto;
    width:500px;
    height:30px;
    background:#330066;
    margin-top:0px;     
} 

.textfelder {
    display:inline-block;
    margin-top:20px;
    margin-left:70px;
    color:#FFFFFF;
    font-size:2em;
}



h2 {
    display:inline-block;
    margin-top:10px;
    margin-left:20px;
    color:#FFFFFF;
    font-size:2em;
}

Mein Problem ist, wie schaffe ich es das ich bei der Klasse textfelder nicht nur margin-left angeben kann sondern margin-rigth auch? wenn ich margin-right eingeb macht er bei mir garnichts.
Denn margin-left ist doof da es dann bei jdem anders ist. Danke schonmal auf eure Vorschläge.
mfg max

Samuelll · 26.05.2010

AW: CSS margin-top funktioniert nicht

Irgendwie werde ich aus Deiner Frauge nicht schlau.

Das einzige was ich dir beantworten kann :

Du kannst margin-right und margin-left gleichzeitig für ein Element angeben :

Schreibweise

margin : 1px 2px 3px 4px ; /* margin : oben rechts unten links */

oder

margin : 2px 3px ;
/* margin : 1. Wert oben und unten, sowie 2. Wert links und rechts */

AlphaGen · 27.05.2010

AW: CSS margin-top funktioniert nicht

Ich bin aus der Frage auch nicht schlau geworden. Dann hab ich mir den Code kopiert und ich glaube ich weiß was du willst.

Das soll so aussehen oder?

Wenn ja, das hab ich folgendermaßen gelößt:

Code:

h2 {
    display:inline-block;
    margin-top:10px;
    margin-left:20px;
    color:#FFFFFF;
    font-size:2em;
[B]    width:200px;[/B]
}

Hoffe das ist, was du möchtest.
Die sind zwar noch immer Links ausgerichtet aber richten sich jetzt nach der Breite des H2 Elements.

maxsteel · 30.05.2010

AW: CSS margin-top funktioniert nicht

AlphaGen schrieb:
Ich bin aus der Frage auch nicht schlau geworden. Dann hab ich mir den Code kopiert und ich glaube ich weiß was du willst.

Das soll so aussehen oder?

Wenn ja, das hab ich folgendermaßen gelößt:

Code:

h2 { display:inline-block; margin-top:10px; margin-left:20px; color:#FFFFFF; font-size:2em; [B] width:200px;[/B] }

Hoffe das ist, was du möchtest.
Die sind zwar noch immer Links ausgerichtet aber richten sich jetzt nach der Breite des H2 Elements.

jap

danke schön. ich weiß meine fragen sind immer toll formuliert

nochals danke.
mfg max