Interpretazione del box model e costruzione di un layout

**daguanno** · 21-12-2006, 16:47

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.

**foo** · 21-12-2006, 16:57

ho avuto un déjà vu

**floyd46** · 21-12-2006, 17:01

X fcaldera:
mi sa che andrebbe chiuso anche questo post, come il precedente.
Sembra + un esercizio (insignificante, secondo me) da parte di coloro che hanno appena saputo dell'esistenza dei CSS.
Se, invece, ha motivo di esistere il seguente 3d, lo si scriva apertamente e, soprattutto, il perchè.
Floyd

**daguanno** · 21-12-2006, 17:02

Il moderatore lo aveva chiuso per scarsa attinenza del titolo.

Resta il fatto che su questo forum si pensa solo a inserire scritte del tipo rotfl, rotflastc, lol e imho...

C'è qualcuno che conosca a menadito i CSS?

**daguanno** · 21-12-2006, 17:04

Originariamente inviato da floyd46
mi sa che andrebbe chiuso anche questo post, come il precedente.
Sembra + un esercizio (insignificante, secondo me) da parte di coloro che hanno appena saputo dell'esistenza dei CSS.
Se, invece, ha motivo di esistere il seguente 3d, lo si scriva apertamente e, soprattutto, il perchè.
Floyd

Ok. Chiudete anche questo post, torno ai gruppi di google. Con utenti forse un tantino più tecnici.

Ciao.

Di sicuro non sentirete la mia mancanza

**daguanno** · 21-12-2006, 17:09

Prima però pubblico una soluzione chissà che non sia utile a qualcuno...

codice:

* {
	padding: 0px;
	margin: 0px;
	color: #000000;
	font-size: 100%;
}

body {
	text-align: center;
	margin: 0 auto 0 auto;
}
div#header {
	background-color: #ffcccc;
	border: 1px #000000 solid;
	height: 100px;
	margin: 0 auto 0 auto;
	text-align: left;
	width: 698px !important;
	width/**/: 700px;
}
div#container  {
	border: none;
	margin: 0 auto 0 auto;
	text-align: left;
	width: 700px;
}
div#center {
	background-color: #ccffcc;
	border: 1px #000000 solid;
	height: 300px;
	margin: 0 auto 0 auto;
	text-align: left;
	width: 698px !important;
	width/**/: 700px;
}
div#bottom {
	background-color: #ccccff;
	border: 1px #000000 solid;
	height: 50px;
	margin: 0 auto 0 auto;
	text-align: left;
	width: 698px !important;
	width/**/: 700px;
}

Ringrazio m4r10
che me l'ha proposta e nel suo www.minidesign.it ne parla in questo articolo Box model: un workaround per IE

**floyd46** · 21-12-2006, 17:11

scusa ma... cosa ci vuole per mettere uno sotto l'altro 3 div raccolti in un contenitore generale?
per caso il codice css, serve a te?
davvero continuo a non capire.
Floyd

**fcaldera** · 21-12-2006, 17:13

Originariamente inviato da floyd46
Sembra + un esercizio (insignificante, secondo me) da parte di coloro che hanno appena saputo dell'esistenza dei CSS.

Su questo penso siamo generalmente d'accordo.

Però considera che ci sono molti utenti che hanno un livello di conoscenze sui CSS molto basso, quasi nullo e un thread "eserciziario" potrebbe servire a chi muove i primi passi.

Del resto il regolamento non specifica quale debba essere il livello tecnico minimo per postare nè obbliga alcun forumista a rispondere se la domanda/quesito/discussione non lo stimola intellettualmente.

Stiamo a vedere quanti forumisti partecipano e fanno domande attinenti.
(Lasciamo che la selezione naturale faccia il suo corso, come direbbe Darwin)

Ora vi prego di rientrare dall'ot e lasciare spazio alle repliche

Grazie

**daguanno** · 21-12-2006, 17:13

Quel css è la base per la comprensione del box model e per il passaggio ad un layout a due colonne, successivamente a tre colonne etc.

Ma come ti ho detto no fa nulla...

Ciao ciao...

**salasir** · 21-12-2006, 19:28

Visto che abbiamo già avuto a che fare con le espressioni delicate e gentili del sig. daguanno http://forum.html.it/forum/showthrea...readid=1069215, mi piacerebbe sapere (pura curiosità) il motivo di tanto accanimento a dimostrare che i partecipanti di questo furum sono poco tecnici, sparano a caso, e propongono soluzioni empiriche.

Io mi sono convinto dell'esatto contrario.

Forse al suddetto sig. daguanno, sono gradite solo le risposte secche: come faccio a fare questo? Così.

Qui spesso si cerca di fare crescere la gente, cercando di capire le motivazioni di una domanda e cercando di chiarire una possibile soluzione diversa da quella che ci si possa aspettare, probabilmente più semplice, o più raffinata, o magari più moderna (mi vengono in mente le risposte di modificare i layout tabellari in tableless... )

Detto questo, se preferisci tornare su Google, nessuno ti trattiene.

Discussione: Interpretazione del box model e costruzione di un layout

Strumenti discussione

Ricerca discussione

Visualizza

Interpretazione del box model e costruzione di un layout

Re: Interpretazione del box model e costruzione di un layout

Re: Interpretazione del box model e costruzione di un layout

Re: Re: Interpretazione del box model e costruzione di un layout

Re: Re: Re: Interpretazione del box model e costruzione di un layout

Re: Re: Interpretazione del box model e costruzione di un layout

Permessi di invio