Arnel's WebbFör diverse små "grejer" som jag vill testa om de fungerar och godkänns av W3C Validatorn.
Det vanliga "knepet" om man vill få en ruta med rundade hörn att skriva i, är ju att använda "hörnbilder" så att man får en visuell effekt av rundat hörn fast den egentligen inte är det. Detta knep är vad som stått till buds, oavsett om man använt CSS eller tabell för layouten. Men nu finns det alternativ!
Här är ett exempel på en "box" med rundade hörn, gjord enbart med CSS!
I boxen kan man också skriva in text som går ända upp (och ner) mot hörnen, om man vill.
Inga "stylande" bilder används för att forma hörnen. Allt som behövs är fyra kvadratiska "bullets" som i listor, positionerade absolut i varje hörn. Dessa "bullets" kan inte kodas i HTML som <li> utan i entity form: • vilket också validerar enligt W3C!
I ovanstående exempel expanderar inte boxen om man ökar textstorleken eller textmängden. Boxens bredd har angetts i pixlar, vilket gör att den inte heller förändras i storlek vid olika storlekar på webbläsarens fönster. För detta måste procent (%) eller "em" användas. Nästa exempel är en "flexibel" box, som expanderar vid behov.
Här är ett annat exempel på "box" med rundade hörn, gjord enbart med CSS!
I detta exempel används inte • för att få in rundningen i hörnen. Istället är det små "block" med vita bakgrunder ovanför och under texten.
Dessa "block" är inlagda med HTML-taggen <b> som bara har den "uppgiften". Boxen expanderar också om man ökar textstorleken eller textmängden. Inga "stylande" bilder används för att forma hörnen.
Problemet med den flexibla boxen är att det inte går att få den lika stor i både Internet Explorer och Mozilla, då man måste använda en måttenhet som är flexibel. När man anger bredder i procent (%), beräknar Internet Explorer bredden på hela webbläsarfönstret, inte på den omgivande div'ens bredd som den borde göra och som Mozilla gör.
Samma gäller när man anger flexibel bredd för tabeller. Men kan man låta tabellen och boxen bli lika bred som den omgivande div'en eller hela webbfönstrets bredd, behöver man inte ange någon bredd alls och då blir bredden förstås samma i båda webbläsarna.
Båda exemplen ovan ska kunna fungera i alla webbläsare, i senaste versionerna. Fördelen med att slippa bilder för att forma hörnen, är att det blir enklare att få till boxen och att anpassa storleken till textinnehållet, speciellt om det varierar över tiden. CSS- och HTML-kod för boxen ses i källkoden för denna sida.
Fler tips på rundade hörn
CGI4Free
Har scripts för:
- Bannerrotering
- Gästbok
- Mailinglista
- Slumpad bild
- Slumpad länk
- Survey
- Tell a Friend
Cut And Paste Scripts
Har scripts för:
- Slumpad bild
- Slumpad länk
- Slumpad text
- Nedräkning
- Besöksräknare
- Redirection
- Gästbok
- Nyhetsbrev
- Mailformulär
- Omröstning