Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „CSS margin-top funktioniert nicht“

maxsteel

Nicht mehr ganz neu hier

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

undefined

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

Mod | C4D 3D&5D-Contests

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

Nicht mehr ganz neu hier

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;".
Danke, das war der Fehler. Vielen Dank auch für die anderen Antworten.
mfg max
 

patrick_l

Hat es drauf

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 ;)
 
Zuletzt bearbeitet:

Mysth

Mod | C4D 3D&5D-Contests

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

Hat es drauf

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

display:schwarzgelb;

AW: CSS margin-top funktioniert nicht

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

Nicht mehr ganz neu hier

AW: CSS margin-top funktioniert nicht

Hiho Leute,
danke für alles. Ich hätt noch eine kleine Frage :D
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

Aktives Mitglied

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

Nicht mehr ganz neu hier

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

Nicht mehr ganz neu hier

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.
jap :)
danke schön. ich weiß meine fragen sind immer toll formuliert :D:D
nochals danke.
mfg max
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.874
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben