CSS  »  Articoli  »  Mondo CSS 

Possiamo ora riprendere il sorgente del wireframe e incominciare a realizzare il design del progetto. Anche stavolta restiamo su un layout di semplice come quello illustrato dall'immagine seguente:

Figura 4 - Design (click per ingrandire)

Una volta ritagliate le immagini dal template, iniziamo a completare il foglio di stile della pagina stando attenti a rispettare le regole che abbiamo esposto nell'articolo.

Il codice necessario è il seguente:

HTML:

<div id="container" class="container_12">
    <div id="header" class="grid_12">
        <h1><a href="#">Logo</a></h1>
    </div>
    <div id="menu" class="grid_12">
        <ul>
            <li><a href="#" class="selected">Home</a></li>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
        </ul>
    </div>
    <div id="content" class="grid_9">
        <h2>Lorem Ipsum Dolor Sit Amet</h2>
        <p><img src="../images/image.png" alt="image" /></p>
        <p>Pellentesque ...leo.</p>
        <p>Pellentesque ...leo.</p>
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Aliquam tincidunt mauris eu risus.</li>
            <li>Vestibulum auctor dapibus neque.</li>
        </ul>
    </div>
    <div id="sidebar" class="grid_3">
        <h3>Sub-Menu</h3>
        <ul>
            <li>Sub-Menu 1</li>
            <li>Sub-Menu 2</li>
            <li>Sub-Menu 3</li>
            <li>Sub-Menu 4</li>
            <li>Sub-Menu 5</li>
        </ul>
    </div>
    <div id="footer" class="grid_12">
        <p>&copy; 2009 - Lorem Ipsum Dolor Sit Amet</p>
    </div>
</div>

CSS:

/* layout */
body { background-color: #fff; }

#container {}
    #container > div { margin-top: 10px; }
   
    #header {
        height: 150px;
        line-height: 150px;
    }
    #menu, #footer {
        height: 30px;
        line-height: 30px;       
    }
    #content, #sidebar { min-height: 500px; }

   
/* design */
#container {}
    #header {}
        #header h1 a {
            background: url('../images/logo.jpg') no-repeat;
            display: block;
            line-height: 9999em;   
            margin-top: 40px;
            width: 450px;
            height: 100px;
            overflow: hidden;
        }


    #menu { background: url('../images/menu.jpg') repeat-x; }
        #menu ul {
            list-style-type: none;
        }
            #menu ul li {
                float: left;
                text-align: center;
            }
                #menu ul li a {
                    color: #fff;
                    font-size: 1.2em;
                    font-weight: bold;
                    display: block;                   
                    width: 120px;
                    height: 100%;
                    text-decoration: none;
                }
                    #menu ul li a:hover,
                    #menu ul li a.selected { text-decoration: underline; }


    #content, #sidebar {
        background: url('../images/content.jpg') repeat-x;
    }
        #content h2, #sidebar h2 {
            color: #2f6a96;
            padding: 20px;
        }   
        #content h3, #sidebar h3 {
            color: #2f6a96;
            padding: 20px 0 0 10px;
        }           
        #content p, #sidebar p {
            padding: 20px;
            margin: 0;
            text-align: justify;
        }
        #content img, #sidebar img { padding: 10px; }
        #content ul, #sidebar ul { margin-left: 20px; }
   
       
    #footer {
        background-color: #2f6a96;
        color: white;
        line-height: 30px;
    }
        #footer p { padding-left: 30px; }

Il risultato finale è quello dell'immagine seguente:

Figura 5 - Design finale (click per ingrandire)

È possibile scaricare il pacchetto completo con tutti i file dell'esempio al seguente link.

Altri articoli

Altre guide

Altre newsletter