• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem bei Navigation

soulxheart

soulxheart

Mitglied
Hallo zusammen

Ich habe ein kleines Problem bei meiner Navigation.

Erst mal das HTML-Gerüst:
HTML: 
<!DOCTYPE html>

<html>

<head>
    <?php
        include "includes/headers.php";
    ?>
    <title>Home</title>
</head>

<body>
    <nav>
        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <section id="content">
        Fülltext
    </section>
    <footer>
        Fülltext
    </footer>
</body>

</html>
Über die headers.php-Datei wird die Navigation eingebunden.

Und hier die CSS-Datei:
HTML: 
@charset "utf-8";

/* ! --- STRUCTURE --- ! */
* {
    margin:0;
    padding:0;
}

body {
    width:960px;
    font-family:Tahoma,Geneva,sans-serif;
    background-color:#fff;
    margin:50px auto;
}

section#content {
    height:500px;
    margin-top:30px;
    padding:20px;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    clear:both;
}

footer {
    text-align:center;
    margin-top:20px;
    color:#ccc;
    font-size:0.8em;
}



/* ! --- NAVIGATION --- ! */
nav {
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

nav ul {
    margin:0 auto;
}

nav ul li {
    list-style:none;
    float:left;
    padding:20px;
}

nav ul li a {
    color:#000;
    text-decoration:none;
}

Mein erstes Problem ist, dass ich die Navigationpunkte nicht zentriert bekomme. Ich habe dies beim nav-Element mit text-align:center; und beim nav ul-Element mit margin:0 auto; versucht. Des Weiteren kann ich mein section#content mit margin-top:30px; nicht mehr steuern - sprich, wenn ich aus 30px 300px mache, verändert sich der Abstand zur Navigation nicht.

http://picload.org/image/awpalwg/wex_0_1.png

Bei der Navigation wird auch der Schatten, wie beim Content, nicht angezeigt. Das liegt, nehme ich mal an, an der Höhe, die nicht definiert wurde?



Grüsse
 
versuch''s mal so
Code: 
/* ! --- NAVIGATION --- ! */
nav {
     -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 
}

nav ul {
   display:inline-block;
   text-align:center;
   margin:0 auto;
   width:960px;
}

nav ul li {
    display:inline-block;
    list-style:none;
 }

nav ul li a {
    color:#000;
    text-decoration:none; 
    padding:20px;
    display:block;
}
 
Hallo djheke

Vielen Dank für deine Antwort - es funktioniert!

Aber erklären kann ich es mir nicht. Ich dachte, eine horizontale Navigation generiert man mit float...da habe ich mich wohl getäuscht.

Jetzt wird sogar das ul-Element in Firebug korrekt angewählt - zuvor war dies nicht zu sehen. Jetzt kann ich bei section#content clear:both; rausnehmen - richtig?



Grüsse
 
Wie so oft führen hier viele Wege nach Rom. Und ja, da du jetzt nicht mehr floatest, brauchst du auch nicht mehr clearen.
 
Ohne Link zur Seite sind Lösungsansätze nur sehr schwer möglich, die Bilder bringen nicht viel
 
DU BENUTZT HTML5 ELEMENTE. DIESE KÖNNEN NICHT ALLE BROWSER. HIER DIE ANGEPASSTE VERSION
Code: 
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">

@charset "utf-8";

/* ! --- STRUCTURE --- ! */
* {
    margin:0;
    padding:0;
}

body {
    width:960px;
    font-family:Tahoma,Geneva,sans-serif;
    background-color:#fff;
    margin:50px auto;
}




/* ! --- NAVIGATION --- ! */
#nav {
     -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 
}

#nav ul {
   display:inline-block;
   text-align:center;
   margin:0 auto;
   width:960px;
}

#nav ul li {
    display:inline;
    list-style:none;
 }

#nav ul li a {
    color:#000;
    text-decoration:none; 
    padding:20px;
    display:inline-block;
}


</style>
</head>

<body>
    <div id="nav">
        <ul>
            <li><a href="index.php">Home </a></li>
            <li><a href="#">About </a></li>
            <li><a href="#">Contact </a></li>
        </ul>
    </div>
  
        
   
</body>
</html>
 
Hallo djheke

Der Internet Explorer 9 unterstützt doch die HTML5-Elemente? Ausserdem habe ich für den Internet Explorer folgenden Code angefügt:

HTML: 
<!--[if lt IE 9]>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
    document.createElement("article");
    document.createElement("footer");
    document.createElement("header");
    document.createElement("hgroup");
    document.createElement("nav");
</script>



Grüsse
 
Anstatt zu Fragen ob es im Internet Explorer geht, könntest du es auch in einem richtigen Browser testen. Oder zumindest im IE10. Aber sicher nicht < 10..

Kein Webentwickler arbeitet produktiv mit dem Internet Explorer und weiß daher nicht welche Tags dem gerade geläufig sind und welche nicht.
 
Na wenn's so ist, brauchst du nur das ändern
Code: 
nav ul li {     display:inline;     list-style:none;  }
 
scbawik schrieb:
Anstatt zu Fragen ob es im Internet Explorer geht, könntest du es auch in einem richtigen Browser testen. Oder zumindest im IE10. Aber sicher nicht < 10..

Kein Webentwickler arbeitet produktiv mit dem Internet Explorer und weiß daher nicht welche Tags dem gerade geläufig sind und welche nicht.
Zum Vergrößern anklicken....

Der Internet Explorer 8 ist vorgegebener Standard, kann ich leider nicht ändern...
 
scbawik schrieb:
Kein Webentwickler arbeitet produktiv mit dem Internet Explorer und weiß daher nicht welche Tags dem gerade geläufig sind und welche nicht.
Zum Vergrößern anklicken....

Dem möchte ich in soweit widersprechen, als das es für einen Webentwickler sehr wohl wichig ist zu wissen, welche IE Version welche Tags versteht und welche nicht (oder welche CSS-Eigenschaften unterstützt werden). Ich selbst habs leider auch nicht im Kopf und verliere dementsprechend immer wieder ein wenig Zeit, um nachzuschauen.
"Produktiv arbeiten" werden sicherlich die wenigsten mit dem IE, aber wenn man keine IE-Tests (oder generell abschließende Browser-Tests) macht, stelle ich die Professionalität schon ein wenig in Frage...
 
Ja, testen und funktionieren muss man es natürlich in allen Browsern. Wenn etwas aber eigentlich funktionieren sollte, überprüft man das in einem "guten" Browser, um festzustellen ob es falsch programmiert wurde, oder ob der aktuelle Browser dies nur falsch interpretiert. So handhabe ich das zumindest.
 
soulxheart schrieb:
Hallo djheke

Der Internet Explorer 9 unterstützt doch die HTML5-Elemente? Ausserdem habe ich für den Internet Explorer folgenden Code angefügt:

HTML: 
<!--[if lt IE 9]>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
    document.createElement("article");
    document.createElement("footer");
    document.createElement("header");
    document.createElement("hgroup");
    document.createElement("nav");
</script>



Grüsse
Zum Vergrößern anklicken....

Da html5shiv bereits eingebunden ist, solltest du eigentlich ohne document.createElement() auskommen, aber die HTML5-Elemente müssen natürlich auch im CSS als display: block deklariert werden. Oder du machst es dir einfach und setzt ein Template wie Bootstrap ein. Das bringt alles Nötige mit.
 
Tronjer schrieb:
Da html5shiv bereits eingebunden ist, solltest du eigentlich ohne document.createElement() auskommen, aber die HTML5-Elemente müssen natürlich auch im CSS als display: block deklariert werden. Oder du machst es dir einfach und setzt ein Template wie Bootstrap ein. Das bringt alles Nötige mit.
Zum Vergrößern anklicken....

Hallo Tronjer

Vielen Dank, ich werde mir Bootstrap mal anschauen. Kannst du mir evtl. ein Tutorial oder so was ähnliches empfehlen bzw. ist das hier gut: Startseite - Deutsches Bootstrap Tutorial bereitgestellt durch Catmoney.de

@Cheffchen: Vielen Dank für die Seite!



Grüsse
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben