Ok, Why are Frames bad exactly?

  • lesallstar
  • Novice
  • Novice
  • lesallstar
  • Posts: 20
  • Loc: New York City, NY

Post 3+ Months Ago

Before you go on a crazy barrage of personal opinion, I just want to know why its such a bad idea to use frames?


I'm curious because people keep mentioning it in their posts about other things and...well...i'm almost done with a framed page myself......


So! I'm curious....let me know what the fuss is about.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

It's not that frames themselves are bad, there's just not too many people that actually figure out how to use them right.

They're like the secret of the universe, mankind just isn't ready for them yet.
  • lesallstar
  • Novice
  • Novice
  • lesallstar
  • Posts: 20
  • Loc: New York City, NY

Post 3+ Months Ago

Haha ok ok.

....I guess the next question is (if you up for it that is, joebert or anyone else for that matter) if this were a perfect world, what exactly would be the RIGHT way for frames to operate?
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6229
  • Loc: South-Africa

Post 3+ Months Ago

there isn't ... you can rather use CSS to make a div look like a frame if you really want to ... but frames are bad for SEO ... I can't tell you the exact reason, but I think it has something to do with the fact that the content isn't on the same page ...
  • lesallstar
  • Novice
  • Novice
  • lesallstar
  • Posts: 20
  • Loc: New York City, NY

Post 3+ Months Ago

....really? That kinda sucks....


Alright. So I guess I gotta dilemma here. I just built this site

http://www.newcompanytheatre.com

for my company and im using frames. Problem is, if SEO doesn't like it then.....the work is moot.


My Java knowledge is limited btw.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6229
  • Loc: South-Africa

Post 3+ Months Ago

[Dead Link] ... this is to remove that "Click to activate and use this control" thing for IE ...

And I'm sure it won't take too long to rewrite the layout for that site into just (X)HTML and CSS without the frames ... It's basically just two divs you have there ...
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

I don't think getting rid of the frames would be too tough.. The site would probably look better without them, too ;)

Part of the search engine problem is that if you follow a Google search result for your page, you could very well end up on the right-hand frame with no left-hand frame.. and no menu with which to navigate your site!

IMO, you have bigger issues with the website, though, like you should do something with the link properties instead of just leaving them as default.

Also, the text is pretty illegible over that background. Maybe if you made it bigger or bolded it or something?
  • lesallstar
  • Novice
  • Novice
  • lesallstar
  • Posts: 20
  • Loc: New York City, NY

Post 3+ Months Ago

Thank you for the responses, I appreciate them.
  • lesallstar
  • Novice
  • Novice
  • lesallstar
  • Posts: 20
  • Loc: New York City, NY

Post 3+ Months Ago

Ohh Jameson, what do you mean by doing something with the link properties exactly?
  • lesallstar
  • Novice
  • Novice
  • lesallstar
  • Posts: 20
  • Loc: New York City, NY

Post 3+ Months Ago

Also, (feel like im postin way too many responses here lol)


Tresspasser, do you have any recommendations as to re-writing the script without dividers (obviously I'm a novice....but I won't nag you about it though ;-) )

I just want to make sure that the page comes off as short and sweet instead of someone who is inexperienced attempting too much at once.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6229
  • Loc: South-Africa

Post 3+ Months Ago

Well basically you'll have two divs for the layout you want ... It'll be one on the left hand side and one on the right hand side so let's call them div.left and div.right, so the code will look something like this:

CSS:
Code: [ Select ]
body
{
padding:0px;
margin:0px;
background-image:url('yourimage.gif');
background-repeat:repeat;
}
div.left
{
width:200px;
height:400px;
min-height:400px;
}
div.right
{
width:780px;
height:400px;
min-height:400px;
}
  1. body
  2. {
  3. padding:0px;
  4. margin:0px;
  5. background-image:url('yourimage.gif');
  6. background-repeat:repeat;
  7. }
  8. div.left
  9. {
  10. width:200px;
  11. height:400px;
  12. min-height:400px;
  13. }
  14. div.right
  15. {
  16. width:780px;
  17. height:400px;
  18. min-height:400px;
  19. }


HTML:
Code: [ Select ]
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css' />
</head>
<body>
<div class='left'>
<a href='#'>link1</a>
<a href='#'>link2</a>
<a href='#'>link3</a>
</div>
<div class='right'>
<p>body text goes here</p>
</div>
</body>
</html>
  1. <html>
  2. <head>
  3. <link rel='stylesheet' type='text/css' href='stylesheet.css' />
  4. </head>
  5. <body>
  6. <div class='left'>
  7. <a href='#'>link1</a>
  8. <a href='#'>link2</a>
  9. <a href='#'>link3</a>
  10. </div>
  11. <div class='right'>
  12. <p>body text goes here</p>
  13. </div>
  14. </body>
  15. </html>


That's basically it ... please note that these are measured in pixels, I never do sites with 100% width, so I'm not exactly sure how it'll work ... You'll probably just replace the pixel values with pecentage values ... Hope this helps ...
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

lesallstar wrote:
Ohh Jameson, what do you mean by doing something with the link properties exactly?


Hi lesallstar,

I just meant it would be nice if the links did something when you rolled over them. To add to the CSS righteous_trespasser posted:

Code: [ Select ]
body
{
padding:0px;
margin:0px;
background-image:url('yourimage.gif');
background-repeat:repeat;
}
div.left
{
width:200px;
height:400px;
min-height:400px;
}
div.right
{
width:780px;
height:400px;
min-height:400px;
}

/*LINKS (change the colors to whatever you want)*/
a{
   text-decoration:none;
   color:black;
   }
a:hover{
   color:white;
   }
  1. body
  2. {
  3. padding:0px;
  4. margin:0px;
  5. background-image:url('yourimage.gif');
  6. background-repeat:repeat;
  7. }
  8. div.left
  9. {
  10. width:200px;
  11. height:400px;
  12. min-height:400px;
  13. }
  14. div.right
  15. {
  16. width:780px;
  17. height:400px;
  18. min-height:400px;
  19. }
  20. /*LINKS (change the colors to whatever you want)*/
  21. a{
  22.    text-decoration:none;
  23.    color:black;
  24.    }
  25. a:hover{
  26.    color:white;
  27.    }
  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

You can get "the frame effect" by adding PHP includes:
Code: [ Select ]
<?php include("Framepage.html"); ?>


That will include your navigation on each page. Use some CSS (like jameson and rightious trespasser posted) to align the included content.
  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

I had some spare time so I decided to help you a bit:

Here's your home page, but without frames:
http://www.onyx-design.net/test/ozzu1/base.html
You can copy the source code for your own use.

I do have some tips:
- don't write your tags in caps (<HTML> -> <html>)
- Add a Doctype
- Place the navigation in a seperate file and include it, see my previous post.
- Don't use deprecated tags like <center></center>, use <p style="text-align:center;"></p> instead.
  • lesallstar
  • Novice
  • Novice
  • lesallstar
  • Posts: 20
  • Loc: New York City, NY

Post 3+ Months Ago

Man......*smiles* You guys are good.

Jameson, thanks alot for the clarity. I was like "Ahhhhhh thats what he meant!" Yea, it does seem kind of...well...just boring. So i'll work on it with the code that Trespasser and you gave me.


Fabinator, way to come through in the clutch! I appreciate your time spent on this and will definitely learn from the code that you wrote (and not just copy it like an air head).
  • lesallstar
  • Novice
  • Novice
  • lesallstar
  • Posts: 20
  • Loc: New York City, NY

Post 3+ Months Ago

Ok....here's another dumb question.



If someone doesn't mind, I need a little clarity on the work-around for the "click to activate" prompt.


<script> myprintln('<p style="text-align:center;" "visibility:visible;">')

myprintln('<object type="application/x-shockwave-flash" data="http://widget-d8.slide.com/widgets/slideticker.swf" height="320" width="426" style="width:426px;height:320px">');

myprintln('<param name="movie" value="http://widget-d8.slide.com/widgets/slideticker.swf" />')

myprintln('<param name="quality" value="high" />')

myprintln('<param name="scale" value="noscale" /><param name="salign" value="l" />')

myprintln('<param name="wmode" value="transparent"/>')

myprintln('<param name="flashvars" value="cy=ms&il=1&channel=504403158289489368&site=widget-d8.slide.com"/>')

myprintln('</object>'); </p></p>
</script>


So.....it doesn't work when I do a preview of the page so its either two things: 1) I broke the player's code when trying to add this (which is easy to fix) so thats probably the reason why it isn't playing (and the click to activate thing is still there)

2) I'm missing something in the code or I just did it incorrectly.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6229
  • Loc: South-Africa

Post 3+ Months Ago

[Dead Link]
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

I'm just going to clear it up a little bit...

Open notepad.

Copy/paste the following code into the notepad.

Quote:
// myprintln.js

function myprintln(s) { document.writeln(s); }


Save the notepad as myprintln.js (or anything that you want.

Then copy/paste the following code in place of your object

Quote:
<script type="javascript">
myprintln('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"');
myprintln('codebase="http://fpdownload.macromedia.com/pub/shockwave/c abs/flash/swflash.cab#version=8,0,0,0"');
myprintln('id="mars" align="middle" height="130" width="130">');
myprintln('<param name="allowScriptAccess" value="sameDomain">');
myprintln('<param name="movie" value="http://widget-d8.slide.com/widgets/slideticker.swf">');
myprintln('<param name="quality" value="high">');
myprintln('<param name="bgcolor" value="#ffffff">');
myprintln('<embed src="http://widget-d8.slide.com/widgets/slideticker.swf" quality="high" bgcolor="#ffffff"');
myprintln('name="slideticker" allowscriptaccess="sameDomain"');
myprintln('type="application/x-shockwave-flash"');
myprintln('pluginspage="http://www.macromedia.com/go/getflashplayer"' );
myprintln('align="center" height="130" width="130">');
myprintln('</object>');
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/s wflash.cab#version=8,0,0,0"
id="mars" align="middle" height="130" width="130">
<param name="allowScriptAccess" value="sameDomain">
<param name="movie" value="http://widget-d8.slide.com/widgets/slideticker.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">
<embed src="http://widget-d8.slide.com/widgets/slideticker.swf" quality="high" bgcolor="#ffffff"
name="slideticker" allowscriptaccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
align="center" height="130" width="130">
</object>
</noscript>


Edit the src and bgcolor to the values of what you desire in that code.

In your web site copy/paste the following code into your website's code. (In between <head> and </head>)

Code: [ Select ]
<script src="myprintln.js"></script>


Or whatever you saved your file as in place of "myprintln.js'.

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

A little explanation of the code...

If you know PHP (at least a little) you would know that the code "echo" prints lines of text into the screen, that is what println is...

println is basically saying "print line (...);" ln in println is line (that's the easy way I can think of explaining it.


(All of the credit goes to righteous_trespasser for the code)
  • lesallstar
  • Novice
  • Novice
  • lesallstar
  • Posts: 20
  • Loc: New York City, NY

Post 3+ Months Ago

.....i'm reaaaaaalllllyyy startin to like ozzu now. lol Thanks alot Bogey. I kinda figured that but just wasnt really sure (didnt think to even try it that way though).

Thanks alot.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

No problem :D

Post Information

  • Total Posts in this topic: 20 posts
  • Users browsing this forum: No registered users and 22 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.