Pe.: Maring-Top und IE verhalten

SELF-Forum

Maring-Top und IE verhalten

Pe.
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich habe zwei Fragen bei denen ich einfach nicht weiterkomme.

1. Auf was genau bezieht sich die Prozent Angabe bei margin-top?

Wenn ich margin-top: 13%; verwende von welchen Wert/Bereich werden die 13% berechnet? Irgendwie ist bei mir der Abstand nach oben egal bei welchen Browser/Auflösung oder Länge des Inhaltes immer exakt gleich groß. Somit klebt das Div einmal extrem weit oben und einmal sehr weit unten (je nach Browser/Device/Auflösung).

2. An was liegt es, dass mir der IE 6 das ganze Layout zerstört?

Firefox vs. IE

  
<body id="body">  
	<div id="wrapper">  
		<div id="wrapper_content">  
				<div id="header">  
					<a href="home.html" titel="Logo">  
						<img src="./assets/images/logo.png" alt="logo" />  
					</a>  
				</div>  
				  
				<div id="page_img">  
					<img src="img.jpg" />  
				</div>  
				  
				<div id="menu">  
					<ul>  
					<li>Menü 1</li>  
					<li>Menü2</li>  
					<li>Menü3</li>  
					<li>Menü4</li>  
					<ul>  
				</div>  
				  
				<div id="content">  
					Grundidee beim Entwurf von CSS ...  
				</div>  
			<div class="clear"></div>  
		</div><!-- end wrapper_content div -->  
		<div class="clear"></div>  
  
		<div id="footer">  
			<div id="footer_module">  
				Footer  
			</div>  
		</div>  
    </div><!-- end wrapper div -->  
    <div class="space"></div>  
</body>  


  
BODY#body{  
	margin:0;  
	padding:0;  
	text-align: center;  
	background-image: url(../images/bglogo_brown.png);  
	background-color:#b3b3b3;  
	background-attachment:fixed;  
}  
  
body, td, th, tr, p, div {  
	font-family: Corporate, Arial, Helvetica, sans-serif;  
	font-size: 12px;  
	color: #333;  
	line-height: 145%;  
}  
  
#wrapper {  
	width: 900px;  
	margin: 0 auto;  
	text-align: left;  
}  
  
#wrapper_content {  
	margin-top: 13%;  
	padding: 20px 25px;  
	width: 850px;  
	background: #fff;  
}  
  
#header {  
	float:left;  
	margin-bottom: 52px;  
	width: 650px;  
}  
  
#header_large {  
	margin-bottom: 52px;  
	width: 650px;  
}  
  
#header img{	  
	width: 200px;  
}  
  
#header_large img{	  
	width: 200px;  
}  
  
#page_img {  
	float: right;  
	width: 200px;  
	height: 110px;  
	margin-top: 55px;  
	margin-bottom: 55px;  
	text-align: center;  
}  
  
#page_img img{  
	width: 200px;  
}  
  
#menu {  
	margin-left: 70px;  
	width: 130px;  
	float: left;  
	text-transform: uppercase;  
}  
  
#content {  
	float: left;  
	width: 410px;  
	margin-left: 20px;  
	margin-right: 20px;  
}  
  
.clear {  
	clear: both;  
}  
.space {  
	height: 50px;  
}  
  
a, a:link,  
a:active,  
a:visited {  
	color: #251C0B;  
	text-decoration: none;  
}  
  
a:hover, a.active {  
	text-decoration: underline;  
}  
  
#menu a,  
#menu a:link,  
#menu a:visited  {  
	font-size: 14px;  
	color: #251C0B;  
  
}  
  
#menu ul li a:hover,  
#menu ul li a#active_menu {  
	text-decoration: underline;  
}  
  
#menu ul{  
	list-style-position:outside ;  
	list-style-type: none;  
	padding: 0;  
}  
  
#content ul{  
	list-style-position:inside ;  
	list-style-type:disc;  
	padding-left:3%;  
	margin-bottom: 1em;  
}  
  
#content p{  
	text-align: left  
	margin-bottom: 1em;  
	clear:both;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Maring-Top und IE verhalten

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, Pe.!

    1. Auf was genau bezieht sich die Prozent Angabe bei margin-top?

    Auf die Breite des umgebenden Blockelements.

    1. An was liegt es, dass mir der IE 6 das ganze Layout zerstört?

    Am IE6. Du solltest den IE6 und auch 7 nur insoweit unterstützen, dass deine Seite benutzbar bleibt.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Messie und Messier-Katalog.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Maring-Top und IE verhalten

      Pe.
      – Informationen zu den Bewertungsregeln

      Vielen Dank für die Antwort
      Pe.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Maring-Top und IE verhalten

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Pe.:

    nuqneH

    Ergänzende Anmerkungen zu deinem HTML-Code:

    <body id="body">

    Eine ID "body" fürs body-Element ist unsinnig. In CSS kannst du das Element über den Typselektoren body ansprechen.

    <div id="wrapper">
    <div id="wrapper_content">

    Diese Elemente brauchst du nicht. Siehe Beispiel.

      		<div id="header">

    Hier ist das HTML5-Element header angebracht. Siehe neue Elemente für die Seitenstruktur.

      			<a href="home.html" titel="Logo">

    Ein @titel-Attribut gibt es nicht. Ein @title-Attribut wäre hier unsinnig.

      				<img src="./assets/images/logo.png" alt="logo" />

    Der Alternativtext sollte nicht „logo“ heißen, sondern den Namen der Website angeben.

      		<div id="page\_img">  
  			<img src="img.jpg" />  
  		</div>

    Hier fehlt das @alt-Attribut. Was soll das für eine Bild sein? Schmückendes Beiwerk? Dann gehört es nicht ins HTML, sondern als Hintergrundbild eines Elements ins CSS.

      		<div id="menu">

    Hier ist das HTML5-Element nav angebracht. Siehe neue Elemente für die Seitenstruktur.

      			<ul>  
  			<li>Menü 1</li>  
  			<li>Menü2</li>  
  			<li>Menü3</li>  
  			<li>Menü4</li>  
  			<ul>

    Liste ist gut. Aber sollten das nicht Links sein?

      		<div id="content">

    Hier ist das HTML5-Element main angebracht. Siehe Blogartikel zum main-Element. Oh, verdammt! ;-)

      	<div class="clear"></div>

    Diese Elemente brauchst du nicht. Wende das clear bei Bedarf auf vorhandene Elemente an. Siehe Einschließen (Clearing) von Floats.

      <div id="footer">

    Hier ist das HTML5-Element footer angebracht. Siehe neue Elemente für die Seitenstruktur.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Maring-Top und IE verhalten

      Matthias Apsel Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Om nah hoo pez nyeetz, Gunnar Bittersmann!

      Hier ist das HTML5-Element main angebracht. Siehe Blogartikel zum main-Element. Oh, verdammt! ;-)

      *g*

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Boss und Bossa nova.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Maring-Top und IE verhalten

      Pe.
      – Informationen zu den Bewertungsregeln

      Danke für die Anmerkungen

      Ich habe den Code jetzt überarbeitet, doch leider zersprengt mir das floaten im neuen code das komplette Layout.

      Im ersten Bild (ohne Float) lass ich den header und das aside Floaten, aber die nav nicht.
      Wie man sieht fällt hier das img auch schon aus der "body Box" raus.

      Im zweiten bild (mit Float) lass ich auch die nav links floaten. Damit wollte ich eigentlich den article links neben die nav bringen, jedoch fliegt endgültig alles aus der "body Box".

      Wie schaffe ich es, dass mein header, nav, asid und article in der Box trotz floaten bleibt?
      Und wie bekomme ich dann den Footer aus der Box?

      Den Aufbau vom Body habe ich von deinem Beispiel übernommen.

        
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
        <meta http-equiv="X-UA-Compatible" content="IE=8"/>  
        <title>TEST</title>  
        <link rel="stylesheet" href="./assets/css/test.css" type="text/css" media="screen, projection" />  
    </head>  
    <body>  
		<header>  
			<a href="test.html">  
				<img src="./assets/images/logo.png" alt="Test" />  
			</a>  
		</header>  
		<aside id="page_img">test  
		</aside>  
		<nav>  
			<ul>  
				<li><a href="test.html">test</a></li>  
				<li><a href="test.html">test</a></li>  
				<li><a href="test.html">test</a></li>  
				<li><a href="test.html">test</a></li>  
			<ul>  
		<nav>  
		<article>  
			Im ersten Teil ...  
        	</article>	  
	</body>  
	<footer>  
		Footer  
	</footer>  
</html>  


        
html  
{  
    background: grey;  
}  
  
body  
{  
    background: #fff;  
    font-family: sans-serif;  
    max-width: 900px;  
    margin: 4em auto 2em;  
    padding: 1em 2em;  
}  
  
body>:first-child  
{  
    margin-top: 0;  
}  
  
body>:last-child  
{  
    margin-bottom: 0;  
}  
  
header {  
	float: left;  
}  
  
header img{  
	width: 200px;  
}  
  
aside {  
	background-image: url(../images/img.jpg);  
	float: right;  
	width: 200px;  
	height: 300px;  
	margin-top: 55px;  
	margin-bottom: 55px;  
	text-align: center;  
}  
  
nav {  
	float:left;  
}
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Maring-Top und IE verhalten

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Pe.:

        nuqneH

        Ich habe den Code jetzt überarbeitet,

        Online-Beispiel? Ich hab wenig Lust, mir das selbst erstellen zu müssen.

        Dabblet oder jsfiddle sind auch gut geeignete Tools dafür.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Maring-Top und IE verhalten

          Pe.
          – Informationen zu den Bewertungsregeln

          Ok, je nach vorlieben habe ich jetzt auf beiden Tools den Testaufbau konfiguriert.

          http://jsfiddle.net/sa8Lq/1/
          http://dabblet.com/gist/6916105

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln