Allineare un layout al centro.

[Izzie85]

Ciao ragazzi,
sono un pò di anni che studicchio e cerco di utilizzare i codici html, anche se non sempre alla perfezione, però ho sempre e solo un grosso problema: i miei layout vengono visualizzati a sinistra.
Ho letto un pò di guide online, ma non ho risolto il problema. La soluzione di settare il margine a 0 nel mio caso non funziona e il layout rimane a sinistra.

Il sito in questione è il seguente:

www.seriouslygreylovers.com

Se vi serve anche il codice dello style (anche se penso che riuscite a procurarvelo) o altre indicazioni, ditemi pure! Grazie mille.

[MadBob]

Ciao,
prova a racchiudere tutto il contenuto del sito in un div, largo quanto il sito stesso e con altezza auto al quale imposti la proprietà margin:auto.
così te lo sposta a centro pagina con tutto quel che c'è dentro.

[Izzie85]

Ma come faccio a racchiudere tutto il contenuto?
Io ho una pagina chiamata "left" (la colonna di sinistra) che viene richiamata nell'index. La pagina left, a sua volta, è formata da tanti div. Uno per i contatti FB, uno per il menu, e la colonna stessa.

Inoltre ho creato il menu in questo modo:


<map name="m_sgl" id="m_sgl">
<area shape="rect" coords="245,456,298,489" href="http://privatepractice.forumcommunity.net" target="_blank" title="privatepractice italian forum" alt="PRIVATE PRACTICE" />
<area shape="rect" coords="302,455,346,494" href="http://www.telesimo.it/" target="_blank" title="TELESIMO" alt="TELESIMO" />
<area shape="rect" coords="355,457,395,493" href="http://www.buddytv.com/greys-anatomy.aspx" target="_blank" title="BUDDY TV" alt="BUDDY TV" />
<area shape="rect" coords="402,459,447,492" href="http://www.telefilmworld.com/" target="blank" title="TELEFILM WORLD" alt="TELEFILM WORD" />
<area shape="rect" coords="334,533,379,564" href="http://www.seriouslygreylovers.com" target="_self" title="home" alt="home" />
<area shape="rect" coords="761,8,796,39" href="http://it.www.mozilla.com/it/" target="_blank" title="il sito è ottimizzato per mozilla" alt="il sito è ottimizzato per mozilla" />
<area shape="rect" coords="803,9,827,35" href="http://www.apple.com/it/safari/" target="_blank" title="il sito è ottimozzato per safari" alt="il sito è ottimozzato per safari" />
<area shape="rect" coords="387,539,458,578" href="http://www.seriouslygreylovers.com/ga" target="_blank" title="gallery" alt="gallery" />
<area shape="rect" coords="550,532,614,566" href="http://greysanatomyitalianforum.forumcommunity.net" target="_blank" title="visita il forum" alt="visita il forum" />
<area shape="rect" coords="616,560,668,589" href="http://www.seriouslygreylovers.com/www.php" target="_self" title="affiliati, links" alt="affiliati, links" />
<area shape="rect" coords="471,524,523,553" href="http://www.seriouslygreylovers.com/greys.php" target="_self" title="grey's anatomy" alt="grey's anatomy" />

</map>

quindi..non so come fare!

[ispuk]

ti calcoli la somma di tutte le pagine che richiami,sia in altezza sia in larghezza

dopo applichi un div alla index largo e alto quanto l'insieme di tutto ciò che richiami


spero di essere stato "chiarito "

[Izzie85]

in realtà non molto.. cioè la grafica è 1024*768 ... in che senso faccio la somma? O__o

[ispuk]

se hai altri div che sono in pagine diverse ma che includi nella "index" devi vedere se hanno un altezza e una larghezza ,ma questo anche se hai una tabella o altri contenuti che hanno una dimensione specificata

se poi non hai specificato nessuna dimensione puoi benissimo aggiungere direttamente un div contenitore alla index in modo da racchiudere tutto al centro della pagina,te lo aggiusti con i css

[Izzie85]

Allora, questo è il mio codice CSS.

/* CSS Document */



P, body, td, tr, div {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size : 8pt;
color : #9090b8;
line-height : 9pt;
}


BODY {
background-image:url(http://www.seriouslygreylovers.com/sgl2.png);
margin:auto;
background-repeat:repeat-y;
margin:auto;
}

a:link, a:active, a:visited {
color : #7fc0d1;
text-decoration : none;
font-weight : bold;
border:none;
}




img {

border:none;

}



a:hover {
color : #bfb5cb;
border:none;
}
b, strong {
color : #a1adb2;
}
h1 {
font-size : 10pt;
font-family : verdana;
color : #a9a9c8;
text-align:left;
border-bottom-style:dashed;


}
.newstitle {
background-color : #f2f2f2;
font-weight : bold;
font-size : 10pt;
font-family : verdana;
color : #b8b8b8;
letter-spacing:2pt;
border-left:dashed #999;

}
.newstitle a {
color : #cfb7b7;
text-decoration : none;
}
.newstitle a:link, .newstitle a:visited {
color : #cfb7b7;
text-decoration : none;
}
.newstitle a:hover {
color : #cfb7b7;
text-decoration : none;
}
.newsdate {
background-color : #dae4e8;
padding : 2px;
font-family : verdana;
font-size : 8pt;
text-align : right;
letter-spacing : 0;
line-height : 7pt;
color : #79a1ab;
}

.foto {
-moz-border-radius:1em;
-webkit-border-radius: 1em;
border:1px solid #bcbcd0;
padding: 5px;
background: #FFFFFF;
filterrogidXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.8;
filter: alpha(opacity=80);

}

.foto:hover {
-moz-border-radius:1em;
-webkit-border-radius: 1em;
border:1px solid #bcbcd0;
padding: 5px;
background: #FFFFFF;
filterrogidXImageTransform.Microsoft.Alpha(opacity=80);
-moz-opacity:1;
opacity:1;
filter: alpha(opacity=100);
}

#corpo {
width:1024px;
margin:0 auto;
}

Ho inserito la classe CORPO. Il problema è che non so come richiamarla nella pagina LEFT, che è composta da tanti div.

Questo è il codice di left.php

<html>
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<title>
© Seriously Grey Lovers || Grey's Anatomy: il sito italiano</title>
<style type="text/css" title="currentStyle" media="screen">
@import "stile.css";
</style>

</head>



<map name="m_sgl" id="m_sgl">
<area shape="rect" coords="245,456,298,489" href="http://privatepractice.forumcommunity.net" target="_blank" title="privatepractice italian forum" alt="PRIVATE PRACTICE" />
<area shape="rect" coords="302,455,346,494" href="http://www.telesimo.it/" target="_blank" title="TELESIMO" alt="TELESIMO" />
<area shape="rect" coords="355,457,395,493" href="http://www.buddytv.com/greys-anatomy.aspx" target="_blank" title="BUDDY TV" alt="BUDDY TV" />
<area shape="rect" coords="402,459,447,492" href="http://www.telefilmworld.com/" target="blank" title="TELEFILM WORLD" alt="TELEFILM WORD" />
<area shape="rect" coords="334,533,379,564" href="http://www.seriouslygreylovers.com" target="_self" title="home" alt="home" />
<area shape="rect" coords="761,8,796,39" href="http://it.www.mozilla.com/it/" target="_blank" title="il sito è ottimizzato per mozilla" alt="il sito è ottimizzato per mozilla" />
<area shape="rect" coords="803,9,827,35" href="http://www.apple.com/it/safari/" target="_blank" title="il sito è ottimozzato per safari" alt="il sito è ottimozzato per safari" />
<area shape="rect" coords="387,539,458,578" href="http://www.seriouslygreylovers.com/ga" target="_blank" title="gallery" alt="gallery" />
<area shape="rect" coords="550,532,614,566" href="http://greysanatomyitalianforum.forumcommunity.net" target="_blank" title="visita il forum" alt="visita il forum" />
<area shape="rect" coords="616,560,668,589" href="http://www.seriouslygreylovers.com/www.php" target="_self" title="affiliati, links" alt="affiliati, links" />
<area shape="rect" coords="471,524,523,553" href="http://www.seriouslygreylovers.com/greys.php" target="_self" title="grey's anatomy" alt="grey's anatomy" />

</map>


<div style="position:absolute; top:50px; left:30px; width:170px; height: 200px; overflow:auto">
<script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/it_IT"></script><script type="text/javascript">FB.init("9197da6d14a816d02a6262809ad5c 5eb");</script><fb:fan profile_id="137583563860" stream="" connections="2" width="170"></fb:fan>
</div>

<div style="position:absolute; top:382px; left:500px; width:469px; height: 80px;">
<?php
include "./ga/cpmfetch/cpmfetch.php";
$objCpm = new cpm("./ga/cpmfetch/cpmfetch_config.php");
$objCpm->cpm_viewLastAddedMedia(1,5);
$objCpm->cpm_close();
?>
</div>



<div style="position:absolute; top:552px; left:57px; width:198px; overflow:auto">

BLA BLA BLA
</div>
</body>
</html>

Grazie dell'aiuto!

[Izzie85]

allora, pensavo di aver risolto in questo modo.
Nello style ho messo.
BODY {
background-image:url(http://www.seriouslygreylovers.com/sgl2.png);
background-repeat:repeat;
background-position:center;


}

Mentre lo sfondo del sito, nel file LEFT.
<div align="center">
</div>
<map name="m_sgl" id="m_sgl">
<area shape="rect" coords="245,456,298,489" href="http://privatepractice.forumcommunity.net" target="_blank" title="privatepractice italian forum" alt="PRIVATE PRACTICE" />
<area shape="rect" coords="302,455,346,494" href="http://www.telesimo.it/" target="_blank" title="TELESIMO" alt="TELESIMO" />
<area shape="rect" coords="355,457,395,493" href="http://www.buddytv.com/greys-anatomy.aspx" target="_blank" title="BUDDY TV" alt="BUDDY TV" />
<area shape="rect" coords="402,459,447,492" href="http://www.telefilmworld.com/" target="blank" title="TELEFILM WORLD" alt="TELEFILM WORD" />
<area shape="rect" coords="334,533,379,564" href="http://www.seriouslygreylovers.com" target="_self" title="home" alt="home" />
<area shape="rect" coords="761,8,796,39" href="http://it.www.mozilla.com/it/" target="_blank" title="il sito è ottimizzato per mozilla" alt="il sito è ottimizzato per mozilla" />
<area shape="rect" coords="803,9,827,35" href="http://www.apple.com/it/safari/" target="_blank" title="il sito è ottimozzato per safari" alt="il sito è ottimozzato per safari" />
<area shape="rect" coords="387,539,458,578" href="http://www.seriouslygreylovers.com/ga" target="_blank" title="gallery" alt="gallery" />
<area shape="rect" coords="550,532,614,566" href="http://greysanatomyitalianforum.forumcommunity.net" target="_blank" title="visita il forum" alt="visita il forum" />
<area shape="rect" coords="616,560,668,589" href="http://www.seriouslygreylovers.com/www.php" target="_self" title="affiliati, links" alt="affiliati, links" />
<area shape="rect" coords="471,524,523,553" href="http://www.seriouslygreylovers.com/greys.php" target="_self" title="grey's anatomy" alt="grey's anatomy" />

</map>


IO con il MAC lo vedo bene, ma Win Vista, Firefox e risoluzione 1280x800 lo vedono cosi:
http://img9.imageshack.us/img9/5875/catturadv.jpg
http://img23.imageshack.us/img23/1844/cattura1k.jpg

[Izzie85]

ho riportato tutto a sinistra, aspettando che qualcuno mi aiuti.