/    Sign up×
Community /Pin to ProfileBookmark

Scrolling picture gallery problem

Copy linkTweet thisAlerts:
Mar 19.2004

This is a greatly stripped down version of a page I’m working on. Changing ‘style.left’ of the ‘photo’ div will scroll the pictures.

Here’s the problem.
The photo div extends beyond the right edge of the page. This can be ‘sort of’ fixed if I change the ‘gallery_frame.width’ to 80%. but, change to 800×600 resolution, and the problem’s back. What I want, is for the gallery_frame width to be fluid and expand to the right edge of the screen. Once fixed, the ‘overflow.hidden’ will keep the off-screen pictures hidden. In IE and Opera this also gets rid of the horrizontal scroll bar.
I need this to work with IE, Mz, NS, and Op.

Any thoughts would be greatly appreciated.

[code=php]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html><head><title></title>
<style type=”text/css”>
body { margin:0px; padding:0px; }
img { border:0px; }
#nav_wrapper { float:left; padding:70px 12px 0px 12px; border:1px solid #000; }
#content_wrapper { margin-left:163px; padding-top:60px; border:1px solid #000; }
#greystrip { position:absolute; top:370px; left:163px; width:100%; height:120px; background:#1b1c1f; }
#gallery_frame { position:absolute; top:370px; left:163px; width:100%; height:120px; overflow:hidden; }
</style>
</head>

<body>
<div id=”container”>
<div id=”nav_wrapper”><img src=”images/spacer.gif” width=136 height=450></div>
<div id=”content_wrapper”>Content goes here<br><img src=”images/spacer.gif” width=136 height=250></div>
<div>
<div id=”greystrip”></div>
<div id=”gallery_frame”>
<div id=”photos” style=”position:absolute; top:0px; left:0px;”>
<table width=860 cellspacing=0 cellpadding=0 border=0>
<tr align=”center”><td width=20 height=120>&nbsp;</td>
<td width=120><img src=”images/046T.jpg”></td>
<td width=120><img src=”images/047T.jpg”></td>
<td width=120><img src=”images/048T.jpg”></td>
<td width=120><img src=”images/049T.jpg”></td>
<td width=120><img src=”images/050T.jpg”></td>
<td width=120><img src=”images/051T.jpg”></td>
<td width=120><img src=”images/052T.jpg”></td>
</tr>
</table>
</div>
</div>
</body>
</html>
[/code]

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@SamMar 19.2004 — hmmm... tables for non-tabular data... thats gotta be some of the problem...
Copy linkTweet thisAlerts:
@NedalsauthorMar 19.2004 — [i]Originally posted by samij586 [/i]

[B]hmmm... tables for non-tabular data... thats gotta be some of the problem... [/B][/QUOTE] I had a feeling that might come up. ?

Since you brought it up, ? do you know of a relatively simple way around this? I need the pictures, all different sizes, to be centered horrizontally AND vertically in 120x120px 'frames'. (there are more than are shown here )
Copy linkTweet thisAlerts:
@SamMar 19.2004 — multiple rows?
Copy linkTweet thisAlerts:
@NedalsauthorMar 19.2004 — [i]Originally posted by samij586 [/i]

[B]multiple rows? [/B][/QUOTE]
No! Just one row. Similar to what the table shown would produce.
Copy linkTweet thisAlerts:
@SamMar 19.2004 — alright, well, semantically speaking, I think your best bet is an unordered list sorta like this:
[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
margin:0px;
}
#horizon{
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
display: block
}

#content

{
margin-left: -300px;
position: absolute;
top: -60px;
left: 50%;
width: 720px; //horizontal centering won't work unless this=total width of all your images
height: 120px;
}
#content ul{
display:block;
list-style-type:none;
margin:0px;
padding:0px;
}
#content ul li{
display:inline;
margin:0px;
padding:0px;
}
#content ul li img{
width:120px;
height:120px;
margin:0px;
margin-left:0px !important;
margin-left:-4px; //had to hack IE here because it was adding unexplained margins to the images...
padding:0px;
border:0px;
}
</style>

</head>
<body>
<div id="horizon">
<div id="content">
<ul>
<li><img src="image.gif" alt="alternate text" /></li>
<li><img src="image.gif" alt="alternate text" /></li>
<li><img src="image.gif" alt="alternate text" /></li>
<li><img src="image.gif" alt="alternate text" /></li>
<li><img src="image.gif" alt="alternate text" /></li>
<li><img src="image.gif" alt="alternate text" /></li>
</ul>
</div>
</div>
</body>
</html>
[/code]
[b]EDIT:[/b]

well, it seems that the spacing is happening in real browsers to, and is a result of text size... I've got no idea how to remedy this, so suppose we'll have to wait for the gurus... perhaps inserting it as a background image would work...
Copy linkTweet thisAlerts:
@NedalsauthorMar 19.2004 — Thank's for the code.

It produced the inline structure but no centering (IE6).


I'll work on this some more tomorow.

I still need help with the original problem. I can live with the table structure, (tut, tut) but not with the other problem. ?

EDIT:

It's not tomorow, but I noticed that you seemed to be centering the whole array. What I want is for each picture (different, unknown sizes) to be centered within the 120x120 cell (for lack of any other word - tables again!!).
Copy linkTweet thisAlerts:
@SamMar 19.2004 — oh, you want each picture centered, not the whole list... let me work on this and get back to you...

[b]EDIT:[/b]

also, did you remove the comments? I didn't use proper syntax there, so it might have messed things up...
Copy linkTweet thisAlerts:
@NedalsauthorMar 19.2004 — [i]Originally posted by samij586 [/i]

[B]Did you remove the comments? [/B][/QUOTE]Sure did!

As you said, the pictures are centered AND the whole array is styled with position:absolute.

I had a thought that will resolve the table problem. Why not say the pictures are in a TABULAR row and use a table. ??
Copy linkTweet thisAlerts:
@SamMar 19.2004 — Ok, this works... just add your favorite [URL=http://www.mezzoblue.com/tests/revised-image-replacement/]image replacement[/URL] technique for alt text senarios, and you'll be good to go...
[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
margin:0px;
}
#horizon{
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
display: block
}

#content

{
margin-left: -300px;
position: absolute;
top: -60px;
left: 50%;
width: 720px;
height: 120px;
}
#content ul{
display:block;
list-style-type:none;
margin:0px;
padding:0px;
height:120px;
}
#content ul li{
display:inline;
margin:0px;
padding:0px;
width:120px;
height:120px;
display:block;
position:absolute;
z-index:1;
}
#content ul li.pic1{
width:120px;
height:120px;
margin:0px;
padding:0px;
left:0;
background:url(image.gif) center center no-repeat;
}
#content ul li.pic2{
width:120px;
height:120px;
margin:0px;
padding:0px;
left:120px;
background:url(image.gif) center center no-repeat;
}
#content ul li.pic3{
width:120px;
height:120px;
margin:0px;
padding:0px;
left:240px;
background:url(image.gif) center center no-repeat;
}
#content ul li.pic4{
width:120px;
height:120px;
margin:0px;
padding:0px;
left:360px;
background:url(image.gif) center center no-repeat;
}
#content ul li.pic5{
width:120px;
height:120px;
margin:0px;
padding:0px;
left:480px;
background:url(image.gif) center center no-repeat;
}
#content ul li.pic6{
width:120px;
height:120px;
margin:0px;
padding:0px;
left:600px;
background:url(image.gif) center center no-repeat;
}
</style>

</head>
<body>
<div id="horizon">
<div id="content">
<ul>
<li class="pic1"></li>
<li class="pic2"></li>
<li class="pic3"></li>
<li class="pic4"></li>
<li class="pic5"></li>
<li class="pic6"></li>
</ul>
</div>
</div>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@NedalsauthorMar 19.2004 — I can't keep up with you. ?

A real quick glance and I see a style for each cell. Problem is I have 20 or more cells per page and 10 pages of this stuff. Gets to be an awful lot of CSS. See my previous post for my proposed solution. ?

Not that I've given up! I truly thank you for the code and I will look it over. Always trying to learn new tricks.

Want to take a look at the original problem of how to get an absolute(ly) positioned div, with a color background, to expand to the width of the screen with style left:163px; OR margin-left:163px;
Copy linkTweet thisAlerts:
@NedalsauthorMar 20.2004 — Here's what I did to your code. Forgive me. ?

Probably violated a few rules but it sort of worked. I got some unexpected space at the beginning which I can deal with but would still like to know why. I checked it out in IE6 and it looks fine. In Opera6 the pics were a little high of center and, strangely, in NS7 they are low of center. Very odd! Any thoughts would be appreciated.
[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body
{ margin:0px; background:#fff; }
#gallery
{ position:absolute; top:100px; left:0px; width:100%; height:120px; background:#eee; overflow:hidden }
#photos

{ position:absolute; top:0px; left:0px; width:1400px; }
#photos ul
{ list-style-type:none; }
#photos ul li
{ float:left; margin:0px; padding:0px; width:120px; height:120px; display:inline; }
</style>

</head>
<body>
<div id="gallery">
<div id="photos">
<ul>
<li style="background:url(images/gallery01/pict1t.jpg) center center no-repeat;">
<li style="background:url(images/gallery01/pict1t.jpg) center center no-repeat;">
<li style="background:url(images/gallery01/pict1t.jpg) center center no-repeat;">
<li style="background:url(images/gallery01/pict1t.jpg) center center no-repeat;">
<li style="background:url(images/gallery01/pict1t.jpg) center center no-repeat;">
<li style="background:url(images/gallery01/pict1t.jpg) center center no-repeat;">
<li style="background:url(images/gallery01/pict1t.jpg) center center no-repeat;">
<li style="background:url(images/gallery01/pict1t.jpg) center center no-repeat;">
<li style="background:url(images/gallery01/pict1t.jpg) center center no-repeat;">
<li style="background:url(images/gallery01/pict1t.jpg) center center no-repeat;">
</ul>
</div>
</div>
</body>
</html>
[/code]
×

Success!

Help @Nedals spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...