Avatar billede minus Nybegynder
26. oktober 2007 - 10:23 Der er 1 løsning

Erstat tables med divs

Hey, ville høre om der er en venlig sjæl derude, som vil se min kode igennem og erstatte de forskellige tables med divs uden at der er en større ændring på udseendet.

-----------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Indoctrinator.org</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
        body    {
            background-color: #ffffcc;
        }
       
        *  {
            font-family: arial, sans-serif; font-size: 16px;
        }
    h1    {
        font-size: 36px; font-weight: bold;
    }
    h2    {
        font-size: 24px; font-style: italic;
    }
    a    {
        text-decoration:none;
    }
    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="0" style="width:800px;">
        <tr>
            <td colspan="2" style="background-color: #cecfce; height: 81px;">
                <div style="height: 42px; border: outset 2px #000073; width: 320px; margin-left: 12px;">
                    <a href="index.html"><span style="color: #000063; font-size: 36px; font-weight: bold;">Indoctrinator.org</span></a>
                </div>
            </td>
        </tr>
        <tr>
            <td style="background-color: #ffff9c; width: 648px;">
                <div style="background-color: #ffff9c; width: 594px; height: 470px; overflow: auto; vertical-align: top; padding: 10px 45px 10px 10px;">
                    <h2>Krav til dit XHTML-dokument</h2>
            <p><span style="font-weight: bold;">Validering</span></p>
            <div style="padding-left: 10px;">Dit dokument skal kunne valideres fejlfrit som XHTML 1.1</div>
            <p><span style="font-weight: bold;">Læsbarhed</span></p>
            <div style="padding-left: 10px;">Dit dokument skal opfylde almindelige normor for læsbarhed, dvs indrykninger mv, så blokelementer tydeligt kan findes og deres indhold af inline-elementer ikke forveksles med blokke</div>
                    <p><span style="font-weight: bold;">Indhold</span></p>
            <div style="padding-left: 10px;">Dette dokuments indhold skrives af.</div>
            <h2>Krav til CSS</h2>
            <p><span style="font-weight: bold;">Validering</span></p>
            <div style="padding-left: 10px;">Dit dokuments CSS skal kunne valideres fejlfrit</div>
            <h2>Style guide</h2>
            <div style="padding-left: 10px;">Dokumentets bredde er 800px. Dokumentet har en "sans-serif" grundfont efter eget valg med en størrelse på 16px.<br /><br/>
                            Overskrift h1, h2, h3 er henholdsvis 36, 24 og 18px. De har alle en venstre margin på 12px. H2 er i kursiv.<br /><br />
                            Logooverskriften i h1 er tilsigtet at ligne en knap med rammen. Den linker til forsiden "index.html". Navigationslinks kan linke til "#". De er 14px med en linje-højde på 24px, og de er i fed skrift uden undersktregning. Disse links kan evt implementeres som knapper.<br /><br />
                            Dit fulde navn og klasse skal stå i sidefoden.</div>
        </div>
            </td>
            <td style="background-color: #9c9aff; padding: 25px 0px 0px 25px; vertical-align: top;">
                <div style="border: outset 2px #000073; height: 17px; width: 65%; background-color: #cecfce; margin-bottom: 3px; font-size:medium;"><a href="#"><span style="font-weight: bold; color: #000063">Lektion 1</span></a></div>
                <div style="border: outset 2px #000073; height: 17px; width: 65%; background-color: #cecfce; margin-bottom: 3px; font-size:medium;"><a href="#"><span style="font-weight: bold; color: #000063">Lektion 2</span></a></div>
        <div style="border: outset 2px #000073; height: 17px; width: 65%; background-color: #cecfce; margin-bottom: 3px; font-size:medium;"><a href="#"><span style="font-weight: bold; color: #000063">Lektion 3</span></a></div>
        <div style="border: outset 2px #000073; height: 17px; width: 65%; background-color: #cecfce; margin-bottom: 3px; font-size:medium;"><a href="#"><span style="font-weight: bold; color: #000063">Lektion 4</span></a></div>
        <div style="border: outset 2px #000073; height: 17px; width: 65%; background-color: #cecfce; margin-bottom: 3px; font-size:medium;"><a href="#"><span style="font-weight: bold; color: #000063">Lektion 5</span></a></div>
        <div style="border: outset 2px #000073; height: 17px; width: 65%; background-color: #cecfce; margin-bottom: 3px; font-size:medium;"><a href="#"><span style="font-weight: bold; color: #000063">Lektion 6</span></a></div>
        <div style="border: outset 2px #000073; height: 17px; width: 65%; background-color: #cecfce; margin-bottom: 3px; font-size:medium;"><a href="#"><span style="font-weight: bold; color: #000063">Lektion 7</span></a></div>
        <div style="border: outset 2px #000073; height: 17px; width: 65%; background-color: #cecfce; margin-bottom: 3px; font-size:medium;"><a href="#"><span style="font-weight: bold; color: #000063">Lektion 8</span></a></div>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="background-color: #cecfce; vertical-align: top; text-align: center;">
                Niels
            </td>
        </tr>
    </table>
<div style="text-align: center;">

  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img  style="border: 0px;"
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
  </p>

</div>

</body>
</html>
Avatar billede minus Nybegynder
26. oktober 2007 - 11:16 #1
Ikke nødvendig alligevel. Tog mig sammen og gjorde det selv :D
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