Att göra div-block

När man vill bygga en website med css använder man sig av olika former div block. En del kallar dem för boxar, container eller wrapper. Gemensamt för dessa är att istället för att använda vanliga tabeller så styrs utseendet och uppbyggnaden av stilmallen . Ett divblock är också ett avgränsat område på sidan. Man kan använda dessa boxar till att skapa menyer, till tabeller och naturligtvis till olika block för att hålla samman din text på sidan. Div blocken kan också kallas för div layer därför att man kan positionera dem ovanpå varandra i olika lager. Genom att använda divblock istället för tabeller laddas sidan mycket snabbare och blir därför mer användarvänlig. Vi ska nu kika på hur uppbyggnaden för ett divblock kan se ut.

Css märkningen

Först måste vi ge blocket ett namn – ett ID. När man använder en div märkning blir detta namn unikt för just bara den boxen. Vi kallar den för container och då blir märkningen så här:

  1. #container

Att det är frågan om ett divblock ser vi i den allra första märkningen #container.
Dess unika ID, eller namn, är just container. Man kan även använda värdet div.container istället för #container om man så vill.

Nästa steg är att skapa blockets speciella egenskaper. För att få webbläsaren att förstå vad det är du vill med koden lägger man egenskaperna mellan två omslutande klamrar. Vi ska börja med att göra blocket 300 pixlar bred.

  1. #container { width:300px;}

Nu vill vi dels ha en border runt blocket och dels ha lite luft mellan blockets innehåll och blockets kanter, därför skriver vi in värdet på dessa märkningar också.

  1. #container { width:300px; border:1px solid #666; padding:10px;}

boxmodelhack

HTML märkningen för vår container

Du placerar ditt block på sidan genom att använda denna kod:

  1. <div id="container">innehåll i containern</div>

Så här långt allt väl – eller?
Mja, vi har ett problem. Så fort vi lägger till border eller padding i blocket läser nämligen inte IE in värderna som vi vill. Istället för att plussa på pixlarna som vi anger i vår padding och border så stjäl den utrymme inne i själva boxen. Det innebär att boxen med innehållet inte kommer att vara 300 px bred utan för att vara mer exakt – 278 px. Visst – själva blocket är visserligen 300 px men eftersom innehållet i boxen minskas med 22 pixlar blir inte alltid slutresultatet som vi vill. Det finns ett sätt att komma förbi hur IE läserna in koderna. Låt oss återigen granska blocket hur det ser ut när man lägger till ett så kallat boxmodelhack!

boxmodelhack
Om du vill vara säker på att divblockens egenskaper blir som du vill ha dem ska du läsa mer om boxmodelhack.

Liknande poster:

Leave a Reply

Your email address will not be published. Required fields are marked *