centrare sito con div

asevenx

Utente Attivo
7 Nov 2009
312
0
16
Salve, dovrei centrare il mio sito strutturato in questo modo
HTML:
<div id="container">
   
    <div id="header">
        <div class="logo"><img src="images/logo-mini.png" alt="" /></div>
        <div class="navigation">...</div>
        <div class="clear"></div>    
    </div>
     
    <div id="main">
        <div class="page">      
            <div class="title">...</div>
            <div class="text">…</div>
        </div>
        <div class="gallery">
            <div class="sample3">...</div>
	    <div class="clear"></div>
        </div>
    </div>	
 
    <div id="footer">footer</div>

</div>	
</body>
Nel CSS ho provato a impostare margin:0 auto; nel body ma non basta. Cosa altro posso fare?
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
io uso questo metodo, nel css
HTML:
#container{
	/*per centrarlo orizzontalmente*/
	width:1000px;/* o altra misura*/
	height:auto;
	position: absolute;
	left: 50%;
	margin-left: -500px;/* META DELLA LARGHEZZA*/
	height:600 px;
	top:50%;
	margin-top:-300px;
	/* se vuoi centrarlo anche verticalmente aggiungi es
	height:600 px;
	top:50%;
	margin-top:-300px;
	*/
	/*e altri parametri che ti servono*/
}
 

asevenx

Utente Attivo
7 Nov 2009
312
0
16
Ti ringrazio per la risposta. Adesso mi centra il sito, però se aumento lo zoom dello schermo la parte sinistra viene nascosta, e questo succede anche se visualizzo il sito da smartphone. C'è un modo per rimediare?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, io di solito faccio così
Codice:
<style>
    html body {
        text-align: center
    }
    div#container {
        width: 1000px;
        margin: auto;
    }
</style>
Il primo comando per internet explorer che non capisce la proprietà margin
il secondo per tutti gli altri
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
sono riuscito a centrarlo in orizzontale e dovrebbe adattarsi alla risoluzione dello schermo, prova.
per verticale non ci sono riuscito, andando per tentativi (sul mio schermo) si centra dando altezza 97%
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset= utf-8">
<title>Documento senza titolo</title>
<style type="text/css">
#container{
	/*per centrarlo orizzontalmente*/
	width:80%;/* o altra misura*/
	height:97%;
	position: absolute;
	left: 50%;
	margin-left: -40%;/*metà larghezza*/
	margin-top: auto;
	background-color:#999900;
}
</style>
</head>

<body>
<div id="container">nel mezzo di ecc....</div>
</body>
</html>
 

asevenx

Utente Attivo
7 Nov 2009
312
0
16
scusate, sto notato un altro problema. Nel div gallery (al posto di <div class="sample3">...</div>) ho inserito uno script per visualizzare delle immagini con una galleria a scorrimento. Questa galleria però se aumento lo zoom dello schermo (e se visualizzo con smartphone) esce fuori dal div che dovrebbe contenerlo.

Provo a postarvi i codici nella speranza che possiate aiutarmi.

HTML:
<div class="container demo-3">

     <div class="image-preview">
          <img id="preview" src="photo/normal/risto-1.png" />
     </div>
					
     <!-- Carousel -->
     <ul id="carousel" class="elastislide-list">
          <li data-preview="photo/normal/risto-1.png"><a href="#"><img src="photo/preview/risto-1.jpg" alt="image01" /></a></li>
          <li data-preview="photo/normal/risto-2.png"><a href="#"><img src="photo/preview/risto-2.jpg" alt="image02" /></a></li>
          <li data-preview="photo/normal/risto-3.png"><a href="#"><img src="photo/preview/risto-3.jpg" alt="image03" /></a></li>
          <li data-preview="photo/normal/risto-4.png"><a href="#"><img src="photo/preview/risto-4.jpg" alt="image04" /></a></li>
          <li data-preview="photo/normal/risto-5.png"><a href="#"><img src="photo/preview/risto-5.jpg" alt="image05" /></a></li>
     </ul>
     <!-- End Carousel -->

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
     <script type="text/javascript" src="js/jquerypp.custom.js"></script>
     <script type="text/javascript" src="js/jquery.elastislide.js"></script>
     <script type="text/javascript">
          // codice dello script
     </script>
</div>

I fogli di stile sono i seguenti (riporto parte degli stili presenti, non so se serve altro)
HTML:
.container {
	max-width: 522px;
	position:absolute;
	padding-left:550px;
}

body{
	margin:0;
        text-align: center	
}

#header, #main, #footer{
	width:100%;
	max-width:1152px;
}

#container{
	max-width:1152px;
	width:100%;
        margin: auto;
	/*left: 50%;
	margin-left: -576px;/* META DELLA LARGHEZZA*/
}

.title{
	font-family: 'Lucida Calligraphy';
	font-size:1.50em;
	font-weight:normal;
	color:#f7f2e9;
	padding-bottom:5px;	
}

.text{
	font-family:'Souvenir Lt BT Light Italic';
	font-size:1.08em;
	font-weight:normal;
	height:500px;
	color:#f7f2e9;
	overflow:auto;			
}

.gallery{
	width:60%;
}
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
M Centrare un sito con tutti i browser HTML e CSS 22
asevenx problema per centrare sito HTML e CSS 5
C centrare pagine sito HTML e CSS 17
Shyson Centrare box css HTML e CSS 2
M [PHP] [HTML] Centrare in verticale un pulsante in una tabella PHP 3
Andrea_Ventura [HTML] Problema centrare elemento orizzontalmente HTML e CSS 9
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
F [HTML] Centrare testo rispetto l'immagine HTML e CSS 1
elpirata [HTML] Non riesco a centrare menu orizzontale HTML e CSS 5
L Problema per centrare titolo PopUp HTML e CSS 5
A centrare iframe con div HTML e CSS 2
ecosito Google Maps: Centrare il marker ed editare il fumetto PHP 1
LuigiDonato Centrare Tabella HTML e CSS 10
N Centrare il testo verticalmente in una div. HTML e CSS 2
R Centrare un DIV per renderlo visibile su qualsiasi monitor HTML e CSS 12
F Centrare slider div HTML e CSS 1
A centrare la pagina con Js Javascript 1
R Come centrare il testo in un paragrafo con sfondo colorato? HTML e CSS 2
L Centrare galleria immagine HTML e CSS 2
Z centrare verticalmente il testo di un button HTML e CSS 1
Marcolotto Centrare un testo (orizzontalmente e verticalmente) in una TextView Android Sviluppo app per Android 1
E Centrare finestra popup Javascript 7
A centrare una tabella HTML e CSS 3
W Centrare immagine con Bootstrap [era: Centrare div con bootstrap] HTML e CSS 2
V centrare un layout a qualunque risoluzione HTML e CSS 3
M Centrare un DIV nel BODY (usando i CSS) HTML e CSS 1
I Centrare un layout al centro della pagina HTML e CSS 8
Nyl Centrare pagina HTML e CSS 7
D Centrare del testo all'interno di un DIV ? HTML e CSS 3
D Centrare menù HTML e CSS 2
Oscar83 Si possono centrare automaticamente i CSS?? HTML e CSS 2
N Non riesco a centrare l'immagine di sfondo Webdesign e Grafica 9
D Centrare Un Pulsante Webdesign e Grafica 12
D Centrare IMG tramite action script Flash 2
simoncino Centrare pagine con Dreamweaver Webdesign e Grafica 1
M Centrare un logo in tutte le risoluzioni.... HTML e CSS 4
nourdine centrare verticalmente un div HTML e CSS 1
F Centrare la pagina HTML e CSS 8
glm2006ITALY Guida Il proprio sito WordPress è professionale? WordPress 0
shelbystudio cliente moroso: posso disattivare email e sito in attesa del pagamento? Leggi, Normative e Fisco 3
R Messaggio apertura sito WordPress 4
E Benvenuti sul Nuovo Sito: Explore Como Lake! Presenta il tuo Sito 0
R Aiuto ripristino sito web Presentati al Forum 0
A Vendo sito web news economia, finanza, immobiliare online da pochi mesi Compravendita siti e domini 0
D [COMPRO/CERCO] GUEST POST o scambio link per sito di Spiritualità ed Esoterismo. Vendere e Acquistare pubblicita' online 0
M Vendo il mio sito web teknosurfng.com, che trasmette nel campo della tecnologia Compravendita siti e domini 0
G Perché il mio sito su Google news fa vedere le immagini degli articoli la mia foto profilo? WordPress 1
D protezione cartelle: blocco visualizzazione/scaricamento contenuto, ma abilitazione utilizzo dati da parte di file .php presenti sul sito Web Server 1
M Analisi sito per pulire codice inutile HTML e CSS 1
C iscrizioni malevole su sito off-line WordPress 6

Discussioni simili