Allineare al centro layout. Suggerimenti

**bibuz** · 15-06-2011, 14:34

Salve ragazzi ho la ncessità di allineare al centro un layout che in principio è nato per essere allineato a sinistra.
Ho provato con il solito codice del text-align: center ma non me lo sposta. Potete cortesemente darmi dei suggerimenti e aiutarmi capire dove sbaglio?
Questo è il codice HTML:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>xxxxx</title>
    <link rel="stylesheet" href="assets/reset-fonts-grids_2.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="assets/portal_2.css">
    <script type="text/javascript" src="build/yui/yui-min.js"></script>
    	<link href="css/sfondiStyles.css" rel="stylesheet" type="text/css" />	
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.maximage.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(function(){
		jQuery('img.slidemaximage').maxImage({
			isBackground: true,
			slideShow: true,
			slideShowTitle: false,
			slideDelay: 7, //secondi
			maxFollows: 'height',
			overflow:'auto',//importante se � necessario lo scroll della pagina per i contenuti
			resizeMsg: {show: false}
		});
	});
</script>
<script>
YUI().use('dd-drag', function(Y) {
    //Selector of the node to make draggable
    var dd = new Y.DD.Drag({
        node: '#gadget'
    });   
});
</script>

<style type="text/css">
<!--
#gadget {
	position:absolute;
	left:50%;
	top:200px;
	width:450px;
	height:300px;
	z-index:5;
	visibility: visible;
	margin: 0 0 0 -225px;
	cursor: move;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
<body>
[img]immagini/loading.gif[/img]
[img]sfondi/1.jpg[/img]
[img]sfondi/2.jpg[/img]
[img]sfondi/3.jpg[/img]
[img]sfondi/4.jpg[/img]
[img]sfondi/5.jpg[/img]
[img]sfondi/6.jpg[/img]
[img]sfondi/7.jpg[/img]
[img]sfondi/8.jpg[/img]
[img]sfondi/9.jpg[/img]
<div id="doc3" class="yui-t2">
<div id="gadget">
<div id="feeds">
                

TrascinaimodulinellapaginaClose X

      
</p>
                <ul>[/list]
    </div>
</div>
    <div id="hd">
      [img]immagini/logo.gif[/img][img]immagini/apriModuli.gif[/img]Apri la finsetra dei moduli
</div>
<div id="contenutiFissi">
<div id="recapiti">
          <p class="testo"><span class="testoGrassetto">Infotrading S.a.s</span>

            

            Via dei Tadolini, 26

            00196 - Roma

            Partita IVA: 05849651004

            

            Tel.: 06 39030035

            Fax: 06 32111899 

            

            E-mail: info@pec.infotrading.it



            E-mail: info@infotrading.it

          </p>
</div>
<div id="fissoInfotrading">
<div class="headerTabelle">ssssss.a.s</div>
<div id="infotradingDescr">ssssssssssssprogetta dalla sua sede di Roma servizi di consulenza   IT, soluzioni di web marketing e migliora la sicurezza nell’ambito delle   infrastrutture aziendali.

  Abbiamo maturato negli anni un’esperienza ed   una reputazione estremamente valide ai più alti livelli internazionali, sia nel   settore pubblico che privato.

  

  La creazione di nuovi standard organizzativi e procedurali per le aziende, riducendo le spese, aumentando l’efficienza e favorendo lo sviluppo di un nuovo orizzonte di mercato, nel quale la qualità del servizio e dei prodotti abbiano lo spazio e la considerazione che meritano. 


  Portare al successo economico i nostri clienti, partner, dipendenti e fornitori attraverso l’impiego di tecnologia, esperienza e pensiero razionale applicato alle strategie d’impresa. 
</div>
</div>
</div>
    <div id="bd">
        <div id="yui-main">
	        <div class="yui-b">
                <div class="yui-g">
                    <div id="play">
                        <ul class="list" id="list1">[/list]
                        <ul class="list" id="list3">[/list]
                    </div>
	            </div>
            </div>
	    </div>
        <div class="yui-b"></div>
    </div>
    <div id="ft">All Rights Reservedssssssssas - Via dei sssss, 26 - sssss- Tel: 0639030035 - E-mail: xxxxxx</div>
</div>
<script>
var assetsDir = "assets/";
var buildDir = "build/";
var yuiConfig = { filter: 'raw' };
</script>
<script src="assets/portal_2.js"></script>
</body>
</html>

**bibuz** · 15-06-2011, 14:35

E questi sono gli stili:
Questo è il primo foglio di stile:

codice:

html{color:#000;background:#FFF;height:100%;}
/*body{margin:0;padding:0;height:100%;}*/
body{margin:0;padding:0;height:100%;text-align:center;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
table {font-size:inherit;font:100%;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
body{text-align:center;}
#ft{clear:both;}
#doc,#doc2,#doc4,.yui-t1,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7{margin:auto;text-align:left;width:57.69em;*width:56.25em;min-width:750px;}
#doc3,.yui-t2{margin:auto;text-align:left;width:57.69em;*width:56.25em;min-width:750px;}
#doc2{width:73.076em;*width:71.25em;}
#doc3{margin:auto 0px;width:auto;}
#doc4{width:74.923em;*width:73.05em;}
.yui-b{position:relative;}
.yui-b{_position:static;}
#yui-main .yui-b{position:static;}
#yui-main{width:100%;}
.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main{float:right;margin-left:-25em;}
.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main{float:left;margin-right:-25em;}
.yui-t1 .yui-b{float:left;width:12.30769em;*width:12.00em;}
.yui-t1 #yui-main .yui-b{margin-left:13.30769em;*margin-left:13.05em;}
.yui-t2 .yui-b{float:left;width:13.8461em;*width:13.50em;}
.yui-t2 #yui-main .yui-b{margin-left:0.3461em;*margin-left:1.15em;}
.yui-t3 .yui-b{float:left;width:23.0769em;*width:22.50em;}
.yui-t3 #yui-main .yui-b{margin-left:24.0769em;*margin-left:23.62em;}
.yui-t4 .yui-b{float:right;width:13.8456em;*width:13.50em;}
.yui-t4 #yui-main .yui-b{margin-right:14.8456em;*margin-right:14.55em;}
.yui-t5 .yui-b{float:right;width:18.4615em;*width:18.00em;}
.yui-t5 #yui-main .yui-b{margin-right:19.4615em;*margin-right:19.125em;}
.yui-t6 .yui-b{float:right;width:23.0769em;*width:22.50em;}
.yui-t6 #yui-main .yui-b{margin-right:24.0769em;*margin-right:23.62em;}
.yui-t7 #yui-main .yui-b{display:block;margin:0 0 1em 0;}
#yui-main .yui-b{float:none;width:auto;}
.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{float:left;}
.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc .yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u{float:right;}
.yui-g div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first,.yui-ge div.first,.yui-gf div.first,.yui-g .yui-gc div.first,.yui-g .yui-ge div.first,.yui-gc div.first div.first{float:left;}
.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf{width:49.1%;}
.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{width:32%;margin-left:1.99%;}
.yui-gb .yui-u{*margin-left:1.9%;*width:31.9%;}
.yui-gc div.first,.yui-gd .yui-u{width:66%;}
.yui-gd div.first{width:32%;}
.yui-ge div.first,.yui-gf .yui-u{width:74.2%;}
.yui-ge .yui-u,.yui-gf div.first{width:24%;}
.yui-g .yui-gb div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first{margin-left:0;}
.yui-g .yui-g .yui-u,.yui-gb .yui-g .yui-u,.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u,.yui-ge .yui-g .yui-u,.yui-gf .yui-g .yui-u{width:49%;*width:48.1%;*margin-left:0;}
.yui-g .yui-gb div.first,.yui-gb .yui-gb div.first{*margin-right:0;*width:32%;_width:31.7%;}
.yui-g .yui-gc div.first,.yui-gd .yui-g{width:66%;}
.yui-gb .yui-g div.first{*margin-right:4%;_margin-right:1.3%;}
.yui-gb .yui-gc div.first,.yui-gb .yui-gd div.first{*margin-right:0;}
.yui-gb .yui-gb .yui-u,.yui-gb .yui-gc .yui-u{*margin-left:1.8%;_margin-left:4%;}
.yui-g .yui-gb .yui-u{_margin-left:1.0%;}
.yui-gb .yui-gd .yui-u{*width:66%;_width:61.2%;}
.yui-gb .yui-gd div.first{*width:31%;_width:29.5%;}
.yui-g .yui-gc .yui-u,.yui-gb .yui-gc .yui-u{width:32%;_float:right;margin-right:0;_margin-left:0;}
.yui-gb .yui-gc div.first{width:66%;*float:left;*margin-left:0;}
.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf .yui-u{margin:0;}
.yui-gb .yui-gb .yui-u{_margin-left:.7%;}
.yui-gb .yui-g div.first,.yui-gb .yui-gb div.first{*margin-left:0;}
.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u{*width:48.1%;*margin-left:0;}
s .yui-gb .yui-gd div.first{width:32%;}
.yui-g .yui-gd div.first{_width:29.9%;}
.yui-ge .yui-g{width:24%;}
.yui-gf .yui-g{width:74.2%;}
.yui-gb .yui-ge div.yui-u,.yui-gb .yui-gf div.yui-u{float:right;}
.yui-gb .yui-ge div.first,.yui-gb .yui-gf div.first{float:left;}
.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf div.first{*width:24%;_width:20%;}
.yui-gb .yui-ge div.first,.yui-gb .yui-gf .yui-u{*width:73.5%;_width:65.5%;}
.yui-ge div.first .yui-gd .yui-u{width:65%;}
.yui-ge div.first .yui-gd div.first{width:32%;}
#bd:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
#bd,.yui-g,.yui-gb,.yui-gc,.yui-gd,.yui-ge,.yui-gf{zoom:1;}

e questo è il secondo:

codice:

.testo {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#000;
	line-height:12px;
	text-align:left;
}
.testoGrassetto {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	color:#000;
	line-height:12px;
	text-align:left;
}
#container {
	text-align:center;
	background-color:#333;
	width:100%;
}
#recapiti {
	float:left;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:5px;
    padding-right:5px;
	width:13.8461em;
	/*width:30%*/
    color:#000;
	margin-left:0.9em;
    background-color: #f8f8f8;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=60);
   opacity:0.6;
}
#contenutiFissi {
	width:100%;
	background-color:#ff6600;
}
#fissoInfotrading {
	float:left;
	padding-left:1.1461em;*/
}
#infotradingDescr {
	background-color:#f8f8f8;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=60);
    opacity:0.6;
    color:#000;
	width:58.4169em;
	padding-left:5px;
	padding-right:5px;
	padding-bottom:10px;
	padding-top:5px;
    border-right: 2px solid #a6080e;
	border-left: 2px solid #a6080e;
	border-bottom: 2px solid #a6080e;
}
.headerTabelle {
	background-image:url(../immagini/headerFinestre.jpg);
	background-position:left;
	background-repeat:repeat-x;
	height:auto;
	width:58.7169em;
	color:#FFF;
	padding-left:5px;
	padding-right:5px;
	font-weight:bold;
}
#hd {
    background-image: url(sprite.png);
    background-position: 0 -1300px;
    color: #fff;
    padding: 1em;
	width: 100%;
}
#hd h1 {
    font-size: 116%;
    font-weight: bold;
    color: #000;
}
#ft {
	padding-left:5px;
	padding-top:10px;
	padding-bottom:10px;
	position:fixed;
	bottom: 0;
	width: 100%;
    font-size: 85%;
    font-style: italic;
	color:#000;
    background-color: #f8f8f8;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=60);
    opacity:0.6;
}
#play {
    margin-top: .75em;
    zoom: 1;
}
#play:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;}

#feeds {
	background-color: #f8f8f8;
    margin-top: .75em;
    border: 2px solid #a6080e;
    min-height: 300px;
    *height: 300px;
    padding: .5em;
    position: relative;
}
#feeds ul li {
	background-image:url(../immagini/iconaTrascinamento.jpg);
    background-repeat: no-repeat;
    background-color: #f8f8f8;
    padding-left: 30px;
	height:20px;
    margin-top: 5px;
    cursor: move;
    /*zoom: 1;*/
}
#feeds ul li.disabled {
    opacity: .5;
    filter: alpha(opacity=50);
    cursor: default;
}

ul.list {
    border: 1px dashed #ccc;
	margin-left: 1px;
    margin: .5em;
    /*width: 325px;*//*Larghezza originaria*/
	width:37em;
    float: left;
    min-height: 300px;
    *height: 300px;
    zoom: 1;
	margin-top:10px;

}

.yui3-dd-proxy {
    text-align: left;
    padding-left: 20px;
    padding: 5px;
    margin: 2px;
}

.yui3-dd-proxy li, #play li {
    padding-left: 20px;
    padding: 5px;
    margin: 2px;
}

#play li.moving {
    background-color: #D1E6EC;
    border: 1px solid #7EA6B2;
}

div.mod {
    position: relative;
    border: 1px solid #808080;
    background-color: white;
    zoom: 1;
}
div.mod div.inner {
    overflow: hidden;
    zoom: 1;
}
div.mod div.inner div.loading {
    background-image: url(progress.gif);
    background-repeat: no-repeat;
    background-position: 5px 5px;
    padding: 5px 5px 5px 25px;

}
#play div.mod div.inner ul li {
    padding-left: 20px;
}
div.mod div.inner ul li a {
    color: #000;
}
div.mod h2 {
    position: relative;
    zoom: 1;
    margin: 0;
    border-bottom: 1px solid #808080;
    cursor: move;
    padding: 3px;
    color: #ffffff;
    /*background-image: url(sprite.png);*/
	background-image:url(../immagini/headerFinestre.jpg);
    /*background-position: 0 -1300px;*/
    zoom: 1;
}

div.mod h2 strong {
    font-weight: bold;
    /*background-image: url(http://l.yimg.com/a/i/tb/iconsgif/rss_1.gif);*/
    background-repeat: no-repeat;
    padding-left: 3px;
}

div.minned h2 {
    border-bottom: 1px solid #ccc;
}

div.mod h2 a.close, div.mod h2 a.min {
    background-color: #ccc;
    background-image: url(layout_sprite.png);
    background-position: -20px -100px;
    border:1px solid #808080;
    display: block;
    height: 13px;
    width: 17px;
    text-decoration: none;
    font-weight: bold;
    color: black;
    right: 4px;
    top: 1px;
    position: absolute;
    font-size: 80%;
    margin: 2px;
    padding: 0;
}
div.mod h2 a.min {
    background:transparent url(layout_sprite.png) no-repeat scroll -20px -220px;
    right: 25px;
}
div.minned h2 a.min {
    background:transparent url(layout_sprite.png) no-repeat scroll -20px -260px;
    right: 25px;
}
div.mod h2 a:hover.close, div.mod h2 a:hover.min {
    border-color: #000;
}

**moonba** · 15-06-2011, 22:36

codice:

#container {
        margin:0 auto;
	text-align:center;
	background-color:#333;
	width:100%;
}

Discussione: Allineare al centro layout. Suggerimenti

Strumenti discussione

Ricerca discussione

Visualizza

Allineare al centro layout. Suggerimenti

Permessi di invio