Ridimensionamento dei font al ridimensionamento del browser e/o della risoluz monitor

peter-oz

Nuovo Utente
21 Nov 2012
1
0
0
Ciao,
scrivo perchè ho un problema con la costruzione della mia pagina web.
In pratica vorrei avere la possibilità di raggiungere questo risultato(http://www.microsoft.com/it-it/default.aspx)ma mi accontenterei anche di qualcosa in meno.Mi piacerebbe che alla riduzione/espansione della finestra del browser e/o al variare della risoluzione del monitor,il contenuto della mia pagina si riduca/ingrandisca in modo proporzionale.Ho provato utilizzando le indicazioni fornite da questa guida (http://www.html.it/articoli/stabili...-e-soluzioni-3/)ma non sono stato in grado di risolvere il problema.
Ho seguito le impostazioni per la realizzazione di un layout liquido,impostando il font-size sia in "%" che in "em",ho impostato all'inizio del mio codice CSS l'impostazione *{margin0;padding:0;} dopo di che ho assegnato all' interno del body il valore font-size in tutti i modi e combinandolo con il valore font-size di h1[per tutti i modi intendo combinazioni tra px(solo nel body) % ed em].
Ho notato questa cosa su questo sito http://biccari.altervista.org/c/inf...ito/hosting.php.
Dopo ho provato con jQuery (http://cbavota.bitbucket.org/widetext/) e non sono in grado di farla funzionare.
Per completezza vi copio i codici che compongono la mia pagina e, sperando che qualcuno più pratico di me(non so na mazza) possa trovare una soluzione ad un problema che mi blocca da ormai 5 giorni,vi saluto.

HTML
Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Personal Webpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="cssmodello.css" rel="stylesheet" type="text/css" media="screen" />
<script src="fixedbackground.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="libjQuery.js" type="text/javascript"></script>
<script src="jQuery.wideText.js" type="text/javascript"></script>
</head>

<body onload="fixedBackground('imagini%20per%20home/logo3.gif');">
<div id="container">
<div id="header">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200em" height="120.5em" align="top" id="FlashID" title="logo">
        <param name="movie" value="logo sicuro.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="11.0.0.0" />
        <!-- Questo tag param fa in modo che agli utenti con Flash Player 6.0 r65 e versioni successive venga richiesto di scaricare l'ultima versione di Flash Player. Eliminatelo se non volete visualizzare la richiesta agli utenti. -->
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        <param name="BGCOLOR" value="#FFFFFF" />
        <!-- Il tag object successivo è per i browser diversi da IE. Utilizzate IECC per nasconderlo in IE. -->
        <!--[if !IE]>-->
        <object data="logo sicuro.swf" type="application/x-shockwave-flash" width="15%" height="96%" align="top">
          <!--<![endif]-->
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="11.0.0.0" />
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          <param name="BGCOLOR" value="#FFFFFF" />
          <!-- Il browser visualizza il seguente contenuto alternativo per gli utenti che utilizzano Flash Player 6.0 e versioni precedenti. -->
          <div>
            <h4>Il contenuto di questa pagina richiede una nuova versione di Adobe Flash Player.</h4>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Scarica Adobe Flash Player" width="112" height="33" /></a></p>
          </div>
          <!--[if !IE]>-->
        </object>
        <!--<![endif]-->  
</object> 
    <h1>
    <span class="responsive wtext" style="font-size: 90.574px; visibility: visible;">Riduciti xfavore</span></h1>
  <h2>Personal<br />Website</h2> 
      	
            	<div id="nav">
                	<ul id="menu">
                    	<li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
					<div id="main">
                    </div>
<div id="footer">
</div>
     

</div>    
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
<script type="text/javascript">
    $(window).load( function() {
    $( '.responsive' ).wideText();
    } );
</script>
</div>
</body>
</html>

JS fixedbackground.js
Codice:
  //--------------------------------------------------------------//
  // Full Window (stretched) Watermarked Background Image v2.0.1. //
  //--------------------------------------------------------------//
  //                                                              //
  //        Copyright (C) 2002-2004 QCS Systems Inc.              //
  //                                                              //
  //  This JavaScript can be used  with  permission as long as    //
  //  this message stays here in the header of the script. Any    //
  //  modifications and bug fixes are appreciated.                //
  //                                                              //
  //    Author : D.J.Oepkes                                       //
  //    Date   : 11/22/2002                                       //
  //    Email  : [email][email protected][/email]                           //
  //                                                              //
  //--------------------------------------------------------------//
  // Modifications                                                //
  //--------------------------------------------------------------//
  // 11/22/2004 D.J.Oepkes, Total rebuild as I finally found an   //
  //                        excellent way to do away with java-   //
  //                        script to position it. It's now all   //
  //                        done through CSS and an easy onload   //
  //                        function does all the layering work   //
  //--------------------------------------------------------------//
  // 01/12/2005 D.J.Oepkes, Removed one layer out the equation.   //
  //                        Also removed layer-position: fixed    //
  //                        to make flash work in firefox.        //
  //--------------------------------------------------------------//

  var backgroundset=false;   // do not change, for internal use only

  //--------------------------------------------------------------//
  // fixedBackground                                              //
  //--------------------------------------------------------------//
  // set the fixed background image. If Called for the first time //
  // it will set the necessary body styles, layers, and images to //
  // create the fixed background effect,  otherwise it will  just //
  // change the background image.                                 // 
  //                                                              //
  // Insert the following into the html to load the script        //
  //   <script src="fixedbackground.js"></script>                 //
  //                                                              //
  // 1) How to Use in body-tag (preferred):                       //
  //  <body onload="fixedBackground('background.jpg');">          //
  //                                                              //
  // 2) How to Use in link:                                       //
  //  <a href="javascript:fixedBackground('background.jpg');">    //
  //    Try this background...                                    //
  //  </a>                                                        //
  //                                                              //
  // 3) How to use in script:                                     //
  //  <script>                                                    //
  //    fixedBackground('background.jpg');                        //
  //  </script>                                                   //
  //--------------------------------------------------------------//

  function fixedBackground(url)
  {
    if(!backgroundset)
    {
      document.body.style.overflow = 'hidden';
      document.body.style.padding  = '0px';
      document.body.style.margin   = '0px';

      var overlay = document.createElement('DIV');
      overlay.style.position    = 'absolute';
      overlay.style.top         = '0px';
      overlay.style.left        = '0px';
      overlay.style.height      = '100%';
      overlay.style.width       = '100%';
      overlay.style.overflow    = 'auto';

      overlay.innerHTML         = document.body.innerHTML;
      document.body.innerHTML   = '<img id="background" height="100%"  width="100%" src="' + url + '" style="left: 0; bottom: 0; right: 0; top: 0; z-index: 0" />';

      document.body.appendChild(overlay);

      backgroundset=true;
    }
    else
      background.src=url;
  }

  //--------------------------------------------------------------//
  //---  Prelevato ed illustrato su [url]http://www.web-link.it[/url]  -----//

File libjQuery.js libreria jquery presa da http://code.jquery.com/jquery-1.8.3.js

jQuery.wideText.js dal sito http://cbavota.bitbucket.org/widetext/

Codice:
/**
 * jQuery.wideText
 * Version 1.0.1
 * Copyright (c) 2012 c.bavota - [url]http://bavotasan.com[/url]
 * Dual licensed under MIT and GPL.
 * Date: 10/04/2012
 **/

( function($) {
	$.fn.wideText = function() {
		return this.each( function() {
			// Add "wtext" class to each element and then set up the magic
			var obj = $(this),
				rtext = obj.addClass( 'wtext' );

			// Work that magic each time the browser is resized
			$(window).on( 'resize', function() {
				obj.css( { 'fontSize': parseInt( obj.css( 'fontSize' ) ) * ( obj.parent().width() / obj.width() ) + 'px', 'visibility' : 'visible' } );
			} ).resize();
		});
	};
} )(jQuery);

CSS

Codice:
@charset "utf-8";
/* CSS Document */
* {
	margin:0;
	padding:0;
}
html, body {
	height:100%;	
}
html {
	background-image:url(imagini%20per%20home/sfondo.gif);
	background-repeat:repeat-x;
	background-size:contain;
	background-attachment:scroll;	
}
body {
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
}
span, .responsive {
visibility: hidden;
} 
h1, .responsive {
line-height: 1.1;
} 
.responsive {
font-family: 'Ranchers', cursive;
text-transform: uppercase;
margin-bottom: 0;
} 
.wtext {
white-space: nowrap;
display: inline-block;
} 
#container {
	height:100%;
}
#header {
	height:12%;
		
}
#FlashID {
	height:100%;
}

Dove sbaglio?Perchè non funziona?
PS:Uso dreamweaver
 
Discussioni simili
Autore Titolo Forum Risposte Data
A [PHP] Bloccare ridimensionamento tabella PHP 1
V [HTML] impedire il ridimensionamento delle immagini zoom browser HTML e CSS 11
M Div che sballano posizione al ridimensionamento HTML e CSS 2
otto9due Problema ridimensionamento immagini senza salvarle.. PHP 5
L ridimensionamento immagini da cartella PHP 0
M Jquery Mobile e ridimensionamento jQuery 0
N ridimensionamento div Javascript 5
R upload immagini multiplo e ridimensionamento PHP 0
felino Virtuemart 1.1.9 - Ridimensionamento automatico immagine prodotto Joomla 0
R upload e ridimensionamento immagini in php PHP 0
R upload e ridimensionamento immagini in php PHP 1
L [PHP] Upload immagini e ridimensionamento automatico PHP 9
C Problema ridimensionamento sito. HTML e CSS 6
helpdesk file Upload con ridimensionamento PHP 32
M Ridimensionamento Immagine Alla Pressione di un tasto Javascript 2
G Problema con il ridimensionamento PHP 12
emanuelevt ridimensionamento pagina Javascript 0
neo996sps Problema con tutorial per ridimensionamento immagini PHP 10
A Javascript per il ridimensionamento immagini Javascript 20
I Errore nel ridimensionamento di una <table> in un <div> HTML e CSS 5
I impedire ridimensionamento del browser HTML e CSS 1
M problema ridimensionamento, archiviazione immagini PHP 1
U ridimensionamento documento dreamweaver Webdesign e Grafica 9
U Ridimensionamento documento Webdesign e Grafica 1
M ridimensionamento immagini Flash 1
U Problema ridimensionamento immagini con PHP PHP 1
C A tutto schermo e ridimensionamento schermo Flash 3
C ridimensionamento più immagini Photoshop 5
S Ridimensionamento automatico pagina Webdesign e Grafica 1
R Ridimensionamento immagini Javascript 2
Z ridimensionamento immagini PHP 0
R upload e ridimensionamento immagine non funzionante PHP 0
S Problema di ridimensionamento HTML e CSS 0
C ridimensionamento immagini Webdesign e Grafica 0
etrusko Ridimensionamento Frame Con Script Javascript 0
H Ridimensionamento immagini tramite mouse Javascript 0
K ridimensionamento della finestra HTML e CSS 2
A Ridimensionamento pagine HTML e CSS 4
M Problemi con la stampa dei valori in php PHP 1
L Ricezione dei dati su file php da modulo html PHP 6
G Somma dei Minuti PHP 3
W Elenco dei link del file presenti in una cartella PHP 2
C Esclusione dei giorni festivi Javascript 0
W Evitare ridondanza dei dati Classic ASP 3
I Passare dei parametri in javascript PHP 0
G Scelta dei Breakpoint HTML e CSS 1
D Javascript per il download dei dati Javascript 0
G MariaDB non restituisce dei valori PHP 7
J estrarre url dei file video da youtube "get_video_info" PHP 6
MarcoGrazia [PHP] Uso dei namespace PHP 5

Discussioni simili