problema con impaginazione con container...

**sfgst** · 08-09-2009, 18:08

Salve, spero di aver postato nella sezione giusta, perchè non so bene dove sia il problema,anche se credo che sia nel container e quindi gestibile dal css.... devo aver modificato qualcosa anche se non mi pareva di averlo fatto, perchè l'altro giorno la pagina era centrata bene al centro, mentre ora tutto il container mi si è spostato verso destra...di poco, ma comunque esce dalla parte bianca centrale (ho immagine per creare effetto sfumato ai lati) di quasi un cm.

il css...

codice:

/
html, body {  
     margin : 5px 0 0 0 ; 
     padding : 0; 
     height : 100%; }   

body {    
       font : 76% Arial, "Trebuchet MS", Helvetica, Tahoma, sans-serif; 
       background : #ccc url(images/bg.jpg) top center repeat-y; 
       text-align: justify; color : #555; }      

#container { 	
       position: relative; 	
      width : 770px; 	
      height : 100%; 	
      margin-left :  auto; 	
      margin-right : auto; 	
      margin-top : 5px; 	
      padding : 0; 	
      line-height : 1.8em; 	
      text-align: justify; 
      	min-width: 600px; 	
       left: 16px; }   

div#container{  
   height: auto;  
   min-height: 100%; }  

#content {  
     padding : 2em ; 
     margin : 30px 250px 0 0; 
     border-right : 1px solid #CC99FF ; 
     text-align: justify;  }  

 #sidebar {  
     float : right; width : 220px; 
     margin-top : 30px; 
    margin-right : 5px; 
    padding : 1em; }

l'html...

codice:

<?xml version="1.0" encoding="iso-8859-1"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
     <title>Home page</title> 
    <meta name="Description" content="La società offre ecc..."/> 
     <meta name="Keywords" content="...."/> 
      <meta name="owner" content="Techgea Servizi"/>  
     <meta name="robots" content="index, follow"/>   
     <meta http-equiv="Content-Language" content="it"/>  
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>  
    <link href="style.css" rel="stylesheet" type="text/css" /> 
     
    <style media="all" type="text/css">@import "menu/menu_style.css";</style> 
      
     <meta http-equiv="imagetoolbar" content="false" />  
     <meta name="MSSmartTagsPreventParsing" content="true" /> 
     <meta http-equiv="pragma" content="no-cache"/>  
</head>  

<body>  

<div align="center">[img]images/testalino.jpg[/img]  </div> 

<div id="container">     
    <div class="nav">      
     <div class="table">        
         <ul class="select">         [*]Home        [/list]ecc..... tutte le voci del menù  cstruite alla stessa maniera di questa...  
      </div>   
    </div>   

   <div id="sidebar">      
    contenuto del lato sinistro della pagina...
   </div>   
   <div id="content">      
   contenuto del corpo principale ... 
   </div>   

    <div id="footer"> contenuto del piè di pagina
   </div> 
</div> 
</body> 
</html>

a me il codice sembra a posto, ed l'immagine testalino rimane centrata nella pagina, quindi il problema è nel container, ma non ho modificato nulla lì.... si vede spostato su tutti i browser (firefox, IE, netscape, opera, safari e chrome). mi potete dare qualche suggerimento? grazie mille. Se avessi postato sbagliato e avessi dovuto scrivere in altro forum, spostate pure!

**Mich_** · 09-09-2009, 08:36

Ci sono un po' di cose che possono dare il problema.

Anzitutto ti manca definire
width: 100%;
sella formattazione di html e di body: senza questi i margini automatici non possono funzionare

Poi per centrare in orizzonatale occorre:
text-align: center;
nel body per sistemare in IE

margin: 0 auto; /* oppure altri valori per il vert, ma auto per ambedue gli orizz */
nel blocco da centrare per sistemare nei brwoser conformi

text-align: left; /* oppure il valore che vuoi */
per controbilanciare il text-align di cu sopra

Altre cose:
Non devi usare formattazione in HTML (ad esempio il tuo align="center"): questo crea conflitti tra CSS e HTML e browser diversi risolvono i conflitti in modo diverso

Non usare i posizionamenti: interferiscono con gli altri strumenti di formattazione, e son molto difficili da gestire (di solito creano sovrapposizioni di blocchi): se non hai molta esperienza, non usare mai il position.

**sfgst** · 09-09-2009, 10:40

allora... togliendo i position effettivamente tutto torna impaginato centrato come dovrebbe essere, ma avevo messo i position leggendo questo:

http://css.html.it/guide/lezione/64/...ma-del-footer/

in quanto in alcune pagine il footer se ne stava tranquillo in basso dove lo voglio io, mentre in quelle dove c'è meno testo e quindi la pagina rimane più corta, mi rimane alto rispetto al fondo della pagina e si vedeva uno spazio bianco dopo di lui, che non so come togliere. con i position subito questo problema non c'era, però dopo due giorni mi ha spostato tutto a destra...

il problema della formattazione...è che magari c'è un oggetto che mi serve a destra mentre tutto il resto va bene a sinistra come impostato nel css... conviene che gli assegno una class?

grazie mille!

**Mich_** · 09-09-2009, 11:03

IL problema del footer lo si puo` risolvere anceh con qualche trucco.
Ad esempio dando un'altezza minima al blocco principale.
Per il "bianco" in fondo, puoi giocare con il colore di sfondo.
E dovrai inserire nel footer l'attributo
bottom:0;
che non serve per i blocchi non posizionati, ma viene comunque riconosciuto in IE.

Comunque per questo tipo di problemi, ti rimando agli esempi forniti dai siti di layout (vedi tra i "link utili")

che magari c'è un oggetto che mi serve a destra mentre tutto il resto va bene a sinistra come impostato nel css... conviene che gli assegno una class?

Proabilmente si`, ma dipende dall'oggetto per cui e` dififcile dare una risposta a carattere generale.

**sfgst** · 09-09-2009, 11:52

a forza di pasticciare forse qualcosa concludo...anche se non so se è proprio corretto quello che ho fatto...

in html, body ho messo height: 70%

in container
height: auto;
height: 100%;
min-height: 100%;

apparentemente funziona, in quanto nella pagina corta non vedo più lo spazio bianco e le altre più lunghe si adattano.

Discussione: problema con impaginazione con container...

Strumenti discussione

Ricerca discussione

Visualizza

problema con impaginazione con container...

Permessi di invio