div Breite an Inhalt anpassen

lagraf · 26. Februar 2020

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.

Code

HTML
<div class="hero hero-slider">
   <ul class="slides">
      <li data-bg-image="fotos/test-1.jpg">
         <div class="container" style="background:rgba(21,18,21,0.7)">
            <h2 class="slider-title">Willkommen</h2>
               <p>Text ...</p>
               <p>Text ...</p>
         </div>
      </li>

      <li data-bg-image="fotos/test-1.jpg">
      ...
      </li>
   </ul>
</div>

CSS
.container { margin-right:auto; margin-left:auto; padding-left:15px; padding-right:15px; *zoom:1; }

Alles anzeigen

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?

Stef · 26. Februar 2020

Hey,

Du kannst anstatt dem Div eine 2 Liste erstellen in der die Beschreibung des Slidebildes steht.

Beispiel: https://jsfiddle.net/12pkv46q/

Grüße,

Stef

Sempervivum · 26. Februar 2020

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.

html-seminar.de/woltlab/attachment/2215/

Sempervivum · 26. Februar 2020

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

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        ul.slides li {
            text-align: center;
        }

        ul.slides {
            list-style-type: none;
        }

        .container {
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="hero hero-slider">
        <ul class="slides">
            <li data-bg-image="images/dia0.jpg">
                <div class="container" style="background:rgba(21,18,21,0.7)">
                    <h2 class="slider-title">Willkommen</h2>
                    <p>Text ...</p>
                    <p>Text ...</p>
                </div>
            </li>
        </ul>
    </div>
</body>


</html>

Alles anzeigen

Stef · 26. Februar 2020

Zitat von Sempervivum

Bei dem Fiddle muss ich doch vorsichtig Bedenken anmelden:

1. ul als direktes Kind von ul ist nicht valide

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.

html-seminar.de/woltlab/attachment/2215/

Alles anzeigen

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

lagraf · 27. Februar 2020

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:

Code

HTML
<div class="hero hero-slider">
    <ul class="slides">
        <li data-bg-image="fotos/test-1.jpg">
            <div class="container">
                <div class="container_text">
                    <h2 class="slider-title">Willkommen</h2>
                    <p>Text ...</p>
                    <p>Text ...</p>

CSS
.container_text { margin-right: auto; padding: 15px; *zoom: 1; background: rgba(21,18,21,0.7); position: sticky; left: -22em; width: 375px; box-shadow: 10px 10px 5px rgba(0, 0, 0, .5); }

Alles anzeigen

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:

html-seminar.de/woltlab/attachment/2221/

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

div Breite an Inhalt anpassen

Jetzt mitmachen!

Teilen

Tags