# Help Needed - Frames And Scrollbars



## Cravepain (May 13, 2007)

Hello,

I am using Dreamweaver CS3 and trying to create a website for a friend of mine. I am having a bit of problems with it, though.

I have four frames. Top, Bottom, Left, and Main. All but the main frame will be still, of course. The main frame is where all the links will be opened at. What I want to do is make that frame scrollable. Yes, it already is, so here is my problem. What I want to do is make the scrollbar move over and be alligned with the rest of my site. My website will be centered in the browser, so I would like the scrollbar to move over in the center as well - instead of being along the right of the browser.

If that is at all possible, I would love some help.

Thank you in advance!

- Nikki


----------



## tomdkat (May 6, 2006)

Hmmmm, if you're using HTML frames I don't know how much control you'll have over the scroll bar. I'm surprised you even have a browser-level scroll bar at all (i.e. a scroll bar on the right side of the browser window).

If you could use CSS for the layout, what you want to do would be easy to the point of being almost trivial. 

Are you using HTML frames and is using CSS for the layout an option?

Peace...


----------



## Cravepain (May 13, 2007)

Yes, they are HTML frames.

I must also add, I am slightly new at Frames, so I am sorry if I ask questions which should be obvious.

CSS frames are an option, yes. Though I am not too sure how to work with them.


----------



## Mudley (Apr 7, 2008)

why the frames?

seriously, frames should be avoided at all cost


----------



## Cravepain (May 13, 2007)

I choose frames because I enjoy how only one section will need to load after the initial opening of the site. It also works well for what my website consists of, and what needs to be shown at all times. See, on the left frame there are links I would like to be up at all times no matter the page or link you click on. Frames seemed to be the easiest and best bet for what I was looking for. Plus, I have always wanted to learn them, so I figured now would be a good time.

I really see no problem with them, to be honest. Why is it you say they should be avoided, Mudley?


----------



## tomdkat (May 6, 2006)

Cravepain said:


> I must also add, I am slightly new at Frames, so I am sorry if I ask questions which should be obvious.


No need to apologize and I didn't have any expectations of you when I posted above. 



> CSS frames are an option, yes. Though I am not too sure how to work with them.


Ok, if you can post the HTML for the layout you have now we can work out an equivalent CSS layout you can decide to use if you find it works for you. 

I'm interested in seeing the HTML frames layout you have now so I can see how you have the page centered, etc.

Thanks!

Peace...


----------



## Mudley (Apr 7, 2008)

copied from an older post here about frames:


frames prevent or cause serious problems with:
1. bookmarking (because the url bookmarked doesn't contain data of internal frames)
2. search engines (because you don't want search traffic going to inside pages because they won't have navigation, and crawlers only have the URL data in problem #1)
3. incoming links (if your site rocks, or has any value to anyone, people will want to link to it - but they're not always going to link to your homepage. they'll want to link to their most important or favorite...but due to the issue #1, that page doesn't have a unique url) This also adds to problem #2, because search engines rely on incoming links to gauge popularity.

there's no real benefit to frames, but i know what the typical arguments are.
1. keeps the navigation on the page. (true, but mice have scrollwheels and we've ALL been trained that scrolling makes the web page move up and down. We KNOW that if we can't see the navigation that we need to scroll back up. Hint: put a smaller navigation at the bottom. Bonus hint: don't let your pages get more than a couple full scrolls in height)
2. pages load faster because the header/navigation is already loaded. Technically this is true, but the header, its graphics and styles will all be cached anyways. So loading it on every page isn't much overhead. Headers and navs should be lightweight with text based navigations anyway (for seo)


----------



## Cravepain (May 13, 2007)

Hm, well I am not getting too much HTML for this, but I hope it is fine. I do have it up on a host if that will help you more with the HTML codes and such (It's not complete, so don't expect much, lol). As for spacing it into the area of choice, I used Width with EMS.

Like I said, I am new at this. I am actually taking a class in College for Dreamweaver, which is why I am creating this website. Though, it is going to be used by my sister in-law for her hair business. Anyways, I might have messed up the frames but I am not too sure. It seems to be working how I want, other than the scrollbar so I couldn't have messed them up too bad if I did. *Grins*

Here is the link to the website: http://home.comcast.net/~hairbyangela/

And here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Hair By Angela


----------



## tomdkat (May 6, 2006)

Mudley said:


> 2. pages load faster because the header/navigation is already loaded. Technically this is true, but the header, its graphics and styles will all be cached anyways. So loading it on every page isn't much overhead.


I don't agree with this argument since there CAN be communication overhead to determine if the images have changed and this can cause unnecessary additional traffic to the web server.

Still, I favor a modern CSS layout over traditional HTML frames since CSS gives more flexibility.

Peace...


----------



## tomdkat (May 6, 2006)

Cravepain said:


> Hm, well I am not getting too much HTML for this, but I hope it is fine. I do have it up on a host if that will help you more with the HTML codes and such (It's not complete, so don't expect much, lol). As for spacing it into the area of choice, I used Width with EMS.


Thanks!

Peace...


----------



## Cravepain (May 13, 2007)

Mudley,

Those are true statements, yes. I understand linking to the site and bookmarking to it will be a problem. But I feel the pro's to frames are more beneficial then the con's. Of course this is just my personal opinion.


----------



## Cravepain (May 13, 2007)

tomdkat said:


> Thanks!
> 
> Peace...


You are very welcome.

Thank you so much for helping me, or even tempting it. That scrollbar has been bothering me for a few days now, lol.


----------



## tomdkat (May 6, 2006)

Ok, does the attached screenshot look like what you want? 

Peace...


----------



## Cravepain (May 13, 2007)

Yes, exactly what I wanted.


----------



## tomdkat (May 6, 2006)

Great! Let me work out one last detail and I'll post the HTML I wrote to generate that. For now, I scrapped the HTML tables and did the layout using CSS DIVs. Then, I put the "This is a LOT of text" stuff in what's called an "iframe." This way, when you click the navigation links at the top, the pages will load in the iframe, similar to how they loaded in the site you have now. The difference is now the scroll bar applies ONLY to the iframe and the main site page should not reload as you click links, just as with your current site.

I'll have some HTML to post shortly.

Peace...


----------



## Cravepain (May 13, 2007)

You are amazing, thank you so much.


----------



## tomdkat (May 6, 2006)

Ok, I'm heading out for a while and won't be back for a few hours. Here is some working HTML you can play around with:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Hair By Angela</title>


  <style type="text/css">
body {
margin-top: 0px;
padding-top: 0px;
top: 0px;
}
.pagebody {
display: block;
width: 700px;
margin-right: auto;
margin-left: auto;
font-family: Verdana,Arial,Helvetica,sans-serif;
height: 100%;
}
.header {
display: block;
height: 130px;
}
.footer {
background-image: url(bottom_frame_files/Background.png);
display: block;
color: black;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
height: 60px;
clear: both;
}
.left-side {
display: block;
width: 214px;
float: left;
font-size: 14px;
}
.main-content {
display: block;
padding-top: 5px;
padding-left: 5px;
margin-left: 214px;
height: 450px;
}
.footer p {
margin-top: 0;
padding-top: 0;
top: 0;
}
.left-side a {
color: #fec25c;
text-decoration: none;
}
  </style>
</head>


<body style="color: white; background-color: black;" alink="#000099" link="#000099" vlink="#990099">

<div class="pagebody">
<div class="header"><a target="content-frame" href="services.html"><img style="border: 0px solid ; width: 100px; height: 130px;" alt="Services" src="top_frame_files/Services_Up.png"></a><img style="width: 100px; height: 130px;" alt="Products" src="top_frame_files/Products_Up.png"><img style="width: 100px; height: 130px;" alt="About Angela" src="top_frame_files/About_Me_Up.png"><img style="width: 100px; height: 130px;" alt="Schedule" src="top_frame_files/Schedule_Up.png"><img style="width: 100px; height: 130px;" alt="Links" src="top_frame_files/Links_Up.png"><img style="width: 100px; height: 130px;" alt="Directions" src="top_frame_files/Directions_Up.png"><a target="content-frame" href="main_frame.html"><img style="border: 0px solid ; width: 100px; height: 130px;" alt="Home" src="top_frame_files/Home_Up.png"></a></div>

<div class="left-side">
<p>Last Updated: April 30, 2008</p>

<p style="text-align: center;"><img style="width: 200px; height: 250px;" alt="Hair by Angela logo" src="left_frame_files/Logo_Banner.gif">
</p>

<p><img src="left_frame_files/Arrows_Three.png" alt="Arrows" height="22" width="44"> <a href="http://home.comcast.net/%7Ehairbyangela/coupons.html" target="Main Frame">Coupons</a></p>

<p align="center">Call for an
appointment:<br>

248.683.3360</p>

<p align="left"><img src="left_frame_files/Arrows_Three.png" alt="Arrows" height="22" width="44"> <a href="mailto:[email protected]">Contact</a></p>

</div>

<div class="main-content">
<iframe src="main_frame.html" style="margin-top: 0px; padding-top: 0px;" name="content-frame" frameborder="0" height="100%" scrolling="auto" width="100%"></iframe></div>

<div class="footer">
<p>3659 Highland Rd. &#8226; Waterford, MI 48328</p>

<p style="text-align: right;">Phone: 248.683.3360</p>

</div>

</div>

</body>
</html>
```
This HTML is for EVERYTHING you saw in the screenshot. If you click the "Home" link, the content area *only* will be changed to the blank black page. If you click the "Services" link, the content area *only* will be changed to the services page.

You will notice the page I came up with above has a fixed height. This means you might get more scroll-bars in the content area than you are used to. The trade-off is you will have far more control, now, over how and where the scroll bar appears in the content area. Also, some tweaking will be needed to get the iframe to 'behave' in IE6 and IE7 along with other browsers.

Post any questions you have and I hope if others see areas that can be improved in the HTML I posted above, they will post their comments. 

Peace...


----------



## Cravepain (May 13, 2007)

I am messing around with it right now, and will post with any questions if I do have them.

Thanks again.


----------



## Cravepain (May 13, 2007)

Tomdkat,

I am so sorry to bother you again, but I do have a question. I have never used IFrames, as you know. My pages, when clicked on a link either on the side or on the navigation bar, load in a whole new page, not in the IFrame. I tried messing with the Targets, but that isn't helping much. I also tried looking at the IFrame code to see if it had something to do with that, but I didn't see anything that helped.

So sorry for the dumb question. I am new at these.

Other than that, the HTML you gave me is wonderful. It's working out great.


----------



## tomdkat (May 6, 2006)

The key to getting pages loading in the iframe is to make sure the *target* of the anchor tag is the *name* of the iframe.

So, using my HTML above as an example, the iframe has the *name* "content-frame":

main_frame.html

Then, the anchors in the navigation menu have "content-frame" as the target:



The rest should "just work". If you either post the HTML you're working on now here or upload it to the server so I can see if, I can maybe figure out what's going wrong. 

Peace...


----------



## Cravepain (May 13, 2007)

Thanks I got that to work. 

Is it possible to get rid of the border around the IFrame, or make it black? I rather it be gone, though.


----------



## tomdkat (May 6, 2006)

If you left the _frameborder="0"_ in your iframe tag, the border should not be displayed.

Can you either post a screenshot of what you're seeing or a link to a page with the iframe on it?

Peace...


----------



## Cravepain (May 13, 2007)

Oh of course, I'm sorry.

This is what I am seeing:










I am just having obvious problems I think. Well, what I would consider to be easy problems, but for me they aren't. 

I need to get that purple image back at the bottom, which I think I could do with tables, yes? And get rid of the border around the IFrame. Oh, and at the start up of the page the IFrame is broken and shows a browser error, though I think that is just because I need to put something there, right?


----------



## tomdkat (May 6, 2006)

You need to upload the HTML file or post the current source so I can see it. I'm heading to bed soon, so I'll take a peek in the morning. 

You DO NOT need tables for the image at the bottom.

Once I can see the HTML, I can advise on what to do next. 

Peace...


----------



## Cravepain (May 13, 2007)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Hair By Angela




Last Updated: April 30, 2008

















Coupons

Call for an
appointment:

248.683.3360








Contact

main_frame.html

3659 Highland Rd. • Waterford, MI 48328

Phone: 248.683.3360


----------



## tomdkat (May 6, 2006)

Ok, I'm still looking into the iframe border issue. With regard to the image at the bottom, make this change to the CSS at the top of the HTML file:

.footer {
*background-image: url(Assets/Background.png);*
display: block;
color: black;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
height: 60px;
clear: both;
}

The location of the background image was wrong. Try that. It should work when you upload the file to the server.

I'll keep you posted on what I find regarding the iframe border.

Peace...


----------



## tomdkat (May 6, 2006)

Cravepain said:


> Oh, and at the start up of the page the IFrame is broken and shows a browser error, though I think that is just because I need to put something there, right?


You will need to make sure whatever page is specified in the "src" parameter of the iframe tag exists when you first load the page:

main_frame.html[/b]]*main_frame.html*

Does the file "main_frame.html" exist on your computer? Is it in the right location on your computer? It should be in the SAME directory or folder as the main page that has the iframe in it.

Peace...


----------



## Cravepain (May 13, 2007)

Thank you, I will work with what you just mentioned and get back to you.


----------



## Cravepain (May 13, 2007)

Alright everything is working just fine now! The border is gone, though I am not too sure how I did it. *Grins* I was just messing around and it just happened to go away. The footer image is working, and the links into the IFrame. 

I do have one last question, and I do promise one last question, lol. I was told by a few people that there is a code to where your text, no matter the color (White, Pink, Yellow, etc.), when copied and pasted into a word program such as Notepad or WordPerfect, it turns black. I am really wanting this because my background is black and the text is lighter. It would be wonderful to add that in for more convenience to others.

So as a example, in case you didn't understand my poor explanation - Say I wanted to copy white text from my website and want to print it out. Well, being it's white it will cause some complications when pasting it into another program. This code I keep hearing about will automatically change any text I copy and paste to black when in another program.

Anyways, this is great and I am loving how this CSS is working. I like it much better than the frames, thanks for the suggestion! Also, as I keep saying, thank you so much for all this help. It's refreshing to find someone who is willing to help someone, even with the more obvious and basic questions.


----------



## Cravepain (May 13, 2007)

Hm, it seems the IFrame isn't working again when it comes to the main link on load up. I made sure the file is in the same folder as the main page, and even double checked the coding to see if the page was correct - it is. It was working before, but it seems it decided not to anymore. The file I want to load up is called "main.html".

Here is what it's doing:

http://home.comcast.net/~hairbyangela/frameset.html

And here is the current code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Hair By Angela




Last Updated: April 30, 2008

















Coupons

Call for an
appointment:

248.683.3360








Contact

main.html

3659 Highland Rd.  Waterford, MI 48328

Phone: 248.683.3360


----------



## tomdkat (May 6, 2006)

Cravepain said:


> I do have one last question, and I do promise one last question, lol. I was told by a few people that there is a code to where your text, no matter the color (White, Pink, Yellow, etc.), when copied and pasted into a word program such as Notepad or WordPerfect, it turns black. I am really wanting this because my background is black and the text is lighter. It would be wonderful to add that in for more convenience to others.


This is really beyond the "control" of the web page. What you're describing is applications receiving or accepting HTML that is pasted into it instead of just the plain text. I can copy text of a given color from your site now and paste it into Notepad or some other application and none of the formatting or color will be preserved. I can do the same thing to another application and the HTML formatting and color will be preserved.

I've never heard of anything that can be done in the HTML to prevent this behavior. Can you post a link to a page that describes what you're referring to?

Peace...


----------



## tomdkat (May 6, 2006)

Cravepain said:


> Hm, it seems the IFrame isn't working again when it comes to the main link on load up. I made sure the file is in the same folder as the main page, and even double checked the coding to see if the page was correct - it is. It was working before, but it seems it decided not to anymore. The file I want to load up is called "main.html".


It appears to be working for me. "main.html" has nothing in it:

http://home.comcast.net/~hairbyangela/main.html

As a test, change "main.html" to have a message of some kind like, "I'm here!!!!". That way, you can tell if it's loading when you think it should be or not.

Attached is a screenshot of what I see in Firefox and Opera when I load your site or click the "Home" link. The "Services", "Links", and "Directions" pages all load in the iframe when clicked, as expected.

Peace...


----------



## Cravepain (May 13, 2007)

tomdkat said:


> This is really beyond the "control" of the web page. What you're describing is applications receiving or accepting HTML that is pasted into it instead of just the plain text. I can copy text of a given color from your site now and paste it into Notepad or some other application and none of the formatting or color will be preserved. I can do the same thing to another application and the HTML formatting and color will be preserved.
> 
> I've never heard of anything that can be done in the HTML to prevent this behavior. Can you post a link to a page that describes what you're referring to?
> 
> Peace...


It's not a link or website I was hearing it from, simply my teacher and a few students in my class. Sorry for not clarifying that. I was just worried about the copy/paste thing, though it looks like you are right. It still turns out black when pasted in WordPerfect or Notepad.


----------



## Cravepain (May 13, 2007)

That's odd, last night I swear I was getting a page error on the "main.html" when loaded. It seems to not be doing that now.

Well, that is pretty much everything I have for questions. You have been a wonderful help, thanks again.


----------



## tomdkat (May 6, 2006)

Cravepain said:


> It's not a link or website I was hearing it from, simply my teacher and a few students in my class.


Weird. If you can, please ask your teacher for more clarification. 



Cravepain said:


> That's odd, last night I swear I was getting a page error on the "main.html" when loaded. It seems to not be doing that now.
> 
> Well, that is pretty much everything I have for questions. You have been a wonderful help, thanks again.


Coolio! If this issue is solved for you, please use the "thread tools" menu (near the top of each forum page) to mark this thread as solved. 

Peace...


----------



## Cravepain (May 13, 2007)

I do have one last question now *Grins*

I have been adding a bit more to the left side of my website, which is making the page elongate. I don't mind that at all, but the IFrame is a fixed size and it's starting to look a bit odd with the gap. How do I elongate the IFrame to fit the size of the left Div(?)? I still want it to be a fixed size, though. Just a bit longer.


----------



## tomdkat (May 6, 2006)

The iframe is in a DIV of class "main-content". The "main-content" class defines the height to be 450px:

```
.main-content {
display: block;
padding-top: 5px;
padding-left: 5px;
margin-left: 214px;
[b]height: 450px;[/b]
}
```
Simply adjust that height to the desired height. 

Peace...


----------



## Cravepain (May 13, 2007)

Oh! I couldn't find where to go, thanks again, lol.

Now I am done and will change it to solved, thank you for all the help. 

Hm..or I would if Solve was still in there. XD


----------

