✔ a:hover verschiebt sich

[ray2mi]

Oh ich dreh gleich ab, sitz schon ein Tag an dem Zeug, brauch hilfe!

Habe ne Navi nur aus einer Liste gebaut...es soll sich was verändern, wenn man mit der Maus drüber geht.

Gleichzeitig soll der text aber auch ein Padding bekommen damit er nicht so am Rand klebt.

Wenn ich dem Listenelement ein Padding gebe dann sieht es erstmal schön aus...aber wenn ich dann mit der Maus drüber gehe dann verschiebt sich das Hover um das Padding...es wird also nochmal das ganze Feld oben drauf gelegt und verschiebt sich um das Padding...wie bekommt man nun einen Innenabstand hin und dann noch ein Hover, Focus Effekt der sich nicht verschiebt?

 

[Maik]

Hi,

es wäre hilfreich, wenn du neben deinen Problemerläuterungen auch den dazugehörigen Quellcode (HTML + CSS) posten würdest, damit der Ursache auf den Grund gegangen werden kann.

mfg Maik

 

[ray2mi]

sorry :s

<ul id="ever">
            	<li id="navi01"><a href="index.html" title="Neustes">Startseite</a></li>
                <li id="navi02"><a href="galerie.html" title="Bilder">Galerie</a></li>
                <li id="navi03"><a href="ueberuns.html" title="Informationen">&Uuml;ber uns</a></li>
                <li id="navi04"><a href="leistungen.html" title="Service und Leistungen">Leistungen</a></li>
                <li id="navi05"><a href="kontakt.html" title="Kontakt">Kontakt</a></li>
            </ul>

#ever ul {
	padding-top: 2px;
	}
	
	/* Listenelemente der Liste */
	#ever li{
	font-size:85%;
	list-style-type: none;
	background-color: lightgrey;
	color: black;
	
	
	width: 92px;
	height: 18px;
	
	padding: 2px 0 0 5px;
	
	margin-bottom: 10px;
	border-right: 8px solid black;
	}
	
	#ever li a {
		width: 92px;
		display: block;
		color: black;
		}
		
	#ever li a:hover,
	#ever li a:focus  {
		background-color: #bbbbbb;
		color: black;

		width: 92px;
		height: 18px;
		
		border-right: 8px solid cyan;
		}

 

[Maik]

Gemäß dem "Box-Modell" muß entweder hier die Breite aufgestockt:

	#ever li a {
		width: 100px; /* width:92px + border-right:8px */
		display: block;
		color: black;
		}

oder hier verringert werden:

	#ever li a:hover,
	#ever li a:focus  {
		background-color: #bbbbbb;
		color: black;

		width: 84px; /* width:92px - border-right:8px  */
		height: 18px;
		
		border-right: 8px solid cyan;
		}

mfg Maik

 

[ray2mi]

also bei mir verschiebt er sich trotzdem noch, sobald ich das Padding mache um den Text etwas zu setzen, dann verschiebt sich das hover

## EDIT ##

warum gehts jetzt aufeinma
Boah ich muss erstmal in den Garten und schreien

Danke erstmal aber
habe noch ne Frage.

Ich habe aus Gestaltungsgründen die rechte Border 8px gemacht und wenn man hoverd dann bekommt die ne andere Farbe, der IE 6 aber hängt dann zusätzlich nochmal die Farbe und die Border von 8px dran also insgesamt 16 px
Wieso macht der denn das?

 

[Maik]

Dieses Verhalten kann ich mit meinen Codevorschlägen im IE6 nicht beobachten.

mfg Maik

 

[Maik]

Ich habe aus Gestaltungsgründen die rechte Border 8px gemacht und wenn man hoverd dann bekommt die ne andere Farbe

Da solltest du das Tauschen der Rahmenfarbe aber besser so umsetzen:

#ever {
        padding-top: 2px;
        }

        /* Listenelemente der Liste */
        #ever li{
        font-size:85%;
        list-style-type: none;
        background-color: lightgrey;
        color: black;

        width: 105px; /* width:92px + padding-left:5px + border-right:8px */
        height: 20px; /* height:18px + padding-top:2px */

        margin-bottom: 10px;
        }

        #ever li a {
                display: block;

                width: 92px;
                height: 18px;

                padding: 2px 0 0 5px;

                border-right: 8px solid black;

                color: black;
                }

        #ever li a:hover,
        #ever li a:focus  {
                background-color: #bbbbbb;

                border-color: cyan;
                }

Der CSS-Code läuft (u.a. auch im IE6) ohne "Boxen-Expansion" beim Hovern und Klicken der Links, und der türkise Rahmen erscheint nun auch nicht mehr links neben dem Schwarzen ;-)

mfg Maik

 

[ray2mi]

Hehe, jawoll, danke danke, bist wirklich super und ich habe ja immer so blöde Fragen aber es funktioniert jetzt alles, sogar in den ie 6 7
cool danke danke

 

[ray2mi]

neues Problem...will nicht ein neues Thread aufmachen, weil es was ähnliches ist.

Habe verschiedene Links bestehend aus Bilder, diese habe ich als Klasse definiert um sie gemeinsam zu gestalten.

Bspw. eine Hover Gestaltung.
Habe verschiedene CSS Datein genutzt die über einen headquarter zusammenlaufen.
Für den IE6 muss ich in seiner CSS immer was nachbessern weil er immer ne extra Wurst will.

Habe es so gemacht, das beim Hover über das Bild eine Borderline entsteht und das Bild im die Border kleiner wird.

Aber im IE6 macht der gar nichts!!

verstehs nicht?!

         	<div id="text">
            
				<div class="galeriewahl">
     				 <a href="###.html"><img src="pic/pic01.jpg" alt="erstes Bild" /></a>
     				 <a href="###.html"><h3>Printmedia, Layout, Logo</h3></a>
      				 <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical</p>
   				 </div>
....

	.galeriewahl a img {
		float: left;
		margin-right: 5px;
		padding: 4px;
		border-right: 1px dashed white;
		height: 52px;
		width: 52px;
		}
		
		.galeriewahl a:hover img,
		.galeriewahl a:focus img {
			height: 50px;
			width: 50px;
			border: 1px solid cyan;
			margin-right: 6px;
		}

 

[Maik]

Hi,

mach es mal so:

<a href="###.html" class="img"><img src="pic/pic01.jpg" alt="erstes Bild" /></a>
<a href="###.html"><h3>Printmedia, Layout, Logo</h3></a>

.galeriewahl a.img  {
                float: left;
                margin-right: 5px;
                padding: 4px;
                border-right: 1px dashed white;
                height: 52px;
                width: 52px;
                }

                .galeriewahl a.img:hover,
                .galeriewahl a.img:focus {
                        border: 1px solid cyan;
                        margin-right: 6px;
                }

mfg Maik