centrare sito con div

asevenx · 23 Apr 2014

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 · 23 Apr 2014

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 · 23 Apr 2014

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?

borgo italia · 23 Apr 2014

ciao
prova a dare le misure in %, io non ho mai provato comunque faccio una prova poi ti so dire

criric · 23 Apr 2014

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 · 23 Apr 2014

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 · 23 Apr 2014

Grazie mille

asevenx · 23 Apr 2014

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%;
}

Cerca

Cerca

centrare sito con div

asevenx

Utente Attivo

borgo italia

Super Moderatore

asevenx

Utente Attivo

borgo italia

Super Moderatore

criric

Super Moderatore

borgo italia

Super Moderatore

asevenx

Utente Attivo

asevenx

Utente Attivo

Discussioni simili