18 replies [Last post]
dkintheuk
Offline
Regular
Reading, UK
Last seen: 15 years 5 days ago
Reading, UK
Joined: 2005-08-01
Posts: 26
Points: 0

Hi all,

FIrst post here so be gentle. I've searched a fair bit now but can't find a clear answer to my problem.

My site is at www.4elanclose.co.uk and i want to have the site with two absolute divs to give me the nav on the left and the main body on the right. (oh yes and a heading but that works...)

The nav bar is placed fine except that within the nav i want to place three relatively positioned divs that will scroll through a load of family photos. Unfortunately they seem to be distributing themselves randomly though the nav div and are seemingly impossible to control.

Does anyone have any suggestions of how to manage their positions more effectively? I also put in text headings to each of them but they don't even show at all.

The pages are created in php (many photos behind the scenes) and that appears to be working properly but i can't for the life of me see what to do next.

Many thanks,

Rob.

Anonymous
Anonymous's picture
Guru

Re: How to have relative scrolling divs within an absolute d

dkintheuk wrote:
FIrst post here so be gentle.
OK. Smile

The good news is there are only 1320 validation errors to fix in your code. Laughing out loud

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.4elanclose.co.uk%2F

Change all the & to & and add an alt attribute to all the images for starters. Smile

The layout isn't complex so the absolute positioning isn't hurting anything but it doesn't seem very necessary. Any reason you've settled on using absolute positioning for this?

dkintheuk
Offline
Regular
Reading, UK
Last seen: 15 years 5 days ago
Reading, UK
Joined: 2005-08-01
Posts: 26
Points: 0

How to have relative scrolling divs within an absolute div?

I got that validation note - easy to fix as it's all generated in code... though it is my bad for not thinking about the &amp thingy and also the alt tags... i always forget to put them in.

The layout is really a test of what i can do so i only chose absolute positioning as i thought that would work.

Obviously not, but i really wanted the three scrolling photo panels within the container div.

Does that make any sense? Am i just getting the wrong end of the stick?

Thanks for the reply...

EDIT:

Fixed all the buggy stuff already so the html is close to being valid...

dkintheuk
Offline
Regular
Reading, UK
Last seen: 15 years 5 days ago
Reading, UK
Joined: 2005-08-01
Posts: 26
Points: 0

How to have relative scrolling divs within an absolute div?

Result!

Dropped use of tables totally and reviewed the whole code completely and notriced a few minor bugs...

Now it works exactly as I intended.

Thanks for the guidance - just needed to be more vigilant about my debugging in future.

Rob.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

How to have relative scrolling divs within an absolute div?

Get rid of the the other stylesheets and use the following to show what is possible. I took out a lot of redundant code and removed all the position:absolutes, visibility, z-indexing and other stuff. What you have here is stripped down efficient CSS. You should combine your .piclist1,2,3 into a single .piclist class that gives a fixed height scroller. Note that overflow:scroll will force a horizontal scroller as well which you don't want. overflow:auto is better. I made too many changes to completely document here but if you look at the old and new side by side you will pick up most of the changes.

You should note that there is very little dimensioning. The page elements, other than the floated .nav (which should be an id, not a class, probably) are "in the flow" and sort themselves automatically according to content. I'd be happy to parse things out for you if you are willing to work on the CSS side of things diligently.

body {
	font:normal normal 80%/1.2 georgia, 'times new roman', times, serif;
	color: #333333;
	margin: 0;
	padding: 5px;
}

.heading {
	border-bottom:2px dotted #666;
}
.nav {
	float:left;
	width: 225px;
}
.container {
	width: 563px;
	margin-left:235px;
	border-left:2px dotted #666;
}
.piclist1,
.piclist2,
.piclist3 {
	overflow: auto;
	height: 120px;
	border: thin solid #CC0000;
}
.nav img {border:2px inset #333;}
.nav .normtext {
	font-variant:small-caps;
	font-weight:bold;
}
.main {
	text-align:center;/*for IE5*/
}
.main img {
	display:block;
	margin:0 auto;
	border:4px inset #c00;
}
.blog{
	margin:0 .5em;
}
.footing{
	border-top:2px dotted #666;
	margin-left:5px;
}
h1 {
	font-size: medium;
	font-weight: bold;
	color: #999999;
}
h2 {
	font-size: large;
	color: #999999;
}
h3 {
	font-size: medium;
	color: #999999;
}
hr {
	color: #CCCCCC;
	height: 1px;
	width: 100%;
	border: #CCCCCC;
}
p {
	font-size: xx-small;
	color: #CCCCCC;
}
a:link {
	text-decoration: none;
	color: #0099FF;
	}
a:visited {
	text-decoration: none;
	color: #CC99FF;
	}
a:hover {
	text-decoration: underline;
	color: #00CCFF;
	}
a:active {
	text-decoration: none;
	color: #0099FF;
	}
.just {
	text-align: justify;
}
.cent {
	text-align: center;
}
.normtext {
	font-size: 1em;
	text-align: justify;
}

The javascript preload takes forever and I frankly think you should chuck it and only use the image swap routine. There will be a delay, yes, but the main page will be far more functional. Perhaps you or someone else could fashion a swap this one and preload the next function since many people do their viewing sequentially. That way the next loads in the background while they are viewing their choice.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

dkintheuk
Offline
Regular
Reading, UK
Last seen: 15 years 5 days ago
Reading, UK
Joined: 2005-08-01
Posts: 26
Points: 0

How to have relative scrolling divs within an absolute div?

Wow... you've totally blown me away.

Right i see what you are saying - i'm sure you can see that i've developed this from nicking things from anyone i can and it's so cobbled together that i'm showing my lack of skill.

Right i'll make the adjustments as you recommend and i'll update with a response shortly.

Thank you so very much DE.

Studebaker
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2005-08-02
Posts: 3
Points: 0

How to have relative scrolling divs within an absolute div?

How did you get your <div> elements to scroll? I was looking to do some scrolling on my page but I don't want to use <iframes>.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

How to have relative scrolling divs within an absolute div?

Welcome to the forum, Stud. Laughing out loud , and, actually, you too, dkintheuk.

The scrolly bit is created with

.piclist3 {
   overflow: auto;
   height: 120px;
   border: thin solid #CC0000;
} 
I only have a height on this div (it's width comes from the bounding div .nav in which it resides) The .piclist code says to make a box 120px high and to automatically scroll if the content within .piclist is larger than the box. Since the content is long, but not wide, it creates a vertical scroller for the thumbnails.

Small scroller divs can be quite effective for thumbnails. Here is a link to a horizontal scroller viewer* I hacked up on one occasion. (With no preloads) so you see you can do it either way.

DE

*only the first few thumbs have associated images. Also, notice that the viewer works even if you have javascript turned off - it loses some of its functionality but is still useable with ordinary back and forward navigation. dkintheuk, I can't access your pics with JS turned off.

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

dkintheuk
Offline
Regular
Reading, UK
Last seen: 15 years 5 days ago
Reading, UK
Joined: 2005-08-01
Posts: 26
Points: 0

How to have relative scrolling divs within an absolute div?

DE,

Thanks again for that link. Got to admit that i've never used iframes at all...

I've stripped out the Java except the MM_swapimage function that is currently being used for the on_click swap of the main image.

I actually never used any pre_loads as i was only just about to add that in. It's not really necessary as you point out.

So i've got the whole thing pretty much operating as i wanted but i take your point on the Javascript off possibilities.

Is there any way without the use of iframes to make the on_click work in updating the main image?

Many thanks again,

Rob.

dkintheuk
Offline
Regular
Reading, UK
Last seen: 15 years 5 days ago
Reading, UK
Joined: 2005-08-01
Posts: 26
Points: 0

How to have relative scrolling divs within an absolute div?

Right... so i've got only one style sheet now, i've combined piclist into 1 and used scroll auto; to give it just the vertical scroll.

It all looks lovely and apart from the Javascript thang i'm pretty sure it's working really well.

I prefer to explicitly state all the different elements of a style item at the moment as I can be sure of what i've got but i guess i should move to inheritance to enable easier management of the elements in the style sheet.

Thanks again for the advice and support DE...

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

How to have relative scrolling divs within an absolute div?

dkintheuk wrote:
Is there any way without the use of iframes to make the on_click work in updating the main image?.
You could make the image the background for the the viewer div by dynamically changing the style. Something that would have background-image change. I don't know the JS for it though - not my area of expertise. The onClick event would have to pass this.href to the routine that swaps the background. Probably need a getElementById to get a handle on the div then write the background style info to the DOM.

If the viewer div is properly sized and the background-position is 50% 50% the image should always be perfectly centered.

DE

PS. DSCF0991.jpg is my fave

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

dkintheuk
Offline
Regular
Reading, UK
Last seen: 15 years 5 days ago
Reading, UK
Joined: 2005-08-01
Posts: 26
Points: 0

How to have relative scrolling divs within an absolute div?

I might just stick with the JS i've got then as it will be fine for the people who i want to see this. Mostly family and friends who will be able to get a JS enabled view of the site.

James was supposed to be painted up as a "demon policeman" according to the clearly insane person who was doing the face painting....

He thought is was the funniest thing in the universe and I suppose if you are under 2 years old it probably is.

<wonders> Is that real relativity at work? </wonders>

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

How to have relative scrolling divs within an absolute div?

Here is a demo of an alternate viewer that uses no iframe. It dynamically swaps the #viewerwindow background and the JS is pretty simple. Clicking the thumbnail links to the image itself.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

dkintheuk
Offline
Regular
Reading, UK
Last seen: 15 years 5 days ago
Reading, UK
Joined: 2005-08-01
Posts: 26
Points: 0

How to have relative scrolling divs within an absolute div?

David,

Thanks for that - i like that structure as well although the way the home page now works is going to be fine for distributing photos and information to family and friends more effectively...

Next step will be to have a family host section for various family members to blog and post pictures... might leave that for a week or two...

Many thanks for the assistance,

Rob.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

How to have relative scrolling divs within an absolute div?

NP - glad it is working out. I would suggest that you create three pages, one for each collection. As it currently goes, the page needs to d/l as near as I can tell about a 3/4Meg or so of thumbnails, and since each of them is a separate http request it takes a while. I ran a speed report and it wasn't pretty, 5 seconds d/l under ideal conditions - I have a 1Mbit ADSL line and it took >15sec to load.

Finally, you may want to check DSCF0898.jpg & DSCF0900.jpg - I think we have some plumber's cleavage showing - Photoshop time, perhaps? Next time, may I recommend Butt Caulk or Crack Spackle.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

dkintheuk
Offline
Regular
Reading, UK
Last seen: 15 years 5 days ago
Reading, UK
Joined: 2005-08-01
Posts: 26
Points: 0

How to have relative scrolling divs within an absolute div?

That's funny... Debbie won't mind - she'd like the attention...

hehe

Wink

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

How to have relative scrolling divs within an absolute div?

whew - I posted that and then went for groceries. And started thinking - oh crap, what if he doesn't have a sense of humor? You've relieved my mind - didn't want my mouth to get me in a feud with the McGregors - I know how those usually turn out.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

dkintheuk
Offline
Regular
Reading, UK
Last seen: 15 years 5 days ago
Reading, UK
Joined: 2005-08-01
Posts: 26
Points: 0

How to have relative scrolling divs within an absolute div?

"I like big butts and I cannot lie... etc."

Yeah it's always funny when you get things like that in photos, especially when you don't notice and someone else points it out.

Next steps then will likely be...

1. Change to page per gallery as you advised.
2. Consider use of css only version of image updating (code a mate sent me - attached as zip)
3. Update image naming to put things in order with more descriptive titles.
4. show only 5 or 10 thumbs at a time and use naming convention to enable 'show next 5', 'show previous 5' etc.
5. Move on to next projects - www.drumsauce.co.uk, and www.bluedogrecords.co.uk (not my design currently) - will need to sort out content first and get the look and feel right before i continue... also only works in IE at the moment.

More later I am sure - possibly in a new thread.

EDIT: That should read www.bluedogrecords.com but the DNS server is cacked up... try www.wearebluedog.co.uk instead for now

dkintheuk
Offline
Regular
Reading, UK
Last seen: 15 years 5 days ago
Reading, UK
Joined: 2005-08-01
Posts: 26
Points: 0

How to have relative scrolling divs within an absolute div?