[css]Parent net zo breed als child.

[RuudBurger]

Ik heb een afbeelding met een omschrijving eronder. Maar ik weet niet hoe groot de afbeelding is en ik kan de breedte ook niet opgeven omdat deze dus variable is.

Is er een manier met css dat ik de "text_image" net zo breed maak als de afbeelding die erin staat?

hier mijn code en een voorbeeld met wat ik wil bereiken.

HTML:

<div class="text_image left" >
    [img]"/media/stories/picvchess2.jpg"[/img]
    <div class="description">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    </div>
</div>

Cascading Stylesheet:

.left {
    float:      left;
    margin:      0px 13px 5px 0px;
}

.right {
    float:      right;
    margin:      0px 0px 5px 13px;
}

.text_image {
    line-height:    0;
    text-align:     center;
}

    .text_image img{
  border:      1px solid #000000;
    }

    .text_image .description{
  background:       #FFFFFF;
  font-size:        0.9em;
  font-style:       italic;
  padding:      5px;
  line-height:    1.6em;
    }

alvast bedankt.

[Verwijderd]

heb ik ook ooit op zitten puzzelen, heb uiteindelijk maar met php de dimensies van het plaatje uitgelezen en die in inline css gezet. Het zou eventueel ook met javascript kunnen.

Overigens vind ik voor dit soort dingen een dl constructie ietsje netter:

code:

<dl class="figure">
  <dt><img /></dt>
  <dd>description</dd>
</dt>

en het allermooiste is eigenlijk de beschrijving in je title attribuut en dan:

Cascading Stylesheet:

img[title]:after {
    content: attr(title);
    display: block;
}

maar dat werkt helaas alleen in opera

[ Voor 8% gewijzigd door Verwijderd op 06-11-2005 11:38 ]

[RuudBurger]

ja met javascript moet het me idd wel lukken maar dan moet ik elke pagina helemaal door de javascript heenhalen om te kijken of ergen class="text_image" wordt gebruikt. Dit wil ik dus voorkomen door het allemaal in CSS te doen.

voor de rest is "dl" niet voor dit soort dingen. Dat is voor een definities van een term. Dus niet een omschrijving van een plaatje.
Net als de content tag in css. CSS is style en moet dus niet gebruikt worden voor de content van het document.

Heeft iemand anders nog ideeën? Behalve php. ik wil mijn style niet in de html stoppen.

[crisp]

display: table-cell comes to mind, alleen zit je dan nog met IE. Plus dat je dan geen float op kan geven.
Blijft dus over wat mophor al oppert: dimensies van het plaatje vooraf bepalen of javascript gebruiken.
Andere optie is dus om toch een tabel te gebruiken...

[Verwijderd]

Sillymidget schreef op zondag 06 november 2005 @ 12:39:
voor de rest is "dl" niet voor dit soort dingen. Dat is voor een definities van een term. Dus niet een omschrijving van een plaatje.
Net als de content tag in css. CSS is style en moet dus niet gebruikt worden voor de content van het document.

't is een beetje offtopic maar een dl koppelt een beschrijving aan een term, is een beschrijving aan een plaatje koppelen niet net zoiets? Ik zou een dl iig niet meteen afschieten, het is iig netter dan divgebruik, want hoofdstukken zijn het ook niet.

Wat betreft de css: de content staat gewoon in het title attribuut, een plek waar ie behoorlijk op z'n plaats is denk ik, met css zorg je er alleen voor dat je 'm op een andere manier weergeeft.

[frickY]

Nest je plaatje in het DIVje?
De DIVje rekt dan vanzelf mee naar de breete van het plaatje.

[Sendy]

Zo'n ding heet een caption in het Engels. Dit is een pagina die hierover wat schrijft.

[ Voor 21% gewijzigd door Sendy op 06-11-2005 13:07 ]

[RuudBurger]

Verwijderd schreef op zondag 06 november 2005 @ 13:02:
[...]


't is een beetje offtopic maar een dl koppelt een beschrijving aan een term, is een beschrijving aan een plaatje koppelen niet net zoiets? Ik zou een dl iig niet meteen afschieten, het is iig netter dan divgebruik, want hoofdstukken zijn het ook niet.

Wat betreft de css: de content staat gewoon in het title attribuut, een plek waar ie behoorlijk op z'n plaats is denk ik, met css zorg je er alleen voor dat je 'm op een andere manier weergeeft.

div is gemaakt om de pagina op te delen. DIVide. Het geeft dus geen hoofdstukken aan ofzo. Maar laten we niet offtopic gaan. Ik weet wel hoe ik mijn html moet gebruiken en ik weet ook dat content niet in css moet, ook al is er een tag voor.

Sendy schreef op zondag 06 november 2005 @ 13:03:
Zo'n ding heet een caption in het Engels. Dit is een pagina die hierover wat schrijft.

kijk daar hebben we wat aan. iig dat het caption heet. kan ik sowiezo beter zoeken ^^. bedankt!