Osservate la seguente pagina XHTML
codice:
<!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" xml:lang="it" lang="it">
    <head>
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
    </head>
    <body>
        <div id="header">header: 700px per 100px
</div>
        <div id="container">
            <div id="main">main: 700px per 300px
</div>
        </div>
        <div id="bottom">bottom: 700px per 50px
</div>
    </body>
</html>
Siete in grado di creare il file style.css affinché la pagina risultante sia come l'immagine seguente?
http://nuke.daguanno.it/Portals/0/006.GIF

Logicamente il codice dovrà essere adatto sia a browser standard che a browser non standard (tipo Internet Explorer?)

Tenete presente che:
  • i margini bianchi attorno ai box non sono importanti. Contano solo i box.
  • le misure sono riferite al contenuto (piccolo aiuto: fate attenzione a "padding", al "margin" ed al "border")
  • i doppi bordi che si creano fra il box rosso ed il verde, e quello che si crea tra il verde ed il blu sono voluti
  • Il file css deve contenere le impostazioni "necessarie e sufficienti" allo scopo (necessarie: senza le quali lo scopo non sarebbe riaggiunto; sufficienti: le impostazioni minime affinché lo scopo sia raggiunto)
  • Il container non dovrà avere bordo: lo sfondo verde ed il bordo sono relativi al main


PS: Leggendo questo post, qualcuno si farà una risata (qualcuno se lè già fatta); di sicuro sarà colui che utilizza Dreamweaver o Frontpage per realizzare siti web.