K
kornyclown
Guest
Zuerst der Code:
Nun meine Frage:
Prozentangaben richten sich immer nach dem übergeordneten Objekt (Parent), richtig? "position: relative;" orientiert sich an dem letzten relativen Objekt, richtig? "margin: auto;" hällt relative, gleiche Abstände, je nachdem wie es genau angewiesen wird (top, bottom, ...), richtig?
Das Element header steht frei (hat kein Parent), demnach richten sich die width: 85% nach der Gesamtgröße des Dokumentes und margin: 0 auto hällt keinen Abstand nach oben/unten aber gleiche Abstände nach links/rechts, ist also mittig auf der x Achse. Darin sitzt das Element #navMenu, mit 100% breite seines Parent (header) und margin: auto, müsste also mittig sitzen. Tut es aber nicht, warum?
Da ich "nur" ambitionierter Hobbyskripter bin muss ich mich jedes mal aufs neue mit der Materie auseinandersetzen und da stolpert man dann über sowas. Sorry, wenn mein Anliegen zu "noobig" is.
Code:
@charset "UTF-8";
/* CSS Document */
@font-face {font-family: 'Cardo'; src: url('Cardo-Regular.ttf') format('truetype');}
@font-face {font-family: 'Cardo'; src: url('Cardo-Bold.ttf') format('truetype');}
@font-face {font-family: 'Cardo'; src: url('Cardo-Italic.ttf') format('truetype');}
/*Reset*/
* {
padding: 0;
margin: 0;
font-family: Cardo; font-size: 15pt; font-weight: normal; color: #000;
}
ul, ol, li {list-style: none;}
img {border: none;}
/*Background*/
body {
/*Gradient*/
/* FF3.6+ */
background: -moz-linear-gradient(left, #d8d8d8 0%, #ffffff 30%, #ffffff 70%, #d8d8d8 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d8d8d8), color-stop(30%,#ffffff), color-stop(70%,#ffffff), color-stop(100%,#d8d8d8));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(left, #d8d8d8 0%,#ffffff 30%,#ffffff 70%,#d8d8d8 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #d8d8d8 0%,#ffffff 30%,#ffffff 70%,#d8d8d8 100%);
/* IE10+ */
background: -ms-linear-gradient(left, #d8d8d8 0%,#ffffff 30%,#ffffff 70%,#d8d8d8 100%);
/* W3C */
background: linear-gradient(to right, #d8d8d8 0%,#ffffff 30%,#ffffff 70%,#d8d8d8 100%);
}
/*Navigation*/
#wrapper {
width: 100%;
height: 100%; height: auto; overflow: hidden;
}
#logo {
width: 359px;
height: 201px;
position: relative;
margin: 20px auto;
background: url("../images/TMLogo.png"); background-size: 100%;
}
#line {
width: 90%;
height: 3px;
position: relative;
margin: auto;
background: #000;
}
header {
width: 85%;
height: 30px;
position: relative;
margin: 0 auto;}
#navMenu {
width: 100%;
position: relative;
margin: auto;
background: green;}
#navMenu ul {line-height: 25px;}
#navMenu ul li {
float: left;
}
#navMenu ul li a {
width: 100%;
text-align: center; text-decoration: none;
display: block;
background: red;
}
Nun meine Frage:
Prozentangaben richten sich immer nach dem übergeordneten Objekt (Parent), richtig? "position: relative;" orientiert sich an dem letzten relativen Objekt, richtig? "margin: auto;" hällt relative, gleiche Abstände, je nachdem wie es genau angewiesen wird (top, bottom, ...), richtig?
Das Element header steht frei (hat kein Parent), demnach richten sich die width: 85% nach der Gesamtgröße des Dokumentes und margin: 0 auto hällt keinen Abstand nach oben/unten aber gleiche Abstände nach links/rechts, ist also mittig auf der x Achse. Darin sitzt das Element #navMenu, mit 100% breite seines Parent (header) und margin: auto, müsste also mittig sitzen. Tut es aber nicht, warum?
Da ich "nur" ambitionierter Hobbyskripter bin muss ich mich jedes mal aufs neue mit der Materie auseinandersetzen und da stolpert man dann über sowas. Sorry, wenn mein Anliegen zu "noobig" is.