Rientranza anomala di un div

[samiel]

Ho un codice di cui posto solo le righe rilevanti:

/*stili per il layout elastico*/
html{margin:0; padding:0}
body{margin:0; padding:5% 10%; font-family:Verdana,Tahoma,Arial,sans-serif; font-size:100,01%; background:black; color:white}
#container{float:right; width:100%; background:#797979 url(sfondo2.gif) right top repeat-y}

/*stili generici, su header e footer*/
#header{width:100%; background:black; color:white; padding-top:20px; border-right:double #CECECE; border-left:double #CECECE}
#footer{clear:both; width:100%; padding-top:20px; background:black; color:white; padding-bottom:20px; border-top:double #CECECE; border-right:double #CECECE; border-left:double #CECECE}

/*stili specifici per il layout*/
#content{margin-right:229px; padding:15px; color:white; border-left:double #CECECE}
#rightmenu{float:right; width:229px; padding-top:50px; color:white}

Ora, sfondo.gif è un rettangolo di 223px x 20px. Il 223 e il 221 pixel sono chiari
per simulare il bordo doppio. Il risultato è però che esiste una rientranza
rispetto a header e footer. Potete vedere l'effetto e questa pagina:
http://www.samiel.netsons.org
Non capisco da cosa dipende tale rientranza...

Grazie
M.

[Diano]

Nel css imposta una class priva di rientro e prova a metterla nel div

[samiel]

Non capisco che cosa tu intenda...
Ma se hai visto la pagina nel link che ho segnalato,
vedrai che non si tratta di un "rientro" tradizionale
dovuto ad es al padding, ma di un piccolo "gradino".
Forse c'è qualche errore nel senso che non ho calcolato
correttamente l'ampiezza dell'immagine di sfondo...

M.

[Mich_]

Ho guardato il tuo codice.
E` un bell'esempio di layout elastico, ma ci sono in effetti quei 4-5 px che stonano solo a destra.

Non sono riuscito a capire da cosa derivano. Posso solo suggerirti qualche azione da provare:

1. definisci nel CSS un "azzera tutto", ad esempio con:

* {
  border:0;
  margin:0;
  padding:0;
}

da inserire all'inizio del CSS, in modo da eliminare tutti i bordi che eventualmente possono essere presenti di default in qualche elemento (questo sostituisce anche tutti i vari border:0; margin:0 che hai messo qua e la`).

2. lo sfondo della colonna di destra, allinealo a destra:
background-position: top right;
...
vedo ora che e` presente gia`, ma contiene un errore di sintassi (peraltro ignorato da alcuni brwoser):
hai scritto:
background:#797979 url(sfondo2.gif) right top repeat-y;
la sintassi corretta e`:
background:#797979 url(sfondo2.gif) top right repeat-y;

3. vedi quanti px e` effettivamente il tuo layout: potrebbe essere che header si allarga, oppure che il content si restringe: ci sono programmi di grafica che possono aiutarti: salva un'immagine dello schermo e vai ad analilzzarla (devi avere un programma che ti visualizza la posizione del mouse px a px - ma forse ancheil semplice paint potrebbe bastare).


PS: fammi sapere se e quale azione ha avuto successo. Grazie

[samiel]

Non ne vengo a capo, però ho fatto un esperimento che potrebbe consentire
ai più esperti di me di individuare la causa del problema. Ho aggiunto
un bordo rosso di 15 punti ai vari elementi. Come di vede, il bordo sx
"spinge" a destra lo header e il suo doppio bordo orizzontale. Tuttavia,
lo stesso bordo rosso si sovrappone al doppio bordo orizzontale del footer.
E già questo è per me un mistero... Invece, il bordo sinistro applicato al div
del menu sinistro viene contenuto all'interno del div stesso
e non lo sposta. Credo che vedere di nuovo il sito
sia più eloquente di ogni descrizione. SOlo che non capisco la causa...
Unico rimedio trovato finora: applicare i doppio bordo non al div
del menu laterale sinistro, ma all'elemento contenitore che racchiude
il <content> (la sezione del testo a sinistra) e il div <menu>.
A questo punto l'immagine che disegna lo sfondo del menu verticale
dev'essere monocroma, e senza le due bande più chiare che simulare
il bordo doppio...

Grazie
M.

[samiel]

Up

M.

[bionicoz]

Sempre qui, già che c'ero. ma sinceramente nn ho ben capito come deve venire il tutto, cosa vuoi col bordo rosso 15px e cosa col bordo doppio...

[samiel]

Veramente col bordo rosso non volevo nulla.
Era solo un modo per evidenziare il problema.
Piazzando il bordo sui tre div a sinistra, cioè
header, content e footer, essi risultano allineati.
Piazzandolo sui tre div a sinistra, header, menu
e footer, i bordi del primo e terzo elemento
"sporgono". Non capisco perché. Adesso ripristino
i bordi originali e poi uppo tutto.
Vedrai il problema...

Grazie!
M.

[bionicoz]

Per semplificare le cose invece di incasinarmi con margin negativi e padding ho fatto che togliere il padding al body, dare una dimensione ai container/footer/header pari all'85%, e poi ho centrato le tre cose. Mi sembra intelligente vist'anche che nn hai necessità di avere per forza ai lati bande sempre larghe uguali (sono vuote).
Vedi al solito link se così va.
PS. non erano male graficamente parlando i bordoni rossi :P

[samiel]

Adesso nanna, tanto ho perso la lucidità.
Domani vedo il CSS. E cmq grazie mille di tutto.

M.

PS
No dai... NIente bordoni rossi...
Le mie "clienti" (che poi sono delle mie studentesse
appassionate di teatro a cui sto facendo il sito, ovviamente gratis)
amano il nero....