Deformazione pagina a basse risoluzioni monitor

[samiel]

Devo integrare (nei contenuti) un sito già fatto (non da me).
Tuttavia note che, mentre la visualizzazione è sempre corretta
se i monitor sono impostati ad alte risoluzioni (1280x1024),
se la risoluzione si abbassa, o in monitor più vecchi,
c'è un fattore di disturbo. Il menu posto al lato destro
della pagina finisce infallibilmente in fondo invece che
rimanere in testa alla pagina stessa. Provate a vedere:
http://www.liceofranchetti.it/pof/commissione.php.
Da qualche parte ho trovato un rimedio, in realtà inefficace:
inserire nell'elemento padre "display:inline-block".
Ma ho anche visto che tale codice è assai poco supportato
dai browser, e in ogni caso il difetto rimane.
C'è modo di uscirne senza dover mettere mano alla struttura
della pagina? Grazie

M.

[Action Slip!!!]

il link che hai postato va in errore!

[samiel]

C'era un punto che non andava alla fine:
http://www.liceofranchetti.it/pof/commissione.php

M.

[Action Slip!!!]

al momento non sono così avanzato per darti subito un aiuto mi dispiace, però ho visto che il menù a destra lo hai inserito nel div centrale, non ti conviene a questo punto fare 3 colonne?

[H5N1_Aviaria]

Il menu a destra con FIrefox è già visualizzato in fondo.
#colonna2apagine deve avere width:auto così come la tabella ivi contenuta.
Il BOX model non è lo stesso per tutti i Browser.
Alle risoluzioni più elevate noti che le percentuali "collidono"

[samiel]

So che con 3 colonne le cose andrebbero diversamente,
ma come dicevo sopra il mio compito non è tanto quello
di rifare il sito, ma di "riempirlo". In pratica, è stato
creato da una terza persona, io quest'anno lo amministro.
Adesso provo a seguire l'indicazione di H5N1 e vedo...
Cmq nel mio pc con Firefox 2 vedo tutto bene, mentre
in Windows sia con IE sia con Firefox 2 ho dei problemi
di visualizzazione. Intanto grazie, vado a smanettare...

M.

[samiel]

Se modifico #colonna2apagine e #colonna2bpagine (che contiene il menu)
il menu finisce in tutte le pagine al fondo e la prima colonna
si prende tutto lo spazio disponibile sulla pagina... Forse va aggiunto
qualche altro parametro...

M.

[H5N1_Aviaria]

Modifica SOLO #colonna2apagine con wdth:auto. e imposta la larghezza della tabella in width="auto".
Funziona.
Se hai Firefox installato ti consiglio di installare Firebug che ti permette di editare "al volo" il DOM e fare delle prove.

[samiel]

Per "tabella" intendi il menu?

Vedi qui:

body {
width:98%; font-family:  arial, verdana, helvetica, sans-serif;background: #000080;font-size:5mm;
}
/*a {color: [#009F82] green}*/
.menu_titolo {text-align:center}
.Home {color:#a11f12; font-size:3mm}
.vuoto{clear:left; background: #ffffff;height:100px;}
#intestazione {width:98%; height:auto; border: 0px solid red; margin:auto; text-align: center; /* per IE5.x/Win */background: transparent;padding:10px}
#logo {float:left; width:15%; height:78px; background: transparent;border:0px solid #a11f12;}
#titolo {float:left; width:68%; height:81px; 
background: transparent; 
font-size:4mm; color:#000080;}
#figura_alta {float:left;width:15%;background: transparent;border:0px solid #a11f12;}
#pagina {width:90%;height:auto;border:0px solid red;/*background: url(immagini/sfondo.jpg)*/background:#ffffff;margin:auto;}
#contenitore_centro {width:98%;height:auto;border:0px solid #d2d2d2;background: transparent;margin:auto;}
#navcontainer {width:96%;height:30px; margin: auto; text-align: center; /* per IE5.x/Win */			
    font-family:arial, helvetica, sans-serif;
    background: transparent;
    color:#000080;
    border-top: 0px groove #fff;
    border-bottom: 2px groove #fff;
    padding: 4px 4px 4px 20px;}
.navlist {margin: 0px; padding: 2px 0px; font-size: 4mm;}
.navlist ul {margin: 0px; padding: 0px;width:10%}
.navlist li {display: inline; list-style: none;}
.navlist li a {background:#ffffff; color:#000080;  
               margin: 2px 0px; padding: 2px 4px;
               text-decoration: none;}
.navlist li a:link    {border: 0px solid #000080;}
.navlist li a:visited {border: 0px solid #d2d2d2;}
.navlist li a:hover   {border: 0px outset #fff;}
.navlist li a:active  {border: 0px inset #fff;}
.navlist li.separator {border-left: 2px groove #fff;}
.akey{text-decoration:underline;}
.navcontainer1 {width:80%;height:20px; margin: auto; text-align: center; /* per IE5.x/Win */	
    font-family:arial, helvetica, sans-serif;
    background: transparent;/*#d2d2d2;*/
    color:#000080;
    border-top: 2px groove #fff;
    border-bottom: 2px groove #fff;
    padding: 4px 4px 4px 20px;}
.navcontainer_bianco {width:80%;height:20px; margin: auto; text-align: center; /* per IE5.x/Win */	
    font-family:arial, helvetica, sans-serif;
    background: #ffffff;
    color:#a11f12;
    border-top: 2px groove #fff;
    border-bottom: 2px groove #fff;
    padding: 4px 4px 4px 20px;}

#contenitore_menu {clear:left;width:98%;height:auto;margin:auto;background: #000080;border-top: 10px solid #000080;}
#news_home {width:70%;min-height:200px;height:auto; background: transparent; color: #000080; border-left:5px solid #000080;padding:10px 10px 10px 10px;font-size:0.70em}
#news_home_pagine {width:70%;min-height:200px;height:auto; background: #ffffff; color: #000080;border:1px solid #d2d2d2;padding:10px;font-size:4mm;margin:auto}
#news_home_pagine1 {width:300px;min-height:200px;height:auto; background: #ffffff; color: #000080;border:1px solid #d2d2d2;padding:10px;font-size:4mm;margin:auto}
#centrato {width:70%; /*min-height:500px;*/ height:auto; margin:auto; text-align: center; /* per IE5.x/Win */ border:1px solid red; background: transparent;padding: 10px}
#colonna1 {float:left;text-align: center;width:12%;height:429px;background: transparent;color: #000080;border:0px solid #d2d2d2;font-size:0.7em;padding:10px;}
a.senza{text-decoration: none;}
#colonna2 {float:left;width:80%;height:auto; /*background: transparent;*/background: #f7f7f7; color: #a11f12;border:0px solid #104160;font-size:6mm;display:inline-block;}
#colonna2_largo {float:left;width:98%;height:auto; background: transparent; color: #a11f12;border:0px solid #104160;font-size:6mm;border:black}
#colonna2a {float:left;width:65%;height:auto; background: transparent;color: #009F82;border:0px solid #104160;padding:30px 0px 0px 30px;font-family:  arial, verdana, helvetica, sans-serif;/*cursive, verdana, helvetica, sans-serif;*/ font-size:5mm}
#colonna2apagine {float:left;width:auto; /*72%;*/height:auto; background: transparent; color: #000080;border:0px solid #d2d2d2;padding:50px 0px 0px 30px;font-family:  arial, verdana, helvetica, sans-serif;/*cursive, verdana, helvetica, sans-serif;*/ font-size:0.70em}
#colonna2apagine_largo {float:left;width:60%;height:auto; background: transparent; color: #000080;border:0px solid #d2d2d2;padding:50px 0px 0px 30px;font-family:  arial, verdana, helvetica, sans-serif;/*cursive, verdana, helvetica, sans-serif;*/ font-size:0.70em}

.titolo_verde {font-family:  arial, verdana, helvetica, sans-serif;color:#000080;}
h4 {font-family:  arial, verdana, helvetica, sans-serif;color:#000080;}
h5 {font-family:  arial, verdana, helvetica, sans-serif;color:#000080;}
#colonna2b {float:right;width:30%;min-height:398px;height:auto; background: transparent; color: #000;border:0px solid #d2d2d2;padding:30px 0px 0px 0px;}
#colonna2bpagine {float:right;width:22%;min-height:398px;height:auto; background: transparent; color: #000;border:0px solid #d2d2d2;padding:50px 0px 0px 0px;font-size:4mm;color:#a11f12}
#colonna2bpagine1 {float:left;width:100px;min-height:398px;height:auto; background: transparent; color: #000;border:0px solid #d2d2d2;padding:50px 0px 0px 0px;font-size:4mm;color:#a11f12}
#colonna2bpaginepof {float:right;width:170px;min-height:398px;height:auto; background: #ffffff; color: #000;border:0px solid #d2d2d2;padding:10px 0px 0px 0px;font-size:4mm;color:#a11f12}
#colonna2bpagine_largo {float:left;width:170px;min-height:398px;height:auto; background: transparent; color: #000;border:0px solid #d2d2d2;padding:50px 0px 0px 0px;font-size:4mm;color:#a11f12}
#colonna2bpagine_largo_pof {float:right;width:26%;min-height:398px;height:auto; background: #ffffff; color: #000;border:0px solid #d2d2d2;padding:10px 0px 0px 0px;font-size:4mm;color:#a11f12}

#intestazione_fine {clear:left;width:782px; height:80px; margin:auto; /*text-align: center; /* per IE5.x/Win */background: transparent;border:0px solid #d2d2d2; font-size:3.5mm;color:#000080;padding:10px}
ul.clicca {list-style-image: url(immagini/clicca.jpg);}
.clicca li a {background:transparent; color:#C21212/*green*//*#009F82*/; text-decoration: none;}  
  
ul.vai {
  list-style-image: url(immagini/vai.jpg);
}
#piede1 {float:left;width:30%; height:80px; margin:auto; /*text-align: center; /* per IE5.x/Win */background: transparent;border:0px solid #d2d2d2; font-size:0.70em;color:#000080;padding:10px}
#piede2 {float:left;width:30%; height:80px; margin:auto; /*text-align: center; /* per IE5.x/Win */background: transparent;border:0px solid #d2d2d2; font-size:0.70em;color:#000080;padding:10px}
#piede3 {float:left;width:30%; height:80px; margin:auto; /*text-align: center; /* per IE5.x/Win */background: transparent;border:0px solid #d2d2d2; font-size:0.70em;color:#000080;padding:10px}
#piede4 {float:left;width:30%; height:80px; margin:auto; /*text-align: center; /* per IE5.x/Win */background: transparent;border:0px solid #d2d2d2; font-size:0.70em;color:#000080;padding:10px}
.testoblu {color:#000080;}
.tabella_docenti {color:#000080; font-size:0.70em}

(PS ma... è la mia esperienza o il CSS è incasinatissimo?)

Ora, nella pagina il menu è contenuto in #colonna2bmenupaginepof,
che a sua volta è il genitore di .colonna_menu (così mi dice WebDeveloper),
di cui però nel CSS non c'è traccia...

Nota infine che in altre pagine il contenitore del menu è un altro:
colonna2bpagine (ad es nella sezione "Chi siamo"), e il problema si ripresenta.
Per cui mi gira la testa...

M.

[H5N1_Aviaria]

Cercavo il link, ma è stato tolto.
No, la tabella non è nel css. La sua larghezza è espressa direttamente nel codice HTML
<table ... width="540"
deve diventare
<table ... width="auto"