Avatar billede krydset Nybegynder
19. marts 2004 - 20:33 Der er 21 kommentarer og
1 løsning

Rette tabel til

Hejsa, Hvordan får jeg de her billeder på den her side til at stå pænt ??

http://www.pc-dk.dk/Shop/index.php?link=show_item.php&vare_id=1

Vil gerne have dem tettere på hinanden, men hvordan ??

de skal stadig stå såen her
billede_1  |  billede_2
billede_3  |  billede_4

Mvh krydset
Avatar billede nute Nybegynder
19. marts 2004 - 20:48 #1
en start ville nok være at rydde op i din HTML kode. den grundlæggende struktur i din HTML er som følger:

<html>
<head>
<title>pc-dk shop vers 0.1</title>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
</head>
<img id="logo" src="pic/logo.jpg" border="0" >
<!-- MASSE ANDET SNAVS -->
<form>
            <!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
      <title>Title here!</title>
</head>
<body>
<a href="">
</html>
</form>
<!-- MASSER AF SNAVS -->
</body>
</html>

Dette er det mest kreative jeg har set tror jeg og er på samme tid noget der ligner løgn. Strukturen til et HTML dokument er:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title></title>
</head>

<body>
</body>
</html>

/nute
Avatar billede krydset Nybegynder
19. marts 2004 - 20:57 #2
Har prøvet atr rette lidt nu ved ikke om det er meget bedre
Avatar billede nute Nybegynder
19. marts 2004 - 21:22 #3
jow ... det er bedre, men det er stadig meget snavset kode. du har flere steder en struktur der ser sådan ud:

<tr>
<tr>
<td>

og

<tr align="center">
<td></td>
<tr>
<tr align="center">

Det er faktisk et under at din kode i det hele taget bliver vist i en browser.

anyway ... first things first:

1) du skal have en doctype på. læg denne linie i toppen af dit dokument:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

2) i linie 224, mangler du et > for at afslutte et tag. Dit tag ser sådan ud:

</tr

men skal jo se sådan ud:

</tr>

3) midter sektion skal have nogle colspan på.  de rækker der indeholder billeder, har 2 kolonner, men aller rækker over, og under, har kun 1. Dette får tingene til at rykke sig. Fx skal cellen med 'Asus fx 5950 Ultra' se sådan ud:

<td colspan="2"><h2>Asus fx 5950 Ultra</h2>

4) Derefter sætter du nogle align på dine kolonner (td'er) for at placere dine billeder i cellerne:

<td align="right"> <!-- Dette er billederne til på venstre side -->
<td align="left"> <!-- Dette er billederne til på højre side -->

sættes alt dette sammen, så vil din midter sektion se sådan ud:

<table id="menu_middle">
    <tr align="center">
        <td colspan="2"><h2>Asus fx 5950 Ultra</h2>
        </td>
    </tr>
    <tr align="center">
        <td colspan="2"><h5><i>256 mb ram, 2 lydløse blæsere.</i></h5>
        </td>
    </tr>    <!--BILLEDVISNING  1 -->
    <tr>
        <td align="right"><img src="http://www.pc-dk.dk/Shop/item_pic/73UMTG6NWW_400_273.jpg" width="75" height="75">
        </td>        <!--BILLEDVISNING  1 SLUT -->
       
       
        <!--BILLEDVISNING  2 -->
        <td align="left"><img src="http://www.pc-dk.dk/Shop/item_pic/no_pic.jpg" width="75" height="75">
        </td>
    </tr>    <!--BILLEDVISNING  2 SLUT -->
   
   
    <!--BILLEDVISNING  3 -->
    <tr>
        <td align="right"><img src="http://www.pc-dk.dk/Shop/item_pic/no_pic.jpg" width="75" height="75">
        </td>        <!--BILLEDVISNING  3 SLUT -->
       
       
       
        <!--BILLEDVISNING  4 -->
        <td align="left"><img src="http://www.pc-dk.dk/Shop/item_pic/no_pic.jpg" width="75" height="75">
        </td>        <!--BILLEDVISNING  4 SLUT -->
    </tr>
</table>

/nute
Avatar billede krydset Nybegynder
20. marts 2004 - 08:39 #4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

den kan jeg ikke sætte ind i top så virker min css ikke mere :-O
Avatar billede krydset Nybegynder
20. marts 2004 - 09:03 #5
Avatar billede krydset Nybegynder
20. marts 2004 - 09:11 #6
men hvordan centerer jeg dem ??
Avatar billede nute Nybegynder
20. marts 2004 - 11:54 #7
du *skal* have denne linie med ... ellers aner ikke din browser hvordan den skal fortolke indholdet på siden. Hvis du udelader denne linie, så bliver fortolkningen af siden helt op til vejrforholdene i østre Mongolia og aktiepriserne på brent olie. Du har ingen garanti for at det du har skrevet faktisk bliver vist som du har ment at det skal vises. Disse 3 eksempler kan illustrere det:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
</head>
<body>

<div style="width:200px;height:200px;border:40px solid red;background-color:blue">Noget Tekst</div>
<div style="width:200px;height:200px;background-color:blue">Noget Tekst</div>

</body>
</html>

...og:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
</head>
<body>

<div style="width:200px;height:200px;border:40px solid red;background-color:blue">Noget Tekst</div>
<div style="width:200px;height:200px;background-color:blue">Noget Tekst</div>

</body>
</html>

... og til sidst:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
</head>
<body>

<div style="width:200px;height:200px;border:40px solid red;background-color:blue">Noget Tekst</div>
<div style="width:200px;height:200px;background-color:blue">Noget Tekst</div>

</body>
</html>

I det første eksempel bliver ikke browseren informeret om hvilken HTML version siden er skrevet i ... den aner så ikke hvordan den skal fortolke indholdet.

Det andet eksempel, er der inkluderet en DTD, men URL'en er udeladt. Dette gør at IE tilsidesætter CSS-standarden

Det sidste eksempel vises box'en korrekt, med en border *udenom* de 200x200 - helt efter oprskriften.

Du har endnu ikke ordnet det ufuldstændige tag i linie ca 227 ... det ser stadig ud som dette: </tr ... noget det ikke skal

alle rækker under dine billeder ligger i samme tabel som dine billeder, hvilket vil sige at de skal ha samme antal celler som de foregående rækker. Når du har sat 'colspan="2"' på de 2 kolonner *før* dine billeder, så skal også alle kolonner *efter* dine billeder have det.

Et uvurderlig verktøj når det gælder fejl i tabeller, er at gøre brug af borders. sæt en tynd border på alle dine tables og td'er, så vil du hurtig se hvor der er fejl. Hvis du lægger:

table td
{
border:1px solid black;
}

i dit stylesheet, så får du hurtig et overblik over hvordan dine tabeller ser ud

/nute
Avatar billede krydset Nybegynder
21. marts 2004 - 18:06 #8
Jeg kan ikke finde det ufuldstændige tag.

Har indsat det her såen her
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>pc-dk shop vers 0.1</title>
        <link rel="stylesheet" type="text/css" href="style.css">
  </head>
<body>
Avatar billede nute Nybegynder
21. marts 2004 - 18:11 #9
dit ufuldstændige tag er her:

GPU KØLER: Aktiv køler<br />
DVD SOFTWARE: Der medfølger DVD software<br />
SOFTWARE:<br />
</td>
</tr>
<tr>
<td><br></td>
</tr <!-- VINKE VINKE !!! HER ER JEG :o] -->
<tr>

du mangler stadig at sætte colspan på alle dine celler *efter* dine billeder

/nute
Avatar billede krydset Nybegynder
21. marts 2004 - 18:13 #10
og css´en virker osse nu.

Har osse givet alle colspan="2" men billederne vil stadig ikke i midten :-O
Avatar billede krydset Nybegynder
21. marts 2004 - 18:17 #11
er rettet nu, det var slet ikke på index filen men den fil der bliver included der ;).

Men tilbage til de billeder hvordan får jeg dem i midten ?
Avatar billede nute Nybegynder
21. marts 2004 - 18:31 #12
du mangler stadig colspan på nogle celler (din tagwall har kun en celle stadig).

prøv mit forslag om at lægge en border på dine tabeller og celler ... det er en *meget* effektiv måde at finde fejl i en tabelopbygning.

Kig lige her engang og se hvor hurtig du kan finde fejl i dine tabeller ved hjælp af border:

http://www.xperimentum.com/xperten/images/479466.jpg

/nute
Avatar billede krydset Nybegynder
21. marts 2004 - 18:38 #13
Jamen nu virkede det jo osse ;) så er jeg sqi glad.

Jeg vil ærlig indrømme at html ikke er min store magt, har sat mig mere ind i php :-(

Men det kommer jo nok hen af vejen.

Jeg takker for hjælpen s du kan bare lægge et svar så kan du få point

Maybe du har et godt link til hvor man læser om avanceret tables i html??
Avatar billede krydset Nybegynder
21. marts 2004 - 18:39 #14
Og lige en ting til hvis jeg vil trække billederne lidt fra hinanden hvad skal jeg så bruge ??
Avatar billede nute Nybegynder
21. marts 2004 - 18:49 #15
godt godt :-)

avanceret tables ... hmm ... sund fornuft er nok det bedste hjælpemiddel, tror jeg nok :-> Det hele handler bare om at vide hvordan en tabel laves/bygges op. en "avanceret" tabel er jo ikke andet end en tabel inde i en tabel. Kan man lave én tabel, så kan man også lave mange ... vil jeg tro. Jeg har nok ikke nogle links du kan få - jeg har selv lært ved en h#####es masse prøve og fejle forsøg :-) Jeg har lært mig at det bedste hjælpemiddel er at lægge border på for at finde ud af hvor filmen knækker ... så snart man finder fejl ved sine tables ved hjælp af dette lille trick, så lærer man også hurtig hvordan man bygger en "avanceret" tabel (selv om jeg er lidt imod denne navngivning ... nested tables hedder det på "fagspoget" :o] )

/nute
Avatar billede nute Nybegynder
21. marts 2004 - 18:53 #16
for at få dine billeder lidt fra hindanden, kan du lægge padding på dine celler, fx:

style="padding-left:5px;"

på denne måde:

<td align="right" style="padding-right:5px;"><img src="http://www.pc-dk.dk/Shop/item_pic/73UMTG6NWW_400_273.jpg" width="100" height="90"></td>   
<td align="left" style="padding-left:5px;"><img src="http://www.pc-dk.dk/Shop/item_pic/no_pic.jpg" width="100" height="90"></td>
</tr>   
<tr>   
<td align="right" style="padding-right:5px;"><img src="http://www.pc-dk.dk/Shop/item_pic/no_pic.jpg" width="100" height="90"></td>
<td align="left" style="padding-left:5px;"><img src="http://www.pc-dk.dk/Shop/item_pic/no_pic.jpg" width="100" height="90"></td>

/nute
Avatar billede roenving Novice
21. marts 2004 - 18:57 #17
Prøv til at starte med at kigge på:

http://html.dk/tutorials/html/lektion10.asp + lektion11.asp
Avatar billede krydset Nybegynder
21. marts 2004 - 21:04 #18
Jeg takker mange gange nute ;)

Her er point, og roevig tak for linket
Avatar billede nute Nybegynder
21. marts 2004 - 21:11 #19
bare hyggelig :-]

selv tak
Avatar billede krydset Nybegynder
08. maj 2004 - 12:44 #20
hmm skal du ikke have point
Avatar billede nute Nybegynder
08. maj 2004 - 17:22 #21
tjo ...
Avatar billede nute Nybegynder
08. maj 2004 - 17:23 #22
hmm
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