1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

CSS Listen Problem

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von insanity, 20.07.07.

  1. insanity

    insanity Klarapfel

    Dabei seit:
    06.07.06
    Beiträge:
    277
    Hi all,
    ich schreibe gerade an meiner neuen Homepage und möchte (erstmals statt Tabellen) mit CSS gerne meine Liste in der Navigation formatieren. Dazu hab ich bis jetzt folgendes geschrieben:
    Code:
    #pageNavi ul {
    	display: inline;
    	list-style: none;
    	margin: 0px;
    	padding: 0px;
    }
    
    #pageNavi li {
    	display: inline;
    	list-style: none;
    	margin: 0px;
    	padding: 0px;
    }
    Soweit klappt das auch alles ganz gut, nur habe ich ein Problem, wenn ich meinen Quellcode so schreibe
    Code:
    <div id="pageNavi">
    	<ul>
    		<li><img src="layout/navi_left.jpg" /></li>
    		<li><a href="#"><img src="layout/navi_home.jpg" /></a></li>
    		<li><a href="#"><img src="layout/navi_blogs.jpg" /></a></li>
    		<li><a href="#"><img src="layout/navi_photos.jpg" /></a></li>
    		<li><a href="#"><img src="layout/navi_movies.jpg" /></a></li>
    	</ul>
    </div>
    setzt er mir zwischen jeden Listenpunkt einen kleinen Abstand von ca. 3px. (Angehängtes Bild 1) Wenn ich hingegen sämtliche Listeneinträge ohne Zeilenumbruch direkt hintereinander weg schreibe, wird es richtig angezeigt. (Angehängtes Bild 2)
    Code:
    <div id="pageNavi">
    	<ul>
    		<li><img src="layout/navi_left.jpg" /></li><li><a href="#"><img src="layout/navi_home.jpg" /></a></li><li><a href="#"><img src="layout/navi_blogs.jpg" /></a></li><li><a href="#"><img src="layout/navi_photos.jpg" /></a></li><li><a href="#"><img src="layout/navi_movies.jpg" /></a></li>
    	</ul>
    </div>
    Es ist natürlich in erster Linie nur eine Ordnungsfrage in meinem Quellcode der mir das schreiben erleichtert aber dafür muss es doch sicher trotzdem eine Lösung geben?

    cu Daniel

    PS: Gesucht habe ich bereits, allerdings nicht sehr gründlich, hatte keine große Zeit, muss quasi jetzt los zur Nachtschicht... :(
     

    Anhänge:

    • bild1.jpg
      bild1.jpg
      Dateigröße:
      19,5 KB
      Aufrufe:
      119
    • bild2.jpg
      bild2.jpg
      Dateigröße:
      16,9 KB
      Aufrufe:
      115
  2. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Ich würde das so oder so nicht so machen...eleganter ist es so:

     
    insanity gefällt das.
  3. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Sag bescheid wenn es klappt...ist übrigens aus dem CSS Cookbook vom O'Reilly Verlag!
     
  4. creative7even

    creative7even Jerseymac

    Dabei seit:
    23.02.05
    Beiträge:
    454
    könnte an der Doctype liegen...
    in welchem Browser tritt das Problem auf - und wie sieht das gesamte HTML Dokument aus?
     
  5. Messerjokke79

    Messerjokke79 Eifeler Rambour

    Dabei seit:
    21.07.06
    Beiträge:
    600
    Das liegt natürlich an dem Umbruch der wie ein Leerzeichen umgesetzt wird. Mach doch z.B. so:

    Code:
    <div id="pageNavi">
    	<ul><li><img src="layout/navi_left.jpg" /></li><li><a
    		href="#"><img src="layout/navi_home.jpg" /></a></li><li><a
    		href="#"><img src="layout/navi_blogs.jpg" /></a></li><li><a
    		href="#"><img src="layout/navi_photos.jpg" /></a></li><li><a
    		href="#"><img src="layout/navi_movies.jpg" /></a></li></ul>
    </div>
    
     
  6. Dieser Abstand durch den Umbruch dürfte nur im Internet Explorer auftreten. Das ist dort auch bei Bildern ohne <br /> so... der haut dann einfach irgendwelche Abstände rein...
     
  7. insanity

    insanity Klarapfel

    Dabei seit:
    06.07.06
    Beiträge:
    277
    Nein die Screenshots stammen aus Safari 3. Der macht es also leider auch. :( Vielen Dank für die bisherigen Lösungsbeispiele. :) Also wird's wohl nur mit Tricksen funktionieren, aber dumm ist das irgendwie schon... :( Naja machste nix :D
     
  8. Messerjokke79

    Messerjokke79 Eifeler Rambour

    Dabei seit:
    21.07.06
    Beiträge:
    600
    Leider macht das nicht nur der IE. Nach W3C-Standard dürfte das nicht passieren. Aber eine ist Theorie, das andere die Praxis.
     

Diese Seite empfehlen