PDA

View Full Version : [CSS] Mi aiutate a centrare un div?

D4rkAng3l
17-09-2008, 09:28
Ciao,
ho un problema...devo dare una sistematina ed aggiungere delle cose ad un sito già fatto da altri (in maniera piuttosto caotica)....non sò perchè non riesco a centrare un div...
La pagina in questione è questa: http://www.siatec.net/andrea/archivio/creativamente/casino.html

Ed il div da centrare è quello avente class impostata a container che contiene i prodotti...dovrebbe essere al centro dello spazio bianco...come faccio?

Il codice HTML e CSS è questo:



<!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" xml:lang="it" lang="it" dir="ltr">

<head><title>
gallery
</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta http-equiv="imagetoolbar" content="no" /><meta name="Description" /><meta name="Keywords" />
<script src="http://www.bbcsite.com/template/riferimento/common.js" type="text/javascript"></script>
<style type="text/css">

body, html{
margin: 0;
padding: 0;
text-align: center;
background-color: #cbd200;
font-family: Verdana, Arial, Helvetica, sans-serif;
height:100%;
}

.container{
width: 100%;
padding-top: 10px;
}

.intestazione{
width: 200px;
height: 25px;
color: #fdfbe2;
font-weight: bold;
margin-left: auto;
margin-right: auto;
float: left;
background-color: #e3004a;
border: 1px solid #000000;
}

.cella{
float: left;
width: 200px;
background-color: #fdfbe2;
height: 200px;
border: 1px solid #000000;
}

.intestazione>div{
padding-top: 3px;
}

.cella img{
display:block;
width:150px;
height:150px;
line-height:100px;
position:relative;
z-index:1;
}

.ico{
margin-left: 22px;
margin-top: 22px;
}

#navlist { padding: 3px 0; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif; }

#navlist li { list-style: none; margin: 0; display: inline; }
#navlist li a
{padding: 3px 0.5em 1px; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none; }
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #448; }
#navlist li a:hover { color: #000; background: #AAE; border-color: #227;}
#navlist li a#current { background: white; border-bottom: 1px solid white;}
.PorzContainer {background-color: #FFFFFF;}
.PorzInt {background-color: #FFFFFF;}
.PorzMed {background-color: #FFFFFF;}
.PorzPie {background-color: #FFFFFF;}


#ItemCorpoProdottoEcommerce{
margin:0 auto;
padding:0;
width:98%;
text-align:left;
background:transparent;
font-size:12px;
color:#fff;
}


#ItemCategorieRipeti{
margin:0 auto;
padding:0;
width:100%px;
text-align:center;
background:transparent;
}

.imgripetuta{
margin: 10px 0 0 0;
float:right;
}

div.PorzioneEcomm{
margin: 20px 0 0 10px;
padding:0;
width:600px;
float:left;
}

div.PorzioneEcomm p{
margin:0;
padding: .1em;
font-size:12px;
}

#footer{
margin:0;
padding:0;
clear:left;
width:100%;
height:40px;
line-height:30px;
background: transparent url(footer.jpg) left top no-repeat;
}


div.arearipetuta, div.arearipetutahover{
margin: 5px 0 0 0 ;
padding:0 0 20px 0!important;
padding:0;
width: 100%;
height:100%;
text-align:left;
border-bottom:1px solid #FFFFFF;
display:block;
background:#FFFFFF;
}

div.arearipetutahover{
background:#FFFFFF;
}
</style>


</head>

<body >
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0" class="PorzContainer">
<tr>
<td><table width="780" border="0" align="center" class="PorzInt">
<tr>
<td><div align="center" class="STRMyConfLogo"><p><img alt="20_headLogo.png" src="http://www.bbcsite.com/immagini/creativa-mente/20_headLogo.png" /></p></div></td>
</tr>
</table>
<table width="780" border="0" align="center" class="PorzMed">
<tr valign="top">
<td width="10" rowspan="2"><div align="center" class="STRMyConfLatosx"></div></td>
<td><div id="ItemMenu">
<div id="navcontainer"><ul id="navlist"><li><a href="/">Home</a></li>
<li><a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita14316.aspx">Chi siamo</a></li>
<li><a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita14795.aspx">Cosa Facciamo</a></li>
<li><a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita14317.aspx">gallery</a></li>
<li><a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita14321.aspx">Dove Siamo</a></li>
<li><a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita14320.aspx">Contatti</a></li>
</ul></div>
</div></td>
<td width="11" rowspan="2"> <div align="center" class="STRMyConfLatodx"></div></td>
</tr>
<tr valign="top">
<td width="940"><div align="center" class="STRFISSAConfFlags">
<div align="right"></div>
</div>



<div id="ItemCorpoPresentazione">
<p class="STRPRODdescriptionLINGUA">gallery</p>
<p class="STRPRODdetailsLINGUA"><p>Riportiamo di seguito alcune nostre realizzazioni&nbsp;selezionate per mostrarvi la varet&agrave; delle tecniche&nbsp;e dei supporti utilizzati dallo studio artistico Creativamente.</p>
<div class="container">
<div class="intestazione">
<div>Tradizionalmente</div>
</div>
<div class="intestazione">
<div>Insolitamente</div>
</div>
<div class="intestazione">
<div>Quotidianamente</div>
</div>
<div class="cella">
<div class="ico"><a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita2569.aspx"><img alt="Tradizionalmente" src="http://www.bbcsite.com/immagini/creativa-mente/60_7t.jpg" /> </a></div>
</div>
<div class="cella">
<div class="ico"><a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita2567.aspx"><img alt="Insolitamente" src="http://www.bbcsite.com/immagini/creativa-mente/6_1i.jpg" /> </a></div>
</div>
<div class="cella">
<div class="ico"><a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita2573.aspx"><img alt="Quotidianamente" src="http://www.bbcsite.com/immagini/creativa-mente/0_5q.jpg" /> </a></div>
</div>
</div>
<p>&nbsp;</p>
<div class="container">
<div class="intestazione">
<div>Artisticamente</div>
</div>
<div class="intestazione">
<div>Preziosamente</div>
</div>
<div class="intestazione">
<div>Progetti</div>
</div>
<div class="cella">
<div class="ico"><a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita2574.aspx"><img alt="Artisticamente" src="http://www.bbcsite.com/immagini/creativa-mente/PAESAGGIO.jpg" /></a></div>
</div>
<div class="cella">
<div class="ico"><a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita14318.aspx"><img alt="Presiosamente" src="http://www.bbcsite.com/immagini/creativa-mente/57_5pre.jpg" /></a></div>
</div>
<div class="cella">
<div class="ico"><a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita14319.aspx"><img alt="Progetti" src="http://www.bbcsite.com/immagini/creativa-mente/DSC_2264.jpg" /></a> </div>
</div>
</div></p>
</div>

<div id="ItemCorpoProdotto"></div>

<div id="ItemCategorieRipeti">
<div class="arearipetuta" onmouseover="this.className = 'arearipetutahover';" onmouseout="this.className = 'arearipetuta';">
<div class="PorzioneEcomm">
<p class="STRPRODdescriptionItemLINGUA"><a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita14319.aspx">Lavori in corso</a></p>
<p></p>
</div>
<a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita14319.aspx"><img src="http://www.bbcsite.com/images/null.gif" alt="" class="imgripetuta" /></a>
<div class="clear"></div>
</div>

<div class="arearipetuta" onmouseover="this.className = 'arearipetutahover';" onmouseout="this.className = 'arearipetuta';">
<div class="PorzioneEcomm">
<p class="STRPRODdescriptionItemLINGUA"><a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita2567.aspx">Insolitamente</a></p>
<p></p>
</div>
<a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita2567.aspx"><img src="http://www.bbcsite.com/images/null.gif" alt="" class="imgripetuta" /></a>
<div class="clear"></div>
</div>

<div class="arearipetuta" onmouseover="this.className = 'arearipetutahover';" onmouseout="this.className = 'arearipetuta';">
<div class="PorzioneEcomm">
<p class="STRPRODdescriptionItemLINGUA"><a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita2569.aspx">Tradizionalmente</a></p>
<p></p>
</div>
<a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita2569.aspx"><img src="http://www.bbcsite.com/images/null.gif" alt="" class="imgripetuta" /></a>
<div class="clear"></div>
</div>

<div class="arearipetuta" onmouseover="this.className = 'arearipetutahover';" onmouseout="this.className = 'arearipetuta';">
<div class="PorzioneEcomm">
<p class="STRPRODdescriptionItemLINGUA"><a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita2573.aspx">Quotidianamente</a></p>
<p></p>
</div>
<a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita2573.aspx"><img src="http://www.bbcsite.com/images/null.gif" alt="" class="imgripetuta" /></a>
<div class="clear"></div>
</div>

<div class="arearipetuta" onmouseover="this.className = 'arearipetutahover';" onmouseout="this.className = 'arearipetuta';">
<div class="PorzioneEcomm">
<p class="STRPRODdescriptionItemLINGUA"><a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita2574.aspx">Artisticamente</a></p>
<p></p>
</div>
<a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita2574.aspx"><img src="http://www.bbcsite.com/images/null.gif" alt="" class="imgripetuta" /></a>
<div class="clear"></div>
</div>

<div class="arearipetuta" onmouseover="this.className = 'arearipetutahover';" onmouseout="this.className = 'arearipetuta';">
<div class="PorzioneEcomm">
<p class="STRPRODdescriptionItemLINGUA"><a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita14318.aspx">Preziosamente</a></p>
<p></p>
</div>
<a href="http://www.bbcsite.it/public/siti/creativa-mente/paginaita14318.aspx"><img src="http://www.bbcsite.com/images/null.gif" alt="" class="imgripetuta" /></a>
<div class="clear"></div>
</div>
</div>

</td>
</tr>
</table>

<div align="center" class="STRMyConfPiePagina"><hr />-</div>
<div id="footer">
<div class="StrSuppidSupplier"><p><SCRIPT LANGUAGE="javaScript">document.write(txt1);</SCRIPT> 1857 PI 00371278888 <a href="http://www.bbcsite.it/public/siti/creativa-mente/allita.aspx">Site Map</a></p></div>
<div class="Poweredby"><p>Powered by <a href="http://www.bbcsite.com/">BBC</a></p></div>
</div><!--fine footer-->

</DIV>
<script language="JavaScript">document.write('<s' + 'cript src="' + txt2 +'1857">');document.write('</' + 's' + 'cript>');</script>
<!-- Ultimo agg. 14/09/2008 18.14.01 V1907 pagita14317 -->

</table>
</body>
</html>


Grazie
Andrea
xciaoatuttix
17-09-2008, 10:38
ciao sostituisci con questo:

.container{
margin-left: 80px;
width: 100%;
padding-top: 10px;
}

dovevi usare i margini... io ho messo 80px ma tu puoi cambiarlo :)
D4rkAng3l
17-09-2008, 11:17
ciao sostituisci con questo:

.container{
margin-left: 80px;
width: 100%;
padding-top: 10px;
}

dovevi usare i margini... io ho messo 80px ma tu puoi cambiarlo :)

no così lo avevo fatto anche io e semplicemente lo spostava a sinistra...ma non è una vera centratura.

Ho appena risolto...praticamente ho rivisto che per centrare un oggetto gli devi dare una dimensione fissa in pixel e poi setti l'attributo margin: 0 auto;


.container{
width: 606px;
margin: 0 auto;
padding-top: 10px;
}


Così centroil container in modo preciso e non facendo porcate e spostandolo semplicemente con un margine o un padding a sinistra...prima avevo fatto così...ma facendo così su firefox si vedeva bene mentre su explorer sbroccava e mandava a capo parte del contianier...un casino...non è il modo corretto per centrare oggetti quello :)

Cma grazie lo stesso

Andrea