aiutooooo
ho uno script che mi funziona correttamente con chrome e mozilla ma ie mi da problemi o meglio funziona ma la posizione delle scritte sono sfasato
questo è il css principale
body {
background-color:#FFCC99;
}
#container {
background-color:#FFCC99;
margin-left:auto;
margin-right:auto;
margin-top:5px;
width: 1150px;
height: 120%;
}
#banner {
height: 124px;
background-color: #FEFEDC;
background-image: url(picks/2.jpg);
}
.logobox{
float:left;
width: 148px;
height: 122px;
background-image: url(picks/5.jpg);
margin-right:15px;
}
.lbox{
width: 150px;
height: 100%;
background-color:#33CC99;
padding: 0px 1px 1px 1px;
color:red;
}
.lboxItem{
width:145px;
padding-bottom:2px;
padding-left:2px;
padding-right:2px;
padding-top:2px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
}
.textbox{
text-align: left;
font-size: 2.2em;
font-weight: bold;
color:#fff;
padding: 45px 0px 0px 0px;
font-family:"times", verdana,arial , sans-serif;
}
.navbox{
float: right;
border: 0px solid #000;
width: 550px;
height: 30px;
margn: 3px 3px 0px 0px;
background-color:#;
}
#content {
margin-top: 0px;
margin-left: 164px;
height: 100%;
background-color: #FFCC99;
}
blockquote{
margin-top:20px;
border: 2px solid #CECFC6;
padding: 9px;
background-image: url(picks/2.jpg);
background-color:#fff;
font-size: 1.0em;
font-family: "verdana",arial, sans-serif ;
color:black;
font-weight: bold;
}
#left {
float: left;
width: 158px;
height: 100%;
text-align: left;
font-size: 1.0em;
color:red;
padding: 0px;
background-color:#FFCC99;
color:red;
}
img.left {
float:left;
margin-right:7px;
margin-left:3px;
border-left:0px solid #171D29;
}
img.right {
float:right;
margin-left:5px;
border:0px outset #6D8458;
}
#menu ul{
margin: 0;
padding: 5;
margin-bottom: 0em;
float: left;
font: bold 100% Tahoma;
width: 100%;
border: 0px solid #625e00;
background-color: #;
}
#menu ul li{
display: inline;
}
#menu ul li a{
float: left;
color:#000;
padding: 5px 5px;
text-decoration: none;
}
#menu ul li a:visited{
color: white;
}
#menu ul li a:hover{
color: white;
background-color: #172029;
}
p {
background-color: #FFCC99;
padding: 0px 0px 2px 5px;
margin: 0px 2px 4px 0px;
text-align: left;
word-spacing: 2px;
font-size: 16px;
font-family: arial;
color: #000;
}
#left p {
background-color: #CCFFCC;
padding: 0px 4px 2px 4px;
margin: 5px 1px 1px 0px;
text-align: left;
word-spacing: 2px;
font-size: 12px;
font-family: arial;
color:#000;
}
h1 {
float: right;
margin: 25px 350px 0px 0px;
font-size: 2.0em;
color:#65B7FF;
font-family:"times ", verdana,arial , sans-serif;
}
h2 {
text-align: center;
font-size: 1.0em;
color:#fff;
padding: 3px;
font-family:"times", verdana, arial, sans-serif, engravers mt bold;
}
h3{
font-size: 1.2em;
color:#000;
margin-left: 5px;
padding-top: 3px;
border-bottom: 1px solid #000;
font-family:" sans-serif", verdana, arial, times , engravers mt bold;
text-align: center;
}
#footer {
clear: both;
text-align: center;
font-size: 1.0em;
padding: 5px;
color:black;
background-image: url(picks/2.jpg);
}
questa è la pagina
<!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">
<head>
<title>your title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="1.css" type="text/css" rel="stylesheet" />
<link href="qscroller.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mootools-1_2.js"></script>
<script type="text/javascript" src="qscroller.js"></script>
</head>
<body>
<div id="container">
<div id="banner">
<div class="logobox">
</div>
<div class="navbox">
<div id="menu">
<ul>[*]about[*]faq[*]contact[*]archives[*]downloads [*]products[/list]
</div>
</div>
<div class="textbox">Laboratorio Odontoprotesico
dei F.lli Belluccia Francesco & Salvatore</div>
</div>
<div id="left">
<div class="lbox">
<div class="lboxItem">
<div class="lboxItem">
According to the equation, the average British minute is worth just over 10 pence (15 cents) to men and eight pence (12 cents) to women.
more...
</p></div>
</div>
</div>
<div id="content">
<div id="qscroller2" class="qscroller"></div>
<div class="qscroller2-nav">
<div>
<<
>>
</div>
</div>
<div class="hide">
<div class="qslide2">
[img]staff/7.jpg[/img]
Belluccia Francesco
(responsabile ceramica integrale).
</div>
<div class="qslide2">
[img]staff/7.jpg[/img]
Belluccia Salvatore
(protesi mobile, protesi flexite scheletrica, saldatura laser, certificazione 93/42).
</div>
</div>
<script type="text/javascript">
<!--
window.addEvent('domready', function() {
var opt = {
slides: 'qslide2',
duration: 1500,
buttons: {next:'go-next',prev:'go-prev'},
transition: Fx.Transitions.Quint.easeOut
}
var scroller = new QScroller('qscroller2',opt);
scroller.load();
});
//-->
</script>
<h3>Pertanto la nostra struttura brilla per la capacità di garantire lo sviluppo continuo del prodotto mantenendo elevati standard di qualità, prestazioni e affidabilità.</h3>
</div>
<div id="footer">F.lli Belluccia Francesco & Salvatore - Laboratorio Odontoprotesico | Via Sac.Scopelliti, 18 - 89052 Campo Calabro (RC)
Tel. 0965757659 Cell. 3382033089 - 3382016428 labbelluccia@libero.it</div>
</div>
</body>
</html>
di seguito il css e i due files jscript
css
.hide {
visibility: hidden;
position: absolute;
top: -18900px;
}
.qslide {
background: green;
font-size: 10pt;
padding: 3px;
}
#qscroller2 {
width:660px;
height:350px;
border:0px solid #c0c0c0;
background:#FFCC99;
margin-left: 150px;
}
.qscroller2-nav {
font-size: 9pt;
width:550px;
height:25px;
background:#FFCC99;
border:0px solid white;
}
.qscroller2-nav a {
text-decoration: none;
}
.qscroller2-nav div {
float: right;
}
.qslide2 img {
float: left;
padding: 0px 0px 0px 100px;
border: 0px solid #00ffff;
margin: 5px 100px 0px 0px;
}
.qslide2 h1 {
margin:0px 0px 0px 0px;
font-size: 110%;
color: #16387c;
}
1)mootools1_2
//MooTools, <http://mootools.net>, My Object Oriented (JavaScript) Tools. Copyright (c) 2006-2008 Valerio Proietti, <http://mad4milk.net>, MIT Style License.
2)sqscroller
/* QScroller Copyright 2008 Massimo Giagnoni. All rights reserved.
Version 1.0.1 (Mootools 1.2)
QScroller is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
var QScroller = new Class({
options: {
slides: 'qslide',
direction: 'h',
duration: 3000,
auto: false,
delay: 1000,
transition: Fx.Transitions.linear
},
initialize: function(wrapper,options) {
this.setOptions(options);
this.wrapper = $(wrapper);
this.wrapper.setStyles({
position: 'relative',
overflow: 'hidden'
});
this.wrapper.addEvent('mouseenter', this.fireEvent.pass('onMouseEnter',this));
this.wrapper.addEvent('mouseleave', this.fireEvent.pass('onMouseLeave',this));
this.slideOut = new Element('div').setStyles({
position: 'absolute',
overflow: 'hidden',
top: 0,
left: 0,
width: this.wrapper.getStyle('width'),
height: this.wrapper.getStyle('height')
}).injectInside(this.wrapper);
this.slideIn = this.slideOut.clone();
this.slideIn.injectInside(this.wrapper);
this.slides = $$('.'+this.options.slides);
if($defined(this.options.buttons)) {
if($defined(this.options.buttons.next)) {
$(this.options.buttons.next).addEvent('click', this.next.bind(this));
}
if($defined(this.options.buttons.prev)) {
$(this.options.buttons.prev).addEvent('click', this.prev.bind(this));
}
if($defined(this.options.buttons.play)) {
$(this.options.buttons.play).addEvent('click', this.play.bind(this));
}
if($defined(this.options.buttons.stop)) {
$(this.options.buttons.stop).addEvent('click', this.stop.bind(this));
}
}
this.auto = this.options.auto;
this.idxSlide = 0;
this.step = 0;
this.isFirst = true;
},
load: function() {
if(!this.isFirst) {
this.idxSlide += this.step;
if(this.idxSlide > this.slides.length-1) {
this.idxSlide = 0;
} else if(this.idxSlide < 0) {
this.idxSlide = this.slides.length-1;
}
}
this.curSlide = this.slides[this.idxSlide].clone(false,false);
this.curSlide.set('html', this.slides[this.idxSlide].get('html'));
this.show();
},
show: function() {
var slide = this.slideIn.getElement('div');
if(slide) {
this.curSlide.replaces(slide);
} else {
this.curSlide.inject(this.slideIn);
}
this.doEffect();
},
doEffect: function() {
this.fxOn = true;
var d = this.isFirst ? 0:this.options.duration;
var t = this.options.transition;
this.slideIn.set('morph',{duration:d, transition: t});
var inX = 0;
var inY = 0;
var outX = 0;
var outY = 0;
var ww = this.wrapper.getStyle('width').toInt();
var wh = this.wrapper.getStyle('height').toInt();
if(this.step > 0) {
if(this.options.direction == 'h') {
inX = -ww;
outX = ww;
} else {
inY = -wh;
outY = wh;
}
} else {
if(this.options.direction == 'h') {
inX = ww;
outX = -ww;
} else {
inY = wh;
outY = -wh;
}
}
if(this.isFirst) {
if(this.auto) {
this.step = 1;
}
this.isFirst = false;
}
this.slideOut.set('morph', {duration:d, transition: t});
this.slideIn.morph({
top: [inY, 0],
left: [inX, 0],
opacity: [1, 1]
});
this.slideOut.morph({
top: [0, outY],
left: [0, outX]
});
this.fxEnd.delay(d + 75, this);
},
fxEnd: function() {
this.fxOn = false;
this.swapSlides();
if(this.auto) {
$clear(this.timer);
this.timer = this.load.delay(this.options.delay, this);
}
},
stop: function(){
$clear(this.timer);
this.auto = false;
},
play: function() {
if(!this.auto ) {
$clear(this.timer);
this.auto=true;
this.step = 1;
if(!this.fxOn) {
this.load();
}
}
},
next: function() {
this.stop();
if(this.fxOn) { return; }
this.step = 1;
this.load();
},
prev: function() {
this.stop();
if(this.fxOn) { return; }
this.step = -1;
this.load()
},
swapSlides: function() {
this.slideOut.setStyles({
zIndex: 0,
opacity: 0
});
var t = this.slideOut;
this.slideOut =this.slideIn;
this.slideIn = t;
}
});
QScroller.implement(new Options, new Events);
grazie
Rispondi quotando