Navi änder bei hover nur Schriftbereich?

**Chris24** · 16.04.2008 10:26

Hallo,

ich versuche mich gerade an einer Navi mit CSS.

Hier hab ich 2 Fragen:
1. Warum ändert sich bei A:hover nicht der komplette Hintergrund
2. Warum steht der Text in der Vorschau oben und nicht in der Mitte. In der Exploreransicht ist er jedoch zentriert

Hier der Code:

HTML-Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<title>Unbenanntes Dokument</title>
<style type="text/css">

.nav {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:x-small;
    color:#000000;
    background-color:#e1e3e8;
    width:110px;
    height:35px;
    text-align:center;
    }
    
:link { color: #000000; text-decoration: none;}
A:link { color: #000000; text-decoration: none; }
A:visited { color: #000000; text-decoration: none;}
A:active { color: #ffffff; text-decoration: none; background-color:#f8f8f8; color:#333333;}
A:hover { color: #ffffff; text-decoration: none; color:#333333; background:#f8f8f8;}

</style>
</head>

<body>
<table cellspacing="0" cellpadding="0"  border="0" width="770" align="center">
    <tr>
        <td class="nav"><a href="" style="width:110px; height:35px;">Test1</a></td>
        <td class="nav"><a href="" style="width:110px; height:35px;">Test1</a></td>
        <td class="nav"><a href="" style="width:110px; height:35px;">Test1</a></td>
        <td class="nav"><a href="" style="width:110px; height:35px;">Test1</a></td>
        <td class="nav"><a href="" style="width:110px; height:35px;">Test1</a></td>
        <td class="nav"><a href="" style="width:110px; height:35px;">Test1</a></td>
        <td class="nav"><a href="" style="width:110px; height:35px;">Test1</a></td>
    </tr>
</table>
</body>

WÄre super wenn mir das jemand erklären könnte.

PS: Komplexe Beispiele hab ich schon gesehen(Mit divs h1, ul usw.). Mir geht es nur um das Verständnis.

Danke und Gruß

**koslowski** · 16.04.2008 11:01

Hi,

die Reihenfolge der Pseudoklassen ist nicht richtig.

so muss es aussehen:
a:link
a:visited
a:hover, a:focus
a:active

zu 2 müssen sich mal die Tabellenexperten äußern.

koslowski

**Chris24** · 16.04.2008 12:28

Hallo,

wenn ich das aber so umstelle wie geschrieben, ändert sich ja aber trotzdem nicht der komplette Hintergrund...

Gruß

**Efchen** · 16.04.2008 12:58

Natürlich ändert sich der komplette Hintergrund des Elements <a>.
Denn das :hover bezieht sich natürlich nur auf den Link, nicht auf die Tabellenzelle.

**Chris24** · 16.04.2008 15:24

Aha, ok, habe nun versucht das mal anders zu lösen aber auch hier ist irgendwie ein Denkfehler meinerseits drin.

Problem1: Der weise Zwischenraum soll weg
Problem2: Wie krieg ich die Felder größer?

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

  ul#Navigation {
      text-align: center;
  }
  
  ul#Navigation li {
      display:inline;
  }

  ul#Navigation a, ul#Navigation span {
    text-decoration: none; 
    color: #FFFFFF; 
    background-color: #343434;
    font-family:Verdana, Arial, Helvetica, sans-serif;
  }

  * html ul#Navigation a, * html ul#Navigation span {
    width: 1em;    /* nur fuer IE 5.0x erforderlich */
    w/idth: auto;  /* sicherheitshalber fuer IE 6 zurueckgesetzt */
  }

  ul#Navigation a:hover, ul#Navigation span {
  background:#f8f8f8;
  color:#000000;
  font-family:Verdana, Arial, Helvetica, sans-serif;,
  }


</style>
</head>
<body>
  <h1></h1>
    
  <ul id="Navigation">
    <li><a href="">Test1</a></li>
    <li><a href="">Test1</a></li>
    <li><a href="">Test1</a></li>
    <li><a href="">Test1</a></li>
    <li><a href="">Test1</a></li>
    <li><a href="">Test1</a></li>
  </ul>


</body>
</html>

Danke und Gruß
chris24

**Efchen** · 16.04.2008 15:48

Zitat von Chris24

Problem2: Wie krieg ich die Felder größer?

Durch padding. Bzw. durch Angleichen von margin/padding des <a> an die der <li>.

Gruß,
-Efchen

P.S.: Ein Upload der Seite ist für Antwortende einfacher, als den Code zu posten. Da kriegt man dann womöglich auch mehr Antworten.

**koslowski** · 16.04.2008 15:52

Hi,

der weisse Zwischenraum heißt "Whitespace" und entsteht durch Zeilenumbrüche oder Leerstellen im Quelltext, besonders bei der von dir gewählten display:inline-Variante für die Navi.

Du kannst entweder im Quelltext die ganze ul #navigation ohne Umbrüche und Leerstellen hintereinander schreiben. Das wird dann aber etwas unübersichtlich.

Oder du gibst #navigation li einen negativen rechten margin (margin-right:-0.4em z.B.).

Oder du wählst die Floatvariante um dein Navi auf die Reihe zu bekommen.

koslowski

edit in versch. Arten der Navis kannst du dich
hier
einarbeiten.

**Chris24** · 16.04.2008 16:17

@koslowski: Vielen Dank, das mit dem negativen Wert hat wunderbar geklappt. Super

@Efchen: sorry, ich hab bei deinen Beitrag jetzt nicht richtig verstanden was du damit meinst. Wenn ich jetzt bei a und bei li jeweils da padding angebe, ändert sich ja aber auch die Größe wenn ich den Text ändere. Wie muss das denn sein wenn ich z. B. fest 100px breit und 30px hoch möchte? Oder muss ich das über eine normale tabelle machen wo ich das dann definiere?

Bzw. ist es ja so das ich, wenn ich padding angebe, wieder den gleichen Effekt habe das nur der Link beim hover sich ändert, der Rest aber nicht. Ich steh hier auf dem Schlauch, ist echt eine schwere Geburt.

Vielen Dank schonmal für die Hilfe.

**koslowski** · 16.04.2008 16:32

Hi,

Zitat von Chris24

@koslowski: Vielen Dank, das mit dem negativen Wert hat wunderbar geklappt. Super

@Efchen: sorry, ich hab bei deinen Beitrag jetzt nicht richtig verstanden was du damit meinst. Wenn ich jetzt bei a und bei li jeweils da padding angebe, ändert sich ja aber auch die Größe wenn ich den Text ändere. Wie muss das denn sein wenn ich z. B. fest 100px breit und 30px hoch möchte? Oder muss ich das über eine normale tabelle machen wo ich das dann definiere?

Vielen Dank schonmal für die Hilfe.

geh doch mal dem Link nach den ich per edit in meinem vorigen Beitrag eingefügt habe, dort gibts ein Tut zu Navis

**Efchen** · 17.04.2008 07:55

Zitat von Chris24

Wenn ich jetzt bei a und bei li jeweils da padding angebe, ändert sich ja aber auch die Größe wenn ich den Text ändere.

Genau.

Wie muss das denn sein wenn ich z. B. fest 100px breit und 30px hoch möchte?

Das Problem ist, dass Du Deine Listenelemente zum Inline-Element gemacht hast. Dann klappen width+height nicht mehr. Statt display:inline; solltest Du float:left; verwenden, dann kannst Du auch eine feste Größe angeben.

Oder muss ich das über eine normale tabelle machen wo ich das dann definiere?

Was hat denn das jetzt mit einer Tabelle zu tun, wenn Du vom Design redest? Eine Tabelle ist zur Auszeichnung von tabellarischen Daten, aber wir reden doch vom Design und nicht der Struktur Deines Inhalts.

Bzw. ist es ja so das ich, wenn ich padding angebe, wieder den gleichen Effekt habe das nur der Link beim hover sich ändert, der Rest aber nicht.

Deswegen passt man die Größe des Links der Größe des Listenelements an, damit die gleich groß sind.

Gruß,
-Efchen

Thema: Navi änder bei hover nur Schriftbereich?

LinkBack

Themen-Optionen

Navi änder bei hover nur Schriftbereich?

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

:hover geht nach onclick nicht mehr

[3ColumnsLayout] Flexible, mittlere Spalte

Navigation mit Hover und keinen Ladezeiten

drop dwon menu, aber nocha oben !!!

Pseudoklasse :hover & <p>

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen