[css] div leeg met span elementen

[Verwijderd]

Ik dacht dat ik begreep hoe ik div en span elementen moest gebruiken, echter werd vandaag met het tegenover gestelde geconfronteerd.

voorbeeld:

code:

  <div style="background-color: #00f;">
    <span style="float: left; background-color: #0f0;">abc</span>
    <span style="float: right; background-color: #f00;">klm</span>
  </div>
  <div style="background-color: #eee;">
    <table>
      <tr>
        <td>123</td>
      </tr>
      <tr>
        <td>456</td>
      </tr>
      <tr>
        <td>789</td>
      </tr>      
    </table>
  </div>

De eerste div geeft alleen de span elementen correct werk, echter geen achtergrond. Zodra ik een ander element of text bij de span elementen toevoeg dan geeft de div wel naar mijn verwachting weer.

Met een span-element in een div-element lijkt het erop of de div de span niet als element ziet en daardoor leeg is en dus niks weergeeft. Ik heb geprobeerd om dit aan te passen met het display attribuut, echter geen resultaat. Eveneens als het veranderen van de span naar div mocht niet baten.

Wat doet er voor zorgen dat div en span elementen voor elkaar geen elementen zijn? (als ik dit zo goed verwoord)

[BtM909]

Een span is een inline element.. Dus zal de grootte innemen die nodig is

Gebruik de FireFox webdevelopers tools of zet desnoods een border om je elementen. Dan zie je vaak al meteen waar het probleem ligt

Jou oplossing vind ik niet een van de mooiste, maar als je perse die span wilt blijven gebruiken, dan moet je er display: block aan toevoegen (wat het eigenlijk een soort div maakt) <-- los van het juiste gebruik ervan

[NH298]

Het komt denk ik door de floats in je span, je moet na je spans nog een clear (css) toevoegen in een br of div.

voorbeeld:

code:

  <div style="background-color: #00f;">
    <span style="float: left; background-color: #0f0;">abc</span>
    <span style="float: right; background-color: #f00;">klm</span>
     <br style="clear:both;" />
  </div>
  <div style="background-color: #eee;">
    <table>
      <tr>
        <td>123</td>
      </tr>
      <tr>
        <td>456</td>
      </tr>
      <tr>
        <td>789</td>
      </tr>      
    </table>
  </div>

Dit moet werken volgens mij.

[ Voor 74% gewijzigd door NH298 op 05-11-2004 11:25 ]

[crisp]

Een float is impliciet al geen inline-level element meer, dus een background zou moeten werken. Echter is IE daar nogal eens buggy in; vaak helpt het dan om (alleen voor IE) je floating element een height of width te geven.
Om de div zelf uit te laten rekken moet je inderdaad een clearing element toevoegen.

[ Voor 17% gewijzigd door crisp op 05-11-2004 11:38 ]

[Verwijderd]

BtM909 schreef op 05 november 2004 @ 11:14:
Een span is een inline element.. Dus zal de grootte innemen die nodig is

....

Jou oplossing vind ik niet een van de mooiste, maar als je perse die span wilt blijven gebruiken, dan moet je er display: block aan toevoegen (wat het eigenlijk een soort div maakt) <-- los van het juiste gebruik ervan

Betekend dat niet dat de div waarin de span elementen staan dan gevuld is en dus zijn background kan laten zien op basis van de ruimte die "over" is?

Als ik de span als div of een div gebruik dan werkt float niet naar behoren. Wat zou dan een mooiere oplossing kunnen zijn?

crisp schreef op 05 november 2004 @ 11:31:
Een float is impliciet al geen inline-level element meer, dus een background zou moeten werken. Echter is IE daar nogal eens buggy in; vaak helpt het dan om (alleen voor IE) je floating element een height of width te geven.

Ik gebruik zelf geen IE, maar Firefox. Aan de floating elements een width of height meegeven werkt zowel in IE als Firefox niet, wel als ik aan de div een height meegeeft echter dat zorgt er dan voor dat de spans groter kunnen worden dan dat de div is en het geheel niet meer klopt.

[crisp]

Verwijderd schreef op 05 november 2004 @ 11:42:
[...]
Ik gebruik zelf geen IE, maar Firefox. Aan de floating elements een width of height meegeven werkt zowel in IE als Firefox niet, wel als ik aan de div een height meegeeft echter dat zorgt er dan voor dat de spans groter kunnen worden dan dat de div is en het geheel niet meer klopt.

En daarvoor moet je je floats ook clearen, anders rekt je div niet mee uit.