Hello,
1. How to get my DIV (DIV.Box) fit its content (an image)?
width:auto doesn't work?
2. How to get links (A) in this DIV click-able (on the IMG) in IE6 too?
Thanks
URL: http://www.airfirst.ch/b1/album3.html
HTML:
1. How to get my DIV (DIV.Box) fit its content (an image)?
width:auto doesn't work?
2. How to get links (A) in this DIV click-able (on the IMG) in IE6 too?
Thanks
URL: http://www.airfirst.ch/b1/album3.html
HTML:
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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="fr" xml:lang="fr">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<SCRIPT language="JavaScript" type="text/javascript">
<!--
/****************************************** Smooth Scroller SCRIPT, version 1.0.1 - DezinerFolio.COM
*/
Scroller={
// Control The SPEED Of The SCROLLER
speed:3,
// Returns The Y Position Of The Div
gy: function(d){
gy=d.offsetTop;
if(d.offsetParent) while (d=d.offsetParent) gy += d.offsetTop;
return gy;
},
// Returns The Current Scroll Position
scrollTop: function(){
body=document.body;
d=document.documentElement;
if(body && body.scrollTop) return body.scrollTop;
if(d && d.scrollTop) return d.scrollTop;
if(window.pageYOffset) return window.pageYOffset;
return 0;
},
// Attach An Event For An Element: ELEMENT, TYPE, FUNCTION
add: function(event,body,d){
if(event.addEventListener) return event.addEventListener(body,d,false);
if(event.attachEvent) return event.attachEvent('on'+body,d);
},
// Kill An Event Of An Element
end: function(e){
if(window.event){
window.event.cancelBubble=true;
window.event.returnValue=false;
return;
}
if(e.preventDefault && e.stopPropagation){
e.preventDefault();
e.stopPropagation();
}
},
// Move The Scroll Bar To The Particular Div.
scroll: function(d){
i=window.innerHeight || document.documentElement.clientHeight;
h=document.body.scrollHeight;
a=Scroller.scrollTop();
if(d>a)
if(h-d>i)
a+=Math.ceil((d-a)/Scroller.speed);
else
a+=Math.ceil((d-a-(h-d))/Scroller.speed);
else
a=a+(d-a)/Scroller.speed;
window.scrollTo(0,a);
if(a==d || Scroller.offsetTop==a){clearInterval(Scroller.interval);SelM();}//*** Fin du Scroll
Scroller.offsetTop=a;
},
// Initializer That Adds The Renderer To The Onload Function Of The Window
init: function(){Scroller.add(window,'load',Scroller.render)},
// This Method Extracts All The Anchors And Validates Then As # And Attaches The Events
render: function(){
a=document.getElementsByTagName('a');//'a' ou 'area'
Scroller.end(this);
window.onscroll;
for(i=0;i<a.length;i++){
l=a[i];
if(l.href&&l.href.indexOf('#')!=-1&&((l.path==location.path)||('/'+l.path==location.path))){
Scroller.add(l,'click',Scroller.end);
l.onclick=function(){
Scroller.end(this);
l=this.hash.substr(1);
a=document.getElementsByTagName('a');
for(i=0;i<a.length;i++){
if(a[i].name == l){
clearInterval(Scroller.interval);
Scroller.interval=setInterval('Scroller.scroll('+Scroller.gy(a[i])+')',10);
}
}
}
}
}
}
}
// Invoke The Initializer Of The SCROLLER
Scroller.init();
/**************************************************************************************************/
function SelM(mid){
Pre="Me_";
a=document.getElementsByTagName('a');
for(i=0;i<a.length;i++){
o=a[i];
if(o.id.substr(0,Pre.length)==Pre){
if(o.id.substr(Pre.length)==mid){o.className="sm";}else{o.className="";}
}
}
window.self.focus();
}
/**************************************************************************************************/
//-->
</SCRIPT>
<STYLE type="text/css">
<!--
HTML,BODY,*{margin:0;padding:0;border-width:0Px;}
BODY{
font-family:"Trebuchet MS",Verdana,Arial,sans-serif;font-size:14Px;
padding:0Px; margin:0Px 10Px 0Px 220Px;
background:#5C5C5C url(xxx.xxx) fixed;}
DIV#menu{
width:200Px;height:auto;margin:10Px; font-size:12Px;
left:0Px;color:#E8E0AE;background:#5C5C5C;z-index:2;
/* Émulation De Fixed Pour IE: SVENDTOFTE.com */
position:absolute;
top:expression(body.scrollTop+0+"Px");
}
HTML>BODY DIV#menu {position:fixed;top:0Px;}
HTML[XMLNS] DIV#menu {position:fixed;top:0Px;}
DIV#menu a{display:block;color:#DCEFEF;}
DIV#menu a.sm{color:#FF9900;}
a.ancre {display:block;}
H1 {font-size:16Px;color:#FFFFEC;}
H2 {font-size:16Px;color:#FFFFEC;padding-top:10Px;}
a{text-decoration:none;color:#FFDDDD;}
a:hover {text-decoration: underline ;}
DIV.SP1 {padding: 10Px 0Px;}
DIV.Box P {position:absolute;right:-30Px;color:#E8E0AE;cursor:default;}
DIV.Box {position:relative;width:auto;height:auto;margin:10Px 0;background-color:#CCFFFF;}
DIV.Box A{position:absolute;width:50%;height:100%;top:0;z-index:5;}
DIV.Box A.Ra{left:50%;}
DIV.Box A.La{left:0%;}
DIV.Box IMG {z-index:1;}
-->
</STYLE>
<TITLE>Busan 2008.02</TITLE>
</HEAD>
<BODY onload="SelM(1)">
<DIV id="menu">
<H1>Busan 2008.02</H1>
<P>Busan 2008.02</P>
<B>4 Pictures</B>
<A href="#_PiCS" id="Me_1">PiCS</A>
</DIV>
<A name="P1" class="ancre"></A>
<A name="_PiCS" class="ancre"></A><H2>PiCS</H2>
<DIV class="SP1">
<DIV class="Box">
<IMG SRC="PiCS/Pic001.JPG">
<A class="Ra" href="#P2" title="Next >" id="M1_1"></A>
<P>1</P></DIV>
</DIV>
<A name="P2" class="ancre"></A>
<DIV class="SP1">
<DIV class="Box">
<IMG SRC="PiCS/Pic002.JPG">
<A class="La" href="#P1" title="< Previous" id="M2_1"></A>
<A class="Ra" href="#P3" title="Next >" id="M2_1"></A>
<P>2</P></DIV>
</DIV>
<A name="P3" class="ancre"></A>
<DIV class="SP1">
<DIV class="Box">
<IMG SRC="PiCS/Pic003.JPG">
<A class="La" href="#P2" title="< Previous" id="M3_1"></A>
<A class="Ra" href="#P4" title="Next >" id="M3_1"></A>
<P>3</P></DIV>
</DIV>
<A name="P4" class="ancre"></A>
<DIV class="SP1">
<DIV class="Box">
<IMG SRC="PiCS/Pic004.JPG">
<A class="La" href="#P3" title="< Previous" id="M4_1"></A>
<P>4</P></DIV>
</DIV>
<DIV style="height:800Px"></DIV>
</BODY></HTML>
Comment