css als de tekst langer is achtergrond langer maken

Status
Niet open voor verdere reacties.
Ronde hoekjes met bullet-methode ... werkt niet.

Achteraf vooraf
===============
Dit probleem (intussen is de vraag weg...) ging over het zoek raken van ronde hoekjes bij toepassing van de "bullet methode" die op de html-site wordt aanbevolen:
  • "Tegenwoordig zie je op vee websites tekstboxen met ronde hoeken. Veelal zijn die met behulp van plaatjes gemaakt, maar dat kan ook op een andere manier, zodat je die plaatjes niet nodig hebt. Alleen maar door CSS goed te gebruiken. Voor de afgeronde hoeken maken we gebruik van bullets."
    Zie: www.html-site.nl/ronde-hoek.php
De vraag was ongeveer:
  • "Ik heb de ronde hoeken van de html-site toegepast. Maar nu staat de lengte van mijn tekst niet tevoren vast. Wat moet ik doen om bij een langere tekst de achtergrond met de ronde hoekjes óók langer te maken?"
===============
Het antwoord

Hoei! Daar heb je weer zo'n niet werkende ronde hoekjes-methode... :(
Hier heb ik geen oplossing voor, want de methode html-site is gebaseerd op een "statische box", d.w.z. een rechthoek met vastliggende breedte en hoogte. Ze zeggen zelf:
...wanneer je het groter wilt zul je dus wat moeten veranderen aan height en width van .box en # content en de top en left van de positie en bullet-divs.
Klik om te vergroten...
Pfff! - en ik heb het al zo warm! :shocked:

Ik kan me herinneren dat deze methode zo rond 2003 op internet circuleerde, maar toen als experiment werd gezien en niet praktisch bruikbaar vanwege de nadelen. Leuk bedacht, maar niet cross-browser, en intussen volledig achterhaald.

Kijk, dat je eventueel een <div> een vaste breedte geeft, dat kan nog. Maar als je 'm dan óók nog een vaste hoogte wilt geven, dan moet je tevoren precies weten hoeveel tekst er in past. Maar dat kan je nooit weten, want misschien heb je later wel meer tekst die je daar op die pagina wilt neerzetten. Dan zou je bij elke tekstwijziging de css moeten induiken om die bij te stellen, en dat is net niet de bedoeling van css! En: het is ook afhankelijk van de lettergrootte die de bezoeker heeft ingesteld. Behalve ... in Internet Explorer. D.w.z. als deze methode al werkt, dan is het een IE-only methode.
Maar we zullen eens kijken wat er aan de hand is.
  • Test 1: gewoon hun code inplakken en kijken wat er gebeurt: hier testpagina 1.
    Dat valt al niet mee: zijn ze de inwendige margins of paddings vergeten? Nee, in de css staat { #content; } voor wat in de html <div id="tekst"> heet. Beetje slordig.
  • Test 2: correcte #content inplakken en kijken wat er gebeurt: hier testpagina 2.
    Dat lijkt er meer op. Maar nu: lettergrootte wijzigen (Ctrl-scrollwieltje) in Firefox: de corner-bullets vliegen gelijk om je oren, en de box neemt de meest vreemde vormen aan.
  • Test 3: andere achtergrondkleur en kijken wat er gebeurt: hier testpagina 3.
    Oeps, deze methode kan niet met transparante hoekjes omgaan. Op een gekleurde background wordt de buitenkant van de hoekjes een andere kleur (hier: wit).
Deze methode werkt dus niet in z'n geheel, en een css-oplossing verzinnen voor flexibel uitrekken aan de rechter- of onderkant van de box helpt dan niet.
Andere methode! :)
Alle flexibele oplossingen (met 1 of 2 kleine images) voor hoeken (en eventueel: eigengemaakte borders) zijn mogelijk met alleen css en zonder javascript. Met ondersteuning van transparantie! Kijk maar:
Bedoel je zoiets?

Succes!
CSS-hunter
 
Laatst bewerkt:
dat is raar.

ik heb helemaal geen e-mail ontvangen dat er een reactie was?

de rondenhoeken werken alleen de hoeken gaan niet mee naar beneden maar ik heb het al anders aan gepakt.

toch bedank voor jullie hulp.
 
Hoi leuthrick,
Mooi dat je er uit gekomen bent! Mag ik vragen hoe je het anders hebt aangepakt? En heb je ook een link naar de pagina met je oplossing?

Altijd nieuwsgierig,
CSShunter
 
ik heb een systeem gemaakt dat de bladzijde nummering doet.

en voor verschillende pagina's een div gemaakt.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan