473,320 Members | 1,990 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

DIV fit an IMG ?

3
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:

Expand|Select|Wrap|Line Numbers
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <HTML xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
  4. <HEAD>
  5. <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <SCRIPT language="JavaScript" type="text/javascript">
  7. <!--
  8. /****************************************** Smooth Scroller SCRIPT, version 1.0.1 - DezinerFolio.COM
  9. */
  10. Scroller={
  11.     // Control The SPEED Of The SCROLLER
  12.     speed:3,
  13.     // Returns The Y Position Of The Div
  14.     gy: function(d){
  15.         gy=d.offsetTop;
  16.         if(d.offsetParent) while (d=d.offsetParent) gy += d.offsetTop;
  17.         return gy;
  18.     },
  19.     // Returns The Current Scroll Position
  20.     scrollTop: function(){
  21.         body=document.body;
  22.         d=document.documentElement;
  23.         if(body && body.scrollTop) return body.scrollTop;
  24.         if(d && d.scrollTop)       return d.scrollTop;
  25.         if(window.pageYOffset)     return window.pageYOffset;
  26.         return 0;
  27.     },
  28.     // Attach An Event For An Element: ELEMENT, TYPE, FUNCTION
  29.     add: function(event,body,d){
  30.         if(event.addEventListener) return event.addEventListener(body,d,false);
  31.         if(event.attachEvent) return event.attachEvent('on'+body,d);
  32.     },
  33.     // Kill An Event Of An Element
  34.     end: function(e){
  35.         if(window.event){
  36.             window.event.cancelBubble=true;
  37.             window.event.returnValue=false;
  38.             return;
  39.         }
  40.         if(e.preventDefault && e.stopPropagation){
  41.             e.preventDefault();
  42.             e.stopPropagation();
  43.         }
  44.     },
  45.     // Move The Scroll Bar To The Particular Div.
  46.     scroll: function(d){
  47.         i=window.innerHeight || document.documentElement.clientHeight;
  48.         h=document.body.scrollHeight;
  49.         a=Scroller.scrollTop();
  50.         if(d>a)
  51.             if(h-d>i)
  52.                 a+=Math.ceil((d-a)/Scroller.speed);
  53.             else
  54.                 a+=Math.ceil((d-a-(h-d))/Scroller.speed);
  55.         else
  56.             a=a+(d-a)/Scroller.speed;
  57.         window.scrollTo(0,a);
  58.         if(a==d || Scroller.offsetTop==a){clearInterval(Scroller.interval);SelM();}//*** Fin du Scroll
  59.         Scroller.offsetTop=a;
  60.     },
  61.     // Initializer That Adds The Renderer To The Onload Function Of The Window
  62.     init: function(){Scroller.add(window,'load',Scroller.render)},
  63.     // This Method Extracts All The Anchors And Validates Then As # And Attaches The Events
  64.     render: function(){
  65.         a=document.getElementsByTagName('a');//'a' ou 'area'
  66.         Scroller.end(this);
  67.         window.onscroll;
  68.         for(i=0;i<a.length;i++){
  69.             l=a[i];
  70.             if(l.href&&l.href.indexOf('#')!=-1&&((l.path==location.path)||('/'+l.path==location.path))){
  71.                 Scroller.add(l,'click',Scroller.end);
  72.                 l.onclick=function(){
  73.                     Scroller.end(this);
  74.                     l=this.hash.substr(1);
  75.                     a=document.getElementsByTagName('a');
  76.                     for(i=0;i<a.length;i++){
  77.                         if(a[i].name == l){
  78.                             clearInterval(Scroller.interval);
  79.                             Scroller.interval=setInterval('Scroller.scroll('+Scroller.gy(a[i])+')',10);
  80.                         }
  81.                     }
  82.                 }
  83.             }
  84.         }
  85.     }
  86. }
  87. // Invoke The Initializer Of The SCROLLER
  88. Scroller.init();
  89. /**************************************************************************************************/
  90. function SelM(mid){
  91.     Pre="Me_";
  92.     a=document.getElementsByTagName('a');
  93.     for(i=0;i<a.length;i++){
  94.         o=a[i];
  95.         if(o.id.substr(0,Pre.length)==Pre){
  96.             if(o.id.substr(Pre.length)==mid){o.className="sm";}else{o.className="";}
  97.         }
  98.     }
  99.     window.self.focus();
  100. }
  101. /**************************************************************************************************/
  102. //-->
  103. </SCRIPT>
  104. <STYLE type="text/css">
  105. <!--
  106. HTML,BODY,*{margin:0;padding:0;border-width:0Px;}
  107. BODY{
  108.     font-family:"Trebuchet MS",Verdana,Arial,sans-serif;font-size:14Px;
  109.     padding:0Px; margin:0Px 10Px 0Px 220Px;
  110.     background:#5C5C5C url(xxx.xxx) fixed;}
  111. DIV#menu{
  112.     width:200Px;height:auto;margin:10Px; font-size:12Px;
  113.     left:0Px;color:#E8E0AE;background:#5C5C5C;z-index:2;
  114.     /* Émulation De Fixed Pour IE: SVENDTOFTE.com */
  115.     position:absolute;
  116.     top:expression(body.scrollTop+0+"Px");
  117. }
  118. HTML>BODY DIV#menu   {position:fixed;top:0Px;}
  119. HTML[XMLNS] DIV#menu {position:fixed;top:0Px;}
  120. DIV#menu a{display:block;color:#DCEFEF;}
  121. DIV#menu a.sm{color:#FF9900;}
  122. a.ancre {display:block;}
  123. H1 {font-size:16Px;color:#FFFFEC;}
  124. H2 {font-size:16Px;color:#FFFFEC;padding-top:10Px;}
  125. a{text-decoration:none;color:#FFDDDD;}
  126. a:hover {text-decoration: underline ;}
  127. DIV.SP1 {padding: 10Px 0Px;}
  128. DIV.Box P {position:absolute;right:-30Px;color:#E8E0AE;cursor:default;}
  129. DIV.Box  {position:relative;width:auto;height:auto;margin:10Px 0;background-color:#CCFFFF;}
  130. DIV.Box A{position:absolute;width:50%;height:100%;top:0;z-index:5;}
  131. DIV.Box A.Ra{left:50%;}
  132. DIV.Box A.La{left:0%;}
  133. DIV.Box IMG {z-index:1;}
  134. -->
  135. </STYLE>
  136. <TITLE>Busan 2008.02</TITLE>
  137. </HEAD>
  138. <BODY onload="SelM(1)">
  139.  
  140. <DIV id="menu">
  141.  <H1>Busan 2008.02</H1>
  142.  <P>Busan 2008.02</P>
  143.  <B>4 Pictures</B>
  144.  <A href="#_PiCS" id="Me_1">PiCS</A>
  145. </DIV>
  146.  
  147. <A name="P1" class="ancre"></A>
  148. <A name="_PiCS" class="ancre"></A><H2>PiCS</H2>
  149. <DIV class="SP1">
  150.  <DIV class="Box">
  151.     <IMG SRC="PiCS/Pic001.JPG">
  152.   <A class="Ra" href="#P2" title="Next >" id="M1_1"></A>
  153.  <P>1</P></DIV>
  154. </DIV>
  155.  
  156. <A name="P2" class="ancre"></A>
  157. <DIV class="SP1">
  158.  <DIV class="Box">
  159.     <IMG SRC="PiCS/Pic002.JPG">
  160.   <A class="La" href="#P1" title="< Previous" id="M2_1"></A>
  161.   <A class="Ra" href="#P3" title="Next >" id="M2_1"></A>
  162.  <P>2</P></DIV>
  163. </DIV>
  164.  
  165. <A name="P3" class="ancre"></A>
  166. <DIV class="SP1">
  167.  <DIV class="Box">
  168.     <IMG SRC="PiCS/Pic003.JPG">
  169.   <A class="La" href="#P2" title="< Previous" id="M3_1"></A>
  170.   <A class="Ra" href="#P4" title="Next >" id="M3_1"></A>
  171.  <P>3</P></DIV>
  172. </DIV>
  173.  
  174. <A name="P4" class="ancre"></A>
  175. <DIV class="SP1">
  176.  <DIV class="Box">
  177.     <IMG SRC="PiCS/Pic004.JPG">
  178.   <A class="La" href="#P3" title="< Previous" id="M4_1"></A>
  179.  <P>4</P></DIV>
  180. </DIV>
  181.  
  182. <DIV style="height:800Px"></DIV>
  183. </BODY></HTML>
Oct 23 '08 #1
2 6104
Atli
5,058 Expert 4TB
Hi.

First of all, you really really need to validate you markup. We can not help you fix your markup unless it is valid.

One pointer tho. Using XHTML (as you are doing), all elements and attributes must be lower case. (that is; <a href...>, not <A HREF>).
Oct 23 '08 #2
David Laakso
397 Expert 256MB
Run your html document through Tidy Online . Of the 86 errors, Tidy will correct all but three errors for you. An id can only be used once on each page-- change those three ids to classes in both the markup and the css.

Confirm it is valid with the w3c Markup Validation Service, and bring it back...
Oct 23 '08 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

3
by: William C. White | last post by:
Does anyone know of a way to use PHP /w Authorize.net AIM without using cURL? Our website is hosted on a shared drive and the webhost company doesn't installed additional software (such as cURL)...
2
by: Albert Ahtenberg | last post by:
Hello, I don't know if it is only me but I was sure that header("Location:url") redirects the browser instantly to URL, or at least stops the execution of the code. But appearantely it continues...
3
by: James | last post by:
Hi, I have a form with 2 fields. 'A' 'B' The user completes one of the fields and the form is submitted. On the results page I want to run a query, but this will change subject to which...
0
by: Ollivier Robert | last post by:
Hello, I'm trying to link PHP with Oracle 9.2.0/OCI8 with gcc 3.2.3 on a Solaris9 system. The link succeeds but everytime I try to run php, I get a SEGV from inside the libcnltsh.so library. ...
1
by: Richard Galli | last post by:
I want viewers to compare state laws on a single subject. Imagine a three-column table with a drop-down box on the top. A viewer selects a state from the list, and that state's text fills the...
4
by: Albert Ahtenberg | last post by:
Hello, I have two questions. 1. When the user presses the back button and returns to a form he filled the form is reseted. How do I leave there the values he inserted? 2. When the...
1
by: inderjit S Gabrie | last post by:
Hi all Here is the scenerio ...is it possibly to do this... i am getting valid course dates output on to a web which i have designed ....all is okay so far , look at the following web url ...
2
by: Jack | last post by:
Hi All, What is the PHP equivilent of Oracle bind variables in a SQL statement, e.g. select x from y where z=:parameter Which in asp/jsp would be followed by some statements to bind a value...
3
by: Sandwick | last post by:
I am trying to change the size of a drawing so they are all 3x3. the script below is what i was trying to use to cut it in half ... I get errors. I can display the normal picture but not the...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.