Notifikationer

Markér alle som læst Log ud

hanne-rk Nybegynder

07. december 2004 - 15:35 Der er 21 kommentarer og
1 løsning

optimer koden

hvem kan lave denne tabel så den ikke ser så uoverskuelig ud i koden.

Skal laves til mindst mulig kode :-)

Den skal komme til at se sådan ud : www.ringkjobing.dk/hannerk/design.htm

--

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ny side 2</title>
</head>

<body>

<div align="center">
<center>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="800" id="AutoNumber1" height="500">
<tr>
<td width="100" height="80" colspan="5"> </td>
</tr>
<tr>
<td width="20%" height="20"> </td>
<td width="20%" height="20"> </td>
<td width="20%" height="20"> </td>
<td width="20%" height="20"> </td>
<td width="20%" height="20"> </td>
</tr>
<tr>
<td width="100%" height="400" colspan="5">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="100%">
<tr>
<td width="200" style="border-left-width: 1; border-right: 1px solid #000000; border-top-width: 1; border-bottom-width: 1"> </td>
<td width="600"> </td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</div>

</body>

</html>

Synes godt om

Slettet bruger

07. december 2004 - 16:00 #1

Den kan vidst ikke komme til at se så meget anderledes ud..?

Synes godt om

3xm Nybegynder

07. december 2004 - 16:10 #2

du kunne starte med at fjerne de to frontpage meta-tags...

=)

Synes godt om

Slettet bruger

07. december 2004 - 16:13 #3

Og sætte korrekt charset og doctype ;)

Synes godt om

3xm Nybegynder

07. december 2004 - 16:18 #4

...men lad os nu ikke blive spydige overfor frontpage.

der er ikke rigtigt andet du kan gøre end evt. at rykke style-informationerne over i et stylesheet i stedet.

=)

Synes godt om

hanne-rk Nybegynder

07. december 2004 - 16:52 #5

kan man ikke undgå det med en tabel inde i tabellen?

Synes godt om

Slettet bruger

07. december 2004 - 17:02 #6

Nej ikke så vidt jeg ved.
Nu er tabeller jo heller ikke beregnet til at lave designs med, jo!

Synes godt om

Slettet bruger

07. december 2004 - 17:04 #7

Eller jo, du kan jo sætte den som en tabel for sig selv?

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="800" id="AutoNumber1" height="500">
<tr>
<td width="100" height="80" colspan="5"> </td>
</tr>
<tr>
<td width="20%" height="20"> </td>
<td width="20%" height="20"> </td>
<td width="20%" height="20"> </td>
<td width="20%" height="20"> </td>
<td width="20%" height="20"> </td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="800" id="AutoNumber2" height="100%">
<tr>
<td width="200" style="border-left-width: 1; border-right: 1px solid #000000; border-top-width: 1; border-bottom-width: 1"> </td>
<td width="600"> </td>
</tr>
</table>

Synes godt om

olebole Juniormester

07. december 2004 - 17:49 #8

<ole>

For det første, er det en nødvendighed at begynde sit dokument med en DTD - og den skal svare til (X)HTML-versionen, der skrives i. Til din kode ville jeg vælge:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
... osv, osv ...

Bruger du ikke den, kan IE pludselig tolke CSS nogenlunde korrekt. Det betyder også, at du skal skrive noget af din kode lidt anderledes :)
Height-attributten på et table-element har aldrig været en del af HTML-specifikationen. Den skal sættes med CSS:
<table .... style="height:100%">

Så er der imidlertid den lille detalje, at når du sætter en relativ højde på et element (en højde i procent), skal denne beregnes udfra det omkransende elements højde.
Det betyder, du explicit må sætte højde på body- og documentElement-elementerne (<body> og <html>):

<style type="text/css"
html, body {
height: 100%;
margin: 0px;
padding: 0px; /* Sættes kun af hensyn til Opera */
}
</style>

/mvh
</bole>

Synes godt om

olebole Juniormester

07. december 2004 - 17:51 #9

I øvrigt behøver du kun sætte højde på den første celle i en <tr>:

<tr>
<td width="20%" height="20"> </td>
<td width="20%"> </td>
<td width="20%"> </td>
<td width="20%"> </td>
<td width="20%"> </td>
</tr>

Det hjælper vel også lidt på overskueligheden :)

Synes godt om

3xm Nybegynder

07. december 2004 - 18:09 #10

så har jeg lødt problemet for dig:

http://detfalskested.dk/exp/568768/

hele hemmeligheden er kreativt brug af colspan. hvis man skitserer det for sig på et stykke papir er det lettere at overskue.

jeg var nødt til at indføre en (usynlig) hjælperække nederst i tabellen, for ellers kunne browserne ikke helt finde ud af at fordele bredden ordentligt i 3 række.

jeg putter min skitse ind på siden (linket) lige om lidt.

=)

Synes godt om

3xm Nybegynder

07. december 2004 - 18:16 #11

så er skitsen tilføjet. den viser at der reelt er 6 kolonner. der hvor der er brugt kolon til at vise delingen illustrerer det et colspan.

=)

Synes godt om

hanne-rk Nybegynder

08. december 2004 - 00:22 #12

3xm -> Rigtigt flot - de 100 point er nu hjemme....tak for hjælpen

Jeg har nu blot et sidste spg. som jeg håber du vil hjælpe mig med.
Hvordan skal et CSS se ud, hvis jeg gerne vil have styret cellernes farver herfra, så jeg hurtigt kan ændre disse hvis jeg ønsker det (min plan er senere at lade en datbase styre farverne, så jeg via et adminmodul kan ændre farverne hurtigt og let)

Men først vil jeg gerne se hvordan et CSS skal se ud for at styre farver i en tabel. Cellerne skal kunne ændres uafhængig af hinanden.

Pleeaze help, det er 100 point ekstra at tjene :-)

smid iøvrigt lige et svar så du kan inkassere dine point

Synes godt om

olebole Juniormester

08. december 2004 - 00:33 #13

... med al respekt, så er det dårlig kode, der bygger på IE's fejl. Læg en DTD ind, der gør, at IE overholder gældende standarder - så går det helt galt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>exp:568768</title>
</head>
<body>
<div> <br />Her er tabellen MED hjælperække:<br /> </div>
<table style="width: 800px; height: 540px; border-collapse: collapse; margin: auto;" cellpadding="0" cellspacing="0" border="1" bordercolor="#111111">
<tr>
<td colspan="6" style="height: 80px;"> </td>
</tr>
<tr>
<td style="width: 160px; height: 20px;"> </td>
<td style="width: 160px;" colspan="2"> </td>
<td style="width: 160px;"> </td>
<td style="width: 160px;"> </td>
<td style="width: 160px;"> </td>
</tr>
<tr>
<td style="width: 200px;" colspan="2"></td>
<td colspan="4"> </td>
</tr>
<tr style="visibility: collapse;">
<td style="width: 160px; height: 40px;"> </td>
<td style="width: 40px;"> </td>
<td style="width: 120px;"> </td>
<td style="width: 160px;"> </td>
<td style="width: 160px;"> </td>
<td style="width: 160px;"> </td>
</tr>
</table>

<div> <br />Her er tabellen UDEN hjælperække:<br /> </div>

<table style="width: 800px; height: 500px; border-collapse: collapse; margin: auto;" cellpadding="0" cellspacing="0" border="1" bordercolor="#111111">
<tr>
<td colspan="6" style="height: 80px;"> </td>
</tr>
<tr>
<td style="width: 160px; height: 20px;"> </td>
<td style="width: 160px;" colspan="2"> </td>
<td style="width: 160px;"> </td>
<td style="width: 160px;"> </td>
<td style="width: 160px;"> </td>
</tr>
<tr>
<td style="width: 200px;" colspan="2"></td>
<td colspan="4"> </td>
</tr>
</table>

<div> <br />Her er skitsen:<br /> </div>

<pre style="width: 800px; margin: auto;">
+----------+--+-------+----------+----------+----------+
| : : : : : |
| : : : : : |
+----------+----------+----------+----------+----------+
| | : | | | |
+----------+----------+----------+----------+----------+
| : | : : : |
| : | : : : |
| : | : : : |
| : | : : : |
| : | : : : |
+----------+----------+----------+----------+----------+
</pre>
</body>
</html>

Synes godt om

olebole Juniormester

08. december 2004 - 00:35 #14

PS: En Doc-Type er en _absolut_ nødvendighed, hvis koden skal kunne kaldes HTML.
Det er den linie, der fortæller browseren, hvordan dokumentet skal behandles. Er den ikke present - eller er den ikke korrekt - beror visningen på tilfældigheder ;o)

Synes godt om

3xm Nybegynder

09. december 2004 - 20:11 #15

ole, er jeg ganske klar over. var abre for doven til at gide finde en og kopiere ind (da jeg endnu ikke er nørdet nok til at kunne huske dem i hovedet).

hanne, hvis vi skal fortsætte med den hæslige inline-css, så vil det blive noget i stil med

<td style="background: [farvekode];">

dette bør du jo selvfølgelig putte ind i de allerede eksisterende style-attributter, så det fx. kommer til at være

<td colspan="6" style="height: 80px; background: #00f;">

hvis du gerne vil have at den øverste celle skal være blå.

=)

Synes godt om

olebole Juniormester

09. december 2004 - 20:33 #16

Problemet er bare, at hvis du ikke sætter den ind, duer koden ikke til noget somhelst. Den, du lavede og linkede til, ser f.eks. farlig ud i alt andet end IE ;o)

Synes godt om

3xm Nybegynder

09. december 2004 - 21:01 #17

ole, den så faktisk ganske fin ud i både min ie og min fx, men for at det ikke skal være det der skiller os ad har jeg tilføjet en dtd.

=)

Synes godt om

olebole Juniormester

09. december 2004 - 21:36 #18

Nå, hvor høj er anden række? 20px ...? :)
Det ligner da noget, der er klemt ud af den grimme enden på en kollikramt gnu ;o)

Synes godt om

olebole Juniormester

09. december 2004 - 21:37 #19

... det var altså ment i sjov :)

Synes godt om

3xm Nybegynder

09. december 2004 - 22:22 #20

hos mig er den 20px høj. men det kan selvfølgelig være et tilfælde at den bliver det hvergang den skal renderes?

=)

Synes godt om

olebole Juniormester

09. december 2004 - 23:18 #21

*ROTFLMAO* Jaja ... det er godt med dig, Bassemand. Den sidste rettelse, du har lavet, siden mit seneste indlæg, har hjulpet i Moz - men nu er der gået helt ged i Opera, som kun viser tabellens ydre border, men ingen celler - og i IE er anden række stadig 69px høj ;o)

Synes godt om

hanne-rk Nybegynder

15. december 2004 - 22:23 #22

tak for hjælpen, jeg lukker og slukker, men tak for de fine indlæg (a ku specielt godt li' den mæ gnu' en :-)

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