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

Navigationsbar zentrieren

speedyfabi26

speedyfabi26

Neues Mitglied
Guten Tag!
Da wir in der Schule, als Aufgabe im Fach Informatik, mit dem Gelernten eine Website erstellen sollten, dachte ich mir, dass ich einpaar nette Sachen einfüge, die wahrscheinlich nicht jeder hat.
Somit habe ich im Internet eine Anleitung zu einer Navigationsbar gegoogelt und habe diese auch verstanden und eingebaut. Jedoch ist diese nun horizontal auf der rechten Seite, ich hätte sie gerne in der Mitte.
Weiters möchte ich fragen, ob es eine Möglichkeit gibt, diese ÜBER ein Bild zu machen. Beispiel: dietributevonpanem.de
Hier mein Code:
"
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tribute von Panem - Fanseite</title>
<meta name="author" content="Fabian">
<meta name="editor" content="html-editor phase 5">
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 160px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    background-color: #7A991A;
}

</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<ul id="nav">
         <li><a href="home.html">Home</a></li>
         <li><a href="books.html">Bücher</a></li>
         <li><a href="movies.html">Filme</a></li>
         <li><a href="writer.html">Autorin</a></li>
         <li><a href="photos.html">Bildergalerie</a></li>
<img src="slider_panem.jpg" alt="" border="0" width="100%" height="">
</ul>
</body>
</html>

Es sollte ungefähr so aussehen, wie bei (dietributevonpanem.de)
Ich wäre sehr froh, von euch zu hören! Danke!
 
Wenn Du schon mit HTML anfängst, dann bitte mit HTML5 und nicht mit XHTML. Damit bist Du auch zukunftsfähig (nach der Schule ;) ).

Unabhängig hast Du in deinem Quellcode auch für XHTML mehrere grobe Fehler. Farbangaben macht man nicht mehr in HTML sondern per CSS - betrifft alle <body>-Attribute in deinem Quellcode. Raus damit bitte. Weiterhin sind innerhalb von <ul> nur Kindelemente vom Typ <li> zulässig. Das Bild muss dort also auch raus.

Wenn Du eine Navigation zentrieren willst, schau dir das Beispiel hieran:
http://www.gipspferd.de/CSS-Anleitungen/Navigation-horizontal-zentrieren
Gibt es ähnlich noch vielfach im Netz.

Das Bild brauchst Du dann einfach nur nach deinem <ul> einfügen - nicht innerhalb.
 
threadi schrieb:
Wenn Du schon mit HTML anfängst, dann bitte mit HTML5 und nicht mit XHTML. Damit bist Du auch zukunftsfähig (nach der Schule ;) ).

Unabhängig hast Du in deinem Quellcode auch für XHTML mehrere grobe Fehler. Farbangaben macht man nicht mehr in HTML sondern per CSS - betrifft alle <body>-Attribute in deinem Quellcode. Raus damit bitte. Weiterhin sind innerhalb von <ul> nur Kindelemente vom Typ <li> zulässig. Das Bild muss dort also auch raus.

Wenn Du eine Navigation zentrieren willst, schau dir das Beispiel hieran:
http://www.gipspferd.de/CSS-Anleitungen/Navigation-horizontal-zentrieren
Gibt es ähnlich noch vielfach im Netz.

Das Bild brauchst Du dann einfach nur nach deinem <ul> einfügen - nicht innerhalb.
Zum Vergrößern anklicken....
Hey, danke für deine Antwort! Ich habe es nun, durch Hilfe vom Internet geschafft, meine Vorstellung zu verwirklicken.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tribute von Panem - Fanseite</title>
<meta name="author" content="Fabian">
<meta name="editor" content="html-editor phase 5">
<style>
body {
         margin: 0;
         padding: 0;
}

ul {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 50%;

}
li {
    display: inline;
    float: left;
}

a:link, a:visited {
    display: inline-block;
    width: 160px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #977A52;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    background-color: #BE572C;
}

.tribute
{
         width: 100%;
         min-width: 100%;
}

</style>
</head>
<body text="#FFFFFF" bgcolor="#977A52" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<img class="tribute" src="header.jpg"/>
<div>
<ul id="nav">
    <li><a href="home.html">Home</a></li>
    <li><a href="books.html">Bücher</a></li>
    <li><a href="movies.html">Filme</a></li>
    <li><a href="writer.html">Autorin</a></li>
    <li><a href="photos.html">Bildergalerie</a></li>

</ul>
</div>
<br>
<br>
<p align="center">
         <h3>Herzlich Willkommen auf dieser Tribute von Panem Fanseite! </h3>
<br>

</p>
</body>
</html>

Der Code sieht nun so aus, ich hätte noch eine kleine Frage. Bei mir funktioniert das <p align> nicht mehr. Ich habe deswegen mal kurz CSS durchsucht und den float: left gefunden. Wenn ich den rausnehme, passiert auch nichts. Könntest du mir sagen, was im Zusammenhang damit falsch ist, und wie ich den Text zentriert bekomme?
 
threadi schrieb:
Auch hier kann ich nochmal wiederholen: Gestaltung macht man mit CSS, nicht mit HTML. Wie man Text bzw. Inline-Elemente zentriert ist z.B. hier beschrieben:
https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Inhalte_zentrieren
Mit float hat das nichts zu tun.

Und bitte stell endlich auf HTML5 um :D
Zum Vergrößern anklicken....
Ich werde private Projekte sicherlich mit HTML5 machen, jedoch verlangt unser Lehrer, dass wir in der Schule weiterarbeiten. Und dort steht uns nur ein HTML4 Editor zur Verfügung. Nun mache ich dieses Projekt lieber direkt in HTML4.
Und nochmal danke, es hat mir sehr geholfen!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben