[HTML] Tabel doet raar. - Softwareontwikkeling

dinsdag 8 februari 2005 11:45

Acties:

! Dolf is rechtvaardig !

Topicstarter

Hey ik ben bezig met een website waar ik met tabllen werk.

code:

<body>

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">

    <!--
        body {
            background-color: #CACACA;
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;

      BODY {
        background-color: #FFFFFF;
        background-image: url(../Images/input-background.png);
        background-position: left;
        background-attachment: fixed;
      }


      }
       BODY {
    scrollbar-face-color:CACACA;
    scrollbar-highlight-color:CACACA;
    scrollbar-shadow-color:CACACA;
    scrollbar-3dlight-color:CACACA;
    scrollbar-arrow-color:white;
    scrollbar-track-color:CACACA;
    scrollbar-darckshadow-color:CACACA;

    }
    A:link {color:#FFB300; text-decoration: none}
    A:visited {color:#FFFFFF; text-decoration: none}
    A:active {color:#000000; text-decoration: ounderline;}
    A:hover {color:#5B5B5B; text-decoration: ounderline; }

       }
-->
</style>

</head>
<body>

<TABLE>

    <table border="0" cellspacing="0" cellpadding="0">


    <TR><TD width="100%"  td style='padding-left: 35px;' td style='padding-top: 5px;'>
            <font face="Verdana" color="black" size="2">

<b>Banners</b><p>

Hier vind u de banners die wij hebben.<p>

U kunt hier dus een keuze tussen maken welke banner u wel zou wilen hebben op uw pagina, als u daar interesse in heeft.<br>
</TR></TD>

        <TR><TD colspan="1" style='padding-left: 28px;' td style='padding-top: 0px;'>[img]"../images/Menu-scheiding.png"</img></TD></tr>

    <TR><TD[/img]<font face="Verdana" color="black" size="2">

    Funky.<br>
    Prijs per 5 pagina's 10 Euro.<p>

    Deze website heeft een frisse en strakke vormgeving.<p>

    Bestel nu!

    </TD>

    <TD valign="center" style='padding-left: 0px;' td style='padding-top: 8px;'><p>
    <a href="javascript:windowHandle = window.open('../websites/funky/funky.html','Funky','width=600,height=500,scrollbars=no'); windowHandle.focus()" title="Funky, de site voor jongeren.">[img]"../websites/funky/funky-thumb.jpg"[/img]</a>
    </TD></TR>

        <TR><TD colspan="2" style='padding-left: 28px;' td style='padding-top: 5px;'>[img]"../images/Menu-scheiding.png"</img></TD></tr>
    
</TABLE>
</body>
</html[/img]

Deze code heb ik bijna helemaal zelf gemaakt in Kladblok (zal vast ook wel te zien zijn..) en zo moet het er uit zien

-------------------------------------------
Banners |
-------------------------------------------
Uitleg |
-------------------------------------------
Info | Product |
-------------------------------------------

Dus de bovens cell is 1 cell, de 2e ook en de rest die er onderkomt moeten dus 2 cellen zijn naast elkaar.

Maar zo ziet het er nu uit.

-------------------------------------------
Banners |
-------------------------------------------
Uitleg |
-------------------------------------------
Info | Product |
-------------------------------------------

Mischien zien jullie zo wat er fout is?

Geeft steekhoudelijke argumenten terwijl hij niet weet waar het over gaat. BlizzBoys, HD casts van StarCraft II gemaakt door Tweakers! Het begint, Zombiepocalyps

dinsdag 8 februari 2005 11:51

Acties:

LoeiOrdinair

To Infinity and Beyond

Je heb iig je bovenste TR niet afgesloten. Maar als je even je border op 1 zet dan kan je zien dat er nog meer cellen niet zijn afgelsoten. Kijk daar eerst eens even naar.

edit: Je heb ook 2x de tabel tag gebruikt. Er zitten echt wel veel fouten in.

[ Voor 20% gewijzigd door LoeiOrdinair op 08-02-2005 11:52 ]

dinsdag 8 februari 2005 11:51

Acties:

Flydude

Mighty pirate

De bovenste twee cellen moeten colspan 2 hebben. De onderste twee cellen (op een rij) juist niet. Volgens mij heb je het precies andersom.

En wat MadMark zegt. Met een dedicated HTML-editor kan je dmv syntax highlighting zien welke elementen er nog afgesloten moeten worden enzo. Dat maakt je leven wat makkelijker..

[ Voor 40% gewijzigd door Flydude op 08-02-2005 11:52 ]

I am rubber, you are glue

dinsdag 8 februari 2005 11:52

Acties:

Woudloper

« - _ - »

Snap je probleem niet helemaal, maar wellicht kan je je code nog eens goed bekijken. Het ziet er niet helemaal correct uit (bv. </img> ?) en verder kan dit ook makkelijk opgelost worden zonder tabellen....

dinsdag 8 februari 2005 11:54

Acties:

LoeiOrdinair

To Infinity and Beyond

probeer het zo eens. en zet dan stapje voor stapje alles erin.

code:

<TABLE>
<tr>
<td colspan="2">Banners</td>
</tr>
<tr>
<td colspan="2">Uitleg</td>
</tr>
<tr>
<td>Info</td>
<td>Product</td>
</tr>
</TABLE>

[ Voor 70% gewijzigd door LoeiOrdinair op 08-02-2005 11:55 ]

dinsdag 8 februari 2005 13:25

Acties:

InZane

Ga eerst maar eens flink debuggen, want er klopt idd geen bal van die pagina.
Bijv.: Hoofdletters en kleine letters door elkaar, body tag aan het begin van je pagina??, door elkaar gebruiken van single en double quotes, enz..

dinsdag 8 februari 2005 13:26

Acties:

Reinier

\o/

Je stylesheet is ook incorrect volgens mij, de body i.i.g.

dinsdag 8 februari 2005 18:48

Acties:

Blauw

De Schreeuw

Opzich is die body niet volstrekt incorrect, maar het is wel vreemd gebruik

dinsdag 8 februari 2005 19:34

Acties:

RwD

kloonikoon

Ik had nog een paar momentjes voordat ik naar de film ga. Ik ben het overigens er op geen enkele wijze mee eens dat dit de manier is hoe het moet, echter, dit is een correctere versie van de orginele code. Vergelijk deze met je eigen code en dan kun je al een heleboel leren.

Overigens wie geeft er nu in de kladblok zn document de titel "Untitled Document"??

HTML:

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
    body {
        background-color: #CACACA;
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;

        background-image: url(../Images/input-background.png);
        background-position: left;
        background-attachment: fixed;

        scrollbar-face-color:CACACA;
        scrollbar-highlight-color:CACACA;
        scrollbar-shadow-color:CACACA;
        scrollbar-3dlight-color:CACACA;
        scrollbar-arrow-color:white;
        scrollbar-track-color:CACACA;
        scrollbar-darckshadow-color:CACACA;
    }

    A:link {color:#FFB300; text-decoration: none}
    A:visited {color:#FFFFFF; text-decoration: none}
    A:active {color:#000000; text-decoration: ounderline;}
    A:hover {color:#5B5B5B; text-decoration: ounderline; }
</style>

</head>
<body>

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td colspan="2" width="100%" style="padding-left: 35px;padding-top:5px;">
            <font face="Verdana" color="black" size="2">
                <b>Banners</b>
                <p>Hier vind u de banners die wij hebben.</p>
                <p>U kunt hier dus een keuze tussen maken welke banner u wel zou wilen hebben op uw pagina, als u daar interesse in heeft.</p>
            </font>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="padding-left: 28px;padding-top: 0px;">
            [img]"../images/Menu-scheiding.png">
        </td>
    </tr>
[/img]
        <td style="padding-left: 35px;padding-top: 10px;" align="left" valign="top">
            <font face="Verdana" color="black" size="2">
                <p>Funky.</p>
                <p>Prijs per 5 pagina's 10 Euro.</p>
                <p>Deze website heeft een frisse en strakke vormgeving.</p>
                <p>Bestel nu!</p>
            </font>
        </td>
        <td valign="center" style="padding-left: 0px;padding-top: 8px;">
            <p><a href="javascript:windowHandle = window.open('../websites/funky/funky.html','Funky','width=600,height=500,scrollbars=no'); windowHandle.focus()" title="Funky, de site voor jongeren.">[img]"../websites/funky/funky-thumb.jpg"[/img]</a></p>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="padding-left: 28px;padding-top: 5px;">
            [img]"../images/Menu-scheiding.png">
        </td>
    </tr>
</table>
</body>
</html[/img]

woensdag 9 februari 2005 00:53

Acties:

Reinier

\o/

Verder gebruik je opmaak in je html, wat eigenlijk in je stylesheet hoort. En het font element is quasi-deprecated

woensdag 9 februari 2005 08:38

Acties:

RwD

kloonikoon

Ik had stekem al een "div-versie" gemaakt. Maar dat lijkt me gezien de orginele html nog een stap te ver, dus die heb ik niet gepost...

@TS:
Maar om dit goed op te bouwen zou je bijvoorbeeld te html elementen kunnen gebruiken waar ze voor bedoeld zijn zodat alles een zinvolle betekenis heeft. Een kopje zou je ipv een <b> of <font> element ook kunnen doen met een <h1> tot <h6> element (als die tot 6 gaan) en zo zijn er nog veel meer elementenen met specifieke betekenissen. Je zou dezelfde layout kunnen bvereiken met veel minder html code dan hou je het nu doet.

Voor een handig overzicht (in het nederlands) van de elementen zou je naar www.handleidinghtml.nl kunnen gaan, waar ze ook een css referentie hebben.

[ Voor 70% gewijzigd door RwD op 09-02-2005 08:41 ]