Alla inlägg den 4 maj 2013
Idag tänkte jag tipsa om taggen <DIV>.
Många använder tabeller för att dela in en webbsida, DIV kan också användas till att dela in en webbsida (och mycket mer), dessutom kan du med DIV ange på pixeln var du vill ha din ruta (cell).
Nedan ser du ett exempel med 2 rutor (celler) som är fritt placerade på skärmen, koden för att skapa detta finns under bilden.
Enkelt förklarat fungerar det som så att man skapar först en yttre DIV (som i detta fallet kan jämföras med tabellen), den heter #topbox i mitt exempel och skapas så här <div id='topbox'></div>.
Sedan skapar man nya DIVs som man lägger in i den yttre (som då kan jämföras med cellerna i tabellen), dess heter #topcontent1 och #topcontent2 i mitt exempel och dom placeras innanför <div id='topbox></div>.
Det gör man så här <div id='topcontent1'></div>.
För att bestämma en DIVs egenskap använder man sig av <style> på följande sätt.
<style>
{
}
</style>
Stylesheets kan med fördel läggas i en egen css-fil och länkas in i olika sidor, men det går vi igenom en annan dag.
Innanför klamrarna { } sätter du egenskaperna för den DIVen, t.ex width,height,left,top o.s.v
Lek lite med koden nedan (den är bara att klippa ut och klistra in), testa t.ex att ändra på värdena left och top för att flytta en "cell".
---------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
#topbox
{
width:1000px;
height:800px;
position:relative;
}
#topcontent1
{
background-color:#ffffff;
position:absolute;
top:5px;
left:5px;
width:100px;
height:90px;
text-align:left;
}
#topcontent2
{
background-color:#ffffff;
position:absolute;
top:300px;
left:400px;
width:100px;
height:50px;
text-align:left;
}
</style>
</head>
<body>
<div id='topbox'>
<div id='topcontent1'>
Detta är 1
</div>
<div id='topcontent2'>
Detta är 2
</div>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------
Fortsättning följer //Peter
Presentation
Fråga mig
Kalender
| Må | Ti | On | To | Fr | Lö | Sö | |||
1 |
2 |
3 |
4 | 5 |
|||||
6 |
7 | 8 |
9 |
10 |
11 |
12 |
|||
13 |
14 |
15 |
16 |
17 |
18 | 19 |
|||
20 |
21 |
22 |
23 |
24 |
25 |
26 |
|||
27 |
28 |
29 | 30 |
31 |
|||||
| |||||||||
Sök i bloggen
Senaste inläggen
- TIPS!! En mycket bra texteditor.
- Att använda css-filer
- En dag i solen.
- Att använda <DIV>
- Javascript: document.getElementById().innerHTML
- Smygande buggar.
- PHP/Javascript: En "Bra att ha-funktion".
- Söndag i solen.
- Php: Skapa pdf-filer enkelt.
- Äntligen klar!!
- Javascript: Spärra en textbox till att bara kunna ta emot nu...
- En blogg för dig som älskar att programmera.