Hi people,

I'm an old member who hasn't been round for some time, SO, HI - long time no see...

I need a little instruction, I;m afraid.... I want to pop a 'frame' in the centre of a standard HTML webpage. I need to have a 'sliding bar' window that will so that unlimited info (images and text) can be added if need be and be seen by using the slide bar...

Obviously, a frame in the centre of the page will do the trick, but I'm a little unfamiliar with 'Frames' and I need a little instruction as to how to insert a frame into the centre of a HTML page...

Thanks very mich - Any help will be much appreciated...

Steve Brennan

Hello Steve,

Unless you really want to use an iframe you can do this with CSS.

The CSS;

.scroll {

width:35em;

height:10em;

margin:0 auto;

padding:.5em;

background-color:#eee;

color:#006;

overflow:auto;

}

The HTML;

<div class="scroll">

<p>Place all the content you want displayed inside here.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec porta odio 

        ullamcorper lorem. Sed consequat, diam ut malesuada tincidunt, metus libero 

        tincidunt neque, non viverra lectus libero at dui. Aenean in neque id dui 

        ullamcorper malesuada. Nullam sed wisi. Donec urna lectus, sagittis vitae, 

        accumsan vitae, convallis non, elit. Vestibulum commodo pede non neque. 

        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 

        inceptos hymenaeos. Maecenas est diam, tristique id, sollicitudin nec, 

        aliquam non, orci. Quisque nibh erat, vulputate vitae, tempus suscipit, 

        tincidunt vitae, quam. Donec at sapien vel sem consequat tincidunt. 

        Suspendisse feugiat. Phasellus suscipit.</p>

</div>

What I have here is a div with a fixed width. You can set the width to auto and it will expand or contract depending on the browser settings.
The overflow:auto; is what creates the scrollbar whenever the content exceeds the height setting.

or if there is a serious need for a frame (not recommended - but unfortunately i have been forced to utilize one for a gallery so i cant really talk) you cant simply use the

<iframe id="gallery" src="filename.extension(ye know... html or php or asp etc)"></iframe> so it will look something like this:

CSS

#cssTag {

     position:absolute;

     width:620px;

     height:890px;

     margin-top:200px;

     margin-left:88px;

     padding:0px;

     overflow:hidden;

     text-align:left;

}

HTML

<iframe id="cssTag" src="content.html"></iframe>

Alternatively could still add your information into tag if you havent grasped css yet....

<iframe src="content.html" width="620px" height="890px"></iframe>

Personally, i would stick to what Colo Eagle suggests, frames are like using superglue to do the carpeting in your car, its easy enough but it will never be right on the inside.

I disagree

I think iframes are wonderful things and are a step in the right direction now we can easily modify the DOM

you can't have frames unless you have a frameset page - butyou can put inline frames (iframes) in where ever you want.

However - you must think about the use of this frame; if the content id not going to change then use a div with scroll bars as CE suggested; if you want to link to different pages within the frame then an iframe will do the trick

If you want to get really fancy then take a look at this - http://jquery.com/demo/thickbox/

Mkay, fair enough, but as you have proven already, jquery just makes things cool But, as far as seo goes... at least as far as i have read, they simply reak havok with spiders as you essentially have a different doctype etc within another. I could be wrong but i dont think i am. For layout purposes they are lovely but like superglue under your carpets... it could hurt you in the long run.

Not everything needs to be SEOed

Think visitor experiance optimisation (ie make something great and cool) then market it

I'm going off the idea of on-site seo; I make sure the title tags and H1s are ok and maybe a line or two of content; but the major seo work done now is off site

This could mean anything from landing pages and directory submission to google adwords and spam

Little bit of everything seems to work well; and the site is a pretty cool site for users to be on

Can we sticky this thread? More people should consider your advice.. i would imagine less stress related illnesses occurring I agree with you there again, i had to grin and bare the fact that my image galleries would all be in frames... but, it makes the gallery more user friendly and essentially not to painful to get through plus updating it is as easy as pie (american pie - didnt put up much of a fight)

With all that in mind i accept the fact that a good many of those pictures will get me no love from google images... thats life 

but....... depending on what his use for the frame is, it could drastically whip em in the nuts if he isnt as gifted with the external seo as you are. Perhaps the only hope for his site or business would be having that content properly indexed... (no offense Steve ) If that does turn out to be the case he probably wont survive that long anyway but at least the fighting chance is there, a frame literally takes that chance and throws it out the window if the afore mentioned circumstances are in fact accurate and his entire master plan is to have the menu outside and all the pages inside (so he only has to edit one html file to change the look of the site - sounds like css a bit doesnt it? )

Oh well, ive spat out my worst case scenario.. whose next?

Thanks heaps people. Nice to see that this is still the best place to get the 'good gear'...

I am, unfortunately, not up to scratch on CSS. So, maybe the 'frame' idea is best.. It's a very simple 'static HTML' page, so the EASY way is probably the best way for the moment.

Thanks alot for the codes. I'll play around and see how things look...

BTW - SEO isn't a consideration as the frame is simply to list the locations of a chain of stores... (and a couple of LOGO images)


Steve

Just to clarify (as I said - not up to scratch on anything much other than 'straight HTML').

I would simply insert the code - <iframe src="content.html" width="620px" height="890px"></iframe> - into a table in the centre of the page (or wherever i want it), adjust size to suit, and I'll be able to insert standard html code for images and text etc between the <iframe> tags??? (I am assuming that the above code will have the frame 'develop' a slide bar when the content exceeds the space available???

Thanks

brensec wrote:

Just to clarify (as I said - not up to scratch on anything much other than 'straight HTML').

I would simply insert the code - <iframe src="content.html" width="620px" height="890px"></iframe> - into a table in the centre of the page (or wherever i want it), adjust size to suit, and I'll be able to insert standard html code for images and text etc between the <iframe> tags??? (I am assuming that the above code will have the frame 'develop' a slide bar when the content exceeds the space available???

Thanks

No, an iframe is used to display a page within a page. What you have asked about and this would be the easiest for you is to use the CSS method I mentioned. I have modified it to make it slightly easier to understand

Simple three step process;
Step one - Copy and paste the following in the head section of the page.

<style type="text/css">

.scroll {

width:620px;

height:890px;

margin:0 auto;

border:1px solid #000;

padding:15px;

overflow:auto;

}

</style>

Step two - Copy and paste the following in the body section of the page where you want this content displayed.

<div class="scroll">

<p>Place all the content you want displayed inside here.</p>

</div>

Step three - Place the content you want displayed inside paragraph tags inside the div.

Breakdown of the CSS for you;
width is set at 620px
height is set at 890px
margin is set to automatically center on the page
It will have a solid black 1px border
A padding of 15px will pull the content away from the border
Overflow auto will automatically place a scroll bar whenever the content exceeds the height

You can adjust the width and height to fit the page location.
If you don't want a border around it simply delete the border line.

Thank you Colo - I didn't think it would work that way - I have done 'frames' and understand the concept of the 'multiple pages' displayed with a page...

The CSS method, when explained as if to a 5 year old, (which is the only way I grasp stuff I haven't done before... lol), is quite simple and I understand completely. I can change the colours and sizes etc, with the descriptions you've supplied.This is exactly what I am wanting to do - But, as I'm not well versed on CSS, I assumed a 'frame' would be the simplest method, because that's what it appears to look like in a browser.

I'll stick this into my cache of 'How to do's' and see about getting more familiar with CSS. Can you recommend a tutorial or even a site which has a series of 'codes' for specific CSS effects etc??

Thank you again, very much...

Steve

Can you recommend a tutorial or even a site which has a series of 'codes' for specific CSS effects etc??

Sure can, visit the CSS school at the W3C here

Give me about ten minutes and I can have an example page for you to see this in action.

ColoEagle wrote:

Can you recommend a tutorial or even a site which has a series of 'codes' for specific CSS effects etc??

Sure can, visit the CSS school at the W3C here

Give me about ten minutes and I can have an example page for you to see this in action.

Thanks very much mate. I appreciate your help....

Here ya go, you will need to copy and paste the url
[http://www.providerofchoice.net/construction/scrolling-content.html]

Thanks very much mate. Exactly what I need...

Your very welcome Steve, glad to help. Give us an update about how things worked out.

Hi Colo,

Thanks for the help but I've come to the point where I'm trying to place the 'scroll box' in position (inside a table with an image for a background).  To make it easier to see what I'm doing, the URL of the page I'm creating is:  http://www.seletti.com.au/seletti_stocklist.html

I need the scroll box to sit over the Square Black image in the centre of the table, BUT I need the scroll box to have a white background (at the moment it is 'see-through'). Also It is positioned on the left of the table and I can't get it to the centre of the table...

You've been very helpful, thanks mate, but can I ask for a little instruction re the above???

Thank you again,
Steve

Thanks again Colo (and people), but as you can see, a little thought and adaptation and, as you can see on the page mentioned above, I've managed to get it where I want it simply by using a table within the existing table and then arranging cells, to position the box where I wanted it. (and achieve the background colour wanted...)...

Thanks again,
Steve