Menu' a rettangoli

**carlo2002** · 27-04-2015, 12:47

Vorrei fare un menù a rettangoli, stile metro o anche come si vede in questo sito. Rettangoli contenenti testo ed una immagine.

Questo tipo di menu' ha un nome specifico?

**WottaFacca** · 28-04-2015, 09:01

Non ha un nome specifico, è un semplice menù creato in HTML e CSS

Codice HTML

codice:

<html>
<head>

</head>
    
    <link rel="stylesheet" href="style2.css">

<body>

<div id="barra">
    <div id="centro">
    
    <ul id="menu">
    <li><a href="">    primo </li></a>
    <li><a href=""> secondo </li></a>
    <li><a href=""> terzo </li></a>
    <li><a href=""> quarto </li></a>
    </ul>
    
    </div>
</div>

</body>
</html>

Codice CSS

codice:

*{

    margin: 0;
    padding: 0;

}

body{

    font-size: 16px;

}

#barra{

    width: 100%;
    height: 30px;

}

#centro{

    width: 900px;
    height: 30px;
    margin: 0 auto;

}

ul#menu{

    
    background: #fff;
    list-style: none;

}

ul#menu li {

    width: 200px;
    border-right: 1px solid #000;
    float: left;
    text-align: center;

}

ul#menu li a{

    text-decoration: none;
    color: #ff0000;

}

ul#menu li a:hover{

    text-decoration: underline;
    color: #000;

}

**carlo2002** · 02-05-2015, 13:14

Ok, grazie anche per aver pubblicato il codice.

Ora però ho un problema, ossia non riesco a centrare i riquadri.
Similmente al tuo codice ho creato un div con larghezza al 100% che contiene il tutto con all'interno un altro div di larghezza inferiore per sfruttare i margini "auto" laterali per ottenere la centratura.

Però il div interno mi servirebbe non metterlo di dimensioni determinate, purtroppo non dandogli una larghezza precisa i riquadri interni non rimangono centrati ma tendono a posizionarsi più a sinistra essendo il loro float impostato a left.

Non so se sia possibile ma ci può essere un sistema, che magari mi sfugge, per migliorare la centratura?

**WottaFacca** · 04-05-2015, 09:06

Tu vuoi che i riquadri bianchi siano al centro e uno sotto l'altro, giusto?

**carlo2002** · 04-05-2015, 15:23

Si, ma non dividendo la pagina in diverse colonne, ossia i vari riquadri mano a mano che si aggiungono lo fanno in senso orizzontale andando a capo quando superano la larghezza a loro destinata. L'ultima riga in fondo, nel caso che abbia meno riquadri di quelle sopra potrebbe anche essere centrata (se altrimenti fosse impossibile) e quindi i suoi riquadri non starebbero in linea verticalmente con quelli sopra.

**WottaFacca** · 04-05-2015, 15:43

Scusa ma non riesco a capire cosa vuoi fare xD.
Comunque per centrare uno sotto l'altro i rettangoli bianchi dovresti assegnargli "margin: 0 auto;" in modo che vada al centro e devono stare in un div grande poco più di essi

codice:

<html>
<head>

<style>
    #pagina{
    
    width: 100%;
    height: 1000px;
    background: #000;


    }
    #centro{

    width: 300px;
    height: 100%;
    margin: 0 auto;
    background: #ff0000;

    }

    .blocco{

    width: 280px;
    height: 100px;
    margin: 0 auto;
    background: #fff;
    margin-top: 10px;


    }
</style>
</head>

<body>
<div id="pagina">
    <div id="centro">
        <div class="blocco"></div>
        <div class="blocco"></div>
        <div class="blocco"></div>
        <div class="blocco"></div>
        <div class="blocco"></div>
    </div>
</div>


</body>
</html>

Ovviamente le misure sono approssimate,

Discussione: Menu' a rettangoli

Strumenti discussione

Ricerca discussione

Visualizza

Menu' a rettangoli

Permessi di invio