CSS, divjes niet laten uitrekken

[anoniem]

Ik heb met CSS een box gemaakt dmv een div, nu rekt dit vakje uit als ik de tekst invoer, zelfs als ik de width vastleg. Dit wil ik niet, het liefst zou ik dus willen dat de tekst doorloopt op de volgende regel of gewoon buiten de box valt zonder de box uit te laten rekken. Hoe doe ik dit?

[anoniem]

Misschien heb je wat aan de [url=http://www.w3schools.com/css/pr_pos_overflow.asp]overflow[/url]property? wimb

[anoniem]

Bedankt, het gaat om een menu. Ik heb een menutje gemaakt met items, als de naam van een item te lang is, dan gaat het menutje uitrekken, en dat gaat ten koste van mijn ontwerp. Dit is wat ik op mijn stylesheet heb staan: [code:1:c546154182] #menu { position:absolute; top:160px; left:20px; width:150px; padding:10px; background-color:#FFFE87; border:none; } [/code:1:c546154182] Ik maak gebruik van lijsttekens [code:1:c546154182] <ul> <li> <li> etc </ul> [/code:1:c546154182] Het probleem is dus dat het alleen goed uitziet als ik de items in het menu een korte naam hebben, bij een lange naam ziet het er niet meer uit. Met overflow "hidden" kan ik dit tegengaan, maar de tekst wordt dan ook niet helemaal weergegeven. Hoe kan ik dit het beste oplossen? Of is dit een van de tekortkomingen van CSS?

[anoniem]

Je kunt de width groter maken... Je kunt min-width gebruiken (wordt niet ondersteund door IE)... Je kunt geen width specificieren, maar met padding e.d. de boel regelen Je kunt is kijken hoe andere dat met CSS menu's doen: http://alistapart.com/articles/taminglists/ Om maar is een paar mogelijkheden te noemen...

[anoniem]

Mag de hoogte wel veranderen?

[anoniem]

[quote:3be05410c2=".:ToBee:."]Mag de hoogte wel veranderen?[/quote:3be05410c2] Ja :)

[anoniem]

[quote:636129d7f0="termin8or"]Je kunt de width groter maken... Je kunt min-width gebruiken (wordt niet ondersteund door IE)... Je kunt geen width specificieren, maar met padding e.d. de boel regelen Je kunt is kijken hoe andere dat met CSS menu's doen: http://alistapart.com/articles/taminglists/ Om maar is een paar mogelijkheden te noemen...[/quote:636129d7f0] Bedankt, ik heb die site bekeken en het lukt mij nog steeds niet om te "wrappen".

[anoniem]

[quote:c6f791fbeb="sjalesho"][quote:c6f791fbeb=".:ToBee:."]Mag de hoogte wel veranderen?[/quote:c6f791fbeb] Ja :)[/quote:c6f791fbeb] Fixed with, Height=Auto en nowrap=yes Volgens mij strekt hij dan naar onder ipv naar rechts...

[anoniem]

lukt nog steeds niet, ik snap er niks van. [code:1:5692a57f94] #menu { position:absolute; top:160px; left:20px; width:150px; height:auto; padding:5px; background-color:#FFFE87; border:none; nowrap:yes; } [/code:1:5692a57f94]

[anoniem]

http://www.w3.org/TR/REC-CSS2/text.html#white-space-prop BTW, ik gaf meer tips dan alleen 'die' site...

[anoniem]

Kan iemand zeggen wat er fout is aan mijn code of wat er ontbreekt? Bedankt

[anoniem]

In dit geval is er wel een css-oplossing in IE6, maar niet in Mozilla, en dat is zeldzaam! http://www.blooberry.com/indexdot/css/properties/text/wordwrap.htm Probeer dit maar in een testdocumentje: <div STYLE="word-wrap: break-word;width:10px;">This is the text content of this div element</div> De bug in Mozilla, die dit behandelt is: http://bugzilla.mozilla.org/show_bug.cgi?id=99457 Denk hierbij ook aan het gedrag in textarea's waar je bij lange urls altijd een horizontale scrollbalk krijgt in Mozilla, maar niet IE. Heel irritant.

[anoniem]

hardstikke bedankt, het werkt nu! Dit moest het dus zijn: [code:1:469d628970] word-wrap: break-word; [/code:1:469d628970] Ik ben dit nog nooit tegengekomen, zo leer je nog wat. Wel jammer dat Mozilla dit niet ondersteunt.

[anoniem]

Het is dan ook MS CSS (waarschijnlijk een extension geen proposel). CSS3 gaat dit wel ondersteunen, zie de bugzilla bug voor meer details.