Direktlänk till inlägg 4 maj 2013
Att använda <DIV>
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
Hej alla programmeringsvänner!! Om ni är som jag och gärna vill skriva rå kod, t.ex. html eller php, javascript, css etc. Testa Crimson editor, den är enkel att använda men har mycket bra funktioner som underlättar vid programmeringen (om...
Hej igen alla programmeringsvänner, jag jobbar på ett nytt stort projekt och har därför inte tagit mig tiden att skriva här, men nu tog jag mig äntligen tid och idag tänkte jag visa er hur man använder sig av css-filer. En css-fil är en liten t...
Hej alla programmeringsvänner, igår och idag har det inte blivit så långa stunder vid datorn eftersom vädret har varit helt fantastiskt för en soldyrkande nordbo . Igår nådde vi i Örebro ca 18 grader varmt och idag har vi just nu 21 grader va...
Godkväll alla programmeringsvänner. Ikväll tänkte jag tipsa om "document.getElementById().innerHTML", ni kanske redan kan detta, men jag tror ändå att det finns många därute som kan ha användning av detta tips. Hur som helst, i koden ned...
Idag har jag spenderat många timmar på att hitta en bugg som bara uppstod ibland, och det är inte enkelt. Man måste ju återskapa exakt vad användaren gjorde och sedan felsöka all kod som då används för att kunna ringa in problemet och fixa det....
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.