kernig: Grafik und Text vertikal ausgerichtet

SELF-Forum

Grafik und Text vertikal ausgerichtet

kernig
– Informationen zu den Bewertungsregeln

Hallo zusammen!

Vorweg: Nach einigen Anläufen mit "BuntiKlickiProgrammen" sehe ich nun die Notwendigkeit ein, doch auch ein wenig html und css zu lernen.

Ich bastel gerade eine Seite, die mir ein netter Forumsteilnehmer im Firefox-Forum mal eben so auf die Schnelle zusammengebaut hat und mich damit einerseits sehr erfreut und andererseits ordentlich frustriert hat(weil er das so fix hingekriegt hat).

http://tordox.org/auenhof/index.html

Diese Seite nutze ich als Vorlage für meine weiteren Versuche, dies und das möchte ich im Layout noch ändern und alle Links und Grafiken fehlen auch noch. Ich habe hier NVU, versuche aber, alles in Notepad++ hinzubekommen. Im Firefox habe ich mir eine Toolbar (web developer Toolbar) installiert, die mir sehr dabei hilft, die Seite zu verstehen.

Self-Html nutze ich dabei als Nachschlagewerk und versuche so, Zeile für Zeile die Sache nachzuvollziehen.

So richtig den Durchblick habe ich also noch nicht, um es kurz zu sagen.

Gerade kämpfe ich damit, eine kleine Navigation unter dem Textblock einzubauen: Pfeil nach "links", daneben Schriftzug zurück, Schriftzug "weiter", Pfeil nach rechts. Ich bekomme die Schrift einfach nicht vertikal in der Mitte der Pfeile ausgerichtet, was mache ich falsch? Da sind wahrscheinlich durchaus doofe Fehler drin, ich hab einiges ausprobiert. Hier der html-Code:

<div id="textnav"><img style=
"vertical-align: middle; width: 20px; height: 23px;" alt=
"linkspfeil" src="bilder/linkspf.gif" />
<ul>
<li><a>zur&uuml;ck</a></li>
<li style="list-style: none">|</li>
<li><a>weiter</a></li>
<li style="list-style: none"><img style=
"vertical-align: middle; width: 20px; height: 23px;" alt=
"rechtspfeil" src="bilder/rechtspf.gif" /></li>
</ul>
</div>

und der zugehörige Teil der CSS:

div#textnav li a:hover{
    text-decoration: underline}

div#textnav img:{
    vertical-align: middle}

Wäre für Hilfestellung (evtl. sogar mit Erklärung, ich will das ja lernen) sehr dankbar

kernig

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Grafik und Text vertikal ausgerichtet

    Volker Nebelung
    – Informationen zu den Bewertungsregeln

    Hallo zusammen!

    Hallo,

    <div id="textnav"><img style=
    "vertical-align: middle; width: 20px; height: 23px;" alt=
    "linkspfeil" src="bilder/linkspf.gif" />
    <ul>
    <li><a>zur&uuml;ck</a></li>
    <li style="list-style: none">|</li>
    <li><a>weiter</a></li>
    <li style="list-style: none"><img style=
    "vertical-align: middle; width: 20px; height: 23px;" alt=
    "rechtspfeil" src="bilder/rechtspf.gif" /></li>
    </ul>
    </div>

    div#textnav img:{
        vertical-align: middle}

    »»

    Das ist doppelt gemoppelt: Einmal vertical-align reicht, streich das style="..." im HTML-Text.
    Außerdem ein : zuviel nach img.

    Korrigieren und dann Rückmeldung geben.

    Gruß, Volker

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Grafik und Text vertikal ausgerichtet

      kernig
      – Informationen zu den Bewertungsregeln

      Korrigieren und dann Rückmeldung geben.

      aber gern!

      Hallo Volker!

      Es war wohl der Doppelpunkt, den hätte ich in 100 Jahren nicht gefunden, ich mußte auch nach Deinem Hinweis noch lange suchen. In den Zeilen darüber ist nämlich ein "hover"-Effekt definiert und ich habe in meiner grenzenlosen Unwissenheit den dortigen Doppelpunkt für die nächsten Zeilen auch übernommen.

      Jetzt ist durch meine Probiererei der Link-Text lila geworden, aber das bekomm ich auch noch hin...

      Vielen Dank für schnelle Hilfe

      kernig

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln