Vandret linje med HTML
Vandrette linjer på siden laves med tag'en <HR>. Linjer ses traditionelt blot som sorte, tynde, fuldt optrukne linjer, men de kan styles med farver, tykkelse, bredde osv. og de kan laves stiplede, prikkede osv. Der findes optional attributes som kan styre udseendet, men det er et levn fra tidligere tider, og det anbefales at man styrer udseendet med standard attributes, som både fungerer langt bedre, men også giver flere muligheder.
Standardlinjen med <HR> ser således ud:
Hvad man ikke kan se på linjen er, at den i virkeligheden er en fordybning, hvor det sorte er skyggesiden. Hvis man fjerner skyggen ved at sætte attributten NOSHADE til noshade, dvs. NOSHADE="noshade", giver det flg. effekt:
At det er en fordybning træder frem, hvis man i stedet sætter attributten SIZE til 10 (SIZE="10"), så får man effekten:
Hvis man finder ud af at man gerne vil have en bred fuldt optrukken linje, f.eks. i sort, løber man ind i et par problemer med browserne. Internet Explorer kan kun finde ud af at gøre linjen sort med STYLE="background-color:#000000; border-color:transparent", og laver en linje med skarpe kanter, mens Firefox kræver attributten STYLE="color:#000000" for at fungere, og den giver rundede ender på linjerne. Farven er til at håndtere, ved at sætte STYLE="color:#000000; border-color:transparent; background-color:#000000", det giver flg. virkning (kræver at man ser siden med begge browsere for at kunne se forskellen):
Hvis man vil have noget der ligner en bjælke med skarpe hjørner, uanset browseren, skal man lave en kasse i stedet. Det kunne f.eks. være en DIV, hvor man sætter baggrundsfarven til sort, giver den højden 10px og bredden 100%. Som kode ser det således ud:
På siden ser det således ud:
Hvis man sammenligner linjernes tykkelse, vil man se, at for Firefox er en højde på 10px det samme for både linjer lavet med HR og DIV, mens Explorer af uransagelige grunde, gør at linjerne lavet med HR-tag'en bliver 12px i højden.
Som standard er linjen sat til 100% i bredde. Dette kan man selvfølgelig ændre til enten en fast bredde i pixels eller relativ i procenter, f.eks. 50%:
Placeringen styres med attributten ALIGN, f.eks. ALIGN="left":
Man kan godt gøre linjen længere end 100%, f.eks. 110%, så den stikker uden for afgrænsningerne:
Standardlinjen med <HR> ser således ud:
Hvad man ikke kan se på linjen er, at den i virkeligheden er en fordybning, hvor det sorte er skyggesiden. Hvis man fjerner skyggen ved at sætte attributten NOSHADE til noshade, dvs. NOSHADE="noshade", giver det flg. effekt:
At det er en fordybning træder frem, hvis man i stedet sætter attributten SIZE til 10 (SIZE="10"), så får man effekten:
Hvis man finder ud af at man gerne vil have en bred fuldt optrukken linje, f.eks. i sort, løber man ind i et par problemer med browserne. Internet Explorer kan kun finde ud af at gøre linjen sort med STYLE="background-color:#000000; border-color:transparent", og laver en linje med skarpe kanter, mens Firefox kræver attributten STYLE="color:#000000" for at fungere, og den giver rundede ender på linjerne. Farven er til at håndtere, ved at sætte STYLE="color:#000000; border-color:transparent; background-color:#000000", det giver flg. virkning (kræver at man ser siden med begge browsere for at kunne se forskellen):
Hvis man vil have noget der ligner en bjælke med skarpe hjørner, uanset browseren, skal man lave en kasse i stedet. Det kunne f.eks. være en DIV, hvor man sætter baggrundsfarven til sort, giver den højden 10px og bredden 100%. Som kode ser det således ud:
<DIV STYLE="background-color:#000000; height:10px; width:100%;">
På siden ser det således ud:
Hvis man sammenligner linjernes tykkelse, vil man se, at for Firefox er en højde på 10px det samme for både linjer lavet med HR og DIV, mens Explorer af uransagelige grunde, gør at linjerne lavet med HR-tag'en bliver 12px i højden.
Som standard er linjen sat til 100% i bredde. Dette kan man selvfølgelig ændre til enten en fast bredde i pixels eller relativ i procenter, f.eks. 50%:
Placeringen styres med attributten ALIGN, f.eks. ALIGN="left":
Man kan godt gøre linjen længere end 100%, f.eks. 110%, så den stikker uden for afgrænsningerne: