Navigation mit CSS

Dieses Thema im Forum "Web Page Design" wurde erstellt von Mauki, 24.04.2004.

  1. Mauki

    Mauki Thread Starter MacUser Mitglied

    Beiträge:
    14.791
    Zustimmungen:
    138
    Mitglied seit:
    24.07.2002
    Navigation mit CSS

    ich habe eine Navigationsleiste mit CSS. Nun hätte ich gerne, das beim überfahren der Links der Hintergrund geändert wird. Allerdings soll der Hintergrund direkt an den Kopf und an den Hauptteil anschließen, also ohne Lücken dazwischen.

    Wie kann ich das am besten realisieren. Wäre da ne Tabelle ratsam und jeder Link in ne extra Spalte. Allerdings weiß ich nicht wie man den <td > tag in den Hover CSS Bereich reinbekommt, für den Hintergrund. Praktisch wäre auch, wenn alle Links gleich breit wären.

    Stylesheet
     
    Zuletzt von einem Moderator bearbeitet: 25.10.2015
  2. Die Links einfach auf eine Liste aufteilen und die Liste dann per CSS bearbeiten. Wichtig ist insbesondere das Element "display".

    Hier wird das ausführlich dargestellt: http://css.fractatulum.net/sample/menu1format.htm

    Es gibt auch noch ein paar mehr Seiten, die sich mit der CSS-Formatierung von Menü-Listen beschäftigen...
     
  3. HAL

    HAL

    <ot>
    das impressum hätte wohl eher die bezeichnung "faq" verdient...
    </ot>

    ausserdem fehlt die postanschrift und eine email-adresse.

    ;)
     
  4. Mauki

    Mauki Thread Starter MacUser Mitglied

    Beiträge:
    14.791
    Zustimmungen:
    138
    Mitglied seit:
    24.07.2002
    @hal

    jaja das Impressum. Das werde ich noch irgendie umbennen. Eigentlich brauchen wir ja kein Impressum und ne Postanschrift gibt es auch nicht.
     
  5. HAL

    HAL

    a) Doch. Aber das wirst Du noch rausfinden.
    b) Wie, seid ihr virtuelle Pfadfinder ?!

    ;)
     
  6. lengsel

    lengsel MacUser Mitglied

    Beiträge:
    4.553
    Zustimmungen:
    53
    Mitglied seit:
    25.11.2003
    So auf die Schnelle:

    in der html-Datei:

    <table cellspacing="0" class="nav">
    <tr>
    <td>| <a class="nav" href="http://www.vcp-denkendorf.de/entwurf/start/index.htm">Home</a> | <a class="nav" href="http://www.vcp-denkendorf.de/entwurf/uebersicht">Übersicht</a>
    | <a class="nav" href="http://www.vcp-denkendorf.de/entwurf/derstamm/index.htm">der Stamm</a> | <a class="nav" href="http://www.vcp-denkendorf.de/entwurf/diepfadfinder/index.htm">die
    Pfadfinder</a> | <a class="nav" href="http://www.vcp-denkendorf.de/entwurf/galerie/index.htm">Galerie</a>
    | <a class="nav" href="http://www.vcp-denkendorf.de/entwurf/start/index.htm">Gästebuch</a> | <a class="nav" href="http://www.vcp-denkendorf.de/entwurf/kontakt/index.htm">Kontakt</a>
    | <a class="nav" href="http://www.vcp-denkendorf.de/entwurf/links/index.htm">Links</a> | <a class="nav" href="http://www.vcp-denkendorf.de/entwurf/impressum/index.htm">Impressum</a>
    | <a class="nav" href="http://www.vcp-denkendorf.de/entwurf/start/index.htm">Member</a> |</td>
    </tr>
    </table>


    in der CSS-Datei:

    /* Stylesheets für Navigationslinks */

    table.nav {
    background-color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#FFFFFF;
    font-weight:normal;
    margin: 0px auto 0px auto;
    text-align: center;
    width: 750px;
    padding: 0;
    }

    table td {
    padding: 0;
    }

    table tr {
    padding: 0;
    }

    a.nav {
    color:#FFFFFF;
    text-decoration:none;
    }

    a.nav:visited {
    text-decoration: none;
    color: #FFFFFF;
    }

    a.nav:link {
    color: #FFFFFF;
    text-decoration: none;
    }

    a.nav:hover {
    background-color:#e9e9e9;
    color:green;
    }

    a.nav:active {
    color:#FF0000;
    text-decoration:none;
    }

    In Safari funktionierts, in Camino ist unter dem Link noch ein ca. 1px breiter Strich (den man ja "wegstylen" kann...ähem)

    Grüße,
    Flo
     
  7. HAL

    HAL

    Nimm für CSS Basteleien lieber Firefox zum Checken, der
    beherscht wenigstens 100% CSS., also quasi Referenz.
     
  8. lengsel

    lengsel MacUser Mitglied

    Beiträge:
    4.553
    Zustimmungen:
    53
    Mitglied seit:
    25.11.2003
    &nbsp;

    macht es auch richtig...

    Grüße,
    Flo
     
  9. Mauki

    Mauki Thread Starter MacUser Mitglied

    Beiträge:
    14.791
    Zustimmungen:
    138
    Mitglied seit:
    24.07.2002
    a) warum ? wir sind keinen Firma und keine Verein ?
    b) wir sind bei uns im Gemeindezentrum der Kirchengemeinde beheimatet, aber das ist ja eigentlich nicht die Postanschrift ?
     
  10. HAL

    HAL

    Sorry, an dieser Stelle sage ich dass, was Du auch gerne sagst: Suchfunktion.

    :cool:
     
Die Seite wird geladen...

Diese Seite empfehlen