- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Centrare DIV
-
Centrare DIV
Ho preparato un'esempio con css integrato:
http://www.adesig.net/prova.html
vorrei centrare i box "menu":
se alla classe box assegno l'attributo float: left; si piazzano a sinistra e si allineano.
se non imposto l'attributo si mettono centralmente ma si incolonnano giustamente..come posso fare?le ho provate tutte..
-
Prova così:
[html]
#main #contenitore {
margin: 0px;
padding: 10px;
border: 1px solid #CC3300;
text-align:center;
}
[/html]Se vuoi fare un menu, ti consiglio di usare una lista. Sarebbe più facile poi centrarla usando i margini e, semanticamente, sarebbe anche più corretto.
-
provato..ma nulla..
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
.box {
margin: 5px;
padding: 5px;
float: left;
width: 75px;
border: 1px solid #333333;
background-color: #F9F8FA;
text-align: center;
list-style-type: none;
}
.space {
clear: left;
list-style-type: none;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#main #contenitore {
margin: 0px;
padding: 10px;
border: 1px solid #CC3300;
text-align:center;
}
ul {
margin: 0px;
padding: 0px;
}
#header {
background-color: #F5F4F7;
height: 80px;
margin-bottom: 5px;
border: 1px solid;
}
#footer {
clear: left;
background-color: #EBE9ED;
padding: 5px;
margin-top: 5px;
border: 1px solid;
}
{
margin: 0px;
padding: 10px;
border: 1px solid;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="header">
<div align="center">"header"</div>
</div>
<div id="contenitore">
<ul>
<li class="box">x x x</li>
<li class="box">x x x</li>
<li class="box">x x x</li>
<li class="box">x x x</li>
<li class="space"></li>
</ul>
</div>
<div id="footer">
<div align="center">"Footer"</div>
</div>
</div>
</body>
</html>[/HTML]
-
se ad esempio dai una larghezza fissa
<ul style="margin-left: auto; margin-right: auto; width: 400px;">..i menù si allineano al centro..
ma sarebbe meglio inserire un ulteriore div contenente la lista con margin auto
-
non posso dare larghezza fissa...la pagina deve adattarsi alla risoluzione del monitor dell'utente, metterla fissa non è difficile.
quindi anche inserendo un div a margin: auto; questo si adatterebbe al div che lo contiene senza centrare..
-
Ciao Khendall,
hai mischiato le soluzioni colpa mia non mi sono spiegato bene.Fammi capire, ma i box del menu si allargano anche loro con la risoluzione? Se sono fissi usare margin: 0 auto; su <ul> è il metodo più pratico.
-
Prova a dare un'occhiata questo esempio:
http://css.maxdesign.com.au/listamatic/horizontal16.htm
-
Ciau.
no i box rimangono di un certo tot di px, che magari puo anche variare, ma devono stare al centro mentre il resto della pagina deve adattarsi alla risoluzione,,
ora dò un'occhiata al sito e vediamo..
-
perfettamente come nel sito da te consigliato..