unerwünschte Abstände in <ul> Liste

[Greg]

Hallo,
ich habe folgendes Problem bei einer unsortierten Liste, welche ich als Navigation nutzen möchte. Dabei ist zu beachten, dass die Links als Bilder dargestellt werden. Diese sind vom Designer allerdings so angelegt worden, dass sie notwendiger weise einen Abstand von 0 Pixeln haben müssen, da ansonsten unschöne Freistellen entstehen. Ich hoffe jemand kann mir sagen, was ich falsch mache oder was ich vergessen habe oder wo mein Fehler liegt. Anbei noch alle nötigen HTML und CSS Informationen. Danke schonmal im Vorraus!
Mit freundlichen Grüßen,
Greg

HTML Ausschnitt Navigation:

  
<ul id="navigation">  
  <li>  
    <a href="#">  
      <span class="invis">News</span>  
        <img id="btn-en_news"  
              src="images/btn-en_news.png"  
              alt="News"  
              title=""  
              onmouseout="hoverimage(this.id);"  
              onmouseover="hoverimage(this.id);" />  
    </a>  
  </li>  
  ... usw  
</ul>				  

CSS Ausschnitt:

  
#navigation  
{  
	position:absolute;  
	margin:0;  
	padding:0;  
	list-style-type:none;  
	top:279px;  
	left:0;  
}  
  
#navigation li  
{  
	margin:0;  
	padding:0;  
}  
  
.invis  
{  
	display:none;  
}  

Und leider kommt das bei raus:

[Ole]

Hallo Greg

Probier doch mal alles zwischen <li> und </li> in eine Zeile zu packen...alternativ alles was zwischen <ul> und </ul> ist.

Vermeide also jeglichen Whitespace.

Gruß
Ole

[Malcolm Beck´s]

hi,

ich habe folgendes Problem bei einer unsortierten Liste, welche ich als Navigation nutzen möchte. Dabei ist zu beachten, dass die Links als Bilder dargestellt werden. Diese sind vom Designer allerdings so angelegt worden, dass sie notwendiger weise einen Abstand von 0 Pixeln haben müssen, da ansonsten unschöne Freistellen entstehen.

Warum bindest du die Bilder nicht als Hintergrundbilder ein? Vorzugsweise mit CSS-Sprites -- das verkürzt die Ladezeit und spart Ressourcen bzw. unnötige Requests, und beim Hovern entfällt das Flackern, wenn Bilder einfach nur ausgetauscht werden.

Ansonsten schliesse ich mich Ole an, White-Space.

mfg

[Greg]

Hallo,
vielen Dank für eure Antworten. Ich habe mich für die Lösung mit den Hintergrundbildern entschieden, da mir dies im Nachhinein auch semantisch gesehen sinnvoller erscheint. Allerdings habe ich auch die Sache mit den Whitespaces probiert, dies hat aber auch nicht funktioniert. Nunja, hier jetzt mein aktueller Quellcode, der soweit auch funktioniert:

HTML Ausschnitt:

  
<ul id="navigation">  
  <li><a id="btn-en_news" href="#"><span class="invis">News</span></a></li>  
  <li><a id="btn-en_about" href="#"><span class="invis">About me</span></a></li>  
  <li><a id="btn-en_projects" href="#"><span class="invis">Projects</span></a></li>  
  <li><a id="btn-en_partner" href="#"><span class="invis">Partner</span></a></li>  
  <li><a id="btn-en_contact" href="#"><span class="invis">Contact</span></a></li>  
  <li><a id="btn-en_imprint" href="#"><span class="invis">Imprint</span></a></li>  
</ul>  

CSS Ausschnitt:

  
#navigation  
{  
	position:absolute;  
	margin:0;  
	padding:0;  
	list-style-type:none;  
	top:279px;  
	left:0;  
}  
  
#navigation li  
{  
	margin:0;  
	padding:0;  
}  
  
#navigation a  
{  
	display:block;  
	width:114px;  
	overflow:hidden;  
	margin:0;  
	padding:0;  
}  
  
#navigation #btn-en_news  
{  
	height:32px;  
	background-image:url(../images/btn-en_news.png);  
}  
  
#navigation #btn-en_news:hover  
{  
	background-image:url(../images/btn-en_news_hover.png);  
}  
  
... usw  

Mit freundlichen Grüßen,
Greg

[Gunnar Bittersmann]

@@Greg:

nuqneH

<ul id="navigation">
  <li><a id="btn-en_news" href="#"><span class="invis">News</span></a></li>
  <li><a id="btn-en_about" href="#"><span class="invis">About me</span></a></li>
  <li><a id="btn-en_projects" href="#"><span class="invis">Projects</span></a></li>
  <li><a id="btn-en_partner" href="#"><span class="invis">Partner</span></a></li>
  <li><a id="btn-en_contact" href="#"><span class="invis">Contact</span></a></li>
  <li><a id="btn-en_imprint" href="#"><span class="invis">Imprint</span></a></li>
</ul>

Ersetze '<span class="invis">(.*)</span>' durch '$1'*; die 'span'-Elemente sind überflüssig**.

Qapla'

* wenn dein Editor keine regulären Ausdrücke beherrscht: '<span class="invis">' durch '' und '</span>' durch ''

** die IDs der 'li'-Elemente wären auch überflüssig, wenn denn IEs nicht wären, die keine Attributselektoren à la 'a[href="foo"]' verstehen

[ChrisB]

Hi,

** die IDs der 'li'-Elemente wären auch überflüssig, wenn denn IEs nicht wären, die keine Attributselektoren à la 'a[href="foo"]' verstehen

Und das von einem der grössten Verfechter der Trennung von Inhalt und Layout!
Wenn das Linkziel aus irgendwelchen Gründen mal angepasst werden soll/muss - dann willst du neben dem HTML also auch das CSS anpassen?

Dass du jetzt "Cool URIs don't change" als vermeintliches Gegenargument bringen wirst, ist mir bereits bewusst :-)

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Wenn das Linkziel aus irgendwelchen Gründen mal angepasst werden soll/muss - dann willst du neben dem HTML also auch das CSS anpassen?

Oops.

Dass du jetzt "Cool URIs don't change" als vermeintliches Gegenargument bringen wirst, ist mir bereits bewusst :-)

Danke für die Ausrede. ;-)

Andererseits: So teuer wäre die Anpassung des Stylesheets bei einer Änderung eines Linkziels ja nun auch wieder nicht; ist ja nur eine Stelle. (Es sei denn, man müsste auch Anpassungen für IEs ändern und hat diese in einem Extra-Stylesheet. Aber das hat man ja nicht.[tm])

Qapla'

[Malcolm Beck´s]

hi,

#navigation #btn-en_news
{
background-image:url(../images/btn-en_news.png);
}
#navigation #btn-en_news:hover
{
background-image:url(../images/btn-en_news_hover.png);
}

  
Wenn du es so lösen willst, dann rate ich zur Kombo mit [CSS-Sprites](http://www.alistapart.com/articles/sprites).  
  
Dann brauchst du nur ein Bild für alle `#navigation a`{:.language-css} definieren und kannst dann mittels `background-position:X Y;`{:.language-css} die Position anpassen.  
  
  
~~~css
#navigation a {  
  background: url(images/image_map.gif) no-repeat -1000px -1000px;  
}  
  
#navigation li a {  
  background-position:-4px -325px;  
}  
#navigation li a:hover {  
  background-position:-4px -389px;  
}  
#navigation li a:focus,  
#navigation li a:active {  
  background-position:-4px -453px;  
}

Damit unterbindest du auch recht Effektiv das flackern der Hintergründe beim hovern.

mfg