ABAKUS

Verfasst: **07.07.2009, 19:01**

Hallo,

ich hoffe ihr könnt mir helfen.

Die Navigation unserer Seiten ist bisher in einer Tabelle.

Sie sollte aber als DIV sein:

Hier ist eine Musterseite, bei der ich die obige Navigation (in Tabelle) am FUSS der Seite als DIV nachzubilden versuche.
https://www.online-seilgarten.de/!navig ... s-div.html
Das probiere schon die ganze Zeit, aber bei "a:hover" legt sich das blaue Quadrat über die Schrift und nicht unterhalb ???

Und hier das CSS zur Navigation unten:

Code: Alles auswählen

/* Navigation unten */

#nav-unten &#123;
font-family&#58; Verdana, Arial, sans-serif;
font-size&#58; 12px;
text-decoration&#58; none;
height&#58; 40px;
padding&#58;10px;
margin&#58;10px;
background-color&#58;#fff;
color&#58;#fff;
border-bottom&#58; 1px solid #6F8C8F;
&#125;

#nav-unten a &#123;
color&#58; #46688E;
text-decoration&#58; none;
&#125;

#nav-unten a&#58;hover &#123;
text-decoration&#58;none;
background-color&#58;#fff;
background-image&#58;url&#40;images/cube.gif&#41;;
background-repeat&#58;no-repeat;
background-position&#58;50% 100%;
border-bottom&#58;solid 0px #4d81b1;
&#125;

und hier ist der CSS-Code zu der Navigation oben, die sich in einer Tabelle befindet und wo der a:hover - Effekt funktioniert

Code: Alles auswählen

/* menue oben */

#menu1 a, #menu1 a&#58;visited , #menu1 a&#58;active &#123;display&#58; block;
color&#58;#46688E;
text-decoration&#58;none ;font-family&#58;verdana, sans-serif; font-size&#58; 12px;
padding-left&#58; 10px;padding-right&#58; 10px; padding-bottom&#58; 0px; padding-top&#58;0px;
margin-left&#58; 0px;margin-right&#58; 0px;
border-left&#58;solid 0px #AAAAAA;
height&#58;40px;
line-height&#58;40px;
text-align&#58;center;
border-bottom&#58;solid 0px #fff;
background-color&#58;#fff;


&#125;
#menu1 a&#58;hover &#123;background-color&#58;#4d81b1; text-decoration&#58;none ;
background-color&#58;#fff;
background-image&#58;url&#40;images/cube.gif&#41;;
background-repeat&#58;no-repeat;
background-position&#58;50% 100%;
border-bottom&#58;solid 0px #4d81b1;
&#125;

.trenn &#123;width&#58;1px;background-color&#58;#fff;color&#58;#C0CB67&#125;

Verfasst: **07.07.2009, 19:08**

In IE8 und FF3 sehe ich ein kleines Quadrat unter der Schrift. Welcher Browser macht es falsch?

Verfasst: **07.07.2009, 19:18**

Ja- das Quadrat soll unter der Schrift sein. Das ist auch so bei der Navigation in der Tabelle oben (original).
Auf der Testseite https://www.online-seilgarten.de/!navig ... s-div.html
kannst Du unten sehen, dass es im DIV (navigation unten) so nicht funktioniert und das blaue Kästchen über der Schrift liegt

Verfasst: **07.07.2009, 19:32**

Ach da unten

Fehlt vielleicht einfach nur display: block; ?

Verfasst: **07.07.2009, 19:45**

display: block;
Nein -
das habe ich gerade getestet - dasist es nicht.
Kann es irgendwie sein, dass ich mit background-position:50% 100%;
oder mit der Höhe des DIVS etwas ändern muss? Oder mit den Abständen?

Nix Ahnung.

Verfasst: **07.07.2009, 20:05**

Im Grunde kann es eigentlich nur an den Dreien liegen:

Code: Alles auswählen

display&#58;block;
height&#58;40px; 
line-height&#58;40px;

Ansonsten unterscheiden sich die beiden CSS ja nicht bei den Höhen oder Positionsangaben.

Hast Du mal alle drei Sachen getestet?

Verfasst: **07.07.2009, 20:43**

JA - das habe ich probiert und es ändert sich dabei nichts - NIXXE ??
Hm ...?

Verfasst: **07.07.2009, 21:21**

#nav-unten a:hover {
text-decoration:none;
background:url(images/cube.gif) #fff no-repeat center;
border:0 solid #4d81b1;
padding:0 0 3em 0;
}

div:nav-unten: z-index:0 visiblility:hidden; bild nach menü z-index:1

ist ungetestet, vielleicht hilfts was, sorry nicht mehr zeit, essen

ABAKUS

Horizontale Navigation mit "a:hover" anstatt Tabel

Horizontale Navigation mit "a:hover" anstatt Tabel