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.739
    Zustimmungen:
    138
    MacUser seit:
    24.07.2002
    Navigation mit CSS

    ich habe eine [DLMURL="http://www.vcp-denkendorf.de/entwurf/start/index.htm"]Navigationsleiste mit CSS[/DLMURL]. 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.

    [DLMURL="http://www.vcp-denkendorf.de/entwurf/css/start.css"]Stylesheet[/DLMURL]
     
    Zuletzt von einem Moderator bearbeitet: 25.10.2015
  2. etienne

    etienne Gast

    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 Gast

    <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.739
    Zustimmungen:
    138
    MacUser 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 Gast

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

    ;)
     
  6. lengsel

    lengsel MacUser Mitglied

    Beiträge:
    4.627
    Zustimmungen:
    53
    MacUser 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 Gast

    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.627
    Zustimmungen:
    53
    MacUser seit:
    25.11.2003
    &nbsp;

    macht es auch richtig...

    Grüße,
    Flo
     
  9. Mauki

    Mauki Thread Starter MacUser Mitglied

    Beiträge:
    14.739
    Zustimmungen:
    138
    MacUser 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 Gast

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

    :cool:
     
Die Seite wird geladen...
Ähnliche Themen - Navigation CSS
  1. muplo
    Antworten:
    5
    Aufrufe:
    992
    Zieger
    06.08.2013
  2. SignoreRossi
    Antworten:
    6
    Aufrufe:
    864
    SignoreRossi
    28.06.2011
  3. Nielz
    Antworten:
    12
    Aufrufe:
    813
    rm -r *
    23.02.2009
  4. Mauki
    Antworten:
    4
    Aufrufe:
    1.381
    miss.moxy
    18.08.2008
  5. CyberJack
    Antworten:
    2
    Aufrufe:
    413
    CyberJack
    08.03.2007