• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navi änder bei hover nur Schriftbereich?

Status
Für weitere Antworten geschlossen.
C

Chris24

Neues Mitglied
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: 
<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ß
 
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
 
Hallo,

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

Gruß
 
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.
 
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: 
<!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
 
Chris24 schrieb:
Problem2: Wie krieg ich die Felder größer?
Zum Vergrößern anklicken....
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.
 
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.;)
 
Zuletzt bearbeitet:
@koslowski: Vielen Dank, das mit dem negativen Wert hat wunderbar geklappt. Super :-D

@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.
 
Zuletzt bearbeitet:
Hi,

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

@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.
Zum Vergrößern anklicken....

geh doch mal dem Link nach den ich per edit in meinem vorigen Beitrag eingefügt habe, dort gibts ein Tut zu Navis;-)
 
Chris24 schrieb:
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.
Zum Vergrößern anklicken....
Genau.

Wie muss das denn sein wenn ich z. B. fest 100px breit und 30px hoch möchte?
Zum Vergrößern anklicken....
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?
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
Deswegen passt man die Größe des Links der Größe des Listenelements an, damit die gleich groß sind.

Gruß,
-Efchen
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben