Ridimensionamento automatico font

mrzpro

Ridimensionamento automatico font

Ciao a tutti, penso che il mio problema sia abbastanza comune ma, per quanto abbia fatto non sono riuscito a venirne fuori. Il mio problema è quello di dover ridimensionare la grandezza del font in funzione delle dimensioni della finestra del browser e cioè allargando e stringendo la finestra le dimensioni devono aumentare o diminuire, andando a compensare le dimensioni del layout liquido. Ho provato sia con la % che con gli em come unità di misura ma senza successo......

Grazie per l' aiuto.
mrzprox:?

greyfox

Già che c'ero [...]

mrzpro

Grazie GreyFox, l' esempio mi sembra rispondente a quello che chiedevo ora proverò ad incorporarlo nei miei file e vedremo...... Di nuovo grazie.
Ciao.
mrzpro

mrzpro

Ciao, come ti avevo preannunciato eccomi di nuovo....il tuo file funziona perfettamente sui testi normali ma, se (il mio caso) deve essre utilizzato su un "menu orizzontale" non funziona ma se lo stesso viene lasciato verticale funziona..... purtroppo però a me serve su un menu orizzontale. Ti posto i files che utilizzo, se tante volte potessi darmi una mano.....

                  HTML

============================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<ul id="nav">
<li class="top"><a href="index.php" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#" id="trading" class="top_link"><span class="down">Il Trading</span></a>
<ul class="sub">
<li><a href="#">Le Basi</a></li>
<li><a href="#">Compara</a></li>
<li><a href="#">ROI e ROE</a></li>
<li><a href="#">Strumenti</a></li>
</ul></li>

<li class="top"><a href="#" id="invest" class="top_link"><span class="down">Investimenti</span></a>

<ul class="sub">
<li><a href="#">Saldo e Stralcio</a></li>
<li><a href="#">Aste Immobiliari Private</a></li>
<li><a href="#">Cessioni del Preliminare</a></li>
</ul></li>
<li class="top"><a href="#" id="opportunità" class="top_link"><span class="down">Opportunità</span></a>
<ul class="sub">
<li><a href="#">Ricercatori</a></li>
<li><a href="#">Investitori</a></li>
<li><a href="#">Venditori</a></li>
</ul></li>

</ul>
</div> 
</div>
</body>
</html>

============================
CSS

#nav {padding:0; margin: 0 0 0 280px; list-style:none; width:1024px; height:0px; background:none; position:relative; z-index:500; font-family:"Myriad Pro Light";} /* posizionamento barra navigazione // margin = posizione orizzontale e verticale menu /
li.top {display:block; float:left;} / allineamento voci menu /
li a.top_link {display:block; float:left; height:35px; line-height:34px; color:#000000; text-decoration:none; font-size:16px; font-weight:normal; padding: 0 0 0 9px; cursor:pointer;} / caratteristiche menu principale /
/ posizionamento scritte /
li a.top_link span {float:left; display:block; padding:0 20px 0 15px; height:35px;} / distanziatore blocchi menu height ???/
li a.top_link span.down {float:left; display:block; padding:0 20px 0 15px; height:35px;} / distanziatore blocchi menu height ???/
li a.top_link:hover {color:#000;}
li a.top_link:hover span {color:#000;}
li a.top_link:hover span.down {color:#000;}
li:hover > a.top_link {color:#000;}
li:hover > a.top_link span {color:#000;}
li:hover > a.top_link span.down {color:#000;}
/ Default list styling /
li:hover {position:relative; z-index:200;}
/ keep the 'next' level invisible by placing it off screen. /
ul,
li:hover ul ul,
li:hover ul li:hover ul ul,
li:hover ul li:hover ul li:hover ul ul,
li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:0; top:-9999px; width:0; height:0; margin:7px; padding:0; list-style:none;}/ posizionamento sub menu top ???/
li:hover ul.sub / width 2° livello /
{left:0; top:28px; background: #000000; padding:2px; border:1px solid #727271; white-space:nowrap; width:156px; height:auto; z-index:300;} / dati 2° livello width box 2° livello /
li:hover ul.sub li / width dim 1° tendina /
{display:block; height:1em; position:relative; float:left; width:10em; font-weight:normal;}
li:hover ul.sub li a /width barra evidenziazione*/
{display:block; font-size:14px; font-style:normal; height:16px; width:156px; line-height:16px; text-indent:4px; color:#ffffff; text-decoration:none;} /barra evidenziazione /
li ul.sub li a.fly
{background:#000000 146px 5px no-repeat;} / indicatore frecce submenu /
li:hover ul.sub li a:hover
{background:#727271; color:#ffffff;} / barra evidenziazione 2° livello /
li:hover ul.sub li a.fly:hover
{background:#727271 146px 5px no-repeat; color:#ffffff;} / posizionamento frecce submenu evidenziato /
li:hover ul li:hover > a.fly {background:#727271 146px 5px no-repeat; color:#000000;} / posizionamento frecce tra 1° e 2° livello /
li:hover ul li:hover ul,
li:hover ul li:hover ul li:hover ul,
li:hover ul li:hover ul li:hover ul li:hover ul,
li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:145px; top:-7px; background:; padding:2px; border:1px solid; white-space:nowrap; width:160px; z-index:400; height:auto;} / dati distanza tra 3° e 4° livello e larghezza 4° livello/

la tua funzione l' ho messa nel file "ridcar.js" per richiamarla dall' esterno, con i due files suddetti è possibile verificare come, togliendo il menu.css la tua funzione funzioni

grazie
mrzpro

greyfox

Ciao,

allora non funziona per un semplice motivo:
lo script cambia il font-size del livello textdiv, ma se tu all'interno del txtdiv inserisci un componente_(ad esempio un altro div) e gli assegni un'altra dimensione del testo diversa da quella di texdiv, ovviamente anche cambiando quella di txtdiv il browser prenderà per buona quella del livello contenuto...

Hai 2 soluzioni:
o togli dal css le dimensioni specifiche per ogni componente
o aggiungi nello script le istruzioni per manipolare ogni componente con una definizione del fontsize diversa dal livello contenitore...

mrzpro

Provo e ti faccio sapere.
Grazie e ciao.

Ridimensionamento automatico font

============================ CSS

============================
CSS