1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Navigation mit CSS

Dieses Thema im Forum "Web-Design und Web-Programmierung" wurde erstellt von Mauki, 24.04.2004.

  1. Mauki

    Mauki Thread Starter MacUser Mitglied

    Mitglied seit:
    24.07.2002
    Beiträge:
    14.831
    Zustimmungen:
    140
    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
     
  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

    Mitglied seit:
    24.07.2002
    Beiträge:
    14.831
    Zustimmungen:
    140
    @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

    Mitglied seit:
    25.11.2003
    Beiträge:
    4.553
    Zustimmungen:
    53
    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

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

    macht es auch richtig...

    Grüße,
    Flo
     
  9. Mauki

    Mauki Thread Starter MacUser Mitglied

    Mitglied seit:
    24.07.2002
    Beiträge:
    14.831
    Zustimmungen:
    140
    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