css width en padding

Pagina: 1
Acties:

  • drecaise
  • Registratie: December 2000
  • Laatst online: 08-05 15:05
Het volgende is wat er moet gebeuren: Ik heb een pagina met uiterst links en uiterst rechts een plaatje. Tussen deze plaatjes moet de eigenlijke tekst van de pagina komen. (deze moet dus op alle resoluties de maximale breedte hebben)

Het idee was dat wanneer ik een div zou toevoegen. Hiervan de width op 100% zou zetten en dan een padding zou geven links en rechts, dat de tekst in deze div keurig van de plaatjes af zou blijven.

maar...
De div wordt groter dan 100%. Waardoor ik een horizontale scrollbar krijg en de tekst aan de rechterzijde over het plaatje valt.
Dit had ik niet verwacht omdat de padding immers aan de binnenzijde zit. Het lijkt er dus op dat de width van een element slaat op de grote van het vlak zonder de padding en de border. (Ik dacht dus dat dit altijd tot aan de border was (inclusief de padding).
Dit gedrag zie ik in firefox en IE6. Ik ga er dus maar van uit dat dit conform de specs is.

Maar ik ben nog steeds niet dichter bij een oplossing gekomen... Heeft iemand een idee hoe ik dit oplos met css?
(Ik ben niet geinteresseerd in oplossingen met tabellen, dus als je die in gedachten had dan spaar jezelf de moeite ;))

pizzaguys get all the pussy


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:45

crisp

Devver

Pixelated

in strict compliant mode is width inderdaad inclusief padding en border, in non-IE browsers vaak ook in non-compliant mode.
Oplossing: maak een container van 100% breedte en zet daarin een ander block-level element met margins

Intentionally left blank


  • drecaise
  • Registratie: December 2000
  • Laatst online: 08-05 15:05
nou breekt m'n klomp... ik heb het al.... ik definieer geen width en het gaat wel goed...

Rest de vraag... hoe werkt dit dan?


(Overigens is m'n html al strict declared dus daar zou de oorzaak niet moeten liggen)

pizzaguys get all the pussy


  • faabman
  • Registratie: Januari 2001
  • Laatst online: 08-08-2024
drecaise schreef op 16 april 2004 @ 02:37:
nou breekt m'n klomp... ik heb het al.... ik definieer geen width en het gaat wel goed...

Rest de vraag... hoe werkt dit dan?
een block-level element neemt afaik standaard de maximaal beschikbare breedte aan...

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!


Verwijderd

(Overigens is m'n html al strict declared dus daar zou de oorzaak niet moeten liggen)
Dat hangt er maar net vanaf of er nog iets _voor_ de DOCTYPE staat. Zie ook:

  • drecaise
  • Registratie: December 2000
  • Laatst online: 08-05 15:05
ik heb 't even doorgelezen en 't is standards mode op elke browser.


en terug op faabmans opmerking: Het lijkt mij juist dat een element zonder width declared een breedte zou moeten krijgen die wordt bepaald door de breedte van wat er in staat (?)

Weet iemand wat de standaard daarover zegt?

pizzaguys get all the pussy


Verwijderd

http://www.w3.org/TR/CSS21/visuren.html#q5

In het kort, het klopt. Waar jij het over hebt is een inline, of inline-block element.

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:45

crisp

Devver

Pixelated

een block-level element neemt standaard de beschikbare breedte aan, alleen IE snapt dat niet altijd; ik gebruik daarom regelmatig dit soort constructies:
Cascading Stylesheet:
1
2
3
4
5
6
#blocklevel {
  width: 100%; // voor IE
}
body>#blocklevel {
  width: auto; // voor andere browsers
}


note dat ik IE altijd in quirksmode dwing, standard compliant mode in IE is te beperkt (enkel beschikbaar in IE6) en te buggy.

[ Voor 29% gewijzigd door crisp op 16-04-2004 17:18 ]

Intentionally left blank

Pagina: 1