Begrenzung der Abbildungsbez im Einsch

Computer: Software & Programmierung HTML & CSS
#1

Hallo.
Ich habe meine Abbildungungen und die zugehörigen Abbildungsbezeichnungen mit dem Einschluss eingebunden. Nun habe ich noch einen Frage zur CSS.

Einige Abbildungsbezeichnungen sind sehr lang. Daher wollte ich für einen fließenden Text die Breite für die Abbildungsbezeichnungen begrenzen. Durch

#images{
float:left;
width:400px; }

in der styles.css konnte ich dies auch. (also lag ich wolhl prinzipiell nicht falsch). Allerdings sind nicht alle Bilder einheitlich 400px breit.
Gibt es ein Form für die css, um die Breite der Abbildungsbezeichnungen entsprechend der Bildbreite anzupassen?

Vielleicht sowas wie:

#images{
float:left;
width:=img widht oder =img}…??

Ach so bislang ist mein an eine id=image geknüpft, da ich auch mal mehrere Bilder auf einer Seite habe, muss ich doch anstelle der id eher eine class und dann … verwenden, oder?

Danke euch, novice

#2

Hallo.

Vielleicht sowas wie:

#images{
float:left;
width:=img widht oder =img}…??

Nein leider gibt es sowas nicht.

Ach so bislang ist mein an eine id=image geknüpft,
da ich auch mal mehrere Bilder auf einer Seite habe, muss ich
doch anstelle der id eher eine class und dann … verwenden, oder?

Danke euch, novice

id = einzel identifizierung
name = gruppen identifizierung
class = classen

#3

ich weiss ja nicht wieviel unterschied bei den breiten der Bilder sind, aber wenn die Differenz nicht zu weit auseinander liegt, mach eine fixe width und die Option overflow:hidden (im image)dazu, dann wird der Überlauf von p.abb einfach abgeschnitten.

Für alles weitere muss man auf javascript zugreifen.

#4

Hallo Novice!

Ach so bislang ist mein an eine id=image geknüpft,
da ich auch mal mehrere Bilder auf einer Seite habe, muss ich
doch anstelle der id eher eine class und dann … verwenden, oder?

Auf jeden Fall, sonst ist dein Code nicht valide!

Du könntest dir mit document.getElementsByTagName(‚DIV‘) eine Referenz auf alle DIV-Elemente im Doument verschaffen, diese dann mit JavaScript onload des Windows in einer FOR-Schleife durchlaufen, und überprüfen, ob sie den className ‚images‘ haben. In diesem Fall verpasst du ihnen als style.width den offsetWidth-Wert des ersten (und einzigen) enthaltenen Bildes.

window.onload = function () {
var myDivs = document.getElementsByTagName(‚DIV‘);
for (i=0; i

Die Overflow-Eigenschaft der DIV-Elemente mit dem Klassennamen „images“ setzt du in deinem CSS auf ‚hidden‘;

Und fertig!

Gruß Gernot

#5

Hallo Gernot!

vielen Dank, dass klingt zu „einfach“ um wahr zu sein. :wink:
Mein Benutzername kommt nicht von ungefähr…daher muss ich noch einmal nachhakcen. Wo setzt ich die Syntax denn hin? In jede meiner html-dateien (und wo da direkt nach dem „head“?) oder in die css? eingeschlossen in prehtml /prehtml (oder ist das ein FOrmatierungsding für das Forum…?)

window.onload = function () {
var myDivs = document.getElementsByTagName(‚DIV‘);
for (i=0; i

Die Overflow-Eigenschaft der DIV-Elemente mit dem Klassennamen
„images“ setzt du in deinem CSS auf ‚hidden‘;

Und fertig!

… hoffe ich :wink:

Gruß Gernot

Gruß zurück, Novice

#6

Hallo Novice;

Wo setzt ich die Syntax denn hin? In
jede meiner html-dateien (und wo da direkt nach dem „head“?)
oder in die css? eingeschlossen in prehtml /prehtml (oder ist
das ein FOrmatierungsding für das Forum…?)

window.onload = function () {
var myDivs = document.getElementsByTagName(‚DIV‘);
for (i=0; i

Die Overflow-Eigenschaft der DIV-Elemente mit dem Klassennamen
„images“ setzt du in deinem CSS auf ‚hidden‘;

Naja die CSS-Angaben setzt du in deine ausgelagerte CSS-Datei, die du im HEAD-Bereich über ein LINK-Element
http://de.selfhtml.org/css/formate/einbinden.htm
einbindest oder in einem STYLE-Element. Das Javascript setzt du in deine ausgelagerte JS-Datei, die du ebenfalls in im HEAD-Bereich oder an nämlicher Stelle direkt in einem SCRIPT-Element platzierst.
http://de.selfhtml.org/javascript/objekte/htmlelemen…

Gruß Gernot