Positionsproblem

kornyclown · 24.12.2012

Zuerst der Code:

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.

kleeaar · 24.12.2012

AW: Positionsproblem

kannst du der Vollständigkei halber auch mal noch den html-code posten?
das macht das ganze etwas nachvolziehbarer.

Grüße

kornyclown · 24.12.2012

AW: Positionsproblem

Aber natürlich:

HTML:

<!DOCTYPE HTML>
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css"></link>

</head>

<body>

    <div id="wrapper">
        <div id="logo"></div>
        <div id="line"></div>
        <header>
            <nav id="navMenu">
                <ul>
                    <li><a href="index.html">HOME</a></li>
                </ul>
                <ul>
                    <li><a href="reel.html">REEL</a></li>
                </ul>
                <ul>
                    <li><a href="gallery.html">GALLERY</a></li>
                </ul>
                <ul>
                    <li><a href="vita.html">VITA</a></li>
                </ul>
                <ul>
                    <li><a href="contact.php">CONTACT</a></li>
                </ul>
            </nav>
        </header>
    </div>



</body>

</html>

kleeaar · 24.12.2012

AW: Positionsproblem

ok...
dein nav-element ist ein inline-element.
dem kannst du so, wie es ist, gar keine breite bzw höhe zuweisen.

Du musst zuerst display:inline-block; zuweisen und es also in ein inline-block-element umwandeln, damit du ihm eine Breite geben kannst.
also

Code:

#navMenu {
    display:inline-block;
    width: 100%;
    position: relative;
    margin: auto;
    background: green;}

Grüße

kornyclown · 24.12.2012

AW: Positionsproblem

Funktioniert leider nicht.
Vielleicht sollte ich noch sagen was überhaupt mein ziel ist:

Die Listenelemente sollen mittig sitzen mit gleichen Abständen zwischen den Elementen selbst. Es sind ja 5 Links also der komplette Raum von 85% breite durch 5 geteilt werden und in jdem dieser Abschnitte sitzt jeweils ein Link genau mittig.
Im Bezug auf Responsive Design versuche ich alles relativ und in Prozentangaben zu halten.
Ich sehe ja anhand der background Testfarben (beim #navMenu grün) das dieses Element da sitzt wo es soll, sogar ohne "display: inline-block;" aber die Links in den Listenelementen nicht. Die lassen sich weder mittig positionieren, noch mit gleichen Abständen zwischeinender. Mit Pixelangaben bezüglich der Weite von ul li a, bekomme ich die gleichen Abstände hin aber dann skaliert die Leiste nicht mit, mit Prozentangaben ist zwar jedes Element der Prozentanzahl entsprechen groß aber die Elemente überlappen.
Is echt nich so leicht.

cythux · 24.12.2012

AW: Positionsproblem

wozu sollen eigentlich die ganzen <ul> Tags in Deiner Navigation dienen, so sieht es cleaner und valider aus

Code:

<nav id="navMenu">
                 <ul>
                     <li><a href="index.html">HOME</a></li>
                     <li><a href="reel.html">REEL</a></li>
                     <li><a href="gallery.html">GALLERY</a></li>
                     <li><a href="vita.html">VITA</a></li>
                     <li><a href="contact.php">CONTACT</a></li>
                 </ul>
             </nav>

Code:

margin: 0 auto; /* Dient zum Zentrienen */

Dissolution · 25.12.2012

AW: Positionsproblem

kornyclown schrieb:
Vielleicht sollte ich noch sagen was überhaupt mein ziel ist:

Die Listenelemente sollen mittig sitzen mit gleichen Abständen zwischen den Elementen selbst. Es sind ja 5 Links also der komplette Raum von 85% breite durch 5 geteilt werden und in jdem dieser Abschnitte sitzt jeweils ein Link genau mittig.

Wenn die Blöcke gleich breit sein sollen, dann hilft dir leider wirklich nur display:table, table-row und table-cell.

Hatte vor einigen Wochen das Problem, dass eine Navigation, deren Links unterschiedliche Längen aufwiesen, absolut gleich breit sein sollten.

Das hieß, entweder manuell machen und wenn noch ein Eintrag hinzukommt wieder alles neu umbauen, oder eine css3-tabelle zu verwenden.

Letzteres funktionierte super. Jetzt sind alle Blöcke mit den Links gleich breit

Aber vielleicht versteh ich deine Aussage ja auch falsch?

kornyclown · 25.12.2012

AW: Positionsproblem

cythux schrieb:

wozu sollen eigentlich die ganzen <ul> Tags in Deiner Navigation dienen, so sieht es cleaner und valider aus

Code:

<nav id="navMenu">
                 <ul>
                     <li><a href="index.html">HOME</a></li>
                     <li><a href="reel.html">REEL</a></li>
                     <li><a href="gallery.html">GALLERY</a></li>
                     <li><a href="vita.html">VITA</a></li>
                     <li><a href="contact.php">CONTACT</a></li>
                 </ul>
             </nav>

Das hatte ich von meiner alten Seite übernommen, wo ich ein dropdown Menu hab und die für eventuelle zukünftige Erweiterungen jedes Element einzeln haben wollte. Aber da ich ja von der alte Seite wegkommen will, brauch ich das wirklich nichtmehr, da hast du recht. Ich habs jetzt aufgeräumt.

cythux schrieb:
Code:

margin: 0 auto; /* Dient zum Zentrienen */

Das hatte ich ja versucht aber es hat nich funktioniert.

Dissolution schrieb:
Wenn die Blöcke gleich breit sein sollen, dann hilft dir leider wirklich nur display:table, table-row und table-cell.

Wieso leider, das war genau der Tipp den ich gebraucht hab. Jetzt funktioniert alles (bei der Navigation). Musste noch ein bischen basteln das auch jeder Links mittig in seiner Zelle sitzt, war aber letzendlich nur ein "text-align: center" für das li-Element und jetzt passt alles und is 100% responsive

P.S.
Ich möchte an dieser Stelle nochmal darauf aufmerksam mach, wie begeistert ich von diesem Forum bin. Gibt leider nicht viele wie dieses

Dissolution · 25.12.2012

AW: Positionsproblem

kornyclown schrieb:
Wieso leider, das war genau der Tipp den ich gebraucht hab. Jetzt funktioniert alles (bei der Navigation). Musste noch ein bischen basteln das auch jeder Links mittig in seiner Zelle sitzt, war aber letzendlich nur ein "text-align: center" für das li-Element und jetzt passt alles und is 100% responsive

Das "leider" war darauf bezogen, dass ich es verabscheue Tabellen für nicht-tabellarische Inhalte zu verwenden. Aber nachdem es hier wirklich nicht anders geht (zumindest bis das Box-Model einheitlich implementiert wurde), bleiben einem für genau diesen Fall nicht wirklich Alternativen, es sei denn man möchte auch für eine Navigation auf Skripte setzen.