Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > html css > answers

DIV fit an IMG ?

Newbie
  
Join Date: Oct 2008
Location: Geneva in SWITZERLAND
Posts: 3
#1: Oct 23 '08
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>
Atli's Avatar
Moderator
  
Join Date: Nov 2006
Location: Iceland
Posts: 3,746
#2: Oct 23 '08

re: DIV fit an IMG ?

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>).
Expert
  
Join Date: Aug 2008
Posts: 397
#3: Oct 23 '08

re: DIV fit an IMG ?

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...
Reply

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,353 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved