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

Navibar

Niclas D.

Niclas D.

Mitglied
Hallo liebe html.de Community,da ich noch ein Anfaänger bin ( vor 3 tagen mit html angefangen) hab ich Probleme mit meiner Seite.Mein Problem ist, dass ich die Navibar nicht in die Mitte bekomme. Sie ist immer links gebunden und der Text ist auch nicht in der Mitte.Danke schonmal für eure Hilfe ich packe schonmal meine html und css datei hier mit rein. Wenn ihr noch Vorschläge habt, wie ich sie verbessern kann nehme ich diese gerne entgegen. mfG Niclas
 

Anhänge

  • Website2.zip
    84,3 KB · Aufrufe: 0
Werbung:
Kannst du den Quelltext hier enbinden? Dann würdest du auch die Hilfe der Personen bekommen, die sich keine Datei mit möglicherweise fragwürdigem Inhalt runterladen wollen ...

Aber ganz grundlegend ohne Code: Dafür brauchst du CSS.
 
Werbung:
Du kannst deinen Quellcode hier in den Editor kopieren und mit den 3 Symbolen rechts in der Symbolleiste formatieren. Idealer wäre es jedoch, wenn Du deine Seite irgendwo online stellen und den Link dazu hier posten könntest. Dann könnte man sich das direkt im Browser anschauen und analysieren statt erst Quellcode lesen und den Aufbau erkennen zu müssen ;)
 
Html

Code: 
<html>

<head>
    <title>Index</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
<div id="top">
    <div id="logo">
    </div>
    </div>
    <div id="navi">
        <a href="pages/home.html" target="fenster"><div class="not_selected">Startseite </div><a>
        <a href="pages/uebermich.html" target="fenster"><div class="not_selected">&Uuml;ber mich</div><a>
        <a href="pages/meinebilder.html" target="fenster"><div class="not_selected">Meine Bilder</div><a>
        <a href="pages/meinevideos.html" target="fenster"><div class="not_selected">Meine Videos</div><a>
        <a href="pages/programme.html" target="fenster"><div class="not_selected">Programme</div><a>
        <a href="pages/tutorials.html" target="fenster"><div class="not_selected">Tutorials</div><a>
        <a href="pages/kontakt.html" target="fenster"><div class="not_selected">Kontakt</div><a>
    </div>

</body>
</html>

CSS

Code: 
body
{
background-color: lightyellow;
text-align:center;
width:1800px;
height: 3000px;
background-image: url(images/MainBlau.jpg);
}
#top{
    position:absolute;
    z-index:2;
    width:1900px;
    top:10px;
    left:10px;
}
#navi{
    position: absolute;
    z-index:2;
}
#navi a{
    text-decoration: none;
    color: black;
}
#navi div.not_selected{
    width:186px;
    height:20px;
    padding-top:20px;
    background: url(images/navibg4.jpg);
    font-family: Times;
    font-variant: small-caps;
    float:left;
    text-align: center;
}
#navi div.not_selected:hover{
    background-image: url(images/navibg3.jpg);
}
.not_selected:hover{
    font-style: italic;
    color: #FF0000;
}
#navi div.selected{
    width:186px;
    height:20px;
    padding-top:20px;
    background:orange;
    font-family: Times;
    font-variant: small-caps;
    float:left;
    text-align: center;
}
 
Ein paar Tipps für den Einstieg:

- Ein valides HTML-Dokument benötigt einen Doctype.
- Eine Navigation wird nicht per Div, sondern mittels einer unsortierten Liste erstellt.
- Nimm niemals position:absolute, solange du dessen Auswirkung auf den Textfluss nicht kennst.
- Um ein Blockelement zu zentrieren, verwendet man margin:auto.
 
Werbung:
Ich habe einen doctype. Aber habe ihn nicht mit kopiert damit.es nivht zu lang ist.

Danke für die anderen tipps werde sie morgen gleich mal anwenden ;)
 
Du hast in den 3 Tagen viel gelernt, aber weißt noch nicht so richtig, die Sachen anzuwenden.

1. Beschäftige dich mal mit der Breite und Höhe eines Layouts, das gibt man nicht in so großen Pixelzahlen an, auf kleineren Bildschirmen soll man das ja auch noch gut lesen können. Wie sagte Peter Müller, "das Web ist nicht aus Papier."
2. Z-index brauchst du bei einem einfachen horizontalen Navigationsmenü erst mal überhaupt nicht.
3. In einem <a> Tag kann man kein weiteres <div> Element speichern.
4. Beschäftige dich mal mit Links und den 5 Pseudoelementen "a:link, a:visited, a:hover; a:focus, a:active".
5. Schaue mal nach, worin der Unterschied zwischen "Blockelementen" und "Inlineelementen" ist.
6. Unsortiere Listen (Tag <ul>)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben