[HTML & CSS] Menü erstellen

Page 1 of 2 1 2
10/29/2012 18:51 Gamekeystore#1
Hi Leute,

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

HTML:

HTML Code:
<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:

Code:
#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
10/29/2012 19:15 NotEnoughForYou#2
Li ein float:left geben
10/29/2012 19:16 Hiris#3
google mal selfhtml Menü erstellen oder so :3

Ist step by step erklärt^^
10/29/2012 19:23 Gamekeystore#4
Quote:
Originally Posted by NotEnoughForYou View Post
Li ein float:left geben
Was soll ich genau tun? Verstehe das nicht so ganz.
10/29/2012 19:29 flickz.#5
Quote:
Originally Posted by PR∅GR∀MM∋R View Post
Was soll ich genau tun? Verstehe das nicht so ganz.
Beim Style noch:
Code:
li {
float: left;
}
10/29/2012 19:57 Gamekeystore#6
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 "&nbsp;"?

HTML Code:
<li><a href="#Beispiel">Seite[B]&nbsp;[/B]1</a></li>
und was bedeutet "em"?

Code:
margin: 0; padding: 0.8em;
Mein Code fürs Menü ist:

HTML:

HTML Code:
<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:

Code:
  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
10/29/2012 20:02 flickz.#7
&nbsp; Macht n Leerzeichen.
em ist ne Einheit also kannste auch px (pixel) nehmen.

Edit:
Quote:
Die Zeichenfolge &nbsp; 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 &#160;.
Danach per Google zu suchen hätte dich auch weitergebracht.
10/29/2012 21:44 Gamekeystore#8
Danke Leute,

kennt wer gute Tutorials zu HTML, CSS und JavaScript?
10/29/2012 22:10 マルコ#9
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

[Only registered and activated users can see links. Click Here To Register...]

und

[Only registered and activated users can see links. Click Here To Register...]
10/29/2012 22:12 Hiris#10
Selfhtml, von oben nach unten durcharbeiten :3
10/29/2012 22:21 Gamekeystore#11
Quote:
Originally Posted by マルコ View Post
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

[Only registered and activated users can see links. Click Here To Register...]

und

[Only registered and activated users can see links. Click Here To Register...]
Danke ich werde mal da das Durcharbeiten.
10/30/2012 10:40 boxxiebabee#12
Quote:
Originally Posted by マルコ View Post
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

[Only registered and activated users can see links. Click Here To Register...]

und

[Only registered and activated users can see links. Click Here To Register...]
Von w3schools ist eher abzuraten, siehe:
[Only registered and activated users can see links. Click Here To Register...]
10/30/2012 10:58 マルコ#13
Quote:
Originally Posted by boxxiebabee View Post
Von w3schools ist eher abzuraten, siehe:
[Only registered and activated users can see links. Click Here To Register...]
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...
11/03/2012 10:05 Zettabytes*#14
Quote:
Originally Posted by Gamekeystore View Post
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.
11/03/2012 11:10 Gamekeystore#15
Ich lerne es schon.

Tipp: Thema war schon alt.
Page 1 of 2 1 2