 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Hoffy
Threadersteller
Dabei seit: 29.04.2012
Ort: Niederwerrn
Alter: 36
Geschlecht: 
|
Verfasst Mi 23.05.2012 14:14
Titel Margin-Befehl verschiebt komplette HP |
  |
|
Hi ihr
ich bin vorhin über ein interessantes Phänomen gestoßen
mein Chef und ich wissen nicht wieso sich der Margin-befehl auf diese Art und weise Verhält:
Ich habe einen div der die komplette Seite umschließt.
darin liegen header content-section und footer.
im header liegt eine h1
gebe ich der h1 nun aber einen margin-top
verschiebt sich die GESAMTE hp nach unten.
natürlich sollte sich aber nur die Überschrift nach unten verschieben.
meine Frage ist nun folgende:
WARUM verschiebt sich die gesamte HP nach unten und nicht nur die h1?
Worauf ist das Verhalten zurückzuführen?
dass man das mit padding auch lösen kann ist mir bekannt.
aber ich würde gerne verstehen warum sich die h1 und die HP so verhält
hier die revelanten schnipsel
| Code: |
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style/reset.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<div id="alles">
<header>
<h1>Überschrift</h1>
</header>
<section id="inhalt">
<nav class="floatl">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#.html">Leistungen</a></li>
<li><a href="#.html">Referenzen</a></li>
<li><a href="#.html">Kontakt</a></li>
<li><a href="#.html">Mediadaten</a></li>
<li><a href="#.html">Links</a></li>
<li><a href="index.html">Productions</a></li>
</ul>
</nav>
<section id="content" class="floatl">
</section>
</section>
<footer class="clearfix">
<a href="#.html" class="floatl">Impressum</a>
<p class="floatr">Fresh Entertainment ©2012</p>
</footer>
</div>
</body>
</html>
|
| Code: |
@charset "utf-8";
/* CSS Document */
html {
background:url(../bilder/hintergrund/Leinen2.png) repeat-x;
}
* {
margin:0;
padding:0;
}
.floatr {
float:right;
}
.floatl {
float:left;
}
.clearfix {
clear:both;
}
.trennstrich {
}
body {
}
#alles {
margin:0 auto;
width:1000px;
height:700px;
background:rgba(204,204,204,1);
/* -webkit-box-shadow:rgba(255,255,255,.5) 5px 5px 10px;
-moz-box-shadow:rgba(255,255,255,.5) 5px 5px 10px;
-ms-box-shadow:rgba(255,255,255,.5) 5px 5px 10px;
-o-box-shadow:rgba(255,255,255,.5) 5px 5px 10px;
box-shadow:rgba(255,255,255,.5) 5px 5px 10px;*/
}
header {
background:yellow;
width:1000px;
height:100px;
/* height:75px;
padding-top:25px;*/
}
h1 {
margin-top:10px;
color:rgba(0,255,255,1);
font-size:36px;
text-align:center;
-webkit-text-shadow:rgba(255,255,255,.7) 1px 1px 3px;
-moz-text-shadow:rgba(255,255,255,.7) 1px 1px 3px;
-ms-text-shadow:rgba(255,255,255,.7) 1px 1px 3px;
-o-text-shadow:rgba(255,255,255,.7) 1px 1px 3px;
text-shadow:rgba(255,255,255,.7) 1px 1px 3px;
}
#inhalt {
width:1000px;
height:550px;
}
nav {
width:150px;
height:550px;
padding-left:25px;
padding-right:25px;
/* background:rgba(255,255,255,.1);*/
}
nav ul {
margin-top:100px;
}
nav li {
}
nav a {
display: block;
width: 150px;
text-align: center;
margin-top: 15px;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(153,153,153,.7);
border-radius: 5px;
color: rgba(0,0,0,1);
text-decoration:none;
font-size:15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-webkit-box-shadow: rgba(0,0,0,.7) 2px 2px 2px;
-moz-box-shadow: rgba(0,0,0,.7) 2px 2px 2px;
-ms-box-shadow: rgba(0,0,0,.7) 2px 2px 2px;
-o-box-shadow: rgba(0,0,0,.7) 2px 2px 2px;
box-shadow: rgba(0,0,0,.7) 2px 2px 2px;
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
-ms-transition: all .5s linear;
-o-transition: all .5s linear;
transition: all .5s linear;
}
nav a:hover {
background:rgba(0,255,255,.6);
}
#content {
width:800px;
heigth:550px;
}
footer {
width:950px;
height:20px;
padding-top:15px;
padding-left:25px;
padding-right:25px;
}
footer p {
color:rgba(255,255,255,1);
}
footer a {
}
footer a:hover {
}
|
also nochmal ganz kurz:
warum wird die HP nach unten verschoben wenn ich der h1 einen Margin-top gebe??
Lösung: header einen padding geben ist mir bekannt.
ich möchte es nur verstehen ^^
Zuletzt bearbeitet von Hoffy am Mi 23.05.2012 14:18, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
|
| |
|
|
|
Anzeige
|
|
|
gotoAndPlay
Dabei seit: 22.11.2006
Ort: -
Alter: 40
Geschlecht:
|
Verfasst Mi 23.05.2012 14:26
Titel
|
|
|
|
Wenn du "#alles" und dem "header" nen float left gibst, dann ist der Abstand weg...
|
|
| |
|
|
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 23.05.2012 14:29
Titel
|
|
|
Jedesmal die gleiche Scheiße.
| Zitat: | - "Warum fährt mein Auto nicht mehr? Ich möchte es nur verstehen!"
- "Kein Problem. Einfach hinter Dein Auto stellen und schieben, dann fährt es wieder."
|
I'm with stupid.
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mi 23.05.2012 15:05
Titel Re: Margin-Befehl verschiebt komplette HP |
|
|
| Hoffy hat geschrieben: | | warum wird die HP nach unten verschoben wenn ich der h1 einen Margin-top gebe?? |
Das richtige Stich- bzw. Suchwort hast Du bereits. Hier ist alles genau erklärt: http://www.w3.org/TR/CSS21/box.html#collapsing-margins
Treffen die vertikalen margins nicht direkt aufeinander, weil z.B. padding oder border dazwischensteht, kollabiert nix. Auch nicht bei Elementen mit eigenem Block Formatting Context, der u.a. durch das ebenfalls bereits angesprochene float entsteht.
In Deinem konkreten Fall rutscht die Seite runter, weil:
| Zitat: | | If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's. |
|
|
| |
|
|
kiwi244
Dabei seit: 27.03.2011
Ort: Saarland
Alter: 54
Geschlecht: 
|
Verfasst Mi 23.05.2012 15:47
Titel
|
|
|
@ heiko: auch wenn`s mehr als die "Hilfe zur Selbsthilfe" war - mich hat die Frage auch interessiert und bin froh, daß sich jemand erbarmt hat. (Aber das richtige Stichwort hätte mir ja auch schon weitergeholfen - thnx auch zu bacon)
Ich *knicks* danke artig .
LG
nicht der TE, aber eine Interessierte
|
|
| |
|
|
Hoffy
Threadersteller
Dabei seit: 29.04.2012
Ort: Niederwerrn
Alter: 36
Geschlecht:
|
Verfasst Mi 23.05.2012 16:14
Titel
|
|
|
|
danke für hilfe euch allen
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
margin-top + ie7?
IE margin problem
Html Margin - FF und IE?
margin-top und <li> Problem
IE7 margin Problem CSS
CSS Problem mit Margin nd top
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
