Zur Navigation

IE und CSS, zentrieren und mehr

1 Lotti

Hallo ihr!

Ich hab mal wieder gebastelt und komm an 2 Stellen nicht weiter. Vielleicht wisst ihr ja Rat?

Angelehnt an Uwes Lästereien wegen der vergrösserten Bilder per CSS, hab ich das auch gleich mal umgesetzt ;-) im Original klappt das auch, bei mir im IE klappt es allerdings nicht. Ich vermute es liegt daran, daß die Bilder in einem div namens "text" liegen.

Anschauen kann man das hier:
http://www.kanzleilehngut.de/vorschlag/index.html
Funktioniert prima beim Firefox, aber nicht im IE

Und dann bekomm ich es irgendwie nicht hin, daß die Bilder zentriert werden. Sie sind immer am linken Rand fest. Ich glaube das liegt auch irgendwo im #text, denn auf der bisher einzigen Unterseite "Umgebung" ist das mit den Spalten auch so und da kann man das auch besser sehen als auf der Startseite.

Weiss jemand Rat?

Liebe Grüsse

Lotti

Zusatz: margin:auto; hab ich an einigen Stellen probiert, geht nicht, auch nicht im CSS. align:center; geht auch nicht. Doctype ist drin, vielleicht das Falsche?

05.05.2006 07:23 | geändert: 05.05.2006 07:52

2 Jörg Kruse

Hallo Lotti,

du hast für '.hoverbox li ' definiert:

float: left;

da am Ende des <ul>s kein Element den Umfluss mit clear:left vor (!) dem </ul> wieder schließt, fallen die <li>s aus der zentrierten ul.hoverbox heraus. Da du die <li>s schon mit einem 
display:inline;
nebeneinander anordnest, benötigst du das 'float:left' aber eigentlich auch gar nicht?

Das IE-Problem schau ich mir später nochmal an..

05.05.2006 08:21 | geändert: 05.05.2006 08:22

3 Lotti

Guten Morgen Jörg :-)

Also ich hab jetzt das "float:left" gestrichen, dann sieht es so aus:
http://www.kanzleilehngut.de/vorschlag/pic/screenshot.jpg

*grübel*

Liebe Grüsse

Lotti

05.05.2006 08:40

4 Jörg Kruse

Leider kann man mit dem letzten <li> nicht clearen..

Du könntest die Eigenschaften der <li> aber auf die darin enthaltenen <a> übertragen:

.hoverbox a
{
        cursor: default;
        background: #B5C79D;
        border-color: #ddd #bbb #aaa #ccc;
        border-style: solid;
        border-width: 1px;
        color: inherit;
        margin: 3px;
        margin-bottom:30px;
        padding: 5px;
        position: relative;
}

... und für das <li> nur noch:

.hoverbox li
{
        display: inline;
}

Für den nötigen Abstand unterhalb der Liste muss dann auch noch gesorgt werden:

.hoverbox
{
        cursor: default;
        list-style: none;
        margin-bottom:20px;
}

Probier mal aus, wie das dann ausschaut..

05.05.2006 09:14 | geändert: 05.05.2006 09:15

5 Lotti

keinerlei optische Änderung.

05.05.2006 09:29

6 Lotti

Hi Jörg!

Ich habs gefunden, bzw geändert. Ich hab den Rahmen komplett geändert, jetzt sieht er anders aus, aber wie ich finde auch besser, und den Abstand hab ich nur hinbekommen, indem ich den Text unten in einen Absatz gesetzt hab, dem ich den margin-bottom:30px; gegeben habe. So geht's halt auch, wenn auch nicht elegant.

Aber das IE Problem bleibt noch.

Dazu auch gleich nochmal eine Frage:

Beim Firefox ist es ja so, daß die Links wie eine Lupe grösser werden wenn man mit der Maus drüber geht. Beim IE wird es nur andersfarbig, aber die Umrandung geht nicht über den eigentlichen Linkrand drüber hinaus. Wüsstest du da auch noch eine Lösung für?

#navi ul
{ 
list-style-type:none;  
text-indent:0px; 
margin:0 0 0 8px; 
padding-left:0; 
font-size:100%; 
color:#666;  
}

#navi li 
{ 
line-height:120%; 
width:130px; 
margin-top:5px; 
margin-bottom:5px; 
padding-bottom:5px; 
padding-top:5px; 
border:1px dotted #662201; 
background-color:#FFFABA; 
}

#navi a:link 
{ 
 color:#424121;
}

#navi a:hover 
{
margin-top:5px; 
margin-bottom:5px; 
padding-left:5px; 
padding-right:5px; 
padding-bottom:10px; 
padding-top:10px; 
border:1px dotted #662201;  
background-color:#E2D8BB; 
color:#1C1A13; f
ont-size:120%; 
}

#navi a:visited
{  
color:#424121;
}

#navi a:focus 
{
margin-top:5px; 
margin-bottom:5px; 
padding-left:5px; 
padding-right:5px; 
padding-bottom:10px; 
padding-top:10px; 
border:1px dotted #662201;  
background-color:#E2D8BB; 
color:#1C1A13; 
font-size:120%; 
}

#navi a:active 
{
margin-top:5px; 
margin-bottom:5px; 
padding-left:5px; 
padding-right:5px;
padding-bottom:10px; 
padding-top:10px; 
border:1px dotted #662201;  
background-color:#E2D8BB; 
color:#1C1A13; 
font-size:120%; 
}

05.05.2006 10:40

7 Jörg Kruse

Da es sich um Grafiken handelt würde ich für den IE-Hack von .'hoverbox a:hover' nicht die font-size, sondern die height auf 100% festsetzen:

* html .hoverbox a:hover
{
        height:100%;
        z-index: 1;
}

Das funktioniert sogar - nur bekommmt man die großen Bilder nach dem Hover nicht mehr weg :D

05.05.2006 10:57

8 Lotti

Hallo Jörg!

Schick :-)))
Aber so kann es leider nicht bleiben ;-)

Liebe Grüsse

Lotti

05.05.2006 11:30

9 Jörg Kruse

Du hast weiter oben geschrieben:

im Original klappt das auch

Kannst du mal einen Link zum Original posten?

05.05.2006 11:49

10 Lotti

Hallo Jörg,

Uwe hat das hier gepostet. Das mit den vergrösserten Bildern über die wir so gelästert haben. Ich hab das aus dem Tutorial rauskopiert und eigentlich nur eingefügt und Farben geändert.

05.05.2006 11:54 | geändert: 05.05.2006 11:54