Abstandsproblem bei a hover

**Andy89** · 02.08.2008 17:14

Hallo,

ich wollte eigentlich nur einen einfachen hover effekt mit backgroundimage.
Das backgroundimage ist eine 15 * 20 pixel kleine Spitze soll an der Linken Seite des Div beginnen, dann der Text.
Ich habe allerdings padding:2% 1% 2% 5%; angegeben und ich denke das sich die Spitze mit dem Padding nicht verträgt, obwohl ich background-position: left -5%; angebe.

so ungefähr sollte es bein hover aussehen: |> Linktext aber die Spitze beginnt beim Text.

Ich bin für jeden Tipp dankbar.

Andy

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
/*Abstände aller Elemente werden auf Null gesetzt + weitere Formatierungen */
* {margin: 0; padding: 0;}

/* -----------------BEGINN DER textnavigation------------------------ */
#linksnavi
{
    font-size: 85%;
    background-color: #ccc;
    color:#FFF;
    width:100%;

}
#linksnavitext  {
  float: left;
  width:80%;
  padding:2% 1% 2% 5%; /* oben recht unten links*/    
  }
  
#linksnavitext a
{
   
    color: #fff;
    text-decoration: none;
}

#linksnavitext a:hover
{
	color: #000;
	background-image: url(bilder/spitze.gif);
	background-repeat: no-repeat;
	background-position: left -5%;
}



/* -----------------ENDE DER linksnavigation------------------------ */


</style>
</head>
<body>
 <div id="linksnavi">
   <div id="linksnavitext"><a href="#">lalalala<a></div>
   <div id="linksnavipicto"><a href="#">
   </div><!-- /#linksnavi --> 
  </div><!-- /#links -->
</body>
</html>

**sejuma** · 02.08.2008 17:25

Kannst du das bitte hochladen, damit man auch die eingebundene Grafik sieht?

**Andy89** · 02.08.2008 18:13

Halle Sejuma,

klar doch gerne.

hier ist der link

danke
Andy

**Andy89** · 02.08.2008 20:13

Hallo,

ich habe meinen Fehler "fast" behoben, ich muss das padding:2% 1% 2% 5%;
in die id für #linksnavitext a schreiben.

Andy

**sejuma** · 02.08.2008 20:18

Versuch's mal damit:

Code:

#linksnavitext a:hover
{
	color: red;
	background-image: url(spitze.gif);
	background-repeat: no-repeat;
	background-position: 2%;
        padding:2% 1% 2% 2%;
}

Die Background-position gibt an, dass der Pfeil je 2% von links und oben positioniert wird.
Der geringere linke Paddingwert sorgt dafür, dass der Abstand zwishen Pfeil und Text nicht zu gro0 wird.

**Andy89** · 02.08.2008 20:33

Hallo Sejuma,

ich weiß nicht genau was ich gemacht habe, aber so wie jetzt soll es sein.
Kann man den css Teil vereinfachen?

#linksnavi ist eigentlich der umschließende Container, in dem dann 3 andere div's eingeschlossen werden. Zum testen habe ich nur #linksnavitext genommen.

HTML-Code:

#linksnavi
{
    font-size: 110%;
    background-color: #009933;
    width:80%;

}
#linksnavitext  {
 	padding:2% 0 2% 0 ; /* oben  unten  */  
 
  }
  
#linksnavitext a
{
	color: #fff;
	text-decoration: none;
 	padding:2% 1% 2% 5%; /* oben recht unten links*/  
}

#linksnavitext a:hover
{
	color: #CCFF00;
	background-image: url(spitze.gif);
	background-repeat: no-repeat;
	background-position: -0.3em;

}

Vielen Dank sagt Andy

**sejuma** · 03.08.2008 16:38

Vereinfachen bzw. verkürzen:

Code:

#linksnavi
{
    font-size: 110%;
    background-color: #093;
    width:80%;
     padding:2% 0; /* oben  unten  */  

}
 

  
#linksnavi a
{
	color: #fff;
	text-decoration: none;
 	padding:2% 1% 2% 5%; /* oben recht unten links*/  
}

#linksnavi a:hover
{
	color: #CF0;
	background: url(spitze.gif) no-repeat -0.3em;

}

Auf #linksnavitext müsstest du verzichten können.

**Andy89** · 04.08.2008 19:42

Hallo Sejuma,

ich habe das jetzt hinbekommen, so wie ich es wollte.

Ich habe noch eine Frage für mein Verständnis.
Wenn ich mit FF auf einigen Webseiten mit em Mausrad vergrößere wird alles auf der Seite größer und unten im Browser kommt ein Scrollbalken
Wie hier:http://www.parterremedia.de/kompeten...rierefrei.html

Bei meiner Seite kommt kein Scrollbalken, sondern es wird umgebrochen und das Layout zerschossen.

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
/*Abstände aller Elemente werden auf Null gesetzt + weitere Formatierungen */
* {margin: 0; padding: 0;}

/* Wichtige Farben
Dunkelgrün = #333
Grün =      #8CC689
Hellgrün =   #CBE9C9
*/

html, body {
  font-size: 100.01%;
     background-color:#fff;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.clear {clear: both; } /*cleart gefloatete Elemente*/

#container {
    border:1px solid red;
    margin : 0px auto;
    background-color:#FFFF66;
	    width:95%;
 }
#kopfnavi
{
    font-size: 75%;
    background-color: #000;
    color:#FFF;
    width:100%;
}
#kopfnavilinks  {
 float: left;
  }
 
#kopfnavirechts {
 float: right;
 text-align: right;

 }
#kopfnavi ul
{
  padding-top: 5px;
  padding-bottom: 5px;
}
#kopfnavi ul li
{
 display: inline;
}

#kopfnavi a:link {
  COLOR: #fff;
  text-decoration: none;
  padding-bottom: 1px;
}
#kopfnavi a:visited {
  COLOR: #FBFBFB;
}

#kopfnavi a:hover {
    COLOR: #CBE9C9;
    ;
 }

#kopfnavi a:active {
  COLOR: #FBFBFB;  
	}

#kopfnavilinks  li
{
 padding: 0 5px;
}
#kopfnavirechts  li
{
  border-left: 1px solid #fff;
  padding: 0 5px;
}
/* -----------------ENDE DER Kopfnavigation------------------------ */
</style>
</head>
<body>

<div id="container">
<!--Beginn Kopfnavigation -->
<div id="kopfnavi">
<div id="kopfnavilinks">
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Feld</a></li>
<li><a href="#">Ein anderes Feld</a></li>
<li><a href="#">Ein anderes Feld</a></li>
<li><a href="#">und noch ein Feld</a></li>
</ul>
</div>
<div id="kopfnavirechts">
<ul>
<li><a href="#">ex-Link1</a></li>
<li><a href="#">ex-Link2</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--Ende Kopfnavigation -->


</div>
<!-- /#container -->

</body>

</html>

Warum ist das so?

Danke
Andy

**sejuma** · 04.08.2008 20:09

Die von dir genannte Seite verwendet ziemlich durchgehend nur relative Maßeinheiten, nämlich "em" statt "px". Und das auch für Abstände, Breiten und Höhen etc. Das skaliert sich dann alles proportional.

Du hat oft einen Mix aus % und px, was die Ursache sein dürfte, dass dem bei dir nicht so ist.

**Andy89** · 04.08.2008 20:55

Hallo,

ich denke ich bin zu doof, ich habe in meinem Beispiel alle px entfernt, ist noch genau so.

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
/*Abstände aller Elemente werden auf Null gesetzt + weitere Formatierungen */
* {margin: 0; padding: 0;}
html, body {
  font-size: 100.01%;
     background-color:#fff;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.clear {clear: both; } /*cleart gefloatete Elemente*/
#kopfnavi
{
    font-size: 1em;
    background-color: #000;
    color:#FFF;
	margin: 1em;
	padding: 0.5em 0.5em 0.5em 0.5em;
}
#kopfnavilinks  {
 float: left;
 }
#kopfnavirechts {
 float: right;
 text-align: right;
}
#kopfnavi ul
{
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}
#kopfnavi ul li
{
 display: inline;
}
#kopfnavi a:link {
  COLOR: #fff;
  text-decoration: none;
}
#kopfnavi a:visited {
  COLOR: #FBFBFB;
}

#kopfnavi a:hover {
    COLOR: #CBE9C9;
 }
#kopfnavi a:active {
  COLOR: #FBFBFB;
	}
#kopfnavilinks  li
{
 padding: 0 0.2em;
}
#kopfnavirechts  li
{
  padding: 0 0.2em;
}
/* -----------------ENDE DER Kopfnavigation------------------------ */
</style>
</head>
<body>


<!--Beginn Kopfnavigation -->
<div id="kopfnavi">
<div id="kopfnavilinks">
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Feld</a></li>
<li><a href="#">Ein anderes Feld</a></li>
<li><a href="#">Ein anderes Feld</a></li>
<li><a href="#">und noch ein Feld</a></li>
</ul>
</div>
<div id="kopfnavirechts">
<ul>
<li><a href="#">ex-Link1</a></li>
<li><a href="#">ex-Link2</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--Ende Kopfnavigation -->



</body>

</html>

Andy

**sejuma** · 05.08.2008 06:38

Im IE 7 klappt das mit deiner Seite.
Ist evtl. dann noch ein browserspezifisches Problem.
Müsstest du mal im FF-Forum nachfragen.

**Andy89** · 05.08.2008 08:26

Guten Morgen,

ich habe mir gestern und heute Yaml etwas angesehen.
Wenn ich ein Minimum und Maximum angebe, dann passt es.
Also so:
#container {
width: auto;
min-width: 740px;
max-width: 90em;
background: #fff;
border:1px solid red;
}
statt so:
#container {
width: 90%;
margin : 0px auto;
background-color:#fff;
border:1px solid red;
}
Ich kann statt 90em auch 600% schreiben.

Grüße
Andy

zur Startseite vom TP

Thema: Abstandsproblem bei a hover

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Abstandsproblem bei a hover

Ähnliche Themen

IE und Hover

IE -> PNG -> hover

hover

hover nur bei a-tag?

Hover

Aktive Benutzer

Aktive Benutzer