Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

CSS, divjes niet laten uitrekken

Anne
13 antwoorden
  • 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?
  • Misschien heb je wat aan de overflowproperty?

    wimb
  • 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?
  • 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…
  • Mag de hoogte wel veranderen?
  • [quote:3be05410c2=".:ToBee:."]Mag de hoogte wel veranderen?[/quote:3be05410c2]

    Ja :)
  • [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".
  • [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…
  • 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]
  • http://www.w3.org/TR/REC-CSS2/text.html#white-space-prop

    BTW, ik gaf meer tips dan alleen 'die' site…
  • Kan iemand zeggen wat er fout is aan mijn code of wat er ontbreekt? Bedankt
  • 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.
  • 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.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.