Problema Layout css

**Maxximos** · 12-07-2011, 23:16

Salve a tutti gli utenti, spero possiate darmi una mano con un layout che mi sta dando problemi.
Veniamo al sodo ho una pagina html cosi composta:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
     <head>
          
          <title>titolo ecc</title>
          
          <link rel="stylesheet" type="text/css" href="style.css" media="screen">

     </head>
  
     <body>
     
     <div id="esterno">
     
          <div id="banner">         	
          </div>
          
          <div id="page">
               <div id="sx">  
                <p id="pmenu">Menu Principale </p>
                    <ul id="menu">
                         <li class="voci" >Home Page       
                         <li class="voci">Chi siamo
                         <li class="voci">Dove siamo
                         <li class="voci">Cosa facciamo                   
                         <li class="voci">Notiziario
                         <li class="voci">Link Utili[/list]
               </div>
          	 	      
              <div id="contenuti">
                            contenuti pagina della pagina	
               </div>
               
          </div>
          
          <div id="end">
                
          footer della pagina
                
          </div>
          
     </div>
	
     </body>
</html>

Quindi ho creato un div "esterno" per contenere tutti i blocchi, al suo interno vi è un div per contenere il banner, uno detto page che contiene a sinistra la colonna per i menu e a destra di questa i contenuti della pagina.
Infine vi è il div finale end, dove mettere le info di contatto ecc,

Alla pagina è abbinato un css eccolo qui:

codice:

body{
      
     background: url("../img/grad.jpg");
	background-repeat: repeat-x;
	background-color: #FFFFFF;
	color: white;
}
    
    
#esterno{
	 width:910px;
	 height:auto; 
	 margin-left:auto;
            margin-right:auto;
     margin-top:50px; 
	 margin-bottom:50px;
    
     background-color:red; 
}

#banner{

   	 height:252px;
	 width:900px;
	 float:left;
	 background-color: pink; 
}


#page{
        float:left;
	 height:auto;
	 width:900px;
     background-color: #F0F7F7;  
 
}


#sx{
     float:left;
     width:155px;
     height:100%;
     color:#000000;

}

#pmenu{
	margin-top:40px;
	margin-left:5px;
	color:#666666;
	font-weight:bold;}
	
	

#contenuti{
	float:left;
	width:745px;
	height:auto;
	padding-top:15px;
    background-color:cyan;
	color:black;
}

#end{
	 background-color:black;
	
	 float:left;
	 width:900px;
	 height:auto;
            text-align:center;
	 background: url("../img/end.jpg");
	 background-repeat:no-repeat;
	 background-color:#33362a;
	
}

Ho previsto che la pagina sia larga 900px, il div esterno ne ha 910 solo per poterlo vedere in fase di realizzazione.
Il problema è il seguente, se commento nel css le regole per il blocco end tutto va bene, cioè vedo il div esterno, rosso, che contiene tutti gli altri blocchi come dovrebbe.

Ora veniamo ai problemi:

1-Appena definisco le regole per il blocco end, improvvisamente il div esterno scompare e non lo vedo più, la pagina rimane formattata correttamente, però il margine inferiore non viene più rispettato.

2-Ho provato a definire il blocco end passo passo e se tolgo il float:left, il div esterno funziona correttamente, cioè contiene l'intera pagina MA in questo modo non viene visualizzata l'immagine di sfondo del blocco end cioè: background: url("../img/end.jpg");

Perché questo comportamento? Sbaglio qualcosa nell'impostazione della pagina?

**Maxximos** · 13-07-2011, 14:24

Nessun suggerimento? Ho provato a spostare il div end dentro page. Anche cosi non cambia niente...

Discussione: Problema Layout css

Strumenti discussione

Ricerca discussione

Visualizza

Problema Layout css

Permessi di invio