Navigation mit CSS

Mauki

Mauki

Aktives Mitglied
Thread Starter
Dabei seit
24.07.2002
Beiträge
15.499
Reaktionspunkte
189
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 bearbeitet von einem Moderator:
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...
 
<ot>
das impressum hätte wohl eher die bezeichnung "faq" verdient...
</ot>

ausserdem fehlt die postanschrift und eine email-adresse.

;)
 
@hal

jaja das Impressum. Das werde ich noch irgendie umbennen. Eigentlich brauchen wir ja kein Impressum und ne Postanschrift gibt es auch nicht.
 
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
 
Nimm für CSS Basteleien lieber Firefox zum Checken, der
beherscht wenigstens 100% CSS., also quasi Referenz.
 
Original geschrieben von HAL9500
a) Doch. Aber das wirst Du noch rausfinden.
b) Wie, seid ihr virtuelle Pfadfinder ?!

;)

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 ?
 
Sorry, an dieser Stelle sage ich dass, was Du auch gerne sagst: Suchfunktion.

:cool:
 
@lengsel

macht irgendwie kein Unterschied zu vorher ?
 
Original geschrieben von Mauki
@lengsel

macht irgendwie kein Unterschied zu vorher ?
&nbsp;

Bei mir (getestet mit Safari/Camino/Firefox, alle unter OS X) schon, und zwar genau wie gewünscht.

Grüße,
Flo
 
@Hal

du liest meine Postings :D

Ich werde mal die Suche bemühen, aber nicht mehr heute :eek:
 
Um es mit knappen Worten zu erklären:

Bei der Anbieterkennzeichnung (Impressum) unterscheidet man zwischen dem
Diensteanbieter und einer verantwortlichen Person. Verantwortlich kann nur eine
volljährige Person und nicht ein etwa eine Gruppe von Personen oder ein Verein sein.

Der Diensteanbieter ist der Verband Christlicher Pfadfinderinnen und Pfadfinder Stamm
Denkendorf. Der Verantwortliche für die Website kann von euch frei bestimmt werden,
allerdings muss es sich dabei um eine volljährige Person handeln, die mit vollen Namen,
der Postanschrift sowie einer eMail-Adresse genannt wird.

P.S. Sorry für das Delay, habe den Fred eben erst wieder entdeckt...

;)
 
Zurück
Oben Unten