[html, css] centrare body in percentuale

**emnlmn** · 13-11-2008, 15:37

ehm, senza vedere il codice non posso esserne certo, ma se stai usando il posizionamento assoluto assicurati che il div che stai posizionando sia all'interno di un div a sua volta posizionato in modo non statico, altrimenti accade che le coordinate fanno riferimento all'intera pagina del browser (per l'esattezza al tag <html>), con la chiara conseguenza che se ridimensioni la finestra il corpo del documento si sposta (grazie ai margini che hai impostato) mentre html no e assieme a lui anche le immagini.

comunque posta il codice così vediamo meglio come risolvere

**lila89** · 13-11-2008, 16:23

ho risolto, (almeno una parte..) in quanto ora il div è appoaso.. al posto di farlo sovrapporre ho accordiato gli altri e messo lateralmente con le proprietà "float" e margin 0px;...

il problema è che ora x la risoluzione tutto ok.. ma tra i due div affiancati c'è uno spazio bianco che non riesco a togliere.. praticamente c'è il div1 spazio bianco div 2.. ed ho già impostato il margine destro di div1 a 0 e quello sinistro di div2 a 0...

come posso fare per togliere quello spazio?

ps il codice è un pò tantito xkè c'è il css..ma se serve lo posto..

**lila89** · 13-11-2008, 16:26

il file .css

codice:

body, html
{
	font-family: Verdana;
	width: 1030px;
	margin:auto;
	margin-top: 5px;
	margin-left: 0px;
	padding: 0;
	margin:0 auto 0 auto;

}



.contenitore
{
	width: 991px;
	border: 1px solid #4295D1;
	height: 318px;
	margin-bottom: 0px;
	margin-left: 10px;
}

.cont1
{
	width: 240px;
	height: 307px;
	border: 1px solid #4295D1;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 2px;
	float: left;
	background: #D9E9F5;
}

.cont2
{
	width: 240px;
	height: 150px;
	margin-left: 5px;
	margin-right: 0px;
	border: 1px solid #4295D1;
	float: left;
	margin-bottom: 0px;
	margin-top: 5px;
	background: #D9E9F5;
}

.cont2gr
{
	width: 240px;
	height: 150px;
	margin-left: 5px;
	margin-right: 0px;
	border: 1px solid #4295D1;
	float: left;
	margin-bottom: 0px;
	margin-top: 5px;
	background: #F0F0F0;
}

.contdati
{
	height: 135px;
	width: 490px;
	border: 1px solid #B3B3B3;
	background: #F0F0F0;
	margin-top: 10px;
	float: left;
	margin-left: 5px;
}

.cont3
{
	width: 240px;
	height: 135px;
	margin-left: 5px;
	margin-right: 0px;
	border: 1px solid #B3B3B3;
	background: #F0F0F0;
	float: left;
	margin-bottom: 0px;
	margin-top: 10px;
}


.testata
{
	width: 100%;
}
.logo1
{
	margin-top: 0px;
	float: left;
	margin-right:0px;
}

.logo2
{
	margin-left:0px;
	width:300px;
	border-top: 9px solid #4295D1;
	margin-top:8px;
	float:right;

}
.immagini2
{
	float: right;
	text-decoration: none;
	border: 0px;
	margin-left:0px;
	margin-right:0px;
}
img
{
	border: 0;
}
.cerca
{
	width: 668px;
	margin-right:0px;
	background: #4295D1;
	margin-top: 8px;
	height: 32px;

}
.menu
{
	margin-top: 4px;
	margin-bottom: 20px;
	height: 15px;
	padding-right: 9px;
	text-decoration: none;
	font-size: 11px;
	padding-top: 2px;
	padding-left: 10px;
	color: #002442;
	border-right: 1px solid #C0C0C0;
}

.menuattivo
{
	margin-top: 4px;
	font-weight: bold;
	margin-bottom: 20px;
	height: 15px;
	padding-right: 9px;
	text-decoration: none;
	font-size: 11px;
	padding-top: 2px;
	padding-left: 10px;
	color: #002442;
	border-right: 1px solid #C0C0C0;
}

.menuc
{
	margin-top: 4px;
	margin-bottom: 20px;
	height: 15px;
	padding-right: 9px;
	font-size: 11px;
	padding-top: 2px;
	padding-left: 10px;
	width:645px;
	margin-right:0px;
}


.sottotitolo
{
	font-size: 12px;
	color: #999999;
	font-weight: bold;
	margin-bottom: 0px;
	margin-top: 0px;
	padding-left: 5px;
	width: 359px;
	float: left;
}

.testo
{
	font-size: 10px;
	color: #000000;
	padding-left: 5px;
}
.testobold
{
	font-size: 9px;
	color: #000000;
	font-weight: bold;
	margin-right:0px;
}

.cercatesto
{
	font-size: 10px;
	padding: 3px;
	width: 410px;
	margin-left: 89px;
	margin-top: 5px;
	margin-right: 0px;
	float: left;
}
.button
{
	text-decoration: none;
	background-color: #FDFDFD;
	width: 85px;
	margin-left: 5px;
	margin-top: 5px;
	margin-bottom: 0px;
	height: 22px;
}

.buttonsearch
{
	font-size: 11px;
	font-weight: bold;
	color: #393939;
	text-decoration: none;
	background-color: #FDFDFD;
	padding-left: 20px;
	padding-top: 20px;
	margin-bottom: 0px;
}

.scheda1
{
	height: 27px;
	width: 248px;
	border-right: 1px solid #4295D1;
	border-left: 1px solid #4295D1;
	border-top: 1px solid #4295D1;
	margin-left: 5px;
	margin-top: 0px;
	float: left;
}

.schedab
{
	height: 18px;
	width: 186px;
	background: #F0F0F0;
	border-right: 1px solid #4295D1;
	border-top: 1px solid #4295D1;
	margin-left: 0px;
	margin-top: 9px;
	float: left;
}

.imgcont1
{
	margin-left: 4px;
	margin-top: 2px;
}

.scheda1cont
{
	color: #0C4F80;
	font-weight: bold;
	font-size: 10px;
	padding-left: 5px;
	padding-top: 5px;
}

.schedabcont
{
	color: #3A6F96;
	font-size: 10px;
	padding-left: 5px;
	padding-top: 5px;
	margin-bottom: 0px;
}

.titolonotizia1
{
	color: #002442;
	font-weight: bold;
	font-size: 11px;
	margin-left: 4px;
	margin-top: 5px;
	margin-bottom: 0px;
}

.titolonotizia2
{
	color: #002442;
	font-weight: bold;
	font-size: 11px;
	padding-left: 140px;
	margin-top: 30px;
	margin-bottom: 30px;
}

.titolonotizia3
{
	color: #002442;
	font-weight: bold;
	font-size: 11px;
	padding-left: 140px;
	margin-top: 20px;
	margin-bottom: 30px;
}

.titolonotizia4
{
	color: #002442;
	font-weight: bold;
	font-size: 11px;
	padding-left: 140px;
	margin-top: 10px;
	margin-bottom: 30px;
}

.titolonotizia5
{
	color: #002442;
	font-weight: bold;
	font-size: 11px;
	padding-left: 140px;
	margin-top: 3px;
	margin-bottom: 30px;
}

.testonotizia
{
	color: #002442;
	font-size: 11px;
	margin-left: 4px;
}

.testonotizia2
{
	color: #002442;
	font-size: 12px;
	margin-left: 4px;
	text-decoration: underline;
}

.titolonotizia6
{
	color: #002442;
	font-weight: bold;
	font-size: 11px;
	padding-left: 140px;
	margin-top: 3px;
	margin-bottom: 50px;
}

.titolonotiziagrig
{
	color: #002442;
	font-weight: bold;
	font-size: 11px;
	padding-left: 5px;
	padding-bottom: 5px;
	margin-top: 3px;
	margin-bottom: 0px;
	border-bottom: 1px solid #C0C0C0;
	margin-left: 5px;
	margin-right: 5px;
}

.titolonotiziagrig2
{
	color: #002442;
	font-weight: bold;
	font-size: 11px;
	padding-left: 5px;
	margin-top: 3px;
	margin-bottom: 15px;
	border-bottom: 1px solid #C0C0C0;
	margin-left: 5px;
	margin-right: 5px;
	padding-bottom: 5px;
}
.imgcont2
{
	position: absolute;
	vertical-align: text-top;
	float: left;
	margin-left: 4px;
	margin-top: 2px;

}

.elenco1a
{
	color: #002442;
	padding-left: 30px;
	margin-bottom: 0px;
	margin-top: 3px;
	font-weight: bold;
	font-size: 11px;
	text-decoration: underline;
}

.elenco1b
{
	color: #002442;
	padding-left: 30px;
	margin-bottom: 0px;
	margin-top: 3px;
	font-size: 11px;
	text-decoration: underline;
}

.accedi
{
	color: #002442;
	float: right;
	font-size: 12px;
	text-decoration: underline;
	margin-top: 20px;
}

.accedi2
{
	color: #002442;
	float: right;
	font-size: 12px;
	text-decoration: underline;
	margin-top: 25px;
}

.elenco2
{
	color: #002442;
	font-size: 12px;
	padding-left: 30px;
	text-decoration: underline;
	margin-bottom: 0px;
	margin-top: 0px;
}

.contgrsm1
{
	height: 95px;
	width: 235px;
	margin-left: 5px;
	border-right: 1px solid #C0C0C0;
	margin-top: 8px;
	float: left;
}

.contgrsm2
{
	height: 95px;
	width: 235px;
	margin-right: 5px;
	margin-top: 8px;
	margin-left: 0px;
	margin-bottom: 0px;
}

.dati
{
	color: #002442;
	font-size: 11px;
	padding-top: 5px;
	font-weight: bold;
	margin-bottom: 0px;
}

.sinistra
{
	color: #002442;
	font-size: 11px;
	margin-top: 5px;
	float: left;
}

.sinistra2
{
	color: #002442;
	font-weight: bold;
	padding-left: 5px;
	font-size: 11px;
	margin-top: 5px;
	text-decoration: underline;
	width: 150px;
	float: left;
}

.sinistra1
{
	color: #002442;
	font-weight: bold;
	font-size: 11px;
	margin-top: 5px;
	float: left;
}


.destra
{
	color: #002442;
	font-size: 11px;
	margin-top: 5px;
	float: right;
	padding-right: 5px;
	margin-bottom: 0px;
}

.vertdx
{
	height: 85px;
	width: 5px;
	float: right;
	padding-right: 5px;
	margin-bottom: 0px;
	margin-top: 5px;
}

.sx2
{
	color: #002442;
	font-weight: bold;
	font-size: 11px;
	margin-top: 5px;
	text-decoration: underline;
	width: 150px;
	float: left;
}

.vertdx2
{
	height: 50px;
	width: 5px;
	float: right;
	padding-right: 5px;
	margin-bottom: 0px;
	margin-top: 0px;
}

e il file html (solo parte interessata..)

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "DTD/html1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<head>
    <title>Portale Unico Mediolanum</title>
    <link rel="stylesheet" type="text/css" href="home.css" />
</head>
<body>
    <div class="testata">
        [img]images/logo.JPG[/img]
        <div class="immagini2">
            <a href="#">
                [img]images/relcli.JPG[/img]</a>
            <a href="#">
                [img]images/gestatt.JPG[/img]</a> <a href="#">
                    [img]images/rete.JPG[/img]</a> <a href="#">
                        [img]images/outlook.JPG[/img]</a>
        </div>
        <p class="sottotitolo">
            PORTAFOGLIO - INTRANET - TV AZIENDALE - MCU
        </p>
        <p style="width: 359px;">
            <a class="testo">Il portale di</a> <a class="testobold">Mario Rossi</a></p>
    </div>
   <div class="logo2">
        [img]images/mediolanum.JPG[/img]</div>
    <div class="cerca">
        <a>
            <input type="text" title="ricerca" class="cercatesto" /></a><div class="button">
                CERCA</div>
    </div>
    <div class="menuc">
        Home Cataloghi Prodotti
        Normnative Circolari e Comunicazioni
        Attività e carriera Supporto
    </div>

**ricman** · 13-11-2008, 17:18

Quando dicevo...

Originariamente inviato da ricman
Posta il pezzettino di codice incriminato o il link al sito..

...non era chiara la parola PEZZETTINO?

**graffithouse** · 14-11-2008, 13:46

cosa sto sbagliando?

codice:

css 

body{      
background-color:#000;      
margin:10px;    
}        

#contenitore{  	
height:100%;  	
background-image:url(bg.png);  	
background-aling:left top;  	
background-repeat:no-repeat;  	
background-attachment: fixed;  	
background-position: left top;  	
background-color: #2F2F2F;  	
margin:0 auto;  	  
}    
#corpo{
height:550px;
width:700px;  	
background-color:#f3f3f3;  	
margin: auto;  	
border:1px solid #000;  
}

codice:

html 

<!doctype> 
<html>  
<head>  
<title> </title>
  <link href="stile.css" rel="stylesheet" type="text/css" />  
</head>
  <body>  
<div id="contenitore">
  <div id="corpo">
</div>    
</div>  
</body>
  </html>

non mi allinea al centro il div con id corpo

**emnlmn** · 14-11-2008, 14:29

quel codice funziona... a me

**graffithouse** · 14-11-2008, 14:42

Originariamente inviato da emnlmn
quel codice funziona... a me

a me il div e spostato in alto in alto

**ricman** · 15-11-2008, 03:03

Ma vuoi centrare in orizzontale?
Prova a dare le misure a chi non le ha...

**graffithouse** · 15-11-2008, 16:34

Originariamente inviato da ricman
Ma vuoi centrare in orizzontale?
Prova a dare le misure a chi non le ha...

no, devo centrarlo in verticale

**graffithouse** · 17-11-2008, 11:26

scusate, ma per un allineamento verticale dei div (in modo che rimanda sempre al centro)
devo perforsa usare una tabella con valing?

o c'e un metodo migliore?

Discussione: [html, css] centrare body in percentuale

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio