Liste verlinken

[Daundweg]

Habe gestern Abend mit HTML und CSS angefangen, die ganze Nacht durch Tuts gelesen, und nun immernoch am probieren... :) Bin gerade dabei zu versuchen eine einfache Menüleiste zu machen, hat auch ganz gut hin...
Bis auf eine Sache! Ich wüsste gerne ob ich ein Wort so verlinken kann, das bei einem Klick, eine Liste mit weiteren Links in der Menüleiste erscheint.
Im Moment sieht das so aus:

<a href="default.html">Startpage</a><br /><br />
<a href="default2.html">About me</a><br /><br />
<a href="default3.html">About Minimal Music</a><br /><br />
GROUPS:

Die ersten 3 Wörter verlinken also schon auf die gewünschte Seite. Was ich nun gerne hätte, wäre die Möglichkeit auf das Wort "Groups" zu klicken, woraufhin darunter eine <ul> mit den verschiedenen Gruppen auftaucht. Ich könnte das natürlich so machen das GROUPS auf eine neue Seite verlinkt, wo dann die Liste druntersteht, aber da gibt es doch sicher eine elegantere Lösung?

Vielen Dank im Vorraus ;)

 

[Efchen]

Bin gerade dabei zu versuchen eine einfache Menüleiste zu machen, hat auch ganz gut hin...

Nein. Da sind <br>, das ist physische Inhaltsauszeichnung, das hat im HTML-Code nichts verloren. Ein Menü ist eine Liste von Links, wird daher als Liste (<ul>) ausgezeichnet. Alles andere ist falsche Semantik.
Das haben Dir Deine Tutorials gesagt? Dass HTML nur für die Semantik zuständig ist und nicht für die Anzeige?

Bis auf eine Sache! Ich wüsste gerne ob ich ein Wort so verlinken kann, das bei einem Klick, eine Liste mit weiteren Links in der Menüleiste erscheint.

Um auf einen Klick zu reagieren und Inhalte zu ändern, bräuchtest Du JavaScript.
Schöner ist es, wenn Du damit auch einverstanden wärest, dass etwas aufpoppt, wenn Du nur mit der Maus drüber fährst. Das geht dann per CSS und ist nicht davon abhängig, dass man JavaScript aktiviert haben muss.

Such da mal nach "CSS popup menu" oder so, da sollte man was finden.

Aber bevor Du Dich auf so komplizierte Sachen stürzt, solltest Du Dein HTML festigen. Stichwort "Semantik".

 

[Daundweg]

Am Ende tut das doch der Funktionalität keinen Abbruch, oder?
Jaja, ok, ich mach det mal richtig...

 

[Daundweg]

Die "Richtige" Schreibweise bringt mich von diesem, falschen Ergebnis:

Imageshack - beforeyv.jpg

zu diesem richtigen Ergebnis:

Imageshack - afterms.jpg

Wie mache ich das mein neues superkorrektes Listenformat aussieht wie meine vorherige falsche stümper <br />Version? oO :/

Hab im Head halt nur mit list-style-type: none; den Punkt weggemacht.

 

[Gilles]

Da kannst du dann auch für ul padding-left, und für li das margin-top und bottom rausnehmen Einfach mit padding und margin was rumspielen :)

Edit:
Nochmal ein schöner Link zum boxmodell
http://www.css4you.de/wsboxmodell/index.html

 

[Daundweg]

Padding ging super^^ jetzt noch herausfinden wie ich da nen br reinbekomm..

Zu Rollover Lists und so weiter habe ich dank Google bereits genug verwirrende Sachen gefunden, danke euch^^

 

[Gilles]

Padding ging super^^ jetzt noch herausfinden wie ich da nen br reinbekomm..

Zu Rollover Lists und so weiter habe ich dank Google bereits genug verwirrende Sachen gefunden, danke euch^^

Damit das Listitem den kompletten Platz auf der x Achse einnnimmt:

li {
  display: block;
}

 

[Daundweg]

Ich bekomm den br nicht hin, und google ist gerade auch nicht mein Freund :( Ich will einfach eine Zeile zwischen jedem Link haben.

 

[Gilles]

Ach du hast dein Menü garnicht als Liste ausgezeichnet.
Ein Menü ist eine Liste von Links.

<ul>
    <li><a href="default.html">Startpage</a></li>
    <li><a href="default2.html">About me</a></li>
    <li><a href="default3.html">About Minimal Music</a></li>
</ul>

Und wenn du dann mein li display: block drin hast , dann hast du dein Ergebnis.
Wenn du noch mehr abstand möchtest, kannst du für dein li ein margin-bottom definieren

 

[Daundweg]

<ul id="listenmenue">
                <li><a href="default.html">Startpage</a></li>
                <li><a href="default2.html">About me</a></li>
                <li><a href="default3.html">About minimal music</a></li>
                <li>GROUPS:</li>
            </ul>

So ist es nu.

#listenmenue {
list-style-type: none;
padding-left:0px;
font-size:18px;


}
#listenmenue a {
display: block;
width: 99%;


Soweit im Head. Lücke. Bitte.

 

[Gilles]

Damit das Listitem den kompletten Platz auf der x Achse einnnimmt:

li {
  display: block;
}

Richtig lesen mein Freund ;)

 

[Daundweg]

Die margin dinger waren doch nur für den Abstand zum Rand, nicht zwischen den Zeilen, oder verplan ich da was?

 

[Efchen]

Die "Richtige" Schreibweise bringt mich von diesem, falschen Ergebnis zu diesem richtigen Ergebnis
Wie mache ich das mein neues superkorrektes Listenformat aussieht wie meine vorherige falsche stümper <br />Version?

Du musst erstml verstehen, was HTML ist. Ich habe Dir die korrekte Auszeichnung mit HTML gezeigt, und Du hast mit der Anzeige im Browser geantwortet. Das eine hat mit dem anderen nichts zu tun! Um HTML richtig einzusetzen, ist es wichtig, das zu begreifen: HTML hat nichts mit der Darstellung im Browser zu tun. HTML ist für die Semantik des Inhalts.

 

[Daundweg]

Das habe ich so verstanden. Und auch nichts anderes gesagt. Die HTML Semantik ist soweit ich das beurteilen kann nun korrekt, allerdings passt nu das CSS nichtmehr, und da hab ich kurz nachgefragt. Tut mir aufrichtig Leid wenn ich dafür einen neuen Thread im CSS Forum hätte öffnen müssen.
Ich hab es nu schon linksbündig, ich möchte nurnoch einen Zeilenumbruch in die Liste packen, und schon lasse ich euch Alle in Ruhe^^

 

[Gilles]

Immer noch. Zum 3. mal. Wenn du sagst die Listen-Items sollen die ganze x Achse ausfüllen (display: block) dann ist das nächste Listen-Item in der nächsten Reihe

 

[Daundweg]

Ich weiss nicht genau was ich falsch mache, aber das funktioniert nicht.

#listenmenue {
list-style-type: none;
padding-left:0px;
font-size:18px;
display: block;
}


trotzdem kein Zeilenumbruch. Verstehe ich dich falsch?

 

[Gilles]

Ich weiss nicht genau was ich falsch mache, aber das funktioniert nicht.

#listenmenue {
list-style-type: none;
padding-left:0px;
font-size:18px;
display: block;
}


trotzdem kein Zeilenumbruch. Verstehe ich dich falsch?

Da ich gesgat habe du sollst das display block auf die Listenitems anwenden ;)

#listenmenue li {
 display: block;
}

 

[Efchen]

Kann das sein, dass Ihr aneinander vorbei redet? <li> ist von Hause aus ein Block-Element.

Daunweg möchte Leerzeilen zwischen den Menüpunkten, sehe ich das richtig?

Dann nimm ein entsprechendes margin, margin-top oder margin-bottom oder beides.

 

[Daundweg]

        #listenmenue {
                            list-style-type: none; 
                            padding-left:0px;
                            font-size:18px;
                            display: block;
                        
                        #listenmenue li {
                            display: block;
                        }

So?^^ Sorry, ich mach dat Zeug erst seid gestern Abend. So wie es da steht, funktioniert es nicht

 

[Efchen]

So wie es da steht, fehlt eine Klammer zu.

Die display:block sind unnötig, weil sowohl <ul> als auch <li> schon Block-Elemente sind.

Schriftgröße in der Einheit "px" ist nicht barrierefrei, weil der IE da das Skalieren verbietet (Bug im IE).