mehrere Bilder nebeneinander

[Aelfry]

Ich habe ein div, in dem sich meine Navigation befindet.
Das ganze besteht aus mehreren Bildern, die alle nebeneinander stehen sollen.
Hier der Codeausschnitt:

#navigation_bar {width:816px; text-align:left;}
#img_navi_left_end {width:6px; height:25px; float:left;}
#img_navi_1 {width:63px; height:25px;}
#img_navi_2 {width:53px; height:25px;}

<div id="navigation_bar">
          <img src="img/navi/navi_left_end.jpg" id="img_navi_left_end" />
          <img src="img/navi/navi_1.jpg" id="img_navi_1" />
          <img src="img/navi/navi_2.jpg" id="img_navi_2" />
</div>

Die ersten beiden Bilder werden noch richtig dargestellt.
Doch zwischen dem 2. und dem 3. gibt es eine unschöne Lücke, was sich bei jedem weiteren Bild in der Navileiste wiederholt.

Kann mir jemand sagen, wo der Fehler liegt?

(hab es schon mit display:block versucht, aber dann sind alle Bilder untereinander und nicht nebeneinander)

 

[AndrOve]

AW: mehrere Bilder nebeneinander

Hallo,

ich vermute, dass der Fehler in Deinem CSS liegt.


Vielleicht möchte das #img_navi_1 auch gerne von links gefloatet werden?

#img_navi_1 { width:63px; height:25px; float:left; }

Ich würde sprechendere Namen auswählen, siehe auch PHP Coding Standard Regel 8.

Ist halt so ein Spleen von mir, Quellcode auch für andere lesbar und verständlich zu halten bzw. zu machen

Alt-Tags wären auch gut, und von einer Navigation ausschließlich über Bilder rate ich dringend ab.

Hoffe, dass Dir das helfen wird.

Gruß
Andreas

 

[masterluke77]

AW: mehrere Bilder nebeneinander

#navigation_bar {
    width:816px;
    float: left;
}
#img_navi_left_end {width:6px; height:25px; }
#img_navi_1 {width:63px; height:25px; }
#img_navi_2 {width:53px; height:25px; }

mal testen.. habs jetzt nicht Probiert...

 

[Aelfry]

AW: mehrere Bilder nebeneinander

Hallo,

ich vermute, dass der Fehler liegt in Deinem CSS liegt.

Dass man an einem einfachen img-Tag nicht viel falsch machen kann, war mir schon klar

Vielleicht möchte das #img_navi_1 auch gerne von links gefloatet werden?

Soll ich dann also bei jedem einzelnen Navigations-Bild float:left setzen??
Hatte gedacht, dass das nicht gerade "schön" wäre...

]

#img_navi_1 { width:63px; height:25px; float:left; }

Ich würde sprechendere Namen auswählen, siehe auch PHP Coding Standard Regel 8.

Ist halt so ein Spleen von mir, Quellcode auch für andere lesbar und verständlich zu halten bzw. zu machen

Ich habe sprechendere Namen gewählt.
Aber um hier nicht unnötig viel Code zu posten, habe ich alles so reduziert wie möglich geschrieben.

Alt-Tags wären auch gut, und von einer Navigation ausschließlich über Bilder rate ich dringend ab.

Warum rätst du davon ab?
Wenn ich sicher bin, dass die Bilder immer verfügbar sind, sehe ich keinen Grund für alt-Tags.

#navigation_bar {
    width:816px;
    float: left;
}
#img_navi_left_end {width:6px; height:25px; }
#img_navi_1 {width:63px; height:25px; }
#img_navi_2 {width:53px; height:25px; }

mal testen.. habs jetzt nicht Probiert...

funktioniert leider nicht

 

[AndrOve]

öhm, vielleicht weil's guter Stil ist, alt-Attribute zu verwenden und es auch Menschen mit Defiziten gibt, die das Internet nutzen ( möchten ) - Stichwort: Barrierefreiheit

Darüberhinaus indizieren Suchmaschinen Webseiten viel besser, weil die [noch] keine Texte in Grafiken erkennen können, Stichwort: SEO

Außerdem schreibt das W3C das Attribut als #required vor, damit dein XHTML validiert.

Is ja nur ein Vorschlag, kannst eh machen, wie Du meinst.
Is ja das schöne am Internet.

Apropos schön:

Soll ich dann also bei jedem einzelnen Navigations-Bild float:left setzen??
Hatte gedacht, dass das nicht gerade "schön" wäre...

Es soll doch funktionieren und nicht schön sein oder?
HTML is halt eine AuszeichnungsSPRACHE -.-
Und da muss mensch sich an gewisse Regeln halten *kopfschüttel*

Wenn's schön aussehen soll, laß es weg und ärger Dich nicht über die "Lücke".

Gruß Andreas

Damit's "schöner" wird, kannst ja ne Klasse .floatleft { float:left;} anlegen und jedem einzelnen Bild zuweisen.

 

[sokie]

AW: mehrere Bilder nebeneinander

Wenn ich sicher bin, dass die Bilder immer verfügbar sind, sehe ich keinen Grund für alt-Tags.

Zum Glück it HTML nicht von "Meinungen" abhängig, sondern von Struktur und Logik (ob beim Navigieren Bilder zur Verfügung stehen, bestimmst nicht du, sondern die Einstellungen auf dem Client, wenn der keine Bilder anzeigt, sind da keine. ohne alt gibt es da nichts wodrauf zu klicken wäre. was zunächst ein Grund FÜR alt attribute, und zugleich GEGEN eine ausschliessliche Bildernavigation.)
nun hats du da eine Liste von Bildern, die zur Navigation dienen. Für die Struktur ist es ungünstig die einfach in einen div zu werfen, und zu hoffen, dass man die irgendwie strukturiert bekommt. das ul mit Listenelementen ist hier die bessere Wahl.
Navigieren kann man in deiner Navigation nicht, denn dazu müssten die Bilder noch innerhalb eines a-elements liegen.:

  <ul id="navigation">
    <li><a href="#"><img src="bild1.png" alt="beschreibung" /></a></li>
    <li><a href="#"><img src="bild2.png" alt="beschreibung" /></a></li>
    <li><a href="#"><img src="bild3.png" alt="beschreibung" /></a></li>
    <li><a href="#"><img src="bild4.png" alt="beschreibung" /></a></li>
  </ul>

wenn deine (HTML)Struktur soweit (valide) steht, kann man über das Styling nachdenken.
vorher ist das diskutieren von Anzeigefehlern relativ uninteressant.

 

[AndrOve]

AW: mehrere Bilder nebeneinander

@sokie:
warum das Navigieren mit den Bildern nicht klappt, wär' bestimmt die nächste Frage gewesen....

Jetzt hast ihm ja schon das Menü gebaut :hmpf:
Dabei macht doch erst selber denken kluch !

Gruß Andreas

 

[Aelfry]

AW: mehrere Bilder nebeneinander

@sokie:
warum das Navigieren mit den Bildern nicht klappt, wär' bestimmt die nächste Frage gewesen....

Natürlich, wie dumm von mir, warum habe ich nicht den kompletten Quellcode gespostet, damit jeder der sich diesen Post ansieht erst mal schön scrollen darf...

Jetzt hast ihm ja schon das Menü gebaut :hmpf:
Dabei macht doch erst selber denken kluch !

Oh ja, eine einfache Liste, die ich selber auch in 10s geschrieben hätte.
Was für eine fertige Navigation!

Vielleicht solltest du dich einfach mal mit sinnlosen und dummen Kommentarten zurück halten, anstatt zu versuchen, deine eigene Unwissenheit mit Halbwissen zu überdecken!

wenn deine (HTML)Struktur soweit (valide) steht, kann man über das Styling nachdenken.
vorher ist das diskutieren von Anzeigefehlern relativ uninteressant.

Da das Layout schon fertig ist, weiß ich auch genau wie alles aussehen soll.
Wenn ich den Header schon fertig gecodet habe, kann ich doch schon anfangen, nach Anzeigefehlern zu suchen.
Die restlichen Bereiche (Inhalt und Footer) die erst darunter kommen, werden wohl kaum etwas an diesen Fehlern ändern.
Da hab ich doch lieber einen funktionierenden Teilbereich, ehe ich mich dann weiter vorarbeite.

Aber ich denke, ich werde erst mal deinen Tipp befolgen und versuchen, die Navi als Liste zu machen

 

[sokie]

AW: mehrere Bilder nebeneinander

Da das Layout schon fertig ist, weiß ich auch genau wie alles aussehen soll.
Wenn ich den Header schon fertig gecodet habe, kann ich doch schon anfangen, nach Anzeigefehlern zu suchen.
Die restlichen Bereiche (Inhalt und Footer) die erst darunter kommen, werden wohl kaum etwas an diesen Fehlern ändern.
Da hab ich doch lieber einen funktionierenden Teilbereich, ehe ich mich dann weiter vorarbeite.

ja, da habe ich mich wohl zuu knapp ausgedrückt. ich meinte auch die Struktur der Navigation in erster Linie. (Nichtsdestotrotz wirst du aber den Rest auch gut strukturieren und valide schreiben wollen, oder?)

 

[AndrOve]

AW: mehrere Bilder nebeneinander

@Aelfry:
Ich hab noch nie 'ne Navigation ohne <a> Tag gesehen, aber stümper Dich mal ruhig durch :
Wenn Du das in 10 Sekunden geschrieben hättest, wieso postet Du dann so einen Scheiss hier hin ?!

<div id="navigation_bar">
<img src="img/navi/navi_left_end.jpg" id="img_navi_left_end" />
<img src="img/navi/navi_1.jpg" id="img_navi_1" />
<img src="img/navi/navi_2.jpg" id="img_navi_2" />
</div>

Halbwissen ist besser als gar kein Wissen

Im Übrigen beschäftige und code ich seit 1989, da bist Du wahrscheinlich noch mit der Trommel um den Weihnachtsbaum gerannt :lol:

Ich klink mich hier aus, mach den Kram wie Du meinst, schade um meine vergeudete Lebenszeit

Gruß an alle anderen
Andreas

Apropos Scheiss

Hatte gedacht, dass das nicht gerade "schön" wäre...

*stirnklatsch

Natürlich, wie dumm von mir, warum habe ich nicht den kompletten Quellcode gespostet, damit jeder der sich diesen Post ansieht erst mal schön scrollen darf...

Ja, wirklich dumm
Scrollen ist nicht schlecht. Oft werden genau die Teile von Schlaumeiern vorenthalten, die entscheidend sind, weil sie sie für unnötig halten. Schon mal was von Vererbung gehört?
Ich scroll lieber als meine Glaskugel aus dem Schrank zu holen.

 

[Aelfry]

AW: mehrere Bilder nebeneinander

Wenn Du das in 10 Sekunden geschrieben hättest, wieso postet Du dann so einen Scheiss hier hin ?!

Weil ich z.B. nicht auf die Idee gekommen bin, das ganze in eine Liste zu packen.
Das bedeutet aber nicht dass, wie du unterstellt hast, ich zu blöd wäre eine Liste zu erstellen.

schade um meine vergeudete Lebenszeit

Die ist bereits vergeudet, wenn du wirklich seit 1989 codest und mir dann nicht wirklich weiterhelfen konntest.
Der einzige brauchbare Tipp hier (Liste) kam von sokie und nicht von dir.

Scrollen ist nicht schlecht. Oft werden genau die Teile von Schlaumeiern vorenthalten, die entscheidend sind, weil sie sie für unnötig halten.

Es ging mir darum per css mehrere Bilder nebeneinander zu positionieren, ohne eine Lücke dazwischen.
Der von mir gepostete Code stellte genau dieses Problem dar.

Ich brauche doch nicht eine komplette Verlinkung, alle finalen Namen, etc. zu posten, wenn diese doch rein gar nichts mit dem Problem zu tun haben.

btw: problem ist gelöst

 

[AndrOve]

AW: mehrere Bilder nebeneinander

Die ist bereits vergeudet, wenn du wirklich seit 1989 codest und mir dann nicht wirklich weiterhelfen konntest.

Der einzige brauchbare Tipp hier (Liste) kam von sokie und nicht von dir.

Dass man eine Navigation in Listen packt, ist seit Jahren Quasi-Standard, an den mensch sich allerdings nicht halten muss, aber darum ging's in Deiner Frage nicht :lol:
Es ging in Deiner Frage darum, warum da eine "Lücke" ist, nicht um eine Liste.
Diese Frage habe ich Dir beantwortet und Dir gesagt, dass Du floaten sollst.
Ich hab' Dir sogar zwei Lösungen gezeigt !
Eine davon sah Dir nicht schön genug aus *nochmalstirnklatsch

Wenn Du Schlaumeier meine Lösung anstelle von MasterLuke's ausporbiert hättest, hättest Du gesehen, dass es funktioniert .

Wenn Du nur MasterLuke's nicht funktionierenden Vorschlag mit dem float im übergeordneten DIV umgesetzt hast, kann ich nix dafür :lol:.

Dann laber hier bitte nicht so ein Müll, dass sokie der einzige war und ich dir nicht weiterhelfen konnte

Hoffentlich gibst Du sokie's Wissen nicht auch noch als Deine Arbeit aus