SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2005
    Location
    belgium
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question h-scroll photo gallery layout problems (overflow)

    Hello,
    who knows how I can place the text ( next to the pictures ) over the grey space underneath the pictures (iso to the right).
    I tried "position:relative ;...." , but that does not work in IE : the text will not move when you scroll (works perfect in Mozilla)
    http://www.divinglisa.be/scroll.html

    code:
    Code:
    <style type="text/css">
    #galleryS {
      background : #DEDEDE; 
      height: 490px; 
      width:545px; 
      border:1px solid black; 
      margin :0px; padding : 10px 0;  
      overflow: auto; 
      white-space: nowrap; 
    }
    #galleryS ul li {
      display: inline
      }
    #galleryS ul li img{ 
      padding:10px 10px 95px 10px; 
      background:#AAA; 
      border:2px solid ; 
      border-color :#333 #FFF #FFF #333 ;  
    }
    </style>
    </head>
    <body>
    <div id="galleryS">
    <ul>
    <li><img src="images/uploaded/thumbs/3019-3422-BajaCalifornia040.JPG"  /><span class="text"> fish </span</li>
    <li><img src="images/uploaded/thumbs/3603-4221-P5030038.JPG" /> </li>
    <li><img src="images/uploaded/thumbs/3019-3422-BajaCalifornia040.JPG"  /> </li>
    <li><img src="images/uploaded/thumbs/0046-Bluespotted_stingray_33.jpg"  /></li> 
    <li><img src="images/uploaded/thumbs/3603-4221-P5030038.JPG"  /> </li><br />
    <li><img src="images/uploaded/thumbs/3019-3422-BajaCalifornia040.JPG"  /><span class="text"> fish </span</li>
    <li><img src="images/uploaded/thumbs/0046-Bluespotted_stingray_33.jpg"  /> </li>
    <li><img src="images/uploaded/thumbs/3603-4221-P5030038.JPG "/> </li>
    <li><img src="images/uploaded/thumbs/3019-3422-BajaCalifornia040.JPG" /> </li>
    <li><img src="images/uploaded/thumbs/0046-Bluespotted_stingray_33.jpg"  /> </li>
    
    </ul>
    </div>
    </body>
    </html>
    Thank you
    Johan

    PS. I know that there is another way of making such a gallery.
    Iframe and tables , but I try not the use tables anymore, pure CSS

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to add position relative to the parent also. (Ie's funny like that)

    Code:
    #galleryS {
      background : #DEDEDE; 
      height: 490px; 
      width:545px; 
      border:1px solid black; 
      margin :0px; 
      padding : 10px 0;  
      overflow: auto; 
      white-space: nowrap; 
      position:relative;
    }
    #galleryS ul li span{
    position:relative;
    left:-100px;
    top:-20px;
    }
    
    Paul

    BTW the break in the middle of the list isn't valid. (you will need 2 lists instead).

  3. #3
    SitePoint Member
    Join Date
    Jan 2005
    Location
    belgium
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx again Paul,
    I applied your solution (also removed the break and replaced it with another list)
    and it worked out fine.

    I don't think IE is so funny anymore.
    Every time it costs me hours to try to find a solution , I don't want to disturb you guys for every problem.
    But when it fails after many hours, IE seems to be the cause of the problem.

    But luckily you seem to know a way around every time
    Thanks for replying so soon
    Johan

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I don't think IE is so funny anymore
    No - It can be a pain at time.

    If you remember that position:relative and height:1% can cure a lot of bugs the try them first - it might save you hours (Always hide the height:1% from other browsers - see FAQ as some of the posts use the mac hiding hack combined with the star selector.)

    Paul

  5. #5
    SitePoint Member
    Join Date
    Jan 2005
    Location
    belgium
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, now I have another problem
    http://www.divinglisa.be/scroll1.html

    The longer the name linked to an image ,the further away the next image appears (position:relative is obviously the reason why)
    also transparency works in Firefox but not IE (that's normal by now I suppose)
    I tried playing with position in every element , but nothing works.
    I'm desperate, I really want to use css only.


    Code:
    <style type="text/css">
    
    #galleryS {
      background : #DEDEDE; 
      height: 510px; 
      width:545px; 
      border:1px solid black; 
      margin :0px; 
      padding : 10px 0;  
      overflow: auto; 
      white-space: nowrap; 
      position:relative;
    }
    #galleryS ul li {
      display: inline
      }
    #galleryS ul li img{ 
      padding:10px 10px 95px 10px; 
      background:#AAA; 
      border:2px solid ; 
      border-color :#333 #FFF #FFF #333 ;  
    }
    #galleryS ul li span{
    position:relative;
    left:-100px;
    top:-20px;
    line-height:25px;
    font-size:20px;
    background-color:white;
    _filter:alpha(opacity=50);
    -moz-opacity:0.30;
    opacity:0.30;
    }
    </style>
    </head>
    <body>
    <div id="galleryS">
    <ul>
    <li><img src="images/uploaded/thumbs/3019-3422-BajaCalifornia040.JPG"  /><span class="text"> fish in the sea</span></li>
    <li><img src="images/uploaded/thumbs/3603-4221-P5030038.JPG" /><span class="text"> fish in the deep</span></li>
    <li><img src="images/uploaded/thumbs/3019-3422-BajaCalifornia040.JPG"  /><span class="text"> alone </span></li>
    <li><img src="images/uploaded/thumbs/0046-Bluespotted_stingray_33.jpg"  /><span class="text"> fish </span></li>
    <li><img src="images/uploaded/thumbs/3603-4221-P5030038.JPG"  /></li><span class="text"> fish </span></li>
    </ul>
    <ul>
    <li><img src="images/uploaded/thumbs/3019-3422-BajaCalifornia040.JPG"  /><span class="text"> fish </span></li>
    <li><img src="images/uploaded/thumbs/0046-Bluespotted_stingray_33.jpg"  /><span class="text"> fish </span></li>
    <li><img src="images/uploaded/thumbs/3603-4221-P5030038.JPG "/><span class="text"> fish </span></li>
    <li><img src="images/uploaded/thumbs/3019-3422-BajaCalifornia040.JPG" /><span class="text"> fish </span></li>
    <li><img src="images/uploaded/thumbs/0046-Bluespotted_stingray_33.jpg"  /><span class="text"> fish </span></li>
    
    </ul>
    </div>
    </body>
    </html>
    Btw : Is <iframe> still valid ??

    Thanx again

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    This works in ie6 and firefox/moz but opera doesn't like it.
    Code:
    <!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>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #galleryS {
    background : #DEDEDE; 
    height: 510px; 
    width:545px; 
    border:1px solid black; 
    margin :0px; 
    padding : 10px 0; 
    overflow: auto; 
    white-space: nowrap; 
    position:relative;
    }
    #galleryS ul li {
    display:inline;
    position:relative;
    }
    #galleryS ul li img{ 
    padding:10px 10px 95px 10px; 
    background:#AAA; 
    border:2px solid ; 
    border-color :#333 #FFF #FFF #333 ; 
    }
    #galleryS ul li span{
    position:absolute;
    left:0px;
    top:-50px;
    width:170px;
    text-align:center;
    line-height:25px;
    font-size:20px;
    background-color:white;
    /*IE/Windows opacity filter - set to 30%*/
    filter: alpha(opacity=30);
    /*Mozilla opacity - set to 30%*/
    -moz-opacity: 0.3;
    }
    * html #galleryS ul li span{top:150px;}
    </style>
    </head>
    <body>
    <div id="galleryS"> 
    <ul>
    	<li><img src="http://www.divinglisa.be/images/uplo...ifornia040.JPG" /><span class="text"> 
    	 fish in the sea</span></li>
    	<li><img src="http://www.divinglisa.be/images/uplo...1-P5030038.JPG" /><span class="text"> 
    	 fish in the deep</span></li>
    	<li><img src="http://www.divinglisa.be/images/uplo...ifornia040.JPG" /><span class="text"> 
    	 alone </span></li>
    	<li><img src="http://www.divinglisa.be/images/uplo...tingray_33.jpg" /><span class="text"> 
    	 fish </span></li>
    	<li><img src="http://www.divinglisa.be/images/uplo...1-P5030038.JPG" />
    	 <span class="text"> fish </span></li>
    </ul>
    <ul>
    	<li><img src="http://www.divinglisa.be/images/uplo...ifornia040.JPG" /><span class="text"> 
    	 fish </span></li>
    	<li><img src="http://www.divinglisa.be/images/uplo...tingray_33.jpg" /><span class="text"> 
    	 fish </span></li>
    	<li><img src="http://www.divinglisa.be/images/uplo...1-P5030038.JPG "/><span class="text"> 
    	 fish </span></li>
    	<li><img src="http://www.divinglisa.be/images/uplo...ifornia040.JPG" /><span class="text"> 
    	 fish </span></li>
    	<li><img src="http://www.divinglisa.be/images/uplo...tingray_33.jpg" /><span class="text"> 
    	 fish </span></li>
    </ul>
    </div>
    </body>
    </html>
    The iframe is deprecated in 1.0 strict but ok in transitional Htm; 4.01 etc.

    Paul

  7. #7
    SitePoint Member
    Join Date
    Jan 2005
    Location
    belgium
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,

    I already gave up, and made the gallery with <iframe>
    But then you answered again to my question.
    Sometimes it is really frustrating that CSS-code is acting so bizarre in different browsers.

    Now I realize that there is still is a long way to go in webdevelopment.

    I really, really appreciate the time you spent on solving my problem.
    I hope that it will be useful to other members too. (Therefore I will not remove the following link)

    http://www.divinglisa.be/scroll2.html

    I know you've read this a thousand times,
    but I really mean it when i write :
    "Thank you paul"


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •