Notifikationer

Markér alle som læst Log ud

mungojerrie Nybegynder

18. oktober 2008 - 22:29 Der er 6 kommentarer og
1 løsning

opstilling i to kolonner og to rækker med css

hej folkens

jeg vil gerne ha lavet en skabelon som benytter div tags til at placere mine data som om jeg havde en tabel med to kolonner og x antal rækker.

Det skal være i stil med flowlayout designet fra eks Windows, hvor jeg så blot har to kolonner, men hver div elements højde er uafhængig af sin nabo til højre/venstre for sig.

eks:
-------------
| 1 | 2 |
| | |
|----| |
| |------|
| 3 | 4 |
| | |
-------------

håber det giver mening.

Synes godt om

w13 Novice

19. oktober 2008 - 01:23 #1

Det er bestemt ikke noget nemt, du bevæger dig ud i der.

Her er et lille eksempel på, hvad du kan bruge float til i CSS sammen med div-elementer, men jeg kan ikke hjælpe dig mere end dette her, da jeg kan forudsige alle de problemstillinger, der vil opstå, når man begynder at lege med det. =)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html,body{
height:100%;
}

.cell{
float:left;
width:200px;
height:100px;
border:1px dashed red;
}
</style>
</head>
<body>

<div class="cell">
Hello
</div>
<div class="cell">
Hello
</div>
<div class="cell">
Hello
</div>
<div class="cell">
Hello
</div>
<div class="cell">
Hello
</div>
<div class="cell">
Hello
</div>
<div class="cell">
Hello
</div>
<div class="cell">
Hello
</div>
<div class="cell">
Hello
</div>
<div class="cell">
Hello
</div>
<div class="cell">
Hello
</div>
<div class="cell">
Hello
</div>

</body>
</html>

Synes godt om

w13 Novice

19. oktober 2008 - 01:25 #2

Jeg tror faktisk, det ville kunne laves med JavaScript ret meget nemmere, end med CSS.

Synes godt om

roenving Novice

19. oktober 2008 - 04:47 #3

Hvis du skal have forskellige højder og vil stille det op i kolonner er du nødt til at lave hele kolonnen som et element, hvor de andre ting er inde i, f.eks.

CSS:

.kolonne{width:300px;float:left;}
.clearDiv{clear:both;font-size:0;line-height:0;}

HTML:

<div class="kolonne">
<div>
Tekst: 1
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div>
Tekst: 3
<br><br><br>
</div>
</div>

<div class="kolonne">
<div>
Tekst: 2
<br><br><br><br><br><br><br>
</div>
<div>
Tekst: 4
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="clearDiv"> </div>

Synes godt om

mungojerrie Nybegynder

19. oktober 2008 - 16:03 #4

okay, så kan en alm tabel vel klare opgaven?

Synes godt om

w13 Novice

19. oktober 2008 - 16:19 #5

Nej, du får problemer med, at nogle celler kan være højere end andre. Det kan ikke gøres med tabeller. Alle celler i en række bliver lige høje.

Synes godt om

mungojerrie Nybegynder

03. december 2008 - 19:16 #6

lukker

Synes godt om

roenving Novice

07. december 2008 - 10:04 #7

Ku' du slet ikke bruge hjælpen ?-(

Synes godt om

Ny bruger Nybegynder

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS