Frage von CleYT, 55

Wie macht man mit php, html oder css eine A-Z leiste?

Heyy! Ich möchte unbedingt eine A-Z Leiste machen, wenn man also einen Buchstaben anklickt auf der Seite soll man automatisch zu dem jeweiligen Buchstaben in der Liste wo viele Items stehen hin geleitet werden...

Antwort
von Berny96, 47

Das kannst du in HTML machen. Die liste erstellst du so:

<a href="#idVonItemA">A</a>
<a href="#idVonItemB">B</a>
<a href="#idVonItemC">C</a>
...

Die Items musst du nur noch jeweils mit einer Id versehen und schon hast du deine Leiste :)

Kommentar von kingbongo ,

Wo sind die anderen Tags für die Leiste? Da fehlen ja paar: <ul><li>....

Kommentar von CleYT ,

Aber das ist doch für Pages, oder? Also wenn man auf 2 klickt kommt man dann auf ne extra Page... ich will aber auf der gleichen Seite zu ner bestimmten Stelle kommen :/ Ich bräuchte noch bisschen mehr Infos zum Code und die Ids von Berny :) Aber danke trotzdem sehr!!!

Kommentar von kingbongo ,

Schau dir an wie hier die Sprungmarke gesetzt wird und pass das ganze an dem anderen Code an

http://www.w3schools.com/html/tryit.asp?filename=tryhtml\_links\_bookmark

Kommentar von CleYT ,

Wie versehe ich die Items (In dem Fall Bilder) mit einer Id? Bin da unwissend was Ids und so angeht...

Kommentar von Berny96 ,

Da wo du den Inhalt zu "A" auf der Seite stehen hast fügst du das "id" Attribut wie folgt hinzu. Ich nehme hierfür zum Beispiel ein Listeneintrag:

<li id="idvonItemA">Apfelbaum, Antenne...</li>
Kommentar von CleYT ,

Was auch cool wäre zu erfahren wie man dann die A's... B's etc styled... damit die dann auch da sind wo ich sie will

Danke für Deine Hilfe!!

Kommentar von Berny96 ,

Das erledigst du mit CSS. CSS kannst du auch in der selben Datei wie die HTML packen wenn es sich um eine einzige oder wenige Umgestaltungen handelt. Das solltest du im head machen. Ich stelle jetzt die Farbe aller Listeneinträge auf rot:

<head>
       <style>
              li {  color: "red"; }
       </style>
</head>

Um herauszufinden welche andere CSS Attribute es außer "color" noch gibt kannst du hier alle finden:

 http://www.w3schools.com/cssreF/

Kommentar von CleYT ,

Ein großes Danke nochmal an alle!

Ich habe mich nun für diese Leiste geeinigt weil ich finde dass diese auch besser zur Webseite an sich passt und irgendwie hat die 1. Variante mit der Kastenform nicht funktioniert.

Nun habe ich aber ein weiteres kleines Problem... die A-Z Leiste verfärbt sich immer wenn man einmal auf einen Buchstaben klickt, also es verfärbt sich nur er Buchstabe, ich habe auch schon versucht der A-Z Leiste dann so wie den Buchstaben eine andere Farbe zu geben, aber das hat leider auch nicht funktioniert... ist halt blöd wenn dann die A-Z Leiste so gemustert ist von dunkel lila und blau :'D Ideen zu Behebung?

Bild wies aussieht :) http://prnt.sc/cimnq3

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten