spazio tra le tabelle

[kety]

salve a tutti..premesso che ho guardato nei titoli dei post fino adesso e mi è venuto il mal di testa mi aiutate?
ho un un problema da risolvere..

lo spazio tra la colonna centrale e quella laterale è troppo grande..vorrei ridurla e mettere un'altra colonna a destra..come posso fare x ridurla?

ecco l'esempio:

http://img517.imageshack.us/img517/9...magine7jq7.gif

[digital00]

posta il codice..come facciamo a rispondere con solo lo screenshot tra le mani?

[kety]

Scusa hai ragione..ecco il codice:

body{
	font-family: Trebuchet MS, Georgia, Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: white;
	margin: 0;
	width: 100%;
	padding: 0;
	background: #292929;
	text-align: center;
}
img{border: 0;}
.clear{clear: both;}

#header{
	margin: 0 auto;
	width: 902px;
	height: 300px;
	background: #292929 url(images/header_bg_natale.gif) no-repeat;
	text-align: left;
}

#header h1{
	padding: 65px 0 0 25px;
	font-weight: normal;
	font-size: 14px;
	margin: 0;
}
#header h4{
	padding: 0 0 0 25px;
	font-weight: normal;
	font-size: 12px;
	color: black;
	margin: 0;
}
#header a:link, #header a:visited, #header a:active, #header a:hover{
	color: white;
	text-decoration: none;
}
#header a:hover{ color: black;}

#menu{
	margin: 0 auto;
	padding: 5px 0 4px 0;
	width: 900px;
	background: #808080 url repeat-x;
}
#menu ul{
	padding: 0;
	margin: 0;
	float: left;
	width: 902px;
	height: 25px;
	border: 1px solid #0099ff;
	overflow: hidden;
}
#menu ul li{
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	list-style: none;
	padding: 4px 12px;
	margin: 0 0 0 20px;
	color: #0099ff;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	background: url(images/mi_bullet.gif) no-repeat left center;
	float: left;
}

#menu a:link, #menu a:visited, #menu a:active, #menu a:hover{
	font-weight: bold;
	color: white;
	text-decoration: none;
}
#menu a:hover{text-decoration: underline;}

.search{
	float: right;
	width: 310px;
/*	border: 1px solid blue;*/
}
.search_form{
	margin: 0;
	padding: 0 0 0 40px;
}
.search_form input{
	vertical-align: middle;
	margin: 0 10px;
	padding: 0;
}

#content{
	margin: 0 auto;
	width: 902px;
	background: #292929;
	text-align: left;
}

/* colonna di sinistra */

.left{
	float: left;
	width: 180px;
	background: #292929;
	padding: 5px;
	border: 1px dashed #0099ff;
}
.left .lpadding{
	margin: 0;
}
.left .title{background: #292929; padding: 3px 5px 3px 20px; border: 1px solid #0099ff;}
.left h1{
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: normal;
	text-transform: uppercase;
	color: white;
}
.left ul li{
	list-style: none;
	padding: 2px 5px 2px 15px;
	margin: 0;
	background: url(images/mi_bullet.gif) no-repeat 3px 7px;
	font-size: 12px;
}
.left ul{
	padding: 2px;
	margin: 10px;
}

.left a:link, .left a:visited, .left a:active, .left a:hover{
	color: #0099ff;
	text-decoration: none;
}
.left a:hover{ text-decoration: underline;
}

/* colonna di destra */

.right{
	float: right;
	width: 180px;
	background: #292929;
	padding: 5px;
	border: 1px dashed #0099ff;
}
.right .lpadding{
	margin: 0;
}
.right .title{background: #121212; padding: 3px 5px 3px 20px;}
.right h1{
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: normal;
	text-transform: uppercase;
	color: white;
}
.right ul li{
	list-style: none;
	padding: 2px 5px 2px 15px;
	margin: 0;
	background: url(images/mi_bullet.gif) no-repeat 3px 7px;
	font-size: 12px;
}
.right ul{
	padding: 2px;
	margin: 10px;
}

.right a:link, .right a:visited, .right a:active, .right a:hover{
	color: #0099ff;
	text-decoration: none;
}
.right a:hover{ text-decoration: underline;}

/* colonna di centro */
.center{
	float: right;
	padding: 5px 0 5px 11px;
	width: 460px;
	background: #292929;
	padding: 5px 11px;
	border: 1px dashed #0099ff;
}

.title{
	background: 
	padding: 5px;
}
.center h1{
	padding: 0;
	margin: 0;
	font-weight: bold;
	font-size: 18px;
	text-transform: uppercase;
	background: url(images/animazione.gif) no-repeat;
}
.center h1 a:link, .center h1 a:visited, .center h1 a:active, .center h1 a:hover{
	color: white;
	text-decoration: none;
}
.center h1 a:hover{ text-decoration: underline;}

.center h4{
	padding: 0;
	margin: 0;
	font-weight: normal;
	font-size: 12px;
	color: white;
	background: #121212;
}
.center .post{background: #292929; padding: 5px 10px; margin: 1px 0;}
.center .title h1{ width: 350px; float: left;}
.center .title h4{ width: 110px; float: right; text-align: right; padding 0;}
.center p{margin: 5px;}

.center a:link, .center a:visited, .center a:active, .center a:hover{
	color: #FF01AF;
	text-decoration: underline;
}
.center a:hover{text-decoration: none;}

.tags, .permalink{
	text-align: left;
	margin: 0 0 1px 0;
	padding: 3px 5px;
	color: #E8D3DF;
	font-size: 12px;
	background: #404040;
}
.tags a:link, .tags a:visited, .tags a:active, .tags a:hover{
	color: #E8D3DF;
	text-decoration: underline;
}
.tags a:hover{text-decoration: none;}
.permalink{
	margin: 0 0 5px 0;
	color: #E8D3DF;
	text-align: right;
	background: #404040;
}
.permalink a:link, .permalink a:visited, .permalink a:active, .permalink a:hover{
	color: #E8D3DF;
	text-decoration: underline;
}
.permalink a:hover{text-decoration: none;}
#footer{
	font-family: Tahoma, Arial, Helvetica, Georgia, Verdana, sans-serif;
	font-weight: normal;
	text-align: center;
	color: #0099ff;
	margin: 0 auto;
	width: 902px;
	font-size: 11px;
	background: #808080;
	height: 100px;
}

#footer p{
	padding: 20px 0 0 200px ;
	margin: 0;
}
#footer a:link, #footer a:visited, #footer a:active, #footer a:hover{
	font-weight: bold;
	color: #FEFAFC;
	text-decoration: underline;
}
#footer a:hover{text-decoration: none;}

#footer a.sec:link, #footer a.sec:visited, #footer a.sec:active, #footer a.sec:hover{
	color: #1E1E1E;
	font-weight: bold;
	text-decoration: underline;
}
#footer a.sec:hover{text-decoration: none;}

h2 {
	font-weight: normal;
	font-size: 18px;
}

h3 {
	font-weight: normal;
	font-size: 16px;
}

#commentform #author, #commentform #email, #commentform #url, #commentform textarea {
	background: #292929;
	border: 1px solid #0099ff;
	padding: .2em;
}

[digital00]

Sarebbe stato più consono che tu postassi la parte interessata di Css e relativa parte di Html, non tutto il foglio di stile senza html.. comunque, da quello che vedo, basta che aumenti la width di .center

[kety]

non credo,se l'aumento non ci sta l'altra colonna,che comunque si vede in fondo insieme al footer...mentre dovrebbeero essere allineate....

[digital00]

E' tutto sbagliato kety.
Se vuoi allineare tre div orizzontalmente devi dare float: left a tutti e tre, e contenerli in un div padre che abbia come larghezza la somma dei tre div figli. Così:

#container {
  width: 800px;
}
#sinistra {
  float: left;
  width: 200px;
}
#centro {
  float: left;
  width: 400px;
}
#destra {
  float: left;
  width: 200px;
}

<div id="container">
  <div id="sinistra"></div>
  <div id="centro"></div>
  <div id="destra"></div>
</div>

Un altra cosa, puliscilo un po' questo foglio di stile: non richiamare due volte l'attributo padding in .center ; non lasciare background: vuoto in .title ; e le classi usale soltanto quando hai bisogno di ripetere un elemento. Per le colonne e tutti gli elementi unici usa gli id.

Ciao!

[kety]

grazie mille...ci sono guasi riuscita

devo ripulire un pò il codice è vero..ma per ora mi interessa mettere a posto il blog..
dicevo quasi riuscita perchè ora le tabelle sono al posto giusto...ma mentre quella sinistra e quella destra sono in alto sotto al logo,quella destra è giù in basso appena sopra al footer..quale parte del codice devo modificare??

[digital00]

Quando uno dei div va a capo significa che la somma delle larghezze dei tre div supera lo spazio concesso dentro #container.
Ti consiglio semplicemente di diminuire di qualche pixel la larghezza. Ah, e calcola che se a un div dai width: 200px e margin: 5px allora occuperà in totale 210px. Perchè 200 (larghezza) + 5(margin left) + 5(margin right) = 210 .

[kety]

mi dispiace non dipende nemmeno da quello...ho provato a rimpicciolire al massimo le tabelle..ma la tabella di sinistra è sempre sopra al footer