Visualizzazione dei risultati da 1 a 7 su 7
  1. #1

    Problema con i Div e foglio di stile

    Sto facendo un sito per un mio amico che ha un hotel, ho utilizzato i div da foglio di stile.
    Ho centrato il sito rispetto alla pagina con un div che fa da contenitore.
    Il problema e che il div contenitore occupa un area superiore all'altezza del sito e mi crea uno spazio vuoto lungo
    l'altezza della pagina (infatti la barra laterale del browser è attiva). Sono un principiante dei fogli di stile, qualcuno può dirmi come posso rimediare a
    questo fastidioso inconveninete?.

    Questo è il foglio di stile :
    codice:
    						/* CSS Document */                                                  
    			                                                                    
    			/* -------CENTRAGGIO SITO------- */                                 
    body 			{                                                                   
    					                                                    
    					                                                    
    					font-family:Arial, Helvetica, sans-serif;           
    					font-size:12px;                                     
    					background:#FFFFE6;                                 
    					text-align: center;                                 
    				}                                                           
                                                                                                
    #centrato 		{                                                                   
    					font-family:Arial, Helvetica, sans-serif;           
    					font-size:12px;                                     
    					margin: 0 auto 0 auto;                              
    					padding:0;                                          
    					text-align: left;                                   
    					width: 800px;                                       
    					                                                    
    				}				                            
    				                                                            
    				                                                            
    				                                                            
    				                                                            
    			/* -------Home Page------ */				            
    			                                                                    
    #inte			{                                                                   
    					margin:0 auto 0 auto;                               
    					padding:0;                                          
    					position: relative;                                 
    					background:#FFFFB9;                                 
    					top: 18px;                                          
    								                            
    								                            
    			}                                                                   
    			                                                                    
    #menu 			{                                                                   
    					margin:0 auto 0 auto;                               
    					padding:0;                                          
    					position:relative;                                  
    					width:190px;                                        
    					height:250px;                                       
    					background:#FFFFCD;                                 
    					top: 20px;                                          
    					left: -305px;                                       
    	                                                                                    
    						                                            
    			}                                                                   
    							                                    
    							                                    
    							                                    
    #corpo 			{                                                                   
    					margin:0 auto 0 auto;                               
    					padding:0;                                          
    					position:relative;                                  
    					width:430px;                                        
    					height:300px;                                       
    					background:#00FFFF;                                 
    					background-color: #FFFFB9;                          
    					text-align:justify;                                 
    					font-family:Verdana, Arial, Helvetica, sans-serif;  
    					font-size:14px;                                     
    					color:#723F01;                                      
    					z-index: 1;                                         
    					top: -231px;                                        
    					left: 5px;                                          
    			}						                    
    							                                    
    #indirizzo		{                                                                   
    					margin:0 auto 0 auto;                               
    					padding:0;                                          
    					position:relative;                                  
    					width:190px;                                        
    					height:200px;                                       
    					font-family:Verdana, Arial, Helvetica, sans-serif;  
    					font-size:12	px;                                 
    					color:#723F01;                                      
    					text-align:center;                                  
    					background-image:url(../img/Basso_SX.jpg);          
    					top: -730px;                                        
    					left: -305px;                                       
                                                                                                
    			}                                                                   
    			                                                                    
    #fondo			{                                                                   
    					margin:0 auto 0 auto;                               
    					padding:0;                                          
    					position:relative;                                  
    					height:40px;                                        
    					background:#FFFFE6;                                 
    					text-align:center;                                  
    					vertical-align:middle;                              
    					font-family:Verdana, Arial, Helvetica, sans-serif;  
    					font-size:12px;                                     
    					color:#723F01;                                      
    					width: 799px;                                       
    					top: -1030px;                                       
    			}                                                                   
    			                                                                    
                                                                                                
    #sfondo			{                                                                   
    					margin:0 auto 0 auto;                               
    					padding:0;                                          
    					position:relative;                                  
    					width:180px;                                        
    					height:450px;                                       
    					background:#00CCFF;                                 
    					z-index: 2;                                         
    					top: -530px;                                        
    					left: 309px;                                        
    			}                                                                   
    									                    
    #img1			{                                                                   
    					margin:0 auto 0 auto;                               
    					padding:0;                                          
    					position:relative;                                  
    					width:217px;                                        
    					height:150px;                                       
    					background-color: #FFFFB9;                          
    					z-index: 3;                                         
    					top: -880px;                                        
    					left: 110px;                                        
                                                                                                
    			}                                                                   
    							                                    
    #img2			{                                                                   
    					margin:0 auto 0 auto;                               
    					padding:0;                                          
    					position:relative;                                  
    					width:217px;                                        
    					height:150px;                                       
    					background-color: #FFFFB9;                          
    					top: -1030px;                                       
    					left: -100px;                                       
                                                                                                
    			}                                                                   
    			                                                                    
                                                                                                
    a {                                                                                         
    	font-size: 9px;                                                                     
    	color: #723F01;                                                                     
    }                                                                                           
    a:link {                                                                                    
    	text-decoration: none;                                                              
    }                                                                                           
    a:visited {                                                                                 
    	text-decoration: none;                                                              
    	color: #723F01;                                                                     
    }                                                                                           
    a:hover {                                                                                   
    	text-decoration: underline;                                                         
    	color: #723F01;                                                                     
    }                                                                                           
    a:active {                                                                                  
    	text-decoration: none;                                                              
    	color: #723F01;                                                                     
    }
    Tutti i trucchi e i segreti del tuo pc su
    www.guidailtuopc.com

  2. #2
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    663
    Puoi evitare di fare "margin: 0 auto 0 auto;" ma puoi abbreviare scrivendo semplicemente "margin:0 auto;", questo cmq nn è un errore.
    Posta anche il codice di struttura per favore.

  3. #3
    ecco il codice grazie :

    codice:
    <body>
    
    <div id="centrato">
    	<div id="inte">
     		 <script type="text/javascript">
    			AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width',				
    			'800','height','200','title','Hotel Sylvia Pesaro','src','Flash sylvia/Intestazione','quality','high','pluginspage',	
    			'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Flash sylvia/Intestazione' ); 
    			//end AC code
    			</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=
    			"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="200" title="Hotel 
    			Sylvia Pesaro">
        		<param name="movie" value="Flash sylvia/Intestazione.swf" />
        	<param name="quality" value="high" />
        	<embed src="Flash sylvia/Intestazione.swf" quality="high" pluginspage=		
    		"http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width=
    		"800" height="200"></embed>
      		</object>
    		</noscript>
    </div>
    
    	<div id="menu">
      		<script type="text/javascript">
    		AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','190',		
    		'height','250','title','Menu Hotel Sylvia','src','Flash sylvia/MenuNew','quality','high','pluginspage',
    		'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Flash sylvia/MenuNew' ); 
      		</script>
      		<noscript>
      		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=		
    		"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="190" height="250" title="Menu Hotel 
    		Sylvia">
        	<param name="movie" value="Flash sylvia/MenuNew.swf" />
        	<param name="quality" value="high" />
        	<embed src="Flash sylvia/MenuNew.swf" quality="high" pluginspage=
    		"http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width=
    		"190" height="250"></embed>
      
      		</object>
    		  </noscript>
      	 </div>
    	<div id="corpo">
    		
    
      		
    
    Hotel situato in una zona tranquilla e a pochi metri dalla spiaggia. Camera con servizi privati, TV, telefono e balcone la 		
    		maggior parte con vista mare. Ascensore, Solarium panoramico. Cucina particolarmente curata con possibilità di scelta sul menù. 
    		Sala di soggiorno con Bar e TV, Parcheggio cabine privatein Spiaggia.</p>
      		
    
    Hotel situato in una zona tranquilla e a pochi metri dalla spiaggia. Camera con servizi privati, TV, telefono e balcone la 
    		maggior parte con vista mare. Ascensore, Solarium panoramico. Cucina particolarmente curata con possibilità di scelta sul menù. 
    		Sala di soggiorno con Bar e TV, Parcheggio cabine privatein Spiaggia.</p>
    	</div>
    	
    	<div id="sfondo">
      		<script type="text/javascript">
    		AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','181',		
    		'height','450','title','Il nostro Hotel','src','Flash sylvia/Base','quality','high','pluginspage',
    		'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Flash sylvia/Base' ); //end AC code
    		</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=	
    		"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="181" height="450" title="Il nostro 
    		Hotel">
        	<param name="movie" value="Flash sylvia/Base.swf" />
        	<param name="quality" value="high" />
        	<embed src="Flash sylvia/Base.swf" quality="high" pluginspage=
    		"http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width=
    		"181" height="450"></embed>
     		</object>
    		</noscript>
    	</div>
    	<div id="indirizzo">
     	 
    
    </p>
    	</div>
    	<div id="img1">
      		<script type="text/javascript">
    		AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','217',		
    		'height','150','title','Hotel Esterno','src','Flash sylvia/Apertura IMG','quality','high','pluginspage',
    		'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Flash sylvia/Apertura IMG' ); 
    		</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=	
    		"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="217" height="150" title="Hotel 	
    		Esterno">
        	<param name="movie" value="Flash sylvia/Apertura IMG.swf" />
        	<param name="quality" value="high" />
        	<embed src="Flash sylvia/Apertura IMG.swf" quality="high" pluginspage=		
    		"http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width=		
    		"217" height="150"></embed>
      		</object>
    		</noscript>
    	</div>
    <div id="img2">
      <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','214','height','150','title','Entrata Hotel','src','Flash sylvia/Apertura IMG2','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Flash sylvia/Apertura IMG2' ); //end AC code
    </script>
      <noscript>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="214" height="150" title="Entrata Hotel">
        <param name="movie" value="Flash sylvia/Apertura IMG2.swf" />
        <param name="quality" value="high" />
        <embed src="Flash sylvia/Apertura IMG2.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="214" height="150"></embed>
      </object>
      </noscript>
    </div>
    <div id="fondo">
    Servizi - Camere - <a href="dove_siamo.html" target="_self">Dove
    Siamo</a> - <a href="contatti.html" target="_self">Contatti 
    </a>
    
    
    Hotel Sylvia - Viale Rovereto, 30 - 61100 Pesaro - Tel e fax 0721/31145 Priv. 0721/52376 - 54210 - Riviera Adriatica Italy</div>
    </div>
    </body>
    Tutti i trucchi e i segreti del tuo pc su
    www.guidailtuopc.com

  4. #4
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    663
    Per prima cosa prova a mettere margin:0 e padding:0 nel codice, o meglio se introduci questa regola all'inizio del css:
    *
    {
    margin:0;
    padding:0;
    }
    sei sicuro che di base tutti gli elementi che andrai ad inserire avranno queste proprietà settate a 0.
    Attento ai position relative, c'è il caso che siano loro a darti questo problema.
    Ho notato che hai anche parecchi flash all'interno del tuo documento, prova a vedere se qualcuno di questi interferisce in qualche modo nella disposizione dei tuoi elementi.

  5. #5
    penso che siano le coordinate relative, scusa l'ignoranza ma per poter centrare il sito non devo inserire i div con le posizioni relative all'interno del div contenitore ?

    Se sai in che altro modo posso farlo me lo puoi indicare ? grazie mille per l'aiuto che mi stai dando
    Tutti i trucchi e i segreti del tuo pc su
    www.guidailtuopc.com

  6. #6
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    663
    il position nn serve per centrare un div in mezzo alla pagina. Esistono diversi tipi di position e anzi alcuni danno un comportamento agli elementi diverso dal comportamento normale. Nel caso del relative, l'elemento che ha questa proprietà diventa il blocco genitore e il punto di riferimento delle coordinate del figlio che avrà una position absolute.
    Cmq per centrare dei div in mezzo alla pagina tira via (salvo eventuali necessità) i position relative e usa margin:0 auto; e text-align:center, quest'ultima proprietà serve soprattutto per gli Internet explorer più datati.
    es:

    body {

    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    background:#FFFFE6;
    text-align: center;
    }

    #centrato {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    margin: 0 auto;
    padding:0;
    text-align: center;
    width: 800px;

    }

  7. #7
    Grazie mille per le dritte finalmente ci sono riuscito!!!!
    Tutti i trucchi e i segreti del tuo pc su
    www.guidailtuopc.com

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.