div Breite an Inhalt anpassen

  • Hallo Leute,

    ich plage mich schon Stunden, die Breite eines <div> an dessen Inhalt anzupassen.

    Ich habe einen Hintergrundslider, der mir bildschirmfüllende Fotos anzeigt. Zu jedem Foto möchte ich in einer darüberliegenden Box etwas Erklärung anzeigen. Damit die Box nicht die gesamte Breite füllt, soll sie nur so breit sein, wie der Inhalt Platz beansprucht.

    Ich habs schon beim .container mit display:table, display:table-cell, display:inline-block versucht, aber nichts passt die Breite an die Textlänge an!

    Hat jemand dafür eine Lösung?

  • Bei dem Fiddle muss ich doch vorsichtig Bedenken anmelden:

    1. ul als direktes Kind von ul ist nicht valide

    Zitat

    Error: Element ul not allowed as child of element ul in this context.

    2. Die Beschreibung gehört zu dem Bild und sollte daher sowohl aus semantischen als auch funktionalen Gründen in dem li mit dem Bild liegen.

    3. Fraglich, ob eine Liste für die Beschreibung in diesem Fall semantisch sinnvoll ist. Wahrscheinlich liegt der TO mit Überschrift und Absätzen schon richtig.

    4. Löst nicht das Problem des TO, denn die Beschreibung nimmt nach wie vor nach rechts die gesamte Fensterbreite in.

    slider-caption.png

  • Bei mir funktioniert display: inline-block; schon, in dieser Demo nimmt der Container nur den Platz entspr. dem Inhalt ein und ist zentriert ausgerichtet:

  • Danke für die Info Sempervivum. Ich dachte aufgrund meines bisherigen Wissen auf Bezug von Mehrfach-Dropdowns, dass man auch ein <ul> in einem <ul> verwenden kann. Da hatte ich dann wohl die falsche Information aufgenommen.


    Grüße,

    Stef

  • Da die Beschreibung möglichst wenig vom Hintergrundfoto verdecken soll (schon gar nicht bis zum rechten Rand), habe ich es jetzt umgekehrt gelöst: Ich definiere ein zusätzliches <div> mit einer fixen width:

    Dieses <div> erhält einen durchscheinenden Hintergrund, damit man noch das Hintergrundfoto erkennt und einen Schatten, damit es etwas schwebend aussieht. Von der Größe her würde es auch auf Handybildschirme passen, ev. wäre es aber besser, das <div> dafür mit einer Media Abfrage zu verkleinern. Derzeit sieht es so aus:

    forum.jpg

    Die Beschreibung enthält übrigens auch eine Aufzählung, die ich aber künstlich mit <img src=..> gelöst habe.

    Danke für euren Input!

    LG Franz