| Med CSS så kan du göra nästan allt du vill! Bara du har fantasi så! Jag tänkte börja med vanlig förflyttning av text och bilder, och text över bilder. | Som i kursen CSS lär du dig grunderna så dem tar jag inte med här! | Här iaf. så kommer jag använda samma sida som vi experimenterat med förut! | Vi börjar med att flytta text till nåt ställe på sidan! Och har en liten text över bilden: |
|
<HTML> <HEAD> <TITLE>Björn's HTML skola !</TITLE> <style type="text/css"> <!-- #text_1 { position: absolute; top: 15px; left: 10px; width: 350px; font-family: Verdana; color: Black } #text_2 { position: absolute; top: 80px; left: 5px; width: 350px; font-family: Verdana; color: Black } #bild_1 { position: visible; top: 100px; left: 75px; width: 250px; height: 350px } --> </style> </HEAD> <BODY> <FONT SIZE="2" ID="text_1">Hej! Och välkommen till min sida! </FONT> <BR> <BR> <FONT SIZE="2" ID="text_2">Lapin Kulta roKKar!</FONT> <IMG SRC="lapin_power.jpg" ID="bild_1"> </BODY> </HTML> |
Det som händer här är att vi har #text_1 som har pixel rad 15 från toppen av sidan, förkortas px! Och ifrån vänster sida pixel rad 10. Den har min favorit typsnitt Verdana och har svart färg. Vi har även lagt till en bild (#bild_1) och för den gäller samma princip som #text_1, denna bild kommer få en text över sig och man lätt kordinerar ut på sidan med top och left attributrena, tack vare #text_2. Sidan som just är tillverkad ser ut såhär |