Avatar billede segato Nybegynder
21. april 2011 - 09:31 Der er 9 kommentarer og
1 løsning

div som en tabel

Jeg sidder lidt og forsøger at holde mig til divs men bokser med noget helt simpelt.

Det jeg vil opnå er noget i stil med følgende:

1  3
2  4

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td>1</td>
                </tr>
                <tr>
                    <td>2</td>
                </tr>
            </table>
        </td>
        <td>
            <table>
                <tr>
                    <td>3</td>
                </tr>
                <tr>
                    <td>4</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Hvordan styler jeg det op udelukkende med divs har forsøgt noget lign (med float right) men uden held:

<div>
    <div>
        <div>1</div>
        <div>2</div>
    </div>
        <div>
        <div>3</div>
        <div>4</div>
    </div>
</div>
Avatar billede phillips Nybegynder
21. april 2011 - 09:47 #1
Det kommer lidt an på det ønskede resultat og design. Men i det viste eksempel, er det nemmeste umiddelbart at lave en wrapper og så have de fire "celler" inde i den:

[code]
<div style="width: 200px;">
    <div style="float: left; width: 100px;">1</div>
    <div style="float: left; width: 100px;">2</div>
    <div style="float: left; width: 100px;">3</div>
    <div style="float: left; width: 100px;">4</div>
</div>
[/code]

Bemærk, at bredden af wrapperen er det samme som summen af bredden på to "celler".
Avatar billede phillips Nybegynder
21. april 2011 - 09:48 #2
Ih, hader eksperten.dk's måde at vise kode på. Prøver igen:

<div style="width: 200px;">
    <div style="float: left; width: 100px;">1</div>
    <div style="float: left; width: 100px;">2</div>
    <div style="float: left; width: 100px;">3</div>
    <div style="float: left; width: 100px;">4</div>
</div>
Avatar billede Slettet bruger
21. april 2011 - 10:33 #3
Hvad er det, du vil lave? Er det til at sætte siden op, eller er det rent faktisk til noget data?
Avatar billede segato Nybegynder
21. april 2011 - 11:02 #4
Arg selvfølgelig. Ved ikke hvorfor jeg ville have en float right på, var forhippet på den skulle flyde til højre for men selvfølgelig skal det bare være en float left! Smid et svar Phillips.

Steeven: Det er til at placere nogle menu punkter i toppen, jeg er bekendt med religions krigen imellem tables og div's og er selv tilhænger af hvad der er nemmest. Men vil gerne prøve at lege lidt med ideen for at gøre mig erfaringen selv.
Avatar billede phillips Nybegynder
21. april 2011 - 11:05 #5
Det er ikke et spørgsmål om religion, men udelukkende om, hvad der giver semantisk mening. Tabeller er velegnede til data, som det også er kendt fra faglitteratur. Divs er velegnede til struktur og layout - især hvis de navngives meningsfyldt. Læs op på web semantik for at lære mere ;-)
Avatar billede phillips Nybegynder
21. april 2011 - 11:06 #6
Og svar :-)
Avatar billede wanze Nybegynder
21. april 2011 - 18:14 #7
@phillips, Eksperten.dk gør det helt rigtigt. Det du leder efter er bare ikke code, men pre:

<div style="width: 200px;">
    <div style="float: left; width: 100px;">1</div>
    <div style="float: left; width: 100px;">2</div>
    <div style="float: left; width: 100px;">3</div>
    <div style="float: left; width: 100px;">4</div>
</div>

Du kan evt. kombinere det med en div for at gøre det lidt pænere.

Sådan her.
Avatar billede phillips Nybegynder
21. april 2011 - 19:38 #8
@wanze
Fedt! Men drt giver da ingen logisk mening at tillade både html og bbcode! :-)
Avatar billede zacariaz Nybegynder
21. april 2011 - 20:13 #9
Vedrørende spørgsmålet, hvorfor vil du bruge divs i stedet for tables?

Hvis det er præsentation af data, er der ikke noget i vejen for at bruge tables, det er kun hvis du skal sætte et design op at det anbefales ikke at bruge den, men at bruge divs i stedet.
Avatar billede segato Nybegynder
22. april 2011 - 13:08 #10
Modtaget og tak for input begge. Grunden til divs er også en øvelse at blive lidt mere fortrolig med design generelt. Så er som sådan for at få det lidt underhuden.
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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