Salve a tutti ho un problema con un layout fluido
Ho fatto una pagina che conteneva un immagine di sfondo che veniva sempre ripetuta quindi per ovviare a ciò ho adottato un layout fluido e infatti ora lo sondo si adatta ai vari monitor col piccolo problema che i contenuti non si vedono più qualcuno può aiutarmi
vi allego il codice
questo è l html
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<title>Effetto Flash-like in Javascript - Esempio JavaScript scaricato da HTML.it</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<meta name="Robots" content="All" />
<meta name="Description" content="HTML.it - il sito italiano sul Web publishing" />
<meta name="Keywords" content="javascript" />
<meta name="Owner" content="HTML.it srl" />
<meta name="Author" content="HTML.it srl" />
<meta name="Copyright" content="HTML.it srl" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="css/imgbubbles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*CSS for 2 demos on the page*/
#orbs li{
width: 65px; /*width of image container. Should be wider than contained images (before bubbling) */
height:60px; /*height of image container. Should be taller than contained images (before bubbling) */
}
#orbs li img{
width: 55px; /*width of each image before bubbling*/
height: 60px; /*height of each image*/
}
#squares li{
width: 100px; /*width of image container. Must be wider than contained images (before bubbling) */
height:100px; /*height of image container. Must be taller than contained images (before bubbling) */
}
#squares li img{
width: 65px; /*width of each image before bubbling*/
height: 65px; /*height of each image*/
}
</style>
<script type="text/javascript" src="js/imgbubbles.js">
/***********************************************
* Image Bubbles effect- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('ul#orbs').imgbubbles({factor:1.75}) //add bubbles effect to UL id="orbs"
$('ul#squares').imgbubbles({factor:2.5}) //add bubbles effect to UL id="squares"
})
</script>
</head>
<body>
<div>[img]images/sfondo.png[/img]</div>
<div>[img]images/logo.png[/img]<img id="scrollable" />
<div table align="center">
<table width="522" height="208" border="0" align="left">
<tr>
<th width="516" scope="col"></th>
</tr>
</table>
<ul id="squares" class="bubblewrap">[*][*][img]images/squares/delicious.png[/img][*][img]images/squares/digg.png[/img][*][img]images/squares/stumbleupon.png[/img][*][img]images/squares/rss.png[/img][/list]
</div>
</body>
</html>
questo è il css
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#sfondo {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
#scrollable {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
.bubblewrap{
list-style-type:none;
margin:70px;
padding:0;
}
.bubblewrap li{
display:inline-block;
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 100px;
height:100px;
}
.bubblewrap li img{
position:absolute;
width: 150px; /*default width of each image larghezza.*/
height: 150px; /*default height of each image altezza.*/
left:0px;
top:0px;
border:0;
}
.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
position:absolute;
font:bold 15px Arial;
padding:2px;
width:100px;
text-align:center;
background:#EBFCA4;
text-decoration:underline;
color:#FFF;
}
se qualcuno pùò mi aiuti
Rispondi quotando