Når jeg laver HTML har jeg en lille transparent gif på 9 x 9 pixels som jeg bruger til at skubbe og placere tekst og tabeller med. Er der et transparent HTML eller CSS element man kunne bruge i stedet som ikke fylder så meget i koden og som er nemt at bruge?
Du kan bruge CSS til at placere div. elementer med - herunder også indrykninger. Men som med alt andet (D)HTML, så er der altid browserproblemer ...
Konceptet med at bruge en 'spacer' (som ikke behøver at være større end 1 x 1 px.) er rigtig godt. De eneste steder det giver problemer er i browsere der ikke viser billeder / grafik ...
Der er kun ét HTML-tag for gengivning af grafik (gif, jpg / jpeg og png) og det er 'img' tagget ... og, tjaa selvfølgelig fylder det lidt, men det virker jo fint og er let at tilføje f.eks. class til ...
ikke andet end at den nederste tillader elementer til venstre og forbliver usynlig selvom der er sat styles på div med CSS DIV { border:1px solid black; }
hvis du har din tekst i et boks-element, såsom <p> eller i en tabelcelle kan du sætte margin/padding direkte på elementet vha. css. Det smarte ligger i at du så kan ændre afstandene fra din css uden at skulle lave og uploade nye billeder. Og hvis du allerede har et stylesheet fylder det ikke mere end f.eks. p {margin: 0 10px;} (sætter højre og venstre margin til 10px på alle p-elementer).
Ang. billede, så er det ikke nødvendigt at lave / uploade mere end ét billede (.gif) a 1 x 1 px. og så kalde den mange gange med forskellige størrelser alt afhængig hvafd der er brug for. F.eks. virker dette storartet med den samme gif:
<table> <tr> <td>Ingen indrykning</td> <td><img src="images/transparent.gif" width="1" height="30" alt="" border="0"></td><!-- Liniehøjden i tabelle sat til 30 px. --> </tr> <tr> <td><img src="images/transparent.gif" width="10" height="1" alt="" border="0"></td><!-- 10 px. indrykning --> <td><img src="images/transparent.gif" width="100" height="1" alt="" border="0"></td><!-- Bredden i kolonnen sat til 100 px. --> </tr> </table>
Bare for at køre det helt ud på overdrevet, kunne du også opfinde dit eget tag og blot udskifte det med <img>-tags vha. en JavaScript-handler i body onload.
Her er et eksempel, hvor jeg har "opfundet" et <spc>-tag med to attributter: h og w. I onload-handleren udskiftes alle <spc>-elementer automatisk med <img>-elementer, som får <spc>-elementets h- og w-værdier som hhv. højde og bredde.
Det betyder, at man blot skal skrive f.eks. <spc h=10 w=10> i body-koden for at indsætte en transparent.gif på 10x10 px.
Eneste ulempe er, at du skal huske at indsætte onload-handleren på alle sider, der skal bruge <spc>-tagget... Fordelen er, at skulle du glemme det, vil <spc>-tags blot blive ignoreret af browseren:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>Lav din egen spacer</TITLE> <script> function convertSpacers() { var elm; var coll = document.getElementsByTagName('spc'); // hent alle <spc>'er for (var i=0; i<coll.length;) { // gør følgende med hver <spc> elm = document.createElement('img'); //opret et <img> elm.src = '1x1.gif'; // sæt src på billedet elm.style.pixelWidth = coll[i].w; // sæt bredde elm.style.pixelHeight = coll[i].h; // sæt højde coll[i].replaceNode(elm); // indsæt billedet i stedet for <spc>'en } } </script> </HEAD>
<BODY onload="convertSpacers()"> <p>Her er tre eksempler:</p> <spc w=10 h=50><br> <spc w=100 h=80><br> <spc w=301 h=20><br> </BODY> </HTML>
Tjaa, W3-validatoren kaster sig om på ryggen over ovenstående, men selvfølgelig, hvis man kun skal bruge det til IE, så går det vel ...
Synes godt om
Ny brugerNybegynder
Din løsning...
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.