nicht angemeldet
div: width an Inhalt anpassen
Hallo!
unter
http://www.portfolio-media.de/alx/test/div-width-test/index.html
habe ich eine Beispiel-Seite abgelegt.
Mein Problem ist: Ich habe einen div-Container um mein Bild und die Bildunterschrift. Ich möchte das der Container so breit ist wie das Bild und die Bildunterschrift um Bildrand umbricht.
Mit einer Tabelle geht das ganz einfach, indem ich eine sehr kleine Größe für die Tabellenbreite angebe, dann dehnt sich die Tabelle so groß wie der größte Inhalt, hier eben das Bild, und der Text läuft dann genauso breit.
Geht das auch mit einem div? Ich habe es nicht hinbekommen.
Danke + Grüße
Alexander
-
Hallo,
Mein Problem ist: Ich habe einen div-Container um mein Bild und die Bildunterschrift. Ich möchte das der Container so breit ist wie das Bild und die Bildunterschrift um Bildrand umbricht.
Ich finde ein div ist nicht das sinnvollste dafür. IMHO sollte man da eine Deffinitionsliste dafür nehmen.
Mit einer Tabelle geht das ganz einfach, indem ich eine sehr kleine Größe für die Tabellenbreite angebe, dann dehnt sich die Tabelle so groß wie der größte Inhalt, hier eben das Bild, und der Text läuft dann genauso breit.
Geht das wirklich mit einer Tabelle? Oder geht das nur im IE mit einer Tabelle? (Ich weiß es nicht) Denn der hat eine komische Vorstellung von breite, und macht die Elemente immer mindestens so breit wie das breiteste Element drinn. Also müsste das auch mit deinen Bildern genau so im IE funktionieren, wie gesagt nur im IE.
Grüße
Jeena Paradies--
Sinnvolles URI Design - ein paar Gedanken
--
Für das Leben gezeichnet - der zweite Weltkrieg aus der eigenen Perspektive
Einer der letzten Tagebucheinträge meines Großvaters, der den zweiten Weltkrieg am eigenen Leib erfahren hat.-
Hallo Jeena,
erst mal danke für die Antwort, aber
» Ich finde ein div ist nicht das sinnvollste dafür.
ich muss leider einen div nehmen, kommt so aus dem CMS.
» IMHO sollte man da eine Deffinitionsliste dafür nehmen.
Auch eine Idee, aber auch da muss ich die Breite offensichtlich vorher wissen, siehe Definition
<dl class=“meImgLeft“ style=“width: 200px;“>
auf der Beispielseite.» Geht das wirklich mit einer Tabelle? Oder geht das nur im IE mit einer Tabelle?
Nö, geht auch in NS und MOZ wunderbar. Und IE verbreitert den div auch nicht, oder besser gesagt, den Rahmen schon, aber den Inhalt nicht.
Bis morgen
Alexander
-
-
Hi,
Mein Problem ist: Ich habe einen div-Container um mein Bild und die Bildunterschrift. Ich möchte das der Container so breit ist wie das Bild und die Bildunterschrift um Bildrand umbricht.
was hindert Dich, das DIV so breit wie das enthaltene Bild zu definieren?
freundliche Grüße
Ingo-
Hallo Ingo,
» was hindert Dich, das DIV so breit wie das enthaltene Bild zu definieren?
dass ich dann vorher wissen muss wie breit es ist ;-)
Grundsätzlich wäre es wahrscheinlich auch möglich aber aufwendig das ins CMS reinzuskripten (da bin ich auch nicht so erfahren).
Ein Container der sich automatisch auf die richtige Breite dehnt wäre schon *wesentlich* eleganter.
Ausserdem mag ich nicht glauben, dass es Sachen gibt, die man mit sauberem (Inhalt/Erscheinung getrenntem) HTML und CSS statt Tabellen etc. nicht hinkriegt. Das wäre nicht schön. Ich bin da eigtl. auch ein Verfechter von.
Schöne Grüße
Alexander
-
Hi,
Grundsätzlich wäre es wahrscheinlich auch möglich aber aufwendig das ins CMS reinzuskripten (da bin ich auch nicht so erfahren).
so aufwendig ist das garnicht, wenn die serverseitige Sprache eine Funktion zur Ermittlung der Bildgröße bereithält.
Ein Container der sich automatisch auf die richtige Breite dehnt wäre schon *wesentlich* eleganter.
Das ist allerdings bei blocklevel-Elementen nicht vorgesehen, wohl aber bei inline-Elementen und Tabellenzellen...
freundliche Grüße
Ingo-
» Das ist allerdings bei blocklevel-Elementen nicht vorgesehen
Das hatte ich befürchtet. Dann gibt's da wahrscheinlich keine Möglichkeit?
» wohl aber bei inline-Elementen und Tabellenzellen...
Ja, genau daran habe ich auch schon gedacht, und mit Tabellenzellen geht es ja auch wunderbar, wahrscheinlich auch mit span etc., aber da dürfen ja laut Standard dann keine Block-Elemente mehr rein (was ich leider bräuchte).
Vielen Dank + Grüße
Alexander
P.S.: Bin heute wahrscheinlich nicht mehr am Rechner, weil meine Freundin Geburtstag hat. Bis morgen.
-
hi,
» wohl aber bei inline-Elementen und Tabellenzellen...
Ja, genau daran habe ich auch schon gedacht, und mit Tabellenzellen geht es ja auch wunderbar, wahrscheinlich auch mit span etc., aber da dürfen ja laut Standard dann keine Block-Elemente mehr rein (was ich leider bräuchte).
in block level element ist in seinem _anzeigeverhalten_ nur so lange ein block level element, wie du das nicht änderst ;-)
display kann ja neben table-cell auch noch werte wie inline annehmen - ob sich aber damit das gewünschte verhalten auch einstellt, müsstest du ggf. ausprobieren.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
Hallo,
display ... inline ...
danke für den Tipp, aber display:inline oder gleich span sind ganz furchtbar ;-(
Siehe aktualisierte Beispielseite
Schöne Grüße
Alexander
-
-
Hi,
» Das ist allerdings bei blocklevel-Elementen nicht vorgesehen
ein kleiner Hinweis: lösche bitte nicht eines der Zitatzeichen (»), da das Zitat sonst nicht mehr vom Forum erkannt wird. Siehe:
» Ja, genau daran habe ich auch schon gedacht, und mit Tabellenzellen geht es ja auch wunderbar, wahrscheinlich auch mit span etc., aber da dürfen ja laut Standard dann keine Block-Elemente mehr rein (was ich leider bräuchte).
Selbst span dürfte Dir hier nicht helfen, wenn der Textinhalt keine entsprechend definierten Zeilenumbrüche enthält.
freundliche Grüße
Ingo-
ein kleiner Hinweis: lösche bitte nicht eines der Zitatzeichen
Danke für den Hinweis, wird gemacht (war mal wieder über genau, weil ich dachte erste Zitatebene => ein »).
Selbst span dürfte Dir hier nicht helfen, ...
Stimmt, span oder display:inline geht gar nicht, siehe aktualisierte Beispielseite http://www.portfolio-media.de/alx/test/div-width-test/index.html
Viele Grüße
Alexander
-
-
-
-
-
-
Tach
Geht das auch mit einem div? Ich habe es nicht hinbekommen.
Es gibt noch die "krumme" Lösung div {display:table-cell}. Dem kannst Du dann analog zur Tabelle eine Breite von 1px zuweisen.
Getestet allerdings nur auf die Schnelle mit Opera. Ob das mit anderen Browsern ebenfalls zum gewünschten Ergebnis führt, mußt Du selbst herausfinden.
Thomas J.
-
Hallo Thomas,
danke, da kommen ja doch noch einige ganz gute Tipps.
display:table-cell geht so halb, in MOZ ok in IE wird wieder nur der Rahmen angepasst, siehe aktualisierte Beispielseite
Schöne Grüße
Alexander
-