[HTML & CSS] Menü erstellen

[Gamekeystore]

Hi Leute,

ich habe schon gehört, dass man Menüs mit Listen erstellen kann und habe es versucht. Rausgekommen ist:

HTML:

<ul id="menu">
   <li> <a class="link" href="deineseite1.html"> deine seite 1</a> </li>
   <li> <a class="link" href="deineseite2.html"> deine seite 2</a> </li>
   <li> <a class="link" href="deineseite3.html"> deine seite 3</a> </li>
   <li> <a class="link" href="deineseite4.html"> deine seite 4</a> </li>
</ul>

CSS:

#menu{
float:left;
display:block;
list-style-type:none;
background-color:green;
}

.link{
text-decoration:underline;
color:white;
}

Dann sind aber nur die untereinander. Ich will es aber so machen, ähnlich wie beim Menü von Elitepvpers, dass das Menü aus Kästen, die nebeneinander sind und in denen der Text drin steht, besteht.

Würde mich freuen, wenn ihr mir da weiterhelfen könntet.

Grüße
Michi

[NotEnoughForYou]

Li ein float:left geben

[Hiris]

google mal selfhtml Menü erstellen oder so :3

Ist step by step erklärt^^

[Gamekeystore]

Originally Posted by NotEnoughForYou

Li ein float:left geben

Was soll ich genau tun? Verstehe das nicht so ganz.

[flickz.]

Originally Posted by PR∅GR∀MM∋R

Was soll ich genau tun? Verstehe das nicht so ganz.

Beim Style noch:

li {
float: left;
}

[Gamekeystore]

Danke für die Hilfe und ich habe es jetzt nach dem Tutorial, was Hiris vorgeschlagen hat, teils geschafft.

Es sind aber dadurch auch zwei neue Fragen entstanden:

Für was benötigt man das " "?

<li><a href="#Beispiel">Seite[B]&nbsp;[/B]1</a></li>

und was bedeutet "em"?

margin: 0; padding: 0.8em;

Mein Code fürs Menü ist:

HTML:

<ul id="Navigation">
    <li><a href="#Beispiel">Seite 1</a></li>
    <li><a href="#Beispiel">Seite 2</a></li>
    <li><a href="#Beispiel">Seite 3</a></li>
    <li><span>aktuelle Seite</span></li>
    <li><a href="#Beispiel">Seite 5</a></li>
    <li><a href="#Beispiel">Seite 6</a></li>
  </ul>

CSS:

  ul#Navigation {
    margin: 0; padding: 0.8em;
    text-align: center;
    border: 1px solid black;
    background-color: silver;
  }
  ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0.4em; padding: 0;
  }

  ul#Navigation a, ul#Navigation span {
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 1em;    /* nur fuer IE 5.0x erforderlich */
    w/idth: auto;  /* sicherheitshalber fuer IE 6 zurueckgesetzt */
  }
  ul#Navigation a:hover, ul#Navigation span {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }

Würde mich freuen, wenn ihr mir die 2 obigen Fragen beantworten könntet und falls mein jetztiger Code fehlerhaft oder schlecht geschrieben ist, bitte auch mir sagen.

Grüße
Michi

[flickz.]

  Macht n Leerzeichen.
em ist ne Einheit also kannste auch px (pixel) nehmen.

Edit:

Die Zeichenfolge   erzeugt ein geschütztes Leerzeichen (nbsp = non-breaking space = Leerzeichen ohne Umbruch). Es wird ein normales Leerzeichen angezeigt, doch an dieser Stelle kann kein Zeilenumbruch erfolgen. Notieren Sie die Zeichenfolge inklusive dem "kaufmännischen Und" (&) am Beginn und dem Strichpunkt am Ende. Die gleiche Wirkung erzielen Sie durch Notieren der Zeichenfolge  .

Danach per Google zu suchen hätte dich auch weitergebracht.

[Gamekeystore]

Danke Leute,

kennt wer gute Tutorials zu HTML, CSS und JavaScript?

[マルコ]

Nunja... Forensuche gibts übrigens auch. Und google auch. Ich versteh es nicht... Warum fragen Leute nach Tutorials. Sucht doch einfach mal bei Google nach "HTML Tut", "CSS Tut" oder "JS Tut". D tauchen dann Seiten auf wie



und

[Hiris]

Selfhtml, von oben nach unten durcharbeiten :3

[Gamekeystore]

Originally Posted by マルコ

Nunja... Forensuche gibts übrigens auch. Und google auch. Ich versteh es nicht... Warum fragen Leute nach Tutorials. Sucht doch einfach mal bei Google nach "HTML Tut", "CSS Tut" oder "JS Tut". D tauchen dann Seiten auf wie



und

Danke ich werde mal da das Durcharbeiten.

[boxxiebabee]

Originally Posted by マルコ

Nunja... Forensuche gibts übrigens auch. Und google auch. Ich versteh es nicht... Warum fragen Leute nach Tutorials. Sucht doch einfach mal bei Google nach "HTML Tut", "CSS Tut" oder "JS Tut". D tauchen dann Seiten auf wie



und

Von w3schools ist eher abzuraten, siehe:

[マルコ]

Originally Posted by boxxiebabee

Von w3schools ist eher abzuraten, siehe:

Danke. Hast mich überzeugt. Bisher habe ich w3schools nur als Nachschlagewerk für Attribute benutzt. Dafür war es ausreichend, da ich meist nur eine Übersicht brauchte.
Die Tuts habe ich auch irgendwann entdeckt und alles sah recht sauber und gut aus. Aber wenn ich mir anschaue, wie viele Fehler sich dort anhäufen...

[Zettabytes*]

Originally Posted by Gamekeystore

Was soll ich genau tun? Verstehe das nicht so ganz.

Wie wäre es mit HTML und CSS lernen?
Wenn dir das schon schwer fällt, dann solltest du einfach mal was lernen.

[Gamekeystore]

Ich lerne es schon.

Tipp: Thema war schon alt.