Notifikationer

Markér alle som læst Log ud

steen_hansen Forsker

23. september 2004 - 17:36 Der er 26 kommentarer og
1 løsning

Jeg mangler grundbegreber

Der er et par ting jeg aldrig har fået 110% på plads, og det håber jeg I vil hjælpe med.

Det klassiske spørgsmål vedr. tabeller: Hvis jeg har en tabel med et banner, en menu, "papiret" (hvor tekst og billeder skal være i) og en bund, så plejer jeg at lave det på denne måde:

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" style="width: 755px;">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td style="width: 160px;"></td>
<td style="width: 595px;"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
</div>

Når jeg så lægger en menu ind, plejer jeg at lægge en tabel ind:

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" style="width: 755px;">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td align="left" valign="top" style="width: 160px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%;">
<tr>
<td><a href="#">Link 1</a></td>
</tr>
<tr>
<td><a href="#">Link 2</a></td>
</tr>
<tr>
<td><a href="#">Link 3</a></td>
</tr>
<tr>
<td><a href="#">Link 4</a></td>
</tr>
<tr>
<td><a href="#">Link 5</a></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
<td style="width: 595px;"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
</div>

Det gør jeg fordi antallet af menupunkter kan variere. Desuden roder jeg også lidt med en dynamisk menu i ASP, og så synes det er lidt omstændigt at tælle antallet af menupunkter, hvis jeg skal lave en rowspan="X":

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" style="width: 755px;">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td align="left" valign="top" style="width: 160px;"><a href="#">Link 1</a></td>
<td style="width: 595px;" rowspan="6"></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">Link 2</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">Link 3</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">Link 4</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">Link 5</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">Link 6</a></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
</div>

Desuden kan denne metode også give problemer mht. højden, hvis indholdet på siden overstiger højden i menuen; så bliver cellerne trukket ud, og det står ad H til på siden.

Jeg får at vide, at jeg har et problem med nested tables. Hvad er det, og hvordan laver jeg det mest hensigtsmæsigt?

Synes godt om

steen_hansen Forsker

23. september 2004 - 21:00 #1

Ingen der har styr på det? :/

Synes godt om

roenving Novice

24. september 2004 - 02:46 #2

Har du kigget på alternative løsninger, som f.eks. http://www.eksperten.dk/spm/497362 ?-)

-- og hvis du har en tabel er det jo netop meningen at den skal fylde det hele, så jeg er ikke med på, hvad dit problem er ...

Synes godt om

steen_hansen Forsker

24. september 2004 - 17:44 #3

Ok, jeg fik at vide fra valideringsspørgsmålet, at jeg "nestede" mine tables. Hvad vil det sige? Og er der en mere hensigtsmæssig måde at lave en side med en tabel på?

Synes godt om

Slettet bruger

25. september 2004 - 01:34 #4

At "neste" betyder bare at "lægge inde i hinanden". Der menes altså, at du har en tabel inde i an anden tabel. Rent valideringsmæssigt er det ikke en fejl, men det kan være lidt svært at overskue. Derudover er der så nogle purister, som mener, at man ikke bør bruge tables til ren layoutstyring (jeg er til dels enig med dem), men da det er et spørgsmål om smag, kan du sagtens vælge at overhøre det.

Jeg ville nok foreslå at lave menuen som en uordnet liste <ul> med noget CSS til at styre udseendet. F.eks med denne grundskabelon:

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" style="width: 755px;">
<tr>
<td colspan="2" id="header"></td>
</tr>
<tr>
<td align="left" valign="top" style="width: 160px;" id="menu">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</td>
<td style="width: 595px;" id="indhold"></td>
</tr>
<tr>
<td colspan="2" id="footer"></td>
</tr>
</table>
</div>

Så kan du i CSS bruge regler i stil med følgende:

#menu a:link {
/* normalt menupunkt */
}

#menu ul {
list-style:none;
}

Synes godt om

steen_hansen Forsker

25. september 2004 - 17:29 #5

YO sandbox :o)

Jeg kan ikke være mere enig, man bør undgå for mange tables. Jeg støder dog konstant på forhold, hvor det for mig at se kun kan lade sig gøre ved at lægge en tabel ind i en tabel. Som f.eks. eksemplet med menuen. Hvordan kan man f.eks. lave en

style="display: block; width: 160px;"

- hvis ikke man deler det op i celler? Det var nu et dårligt eksempel, for det kan vist sagtens lade sig gøre med display: block; Jeg ved godt det kan lade sig gøre, men jeg synes der konstant dukker noget op, hvor man (for mig at se) er nødt til at lægge en tabel ind i en tabel. Jeg prøver kun at bruge én tabel, men det kan give noget rod med padding, colspan og rowspan - synes jeg :o)

Et andet eksempel: Du laver en side, hvor du trækker de seneste 5 debatemner ud, de seneste 5 ting, der er sat til salg etc. Dem trækker du ud i en kolonne til højre, hvor du har menu til venstre og forsiden i midten. For at skille de udtrækninger ud, angiver du v.hj.a. CSS forskellige farver og lidt grafik til at illustrere hvad brugeren kigger på. Er der ikke mange forhold, der næsten fordrer, at man laver nestede tables? (Læg lige et svar)

Synes godt om

Slettet bruger

25. september 2004 - 17:54 #6

De eneste tilfælde, jeg kender til, hvor det er rigtig svært (grænsende til umuligt) at lave uden tabeller, er hvis man har to kolonner, der skal være lige høje, og det er et krav, at layoutet også skal virke med IE4 og NN4. Og der ville jeg så vidt muligt stadig nøjes med den yderste tabel til selve det basale layout.

Hvis det er en side, jeg laver for mig selv eller på lignende frivillig basis, så vil jeg vælge at skjule layoutet for oldtidsbrowserne. Hvis bare de kan få selve indholdet på siderne, så må de undvære pynten. (Og hvis skidtet stadig virker uden alt pynten, så er jeg nogenlunde overbevist om at søgemaskiner og andre blinde brugere også kan få det relevante ud af siden.)

Og ja, dit eksempel var lidt dårligt, for det virker fint at bruge f.eks.

#menu li a:link {display:block;}

Og så kan IE også finde ud af at bruge CSS's hover-effekter på menuen, når det er linket selv, man sætter til block.

I det hele taget kan jeg godt lide lister til sådan noget som menuer. De er også nemme at smide inden i hinanden.

Angående din højremenu med debatemner og salg, så er det (afhængigt af strukturen af indholdet) måske noget, der naturligt passer til en tabel, og så er der jo intet i vejen for at bruge en.

Synes godt om

steen_hansen Forsker

26. september 2004 - 08:50 #7

Tak for svaret, det har været til stor hjælp :o)

Jeg sniger lige et ekstra spørgsmål ind, håber det er ok:

Når jeg laver CSS, så gør jeg det f.eks. på denne måde:

.text11 {
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
font-family: geneva, verdana, helvetica;
line-height: 18px;
}

Så når jeg lægger en tabel ind, som skal have formateret teksten på denne måde, sætter jeg bare en class på:

<table class="text11">

Jeg er så ikke helt på det rene med hvad # laver i denne sammenhæng? Dit eksempel:

#menu li a:link {display:block;}

Synes godt om

roenving Novice

26. september 2004 - 08:55 #8

# betyder id !-)

-- for det er en af mulighederne, at man adresserer med en id-selektor ...

http://www.w3.org/TR/REC-CSS2/selector.html

Synes godt om

steen_hansen Forsker

26. september 2004 - 08:59 #9

Ok, det vil i praksis sige, at man tildeler en ID til én menu, og en anden ID til en anden menu? Og hvordan kunne en kodestump se ud?

Synes godt om

roenving Novice

26. september 2004 - 09:05 #10

F.eks. med den stump som sandbox viste, kunne man have et footer-link:

<a href="mailto:steen_hansen@noget.dk">Skriv til steen_hansen</a>

-- kunne du formattere det med:

#footer a:link{
text-decoration:line-through;
color:coral;
background:url(steen.jpg) center center no-repeat black;
}

#footer a:hover{
color:red;
}

Synes godt om

steen_hansen Forsker

26. september 2004 - 09:08 #11

Fedest, det kan jo hjælpe utrolig meget. I to er mine bedste venner :o)

roenving, kan du ikke lige svare på http://www.eksperten.dk/spm/543777

Synes godt om

steen_hansen Forsker

26. september 2004 - 09:25 #12

En aller-sidste ting: Denne her debat om fremtidens browsere med <div> kontra <table> er bare en and/fis i en hornlygte, er den ikke?

Synes godt om

roenving Novice

26. september 2004 - 09:30 #13

Principielt, jo !-)

For man skal til enhver tid bruge det element, som bedst opfylder det behov man har, og så er det ligegyldigt om det hedder Hans eller Peter ...

Som en kendt skibsredder ville udtrykke det: Udvis rettidig omhu !o]

Synes godt om

steen_hansen Forsker

26. september 2004 - 09:33 #14

Takker endnu en gang :o)

Synes godt om

Slettet bruger

26. september 2004 - 12:48 #15

<table> er ikke på nogen måde ved at blive forældet, så du behøver ikke være bange for at bruge den. Den vil også blive understøttet af fremtidens browsere i mange år frem.

Nogle af de purister, der ikke kan lide at bruge tabeller til layoutstyring har endda lavet sider, der ser således ud:

<div class="container">
<div>
<div>
Menu
</div>
<div>
Indhold
<div>
</div>
</div>

Så bruger de css på denne måde:

.container {display: table;}
.container div {display: table-row;}
.container div div {display: table-cell;}

Og godt nok virker det, men så havde det efter min mening været smartere og lettere bare at bruge en tabel.

Så mine råd er:
- undgå at bruge for mange tabeller inde i hinanden.
- prøv at lege med lister og se, hvad man kan gøre med dem.
- brug en tabel, hvis det kræver en masse bøvl at bruge andet.

Synes godt om

steen_hansen Forsker

26. september 2004 - 12:52 #16

Takker, sandbox. Jeg _tror_ jeg er ved at få styr på en del nu. Så småt, da :o)

Synes godt om

steen_hansen Forsker

26. september 2004 - 13:02 #17

Jeg vil heller ikke til at skifte over til 100% div's, men jeg tror ikke det gør noget at overveje den fremtidige struktur. Som det er i øjeblikket, så laver jeg ikke mine sider helt så hensigtsmæssigt, som jeg kunne. Og det vil jeg gerne have styr på. Flere spørgsmål oprettes vedr. emnet, stol bare på det :o)

Synes godt om

Slettet bruger

26. september 2004 - 13:23 #18

Hvis du vil prøve at lege med lister er her lige et par gode links:

http://css.maxdesign.com.au/listamatic/index.htm
http://htmldog.com/articles/suckerfish/dropdowns/

Synes godt om

steen_hansen Forsker

26. september 2004 - 14:47 #19

Fede artikler. Håber de overholder standarderne. Lidt ærgeligt, at Coolmenu ikke gør.

Synes godt om

roenving Novice

26. september 2004 - 14:52 #20

-- en ting bemærkede jeg på suckerfish, nemlig at den on-the-fly tilføjer className, hvilket så har udelukket den fra min links-liste ...

Synes godt om

steen_hansen Forsker

26. september 2004 - 14:52 #21

Fedest, sandbox! Især Dynamic Vertical list har jeg ledt efter længe :o)

Synes godt om

steen_hansen Forsker

26. september 2004 - 14:53 #22

... hvilket vil sige ...?

Synes godt om

roenving Novice

26. september 2004 - 15:01 #23

Det frarådes generelt at ændre classNames on-the-fly, da browseren på forhånd opgiver at finde ud af, hvilken indflydelse det kan have på eventuelt nestede elementer i dokumentet ...

Derfor smider den simpelthen den visning af dokumentet ud, den har beregnet, og starter forfra med at opbygge et nyt bibliotek over hvert enkelt elements visning (som om dokumentet blev reloadet !-)

Synes godt om

steen_hansen Forsker

26. september 2004 - 15:05 #24

Ok :/ Det gælder så også Dynamic Vertical list, kan jeg næsten regne ud?

Synes godt om

roenving Novice

26. september 2004 - 15:13 #25

Næh ...

Det er bare grim kode:

<dt onmouseover="java script:montre('smenu4');" onmouseout="java script:montre();">Menu 4</dt>
<dd id="smenu4" onmouseover="java script:montre('smenu4');" onmouseout="java script:montre();">

-- bør være:

<dt onmouseover="montre('smenu4');" onmouseout="montre();">Menu 4</dt>
<dd id="smenu4" onmouseover="montre('smenu4');" onmouseout="montre();">

-- da det selvfølgelig er overflødigt at angive, at man skal bruge javascript i en javascript-event ...

-- og java script: iøvrigt er en pseudo fil-protokol, som kan bruges, hvor man ellers skriver urler !-)

Synes godt om

steen_hansen Forsker

26. september 2004 - 15:22 #26

Det var pudsigt, for jeg sad netop og studsede over det. Så har jeg da lært noget i dit selskab :o)

Synes godt om

roenving Novice

26. september 2004 - 15:30 #27

*g*

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