Jump to content

Creating a website: text missing in frames, help!

Argitoth

By Argitoth,
in General Discussion

 Share

Recommended Posts

Argitoth Newbie

Argitoth

Posted
Posted 


<html>

<head>
<title>ElanHickler.com</title>
<style type="text/css">
table.one{table-layout:automatic; border-collapse:collapse; width:100%}
frame.one{scrolling:no; frameborder:0; width:100%;}
td.one{height:50}
td.two{height:600}
</style>
</head>

<table class="one" border="0">
<tr bgcolor="grey"><td class="one"><frameset><frame class="one" src ="wimpy.html"></frameste></td></tr>
<tr bgcolor="pink"><td class="two"><frameset><frame class="one" src ="elanhicklercom.html"></frameste></td></tr>
</table>

</html>

So... the text used to show up when I used iframes but with iframes, it has a minimum hight which is bad. The HTML in my frames:

wimp.html + elanhicklercom.html:

<html>

<body>

<p>UNDER CONSTRUCTION</p>

</body>

</html>

Link to comment
Share on other sites
shikigami Newbie

shikigami

Posted
Posted
Frames are evil.

Use CSS for positioning.

no. use a table.

CSS isnt supported uniformly through all browsers, especially when it comes to positioning.

if you want to change something on your page without reloading, use AJAX. it will make an asynchronous http request and you can take the response and change the innerHTML of a div without reloading the entire page.

also, your </frameset> tags are spelled wrong, that might be an issue.

<tr bgcolor="grey"><td class="one"><frameset><frame class="one" src ="wimpy.html"></frameste></td></tr>

<tr bgcolor="pink"><td class="two"><frameset><frame class="one" src ="elanhicklercom.html"></frameste></td></tr>

Link to comment
Share on other sites
shikigami Newbie

shikigami

Posted
Posted
Isn't it enough that it's supported by the major ones? (IE,Firefox, Opera, Netscape and Safari)

no no, uniformly. i.e. all those browsers interpret it differently.

i had used a stylesheet to create a footer, which i wanted to always be 100% width of the browser. i had to hack around the fact that 100% is 100% in IE, but firefox stretched it past the width of the browser, creating a horizontal scroll bar. apparently 70% is 100% in firefox.

Link to comment
Share on other sites
Kanthos Newbie

Kanthos

Posted
Posted

I'm taking a look at this for you. One thing I see is that your closing tags for your framesets should be /frameset, not /frameste. Also, gray can't be spelled grey for most browsers to interpret it correctly.

The problem with your frames is that you don't specify the number of rows or columns. You'll want to do a 

<frameset rows="200,*">

or something like that; it'll give you a 200 pixel frame and a second frame. This won't work on your page though, possibly because the framesets are in tables and only contain one frame, or possibly because CSS and frames don't play well together.

I'd suggest too that you find another way around this. Frames have been considered poor web design for probably the last 7 or more years. Most people who have MP3 players on their site either are fine with the fact that leaving a page changes the MP3 player, or they'll do something in flash.

Link to comment
Share on other sites
shikigami Newbie

shikigami

Posted
Posted
for the love of god do not use tables. CSS please, for humanity's sake. also if your CSS is showing up incorrectly in one browser over another, you're doing it wrong. unless that browser is IE. but sorry, writing sites specifically for archaic non-conformist piece of shit browsers is against my religion.

CSS is certainly an improvement on plain old HTML but it’s limitations are staggering and the lack of industry support will continue to hold back designers for many years to come unless we begin to build and design something better.

1. For all that CSS has been able to do it’s a technological failure. CSS just doesn’t work as expected. How can I say it’s a failure when millions of sites use it? CSS can be used to style basic text attributes but browsers aren’t consistent in how they use this technology. Even though there is a “standard” and some browsers partially adhere to the standard to truly be a useful standard you need two things: Predictability and Consistency. CSS has neither. Any designer who has tried to create a large and complex site using CSS will tell you that all popular browsers interpret the standard differently.

2. CSS is ‘markup centric’ not ‘design centric.’ I have this idea that designers should spend more time designing great looking sites and less time fiddling around with markup tags and browser compatibility. When I say ‘markup centric’ I mean that every CSS design tool forces users to go into source code mode to create an attractive modern site. Many designers take pride in hand coding CSS. Tools for designers should be design centric. PDF/postscript is a good example of a design centric markup , (unfortunately not very suitable for the web.) Designers don’t argue about how to create semantically correct postscript tags they just create great designs using great design tools. CSS sucks because it forces designers to think about how to make it work technically rather than how to make it work from a design perspective.

3. Why on earth do we think that cascading is a useful feature? The way that styles cascade from one level of layout to a deeper layout makes it difficult to figure out why a particular item is styled in a certain way. By contrast non-cascading style sheets would be equally powerful and more predictable. The cascading makes it harder to interpret the page for both the designer as well as the web-browser. In fact the complexities in cascading is one of the reasons why so many browsers screw up the standard. In theory cascading could save bandwidth but in practice it creates bloated documents to get around the cascading issues.

4. The box-model is too simplistic. The high level idea of CSS is that you can create attractive pages using margin, border, padding and content attributes. While this is a nice theory it’s primitive in it’s understanding of both layout problems and design. Highly developed design tools have layout engines that offer multiple layouts, non-rectangular margins, proportional layouts, dock-able layouts, table layouts, column layouts, etc. etc. It’ll be years before these features make it to CSS and many more before browsers implement them with any consistency. If browsers keep spending so much time on CSS they’ll have a well polished turd. Tools like Aldus Page Maker had better design tools, font tools and layout capabilities 10 years ago. This is because good design tools start with the design, not the markup.

5. When writing software you learn what works and what doesn’t. You get new and better ideas and you throw away the old ones. This process of starting fresh is absent from the current CSS way of thinking. Each version of CSS builds on the previous one without acknowledging any fundamental flaws. CSS and its HTML sibling are the ultimate designs by committee. Any enhancements to CSS/HTML are piled on top of the old standards. This makes it progressively harder to create powerful, compatible and consistent browsers. This also makes it harder for designers to create sites that target the new platform because they are constantly trying to satisfy the compatibility with older browsers. Version compatibility has to be all or nothing. If you support V3 it has to be 100% supported and tested. Supporting some of the features actually makes things worse.

6. There shouldn’t be multiple right answers for a visual design. The way CSS works there can be many ways to do the same thing. In fact there seem to be endless debates about the proper way to hack together trivial things like rounded corners. Rounded Corners? I mean really! Again I refer you to Aldus and even MS Word circa 1997. These features are not that hard to develop but getting them to work in a “standard way” seems to be all but impossible.

7. CSS captures styles not semantics or design intention. A design intention would be something like: “I want to balance these two columns” or perhaps “This text should line up with the logo image in the first column.” When designers do things like this:

#content{position:relative;top:32px;left:20%;width:40%;}

They are capturing the style specifics not the design intention. Why 32 pixels? Why 40%? Perhaps the logo is 32px tall? Perhaps the other column is 60% wide? When the logo changes size or placement how will you know what styles to touch? There is a basic concept called parametric design that can be used to specify the parameters of the design. This concept helps embody the design intention as a set of rules that can then be preserved as the design changes. Even a very simple parametric design allows you to preserve design intention rather then hard coding sizes and dimensions.

8. Design should be declarative not interpreted. Again CSS has to process a large number of rules before it can figure out where things are supposed to go. After these rules are interpreted this data is thrown out and each and every browser that opens up the web-page has to re-interpret the data. This is incredibly inefficient. First of it makes web-pages load very slowly. Even when you’re on a fast connection the browser can’t figure out where to place objects until the entire web-page has finished loading. Secondly this interpretation is very prone to errors. A declarative design isn’t open to as much interpretation allowing it both render quickly and consistently.

9. CSS is a pain to work with. Take a look at some of the designs over at CSSZenGarden. The designs are both attractive and sophisticated. A good designer could take these designs and mock up similar designs in PhotoShop or Illustrator in a matter of hours but take the same designs and ask for it in CSS and it may take a couple days. Each time you make an edit to your CSS you have to refresh your browser to see what it’s actually going to look like. Then after you get one browser working you need to double back and get the other browsers working.

10. If you can’t get consistency across browsers then you can’t rely on CSS to accurately and properly design your site. If you can’t get the site to look exactly the way you want on every single browser then how can you claim that CSS is a good design tool or even a success? The fact that there is no alternative to create attractive websites doesn’t make CSS is a good tool. There are two ways to solve the problem. The first is to continue to hammer on standards and CSS asking for a better solution. This has been happening for the last 10 years and it just doesn’t work. The alternative is to realize that CSS is flawed in it’s intrinsic design and begin to ask the questions of how could you do it better?

in other words, use a table.

Link to comment
Share on other sites
shikigami Newbie

shikigami

Posted
Posted
HOW DO I USE CSS ISNTEAD OF TABLES? I thought CSS is only for defining things. Don't I have to use Tables *with* CSS?

CSS can determine the position of div's as well as the attributes of this positioning (relative, absolute, floating, etc.)

its better to use a table to determine placement, see 10 reasons above.

Link to comment
Share on other sites
shikigami Newbie

shikigami

Posted
Posted

oh and:

function ajaxFunction()
  {
  var xmlHttp;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      catch (e)
        {
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
    xmlHttp.onreadystatechange=function()
      {
      if(xmlHttp.readyState==4)
        {
        // heres where you would set the text of some area within  your page to the new text.
        document.somediv.InnerHTML=xmlHttp.responseText;
        }
      }
    xmlHttp.open("GET","yourpage.html/php/asp/whatever",true);
    xmlHttp.send(null);
  }

Link to comment
Share on other sites
shikigami Newbie

shikigami

Posted
Posted
shikigami, it almost seems like your posting the code for AJAX so that my mp3 widget won't cutoff. Is this true? I need a little bit more explanation to understand where I put my stuff in the code.

yes, sorry, im trying to help you and tell everyone else why css sucks at the same time.

the javascript i posted is a simple AJAX method. it makes a request and displays the page requested within a div without ever reloading the page. in other words, you can have the mp3 on your "main" page, and its content within a div. when you click a button for example, it would change the contents of the div, but the main page would stay intact.

im not sure exactly what you want to do and how you designed your site, so i cant explain exactly how you would use it.

Makes me wonder why there is no tool that helps translate what CSS is written for IE into Firefox/Opera/Safari etc...

In other words, a tool that creates a standard interpretation for all browsers...

the implementations of the browsers differ, and this difference probably changes how the browser interprets CSS.

either way, CSS and even HTML on the whole is stupid until all browsers can conform.

Link to comment
Share on other sites
shikigami Newbie

shikigami

Posted
Posted
It would be great to define one element, such as a table, to be displayed on every page. That would be a table including my mp3 widget and my "elanhickler.com" logo.

before i go on, this isnt for a school project or anything is it? i dont want to be pressing your deadline any further by introducing new concepts. if this is the case, use an iframe.

anyway, your main page would contain the header and a div somewhere (in this case, it looks like the entire rest of the page). when someone clicks a link or a button, your onClick code would be the http request function. what this does is sort of secretly navigate to a different page and gets the html within that page.

to discuss how it actually works is that an HTTP GET is sent to the server, and the internal xmlhttp object handles the response. this response, if a 200 OK, contains HTML content, which you can put inside the div. so youre div would act as your iframe.

Link to comment
Share on other sites
Argitoth Newbie

Argitoth

Posted
  • Author
Posted

i just tried to go back to using an iframe and then I tried a frameset. Both don't work. It's as if it doesn't know where the source html is. I try to view the source of the frame withing a browser it's just

<HTML></HTML> but the source should be:

<html>

<head>

<title>ElanHickler.com :: Home</title>

<style type="text/css">

table.one{table-layout:automatic; border-collapse:collapse; width:100%}

td.one{height:50} td.two{height:100} td.thr{height:800}

</style>

</head>

<table class="one" border="0">

<tr bgcolor="pink"><td class="two" align="center"><img src="home_button.gif"><img src="divider_button.gif"><img src="services_button.gif"><img src="divider_button.gif"><img src="links_button.gif">

</table>

<table class="one" border="0">

<tr bgcolor="green"><td class="thr"><p>table 2</p></td></tr>

</table>

</html>

Link to comment
Share on other sites
Argitoth Newbie

Argitoth

Posted
  • Author
Posted

Hey nevermind about the AJAX frame. I'm going to scrap the idea. Edit: To explain further, I originally wanted to have a constant mp3 player, but not only does having that frame make it harder for me to imagine create a nice looking website, I figured that a constant mp3 player just won't compliment my website's design. Of course I'll still have the mp3 player on one of the pages.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...