Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[HTML] Centreren Complete Website ?

_arno_
14 antwoorden
  • Beste,

    Ik ben bezig met een site over Grand Theft Auto Liberty City Stories , het GTA spel voor op de PSP.
    Ik heb alleen een klein probleempje met het design/layout.

    Het design staat nu aan de linkerkant , maar ik had het liever gecentreerd gehad. Ik heb al <center> en <td…center> geprobeerd maar dat hielp niet.

    Dit is de code

    [code:1:5ad142b919]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Majinosity Template</title>
    <link rel="StyleSheet"
    href="default.css" type="text/css">
    </head>
    <body leftmargin="0" topmargin="0"
    alink="#000000" background="body-bg.gif"
    bgcolor="#dddddd" link="#000000" text="#000000"
    vlink="#000000">
    <img src="top2.jpg" border="0">
    <div
    style="margin-top: 9px; margin-left: 13px;">
    <table border="0" cellpadding="0"
    cellspacing="0" width="750">
    <tbody>
    <tr>
    <td valign="top" width="121">
    <table border="0"
    cellpadding="0" cellspacing="0" width="121">
    <tbody>
    <tr>
    <td background="nav.gif"
    height="24" valign="top"><font
    color="white" face="verdana" size="1">
    <div
    style="margin-left: 6px; margin-right: 6px; margin-top: 5px;">Main</div>
    </font></td>
    </tr>
    <tr>
    <td background="nav-bg.gif"><font
    face="verdana" size="1"></font>
    <div
    style="margin-left: 7px; margin-bottom: 2px;"><font
    face="verdana" size="1">
    <script src="nav-main.js"></script></font></div>
    </td>
    </tr>
    <tr>
    <td><img
    src="nav-bottom.gif"></td>
    </tr>
    <tr>
    <td height="7"></td>
    </tr>
    <tr>
    <td background="nav.gif"
    height="24" valign="top"><font
    color="white" face="verdana" size="1">
    <div
    style="margin-left: 6px; margin-right: 6px; margin-top: 5px;">Downloads</div>
    </font></td>
    </tr>
    <tr>
    <td background="nav-bg.gif"><font
    face="verdana" size="1"></font>
    <div
    style="margin-left: 7px; margin-bottom: 2px;"><font
    face="verdana" size="1">
    <script src="nav-downloads.js"></script></font></div>
    </td>
    </tr>
    <tr>
    <td><img
    src="nav-bottom.gif"></td>
    </tr>
    <tr>
    <td height="7"></td>
    </tr>
    <tr>
    <td background="nav.gif"
    height="24" valign="top"><font
    color="white" face="verdana" size="1">
    <div
    style="margin-left: 6px; margin-right: 6px; margin-top: 5px;">Counters</div>
    </font></td>
    </tr>
    <tr>
    <td background="nav-bg.gif"><font
    face="verdana" size="1"></font>
    <div
    style="margin-top: 1px; margin-bottom: 1px;">
    <center><font
    face="verdana" size="1"><font
    color="black" size="1">
    <script src="nav-counter.js"></script></font>
    </font></center>
    </div>
    </td>
    </tr>
    <tr>
    <td><img
    src="nav-bottom.gif"></td>
    </tr>
    <tr>
    <td height="7"></td>
    </tr>
    <tr>
    <td background="nav.gif"
    height="24" valign="top"><font
    color="white" face="verdana" size="1">
    <div
    style="margin-left: 6px; margin-right: 6px; margin-top: 5px;">NewsPro</div>
    </font></td>
    </tr>
    <tr>
    <td background="nav-bg.gif">
    <div
    style="margin-top: 1px; margin-bottom: 1px;">
    <center><font
    color="black" face="verdana" size="1">
    <script src="nav-newspro.js"></script></font></center>
    </div>
    </td>
    </tr>
    <tr>
    <td><img
    src="nav-bottom.gif"></td>
    </tr>
    </tbody>
    </table>
    </td>
    <td valign="top" width="*">
    <center>
    <table cellpadding="0"
    cellspacing="0" width="430">
    <tbody>
    <tr>
    <td background="content-top.gif"
    height="24" valign="top" width="430"><font
    face="verdana" size="1"></font>
    <div
    style="margin-left: 6px; margin-right: 6px; margin-top: 5px;"><font
    face="verdana" size="1">Main://Home</font></div>
    </td>
    </tr>
    <tr>
    <td background="content-bg.gif"
    height="500" valign="top"><font
    color="white" face="verdana" size="1"> </font>
    <div
    style="margin-left: 6px; margin-right: 6px;"><font
    color="white" face="verdana" size="1">
    <script src="content-main.js"></script></font>
    </div>
    </td>
    </tr>
    <tr>
    <td><img
    src="content-bottom.gif"></td>
    </tr>
    </tbody>
    </table>
    </center>
    </td>
    <td align="left" valign="top"
    width="121">
    <table border="0"
    cellpadding="0" cellspacing="0" width="121">
    <tbody>
    <tr>
    <td background="nav.gif"
    height="24" valign="top"><font
    color="white" face="verdana" size="1">
    <div
    style="margin-left: 6px; margin-right: 6px; margin-top: 5px;">Affiliates</div>
    </font></td>
    </tr>
    <tr>
    <td background="nav-bg.gif"><font
    face="verdana" size="1"></font>
    <div style="margin: 2px 6px;"><font
    face="verdana" size="1">
    <script src="nav-affiliates.js"></script></font></div>
    </td>
    </tr>
    <tr>
    <td><img
    src="nav-bottom.gif"></td>
    </tr>
    <tr>
    <td height="7"></td>
    </tr>
    <tr>
    <td background="nav.gif"
    height="24" valign="top"><font
    color="white" face="verdana" size="1">
    <div
    style="margin-left: 6px; margin-right: 6px; margin-top: 5px;">Topsites</div>
    </font></td>
    </tr>
    <tr>
    <td background="nav-bg.gif"><font
    face="verdana" size="1"></font>
    <div style="margin: 2px 6px;"><font
    face="verdana" size="1">
    <script src="nav-topsites.js"></script></font></div>
    </td>
    </tr>
    <tr>
    <td><img
    src="nav-bottom.gif"></td>
    </tr>
    <tr>
    <td height="7"></td>
    </tr>
    <tr>
    <td background="nav.gif"
    height="24" valign="top"><font
    color="white" face="verdana" size="1">
    <div
    style="margin-left: 6px; margin-right: 6px; margin-top: 5px;">Links</div>
    </font></td>
    </tr>
    <tr>
    <td background="nav-bg.gif"><font
    face="verdana" size="1"></font>
    <div
    style="margin-left: 7px; margin-bottom: 2px;"><font
    face="verdana" size="1">
    <script src="nav-links.js"></script></font></div>
    </td>
    </tr>
    <tr>
    <td><img
    src="nav-bottom.gif"></td>
    </tr>
    <tr>
    <td height="7"></td>
    </tr>
    <tr>
    <td background="nav.gif"
    height="24" valign="top"><font
    color="white" face="verdana" size="1">
    <div
    style="margin-left: 6px; margin-right: 6px; margin-top: 5px;">Network</div>
    </font></td>
    </tr>
    <tr>
    <td background="nav-bg.gif"><font
    face="verdana" size="1"></font>
    <div
    style="margin-left: 7px; margin-bottom: 2px;"><font
    face="verdana" size="1">
    <script src="nav-network.js"></script></font></div>
    </td>
    </tr>
    <tr>
    <td><img
    src="nav-bottom.gif"></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    <noframes></noframes>
    </div>
    </body>
    </html>
    [/code:1:5ad142b919]

    BVD !

    Freek

    [size=9:5ad142b919]Excuses als de code niet hoort te zijn zoals ie hoort[/size:5ad142b919]
  • Probeer dit eens:

    <table align="center">
  • Gerben kun je me misschien vertellen waar ik het moet plaatsen ? Ik heb het op verschillende plaatsen geprobeerd maar dan verdwijnt alleen de achtergrond.

    Bedankt , Freek
  • Dat jíj nog tabellen gebruikt vind ik eigenlijk wel schandalig.
  • Zet het gewoon in de allereerste table tag. De div tag ervoor wordt dan wel een beetje overbodig. Overigens zou je ook de div tag aan kunnen passen, daar align="center" toevoegen. De margin-left kan wel weg.

    @MichielPH: waarom zou je een goed werkende site met tables, omzetten naar style sheets?
  • Dat hoeft nog niet direct; Als je echter een nieuwe site bouwt (dejavu-it.nl, afgerond op 27 juni) mag je als klant toch verwachten dat het niet 'ouderwets' gemaakt wordt?
  • Gerben het wil helaas niet lukken , maakt niet uit , ik maak wel iets nieuws.

    @ Michiel ; Waarom iets veranderen als het ook op deze manier werkt ? Ik zie niet wat iedereen tegen tabellen heeft… werkt toch ?
  • Vreemd dat het niet werkt, hier werkt het zonder problemen. De enige reden die ik zo snel kan bedenken, dat er iets conflicterends in default.css staat.
  • Het ging meer om die nieuwe site, deze had je met CSS kunnen maken.

    Het waarom ga ik het niet over hebben. Die discussie kennen we nu wel.
  • MIsschien is ook een oplossing:

    Zet alles in een div, <div id="wrap">
    CSS:
    [code:1:701c1af5cc]
    #wrap {
    margin:0 auto;
    width: auto;
    text-align: left;
    }
    body {
    margin:0;
    padding:0;
    text-align: center; //IE-fix
    }
    [/code:1:701c1af5cc]
    (ik dacht dat t zoiets was..)
  • Ik meen dat dat niet werkte in Internet Explorer. Horizontaal centreren, en vooral verticaal, blijkt altijd erg lastig in CSS. Mij lukt het meestal het beste wanneer ik het goede oude <center> plaats rond een tabel of layer.
  • Jawel, natuurlijk kun je (althans, men) ook in IE wel met CSS centreren.. Marientje had het wel degelijk (bijna) goed. Hoe dat precies moet, staat op http://maxdesign.com.au/presentation/center/

    Daarentegen is gebruik van <center> verschrikkelijk achterhaald:
    www.htmlhelp.com
    eference/html40/deprecated.html
    www.w3.org/TR/REC-html40/appendix/changes.html#h-A.3.1.2
    Dat heeft het W3C zo te zien in 1997 al afgeschreven…

    @MichielPH:
    Daarom heet het ook Dejavu-IT ;)
  • [quote:830e57f17d="boelieboelie"]Jawel, natuurlijk kun je (althans, men) ook in IE wel met CSS centreren.. Marientje had het wel degelijk (bijna) goed. Hoe dat precies moet, staat op http://maxdesign.com.au/presentation/center/
    [/quote:830e57f17d]
    Dank! Ik kon zlef de site niet meer terugvinden.
  • Hoeveel invloed het op het probleem heeft weet ik niet, maar ik zie hier een incomplete doctype staan:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    Hier hoort een url bij, anders doet hij niets, en kun je hem net zo goed weglaten. D.w.z. de browser zal terugvallen op Quirks mode en daardoor mogelijk bepaalde tags niet interpreteren zoals bedoeld.

    Moet dus (als transitional echt de bedoeling is) zijn:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    Jan de Boer

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.