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
JS fixedbackground.js
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/
CSS
Dove sbaglio?Perchè non funziona?
PS:Uso dreamweaver
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
