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:
Expand|Select|Wrap|Line Numbers
- <?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>