Visualizzazione risultati 1 fino 10 di 10

Discussione: allineamento centra pagina

  1. 17-03-2011, 12.56.57 #1
    Guest

    Predefinito allineamento centra pagina

    salve vorrei sapere se qualcuno di voi a qualche idea del perche il contenuto di questa pagina nn è centrato index
    Codice HTML:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta name="description" content="The Perfect 2 Column Liquid Layout (left menu): No CSS hacks. SEO friendly. iPhone compatible." />
	<meta name="keywords" content="The Perfect 2 Column Liquid Layout (left menu): No CSS hacks. SEO friendly. iPhone compatible." />
	<meta name="robots" content="index, follow" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" type="text/css" href="stile2.css" media="screen" />
<script type="text/javascript">
	  //<![CDATA[
    $(document).ready(function(){
			$("#nav-one li").hover(
				function(){ $("ul", this).fadeIn("fast"); }, 
				function() { } 
			);
	  	if (document.all) {
				$("#nav-one li").hoverClass ("sfHover");
			}
	  });
	     
		$.fn.hoverClass = function(c) {
			return this.each(function(){
				$(this).hover( 
					function() { $(this).addClass(c);  },
					function() { $(this).removeClass(c); }
				);
			});
		};
    //]]>	  
	</script>	

</head>
<body>
<div class="container leftmenu">
<!--inizio header-->
<div id="header">      

      <h1 class="header">Mago ciberio &amp; Clown Giro<br /></h1>
      <h2 class="header">Animazione feste di compleanni,<br /> sculture di palloncini,<br />baby disco, e molto altro...<br /></h2><h3 class="header">Nella regione Marche</h3> 
      <h3 class="contatore">Visite da gennaio 2009:&nbsp;1678<br />Visitatori on line:1</h3>

</div>
<!--fine header-->
<!--inizio nav-->
    <div >
        <ul id="nav-one" class="nav">			
          <li>								
          <a class="contattaci">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contattaci</a>
          <ul>					
            <li>
            <a class="hover" href="contatti.php">Contattarci</a>

            <a class="hover" href="commenti.php">Guestbook</a>
            </li>														
          </ul>			
          </li>			
          <li>				
          <a class="lavostrafesta">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;La vostra festa</a>		
          <ul>					
            <li>
            <a class="hover" href="magia.php">Magia</a>
            <a class="hover" href="sculture_palloncini.php">Palloncini</a>

            <a class="hover" href="giochi.php">Giochi</a>
            <a class="hover" href="bolle.php">Bolle</a>
            <a class="hover" href="invito.php">Inviti</a> 
            </li>					
				
          </ul>			
          </li>			
          <li>							
          <a class="home" href="index.php">&nbsp;&nbsp;&nbsp;Home</a>
          <ul>					
            <li>

            </li>					
				
          </ul>			
          </li>
        </ul>    
      </div>
<!--fine nav-->
<!--inizio container non cancellare-->

	<div class="colcommon">
		<div class="coldx">
			<!-- Column sx start -->

		
			<div id="index">
      <h2>Eccoli: il Mago Ciberio e il Clown Giro!</h2>
      <div style="text-align: center;"> 
      <img src="../immagini/noi.gif" height="320" 
      width="384" alt="noi" />       
      <p>I nostri due simpatici amici vi farranno vivere un pomeriggio 
         indimenticabile all'insegna del divertimento e dello stupore...<br />
         faranno divertire voi e i vostri bambini...<br /> 
         vi faranno conoscere il misterioso mondo della magia...<br />
         vi guideranno nel mondo del divertimento...<br />

         e allora cosa aspettate chiamateli.
      </p>
			<br /><br /><br />
      <!-- Column sx end -->
		</div>
		</div>
		</div>
		<div class="colsx">
			<!-- Column dx start -->

      
      <img src="immagini/bambini1.jpg" height="121" width="137" alt="Bambini che giocano(immagini da google)" />

<img src="immagini/bambini2.jpeg" height="121" width="137" alt="Bambini che giocano(immagini da google)"/>

<img src="immagini/bambini3.gif" height="121" width="137" alt="Bambini che giocano(immagini da google)"/>

<img src="immagini/bambini4.jpg" height="121" width="137" alt="Bambini che giocano(immagini da google)"/>
      </div>
     </div>
			<!-- Column dx end -->

<!--fine container-->
<!--inizio footer-->

<div id="footer">
<div class="destra_w3c">
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img src="/immagini/cssw3c.gif" alt="CSS Valido!" /></a>
  </div>

  <div class="sinistra_w3c">
    <a href="http://validator.w3.org/check?uri=referer">
      <img src="/immagini/w3cblue.png" alt="Valid XHTML 1.0 Strict" /></a>
  </div>

  <div class="piede">Mago Ciberio e Clown Giro<br />Animazione feste di compleanni, sculture di palloncini, baby disco, e molto altro...<br />+393490545720 334/7138225 ciberioegiro@yahoo.it
  </div>
  </div>
  </div>
<!--fine footer-->
</body>
</html>
  2. 17-03-2011, 12.57.30 #2
    Guest

    Predefinito

    Codice HTML:
    body {
	margin:0 auto;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;
	background:#fff;
	min-width:600px;    	/* Minimum width of layout - remove line if not required */
	font-size:90%;
  text-align: center;
}
/*header*/
#header {
  background-color: rgb(0,204,255);
	background-image: url(/immagini/header.jpg);
  background-repeat: no-repeat;
  background-position:center right;
  color: #ff0;                    
	padding-top:0.1em;
  clear:both;
	float:left;
	width:100%;
}
h1.header {
	color: #fff;
	font-size:1.5em;
  text-align:left;
  margin-left:1%;
  margin-top:1%;
}
h2.header {
	color: #fff;
	font-size:1em;
  text-align:left;
  margin-left:1%;
}
h3.header {
	color: #fff;
	font-size:1.1em;
  text-align:left;
  margin-left:1%;
}
/*stili scrittura*/
h1 {
	padding-left: 0.5em;
	font-size: 3em;
	margin: 0 0 0 0.5em;
	padding: 0;
}
h3.contatore{
font-size:1em;
text-align: left;
color: black;
padding:0;
margin: 0 0 0.1% 1%;
padding:0 0 1% 0 ;
}
h5 {
	color: #999;
	font-size: 0.3em;
	text-align: center;
	margin-bottom: 0.5em;
	margin: 0;
	padding: 0;
}
a {
 text-align: center;
}
/* column container */
.container {
  position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
	width:80%;			/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
  }
/* common column settings */
.colcommon {
  margin:0 auto;
  float:right;
	width:100%;
	position:relative;
  right:15%;			/* destra column width */
	background-color:rgb(240,96,255);
  border-right: 1px solid #999;	/* left column background colour */
}
.colsx,
.coldx {
  float:left;
	position:relative;
	padding:0 0 1em 0;
	overflow:hidden;
}
/*col dx */
.leftmenu .coldx {
	left:50%;			/* 100% plus left column left padding */
  padding:1em;
  background-color: #fff;
  width:45%;
  text-align:center;
}
#coldx h1 {
	text-align:center;
  padding-left: 0.5em;
	font-size: 2.5em;
	margin: 0 0 0 0.5em;
	padding: 0;
}
#coldx h2 {
	color: #999;
	font-size: 2em;
	text-align: center;
	color: rgb(127,64,224);
	padding-bottom: 0.1em;
}
#palloncini td{
padding: 8px ;
background-color:rgb(153,204,255);
}

#palloncini p{
  color:rgb(0,0,255);
  text-align:center;
  font-size:130%;
  border: 3px dashed rgb(153,255,51);
  padding:1px;
  margin:0;
  padding:0;
}
#palloncini h3 {
  font-size:2em;
  text-align: center;
}
#palloncini img{
  margin: 1px;
}
#palloncini table {
  margin:0 auto;
  margin-top:1em; 
  margin-bottom:1em;
}
#index p {
	text-align:center;
  font-weight: bold;
  font-size:1.2em;
  margin-bottom:2em;
}
 table.formatgiochi{
  text-align:center;
  width:70%;
  margin:0 auto;
  font-size:1.5em;
  }
.giochi p{
font-size:1.4em;
font-weight: bold;
}
.bolle{
font-size:1.4em;
font-weight: bold;
margin-bottom:5em;
}
.invito{
font-size:1.5em;
font-weight: bold;
}
/*col sx*/
.leftmenu .colsx {
	width:20%;			/* larghezza colonna sinistra */
	right:35%;			 /*(right column left and right padding) plus (left column left padding) */
  margin: 0 auto; 
  text-align:center;
  padding-top:1em;
  background-color:rgb(240,96,255);
}
/*menu*/
/* Navigation */
.nav, .nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav {
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
	float: left;
	clear: both;
	margin: 0;
	padding: 0;
  z-index: 100;
  position: relative;
  background-color:rgb(255,255,255);
  background-image:url(/immagini/nav.gif);
  border:0;
  }

.nav li {
	float: right;
	position:relative;
}
.nav a{
 background-image:url(/immagini/subnav.png);
 background-repeat: no-repeat;
 background-position: center;
 width:13em;
 height:2em;
 padding-top:3.7%;
}
.nav li a {
  display: block;
	text-decoration: none;
  font-size:160%;
  font-weight:bold;
  font-family:fantasy;
  color:rgb(255,0,240);
}
a.hover:hover {
  display: block;
	text-decoration: none;
  font-size:160%;
  font-weight:bold;
  font-family:fantasy;
  color:rgb(255,0,240);
  background-image:url(/immagini/subnavhover.png);
}

.nav ul {
	list-style: none;
	margin: 0;
	position: absolute;
	top:-999em;/*non toccare impedisce la visualizzazzione fino al mouseover*/
	right: -22%;
	
}
.nav li:hover ul, .nav li.sfHover ul {
	top: 90%; /*Distanza del menu discendente dalla parte fissa dellla barra */
}
a.contattaci{
 background-image:url(/immagini/contattaci.gif);
 background-repeat: no-repeat;
 background-position: center;
 margin: 0.2em 0 0 0;
 padding:0.5em 0 0 0;
 }
a.lavostrafesta{
 background-image:url(/immagini/la_vostra_festa.gif);
 background-repeat: no-repeat;
 background-position: center;
 margin: 0.2em 0 0 0;
 padding:0.5em 0 0 0; 
 }
a.home {
 background-image:url(/immagini/home.gif);
 background-repeat: no-repeat;
 background-position: center;
 margin: 0.2em 0 0 0;
 padding:0.5em 0 0 0;
 }
 /*footer*/
div#footer {

	clear: both;
	text-align: center;
	padding: 2em;    
	background-color: rgb(240,240,0);
	color: #fff;
	font-weight: bold;
	text-decoration: none;
  border: 0px;
  font-size: 0.75em ;
  margin:0 auto;
  margin-bottom:0.4em;
}
div#footer img{
 border:0;
 float:left;
 clear:both;
}
.piede {
	border: 0px;
  margin: 0;
	padding: 10px 0;
	text-align: center;
	font-family:verdana;
	font-size: 1.3em;
}
.sinistra_w3c {
	float: left;
	margin-left: 5px;
	padding-top: 20px;
	padding-bottom: 10px;
  border: 0px;
}
.destra_w3c {
	border: 0px;
  float: right;
	margin-right: 5px;
	padding-top: 12px;
	padding-bottom: 10px;
}
.videoaltervista {
	float: right;
}
/*cazzate varie*/
.c1{
text-align: center;
}
.c2{
margin-left: 2em;
}

/*Visualizzazione commenti*/
/*esterno*/
.t1{
margin:0.4%;
padding:0.5%;
background:#FFFF4A;
border: 1px dashed #b0b0b0;
}
/*interno*/
.t11{
background:rgb(102,255,102);
border: 1px;
margin:0.5%;
padding:1%;
font-size:1.3em;
text-align:left;
}
.fieldset{
margin:2%;
vertical-align:middle;
}


/*form inserire commenti*/
.esterno {
	background: #FFFF4A;
	border: 1px dashed #b0b0b0;
	color: #303030;
	margin: 0.4%;
	margin-bottom:2%;
  padding: 1.2%;
}
form.messaggio {
	padding: 5px 20px 5px 20px;
	background: rgb(102,255,102);
	border: 1px solid #ccc;
	text-align:left;
  font-size:1.3em;
}
  3. 17-03-2011, 15.33.44 #3
    Guest

    Predefinito

    Se la div che contiene è il tutto è container leftmenu metti così:

    Codice:
    .leftmenu .coldx {
	left:50%;			/* 100% plus left column left padding */
  padding:1em;
  background-color: #fff;
  width:45%;
  text-align:center;
  margin: auto;
}
  4. 17-03-2011, 23.46.10 #4
    Guest

    Predefinito

    nn funziona grz comunque
  5. 18-03-2011, 10.51.26 #5
    luca1962
    luca1962 non è connesso Utente attivo
    Data registrazione
    24-05-2008
    Messaggi
    467

    Predefinito

    Dopo

    Codice HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
    scrivi <CENTER> e prima di </html> metti </CENTER>
    Ultima modifica di musicanapoli : 18-03-2011 alle ore 16.33.16 Motivo: Codice racchiuso tra i tags
    Luca.
  6. 18-03-2011, 19.31.29 #6
    Guest

    Predefinito

    nnt grz lo stesso
  7. 18-03-2011, 20.12.07 #7
    L'avatar di acsocmel
    acsocmel
    acsocmel non è connesso Utente attivo
    Data registrazione
    03-07-2007
    Messaggi
    463

    Predefinito

    Citazione Originalmente inviato da ciberioegiro Visualizza messaggio
    salve vorrei sapere se qualcuno di voi a qualche idea del perche il contenuto di questa pagina nn è centrato
    .container deve avere margin:0 auto

    quel center non andrebbe mai usato, soprattutto nella maniera in cui l'hai fatto tu
    Ultima modifica di acsocmel : 18-03-2011 alle ore 20.13.09
    acsocmel.altervista.org
  8. 18-03-2011, 20.39.17 #8
    Guest

    Predefinito

    nn funziona neanche così grz comnunque
  9. 19-03-2011, 00.48.25 #9
    L'avatar di acsocmel
    acsocmel
    acsocmel non è connesso Utente attivo
    Data registrazione
    03-07-2007
    Messaggi
    463

    Predefinito

    scusa mi sembrava ovvio che dovevi toglier il float:left
    come mi sembra ovvio a questo punto che ti devi dare uno sguardo a qualche guida :)
    acsocmel.altervista.org
  10. 22-03-2011, 20.15.43 #10
    Guest

    Predefinito

    grazie così funziona e comunque ha ragfione forse dovrei ripassare un po
« Discussione precedente | Prossima discussione »

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •  

Regole del forum