Hallo liebe Yahoo! Clever Community,
ich hoffe ihr könnt mir helfen. Undzwar mache ich meine eigene Homepage und ich habe eine Navileiste aus einem Bild gemacht.
Die ganze Navileiste als ein Bild passt auf die Seite (in eine Zeile), aber dann kann ich die einzelnen Kategorien nicht verlinken (oder?)
Also habe ich die Leiste in 5 Bilder geschnitten für jede einzelne Kategorie. Wenn ich die 5 einzelnen Bilder nun aber nebeneinander einfüge, rutscht das letzte automatische eine Zeile nach unten! Wie kann ich das verhindern?!
Ich hoffe ihr könnt mir weiterhelfen.
MfG Ken Neubacher

• major_to sagt:

  3. Februar 2010 um 09:00 Uhr

  das liegt wohl daran, das bilder als inline-block gewertet werden und zwischen den bildern automatisch lehrzeichen vom browser interpretiert werden., dadurch verbreitert sich der benötigte platz.
  vermeiden kannst du das, wenn du per css dem bild bzw dem link den wert display:block und float:left zuweist.

• Shipment of Fail sagt:

  3. Februar 2010 um 10:56 Uhr

  Ganz easy-peasy.
  Verpass deinen Bildern eine ID oder Klasse ( oder ), der du dann mit CSS folgende Eigenschaften zuweist:
  bei einer ID:
  #navi { position:relative; float:left; border:0 }
  oder bei einer Klasse:
  .navi { position:relative; float:left; border:0 }
  (Ob ID oder Klasse: Ist eigentlich egal, eine ID solltest du auf einer einzigen Seite allerdings nur einmal im HTML-Code verwenden – auch wenn ein paar Browser das manchmal anders sehen. Klassen dürfen auf einer Seite dagegen so oft wie du willst verwendet werden.)
  Alternativ kannst du diese Eigenschaften auch direkt in deine -Tags einbinden:
  
  … was bei mehreren Bildern aber mehr Schreibaufwand und unnötigen Code bedeutet.
  Insofern dann genügend horizontaler Platz vorhanden ist, werden alle Bilder nebeneinander dargestellt. „border:0“ ist deshalb nötig, weil ansonsten, sobald du die Bilder verlinkst, durch die meisten Browser ein Rahmen um die Bilder dargestellt wird.
  Eine andere Möglichkeit wäre es, die Bilder in eine Liste zu stellen, und jedes Bild als ein Listenelement zu behandeln:

  • 
  • 
  • 

  D damit die Abstände stimmen, die Elemente horizontal angeordnet werden und keine Listenpunkt-Grafiken dargestellt werden, musst du in deinem Stylesheet noch folgendes anpassen:
  #navi ul { margin:0; padding:0; list-style-type:none }
  #nav li { display:inline }
  Das müsste so eigentlich stimmen …
  Noch was zu CSS: Falls du gar nicht weißt, wie man ein Stylesheet anwendet: Erstell einfach ein Dokument, welches du so aufbaust:
  @charset „utf-8“;
  .ichbineineKlasse {
  …hier können Eigenschaften deklariert werden…
  }
  #ichbineineID {
  …hier können stehen auch Eigenschaften, wie ich sie oben beschrieben hab…
  }
  Speicher dann ein solches Dokument unter deinem gewünschten Namen ab mit der Endung .css.
  In deinem HTML-Dokument musst du diese Datei dann folgendermaßen verlinken: Das gehört in den -Bereich.
  Bei noch anstehenden Fragen… einfach Melden.
  @Kuinshi: Das geht auch. Ist allerdings nicht unbedingt empfehlenswert, da nicht den W3C-Standards entspricht. Das bedeutet also, dass nicht alle Browser diesen Tag verstehen oder nicht berechenbare Fehldarstellungen auftreten können. Seltsamerweise fiel mir gerade heute auf, dass selbst Google den -Tag verwendet …

• Hans Wal sagt:

  3. Februar 2010 um 15:20 Uhr

  Ich kenne deine Situation nicht genau aber ich platziere meine Bilder so

  

  Ich hoffe es hilft

• pavarott sagt:

  3. Februar 2010 um 19:18 Uhr

  versuch doch, die breite der bilder z.b. mit width festzulegen.
  am besten in prozentangaben

• Ralf E sagt:

  4. Februar 2010 um 01:08 Uhr

  Du könntest mit einem eizelnen Bild arbeiten und darauf eine Imagemap legen:http://de.selfhtml.org/html/grafiken/ver…

• l..:Clev sagt:

  4. Februar 2010 um 02:26 Uhr

  Verkleinern oder in Paint alle nebeneinander machen und dann als 1 Foto speichern und dann auf deine Hp machen.