Bilderleiste in HTML perfektionieren

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich möchte für eine Internetseite eine Bilderleiste bzw. einen Balken haben aus mehreren aneinandergereihten Bildern, ca. 3 cm hoch und so breit wie der Bildschirm.
++++++++++++++++++++++++++++++++++++++++

Nun haben ja nicht alle die gleiche Bildschirmauflösung, d. h. bei niedriger Auflösung ist letztlich weniger Platz für Bilder. Das Ergebnis wäre bei der derzeitigen Einstellung, dass einige Bilder in der ersten Zeile sind und alle Bilder, die nicht passen in der zweiten Zeile.
++++++++++++++++++++++++++++++++++++++++
+++++

Das finde ich unschön. Wie kann ich meine Bilderleiste so einstellen / umstellen / programmieren, dass die Bilder nicht in mehrere Zeilen rutschen, sondern sich statt dessen die Bildgröße ändert, größer oder kleiner, so dass die Bilder immer in einer Zeile sind, egal bei was für einer Bildschirmauflösung? ACHTUNG, ich kann nur ganz wenig HTML und benutzte überwiegend WYSIWYG Programme (z. B. Kompozer)!

Derzeit habe ich

Und davon dann mehrere Images hintereinadergereiht.

Stephanie

#2

TIPP: CSS
Mit HTML allein kommst du da nicht weiter!

Lad dir einfach mal ein paar „horizontal navigation menüs“ runter und schau dir die CSS datein an, für normal werden hier in CSS regeln für
und - erstellt, und damit wird das mehr oder weniger dynamisch an den Bildschuirm angepasst

Liebe Grüsse
Seta

PS: falls das darunter liegende ein Frameset ist, überdenk das auch noch mal, framesets sind gestern, heute ist CSS und PHP include()

#3

Hallo,

ich fürchte ich bin leider wirklich ziemlich ahnungslos, ich kopiere meine mit Kompozer zusammengebastelten Stückchen an passende Stellen in eine vorgefertigte Website. Die benutzt wohl auch CSS, aber die Unterschiede zwischen HTML und CSS kenne ich kaum. Ich kenne eigentlich nur einzelne universal Befehle für HTML, BBC, etc. z. B. fett, kursiv, unterstrichen, Schriftart, -größe, -farbe, Hintergrund, Bild einfügen. Den Rest macht mein WYSIWYG Programm.

Setas Stichwort „horizontal navigation menüs“ trifft es fast. Bei näherer Betrachtung stelle ich aber fest, dass unter dieses Stichwort doch hauptsächlich Navigation fällt. D.h. Tabs oben am Bildrand, mit denen man neue Fenster öffnet und so.

Ich wollte aber nur eine rein dekorative Bilderleiste ohne weitergehende Funktion. In den „horizontal navigation menüs“ ist vermutlich auch der Befehl enthalten, der dafür sorgt, dass die Bildbreite gleich bleibt. Das müsste man aber in einem großen Navigations Template erst mal finden und rausfischen, zu schwer für mich. Wenn es nicht irgendwo einen fertig kopierbaren Befehl gibt, der das macht, bin ich überfordert. Ich suche einen möglichst kurzen Befehl, kostenlos, ohne Links im Befehl, außer für die Bilder.

Falls jemandem dazu noch was einfällt freue ich mich über weitere Antworten, ansonsten müsste ich mit meiner inperfekten Bilderleiste leben.

Stephanie

#4

Hi, Stephanie!

Wie wäre es damit, die Bildleiste nicht auf der Seite zusammenzusetzen sondern in einem Bildbearbeitungsprogramm?
Wenn Du die Leiste komplett einbindest, kannst Du ihr die Breite ‚100%‘ geben, das sollte Dein Problem lösen.

#5

Hallo,

Wie wäre es damit, die Bildleiste nicht auf der Seite
zusammenzusetzen sondern in einem Bildbearbeitungsprogramm?
Wenn Du die Leiste komplett einbindest, kannst Du ihr die
Breite ‚100%‘ geben, das sollte Dein Problem lösen.

danke für den Vorschlag. Das ist glaube ich eine gute Idee. Ich habe zwar derzeit noch bei den Einzelbildern kleine Textfelder, die beim darüberfahren aufgehen (z. B. Bild 1 dies ist ein Huhn, Bild 2 dies ist ein Hund, etc.), aber darauf könnte ich auch verzichten.

Oder wäre es auch möglich, wenn ich 10 Bilder habe jedem Bild 10 % der Bildschirmbreite zu geben?

Würde das klappen?

Stephanie

#6

Hallo, Stephanie!

Ich habe zwar derzeit noch bei den Einzelbildern kleine
Textfelder, die beim darüberfahren aufgehen (z. B. Bild 1 dies
ist ein Huhn, Bild 2 dies ist ein Hund, etc.), aber darauf
könnte ich auch verzichten.

Oder eine Image Map anlegen.
(Siehe http://de.selfhtml.org/html/grafiken/verweis_sensiti…)

Oder wäre es auch möglich, wenn ich 10 Bilder habe jedem Bild
10 % der Bildschirmbreite zu geben?
Würde das klappen?

Theoretisch ja. Praktisch hängt es davon ab, ob sonst noch irgendwelche Abstände oder Rahmen definiert sind. Probier’s einfach aus.

Gruß, Caro

1 Like
#7

Hallo,

Ich habe zwar derzeit noch bei den Einzelbildern kleine
Textfelder, die beim darüberfahren aufgehen (z. B. Bild 1 dies
ist ein Huhn, Bild 2 dies ist ein Hund, etc.), aber darauf
könnte ich auch verzichten.

Oder eine Image Map anlegen.
(Siehe
http://de.selfhtml.org/html/grafiken/verweis_sensiti…)

Äh, nein, ich glaube eher nicht. Das sah mir bei einem kurzen Blick drauf etwas zu kompliziert aus.

Oder wäre es auch möglich, wenn ich 10 Bilder habe jedem Bild
10 % der Bildschirmbreite zu geben?
Würde das klappen?

Theoretisch ja. Praktisch hängt es davon ab, ob sonst noch
irgendwelche Abstände oder Rahmen definiert sind. Probier’s
einfach aus.

Ja super, ich habe es probiert und es klappt. Ich nehme dann eine Gesamtsumme von etwa 90% und lasse 10% für einen dünnen Rahmen über.

Beim Lesen des HTML Texts sah ich, dass bei einem Bild eine width (Breite) in px (Pixel) angegeben war, aber das will ich ja dann nicht.

Ich muss nur noch mal meinen Taschenrechner hinzuziehen, ich kann nicht jedem Bild den gleichen Breitenanteil zugestehen, weil die unterschiedlich groß und hoch sind und ich sonst hinterher eine Zickzacklinie habe.

Oder könnte ich auch gleichzeitig eine einheitlich Höhe festlegen?

Wäre das so richtig? Wenn die Bilder dadurch etwas verzerrt werden macht das nichts, sie sind so klein, dass das kaum auffiele.

Stephanie

#8

Naaah, verzerrte Bilder sind unhübsch.

Wie wäre es denn alternativ damit, die Bildleiste am rechten Fensterrand abzuschneiden?

 [...]

Das wäre dann gleichzeitig Dein (vermutlich) erster Ausflug in die schöne bunte Welt der Stylesheets :wink:

Gruß, Caro

#9

Hallo,

Das wäre dann gleichzeitig Dein (vermutlich) erster Ausflug in
die schöne bunte Welt der Stylesheets :wink:

Ja.

Ich habe es mal ausprobiert, in meinem WYSIYG Programm Kompozer sieht das toll aus.

Für meine eigene Website werde ich das auf jeden Fall verwenden.

Ich wollte es allerdings auch noch auf einer vorgefertigen Seite (ebay mich Seite) verwenden, da geht das nicht, da macht irgendwas das Stylesheet kaputt. Das Ergebnis sind entweder zwei statt einer Zeile Bilder oder ein blauer Schiebebalken am unteren Bildrand (mir fällt gerade nicht ein wie das heißt), mit dem das für den Bildschirm zu breite Gesamtbild hin und her schieben kann.

Aber die Verschönerung meiner eigenen Website ist schon mal hervorragend.

Stephanie

#10

Das Ergebnis sind entweder
zwei statt einer Zeile Bilder oder ein blauer Schiebebalken am
unteren Bildrand (mir fällt gerade nicht ein wie das heißt),
mit dem das für den Bildschirm zu breite Gesamtbild hin und
her schieben kann.

Scrollbar.

Mein Fehler; lass das width=100% weg. Das ist in dem Zusammenhang gar nicht nötig und verursacht vermutlich die Probleme bei Deiner Ebay-Seite.
Also einfach:

Gruß, Caro

#11

Hallo,

Mein Fehler; lass das width=100% weg. Das ist in dem
Zusammenhang gar nicht nötig und verursacht vermutlich die
Probleme bei Deiner Ebay-Seite.
Also einfach:

nein das macht keinen Unterschied.
Die ebay Seite mag das Stylesheet nicht und beharrt darauf, mir dann unten einen Scrollbalken zu machen, wenn zu viele oder zu breite Bilder für die Bildschirmauflösung da sind. Aber das ist nicht so schlimm, auf meiner eigenen Website hat das Scrollsheet ja super geklappt und die ebay Seite ist hinreichend schön.

Vielen Dank für deine Bemühungen und nette Hilfe!

Stephanie

#12

Nachbesserung
Habe gestern etwas vergessen:
damit die Geschichte auch im Mozilla funktioniert, musst Du die Höhe des DIV-Containers noch an die Bildgröße anpassen. in dem Beispiel also:

 [...]

Sonst gibt es wieder einen Umbruch.

Gruß, Caro