Using parent styles in an iframe

  • caspersgrin
  • Born
  • Born
  • No Avatar
  • Joined: 08 May 2008
  • Posts: 2
  • Status: Offline

Post May 8th, 2008, 11:48 am

Hi,

In my ruthless efforts at separating process from presentation, I've come across a problem that baffles me. I'm using a frameset with just a left-hand and a right-hand frame. The document in the right-hand frame includes an iframe. The iframe is populated with the output from a servlet well after load time. The output of the servlet is simply a body text surrounded by html tags. I have also embeed the text is a <div class="resultsText">...</div> tag set specifying a style defined in the parent document. It seems that the div tag is being ignored (i.e., doesn't recognize the style). How can I get the iframe to recognize a style defined in the parent document?

Thanks,

Rob Tanner
Linfield College
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post May 8th, 2008, 11:48 am

Post May 8th, 2008, 10:57 pm

well, the way you do things I really don't like frames with more frames inside them ... but anyway ... how about putting a <link> to your stylesheet inside the iframe code ... ?
DAIRY!
  • caspersgrin
  • Born
  • Born
  • No Avatar
  • Joined: 08 May 2008
  • Posts: 2
  • Status: Offline

Post May 8th, 2008, 11:34 pm

righteous_trespasser wrote:
well, the way you do things I really don't like frames with more frames inside them ... but anyway ... how about putting a <link> to your stylesheet inside the iframe code ... ?


That's what I ended up doing, but it's not what I consider an elegant solution. I have somewhere around 3 dozen web applications for internal data management and I use about half a dozen styles for a consistent look and feel, and those are on a separate sheet that gets loaded in at run time. But every application also has a number of styles unique to a particular page and those I include on the page. And that's the easiest way for me to keep the pages organized. Doing a second separate style sheet loaded in with a <link> violates a schema that I really want to be consistent with. But I guess if the technology won't work any other way, I haven't got much of a choice.

-- Rob

Post May 8th, 2008, 11:53 pm

that's the only way I could think of ... but then again, I never use frames or iframes for that matter ... I don't find them very elegant or at all ... so maybe someone else knows of another way ...
DAIRY!
  • Bogey
  • Ounce of 'Zu'
  • Web Master
  • User avatar
  • Joined: 14 Jul 2005
  • Posts: 4221
  • Loc: Ozzu
  • Status: Offline

Post May 9th, 2008, 3:05 pm

righteous_trespasser wrote:
that's the only way I could think of ... but then again, I never use frames or iframes for that matter ... I don't find them very elegant or at all ... so maybe someone else knows of another way ...

I do... drop frames and use PHP includes... do the same thing and you can make it look like frames too.. using the following CODES

design.css
  1. body {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. .container {
  6.   margin-left: auto;
  7.   margin-right: auto;
  8.   width: 800px;
  9. }
  10. .box1 {
  11.   float: left;
  12.   width: 200px;
  13.   height: 700px;
  14.   background-color: #999999;
  15.   color: #FFFFFF;
  16. }
  17. .box2 {
  18.   float: left;
  19.   width: 600px;
  20.   height: 700px;
  21.   overflow: auto;
  22.   background-color: #CECECE;
  23. }
  24. .box3 {
  25.   width: 800px;
  26.   text-align: center;
  27.   background-color: #666666;
  28. }

index.php
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>Site Preferences</title>
  5. <link href="design.css" rel="stylesheet" type="text/css" />
  6. </head>
  7. <body>
  8. <div class="container">
  9. <div class="box1">
  10. <?php
  11.   include('dir/file.html');
  12. ?>
  13. </div>
  14. <div class="box2">
  15. <?php
  16.   include('dir/file2.html');
  17. ?>
  18. </div>
  19. <div class="box3">
  20. <p>Copyright &copy; <a href="somesite.tld">some site</a> 2007-2008</p>
  21. </div>
  22. </div>
  23. </body>
  24. </html>

file.html
  1. <div class="content">
  2. <p>blahblahblah</p>
  3. </div>

file2.html
  1.  
  2. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam eleifend metus. Morbi quam dui, sodales at, lobortis quis, porttitor id, justo. Maecenas purus ante, consequat quis, mollis auctor, adipiscing porta, nunc. Mauris eu tortor vitae quam dictum rutrum. Etiam consectetuer. Aenean et justo sit amet elit aliquet interdum. Etiam lorem ante, laoreet sed, pretium ut, elementum ut, nunc. Sed rutrum, metus vel elementum lobortis, nibh felis rutrum magna, quis auctor enim lacus eu nulla. Cras quis metus. Curabitur consequat libero nec magna. Mauris tincidunt mauris ultrices urna. Duis et diam. Aliquam ante. Morbi odio. Mauris eu diam at metus tincidunt consectetuer. Vestibulum sit amet enim sit amet nulla sagittis mollis.</p>
  3.  
  4. <p>Sed et odio. Aenean purus. Etiam elementum, enim nec sodales rhoncus, metus mi feugiat libero, vel dignissim lectus augue sit amet dolor. Nullam libero. Duis vel nunc ornare lectus imperdiet laoreet. Cras scelerisque elit a nisl. Nunc sapien turpis, sagittis non, accumsan in, posuere sodales, neque. Praesent a quam at mauris blandit aliquam. Aenean posuere magna eu tortor. Sed imperdiet auctor nibh. In blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  5.  
  6. <p>Fusce non est ut erat mollis volutpat. Duis id neque et lacus scelerisque laoreet. Aenean consectetuer iaculis odio. Mauris lacinia pulvinar neque. Pellentesque ultrices. Nunc nulla nunc, pulvinar nec, pulvinar quis, feugiat et, dui. Sed urna magna, rhoncus et, tincidunt ac, fermentum ut, magna. Suspendisse est diam, elementum sed, adipiscing et, auctor et, nulla. Cras commodo dui vel sem. Nam vitae est.</p>
  7.  
  8. <p>Integer dui erat, egestas sit amet, rutrum quis, luctus fringilla, risus. Nullam interdum. Donec venenatis rhoncus ipsum. Curabitur lectus. Nullam purus nibh, hendrerit vitae, euismod et, semper nec, sapien. Quisque dolor. Mauris convallis orci ac felis. Duis elit arcu, ultrices quis, congue ac, volutpat id, orci. Sed vehicula, lorem eget ultrices dignissim, diam eros molestie lorem, quis egestas velit tellus id tellus. Pellentesque malesuada sollicitudin velit. Maecenas adipiscing tincidunt dui. Cras massa. Nulla facilisi. Pellentesque nec dui vitae elit venenatis convallis. In ut nulla at elit egestas feugiat. Sed sed dui id quam interdum laoreet.</p>
  9.  
  10. <p>Maecenas porttitor. Aliquam erat volutpat. Vestibulum pharetra. Sed sit amet mi sit amet nulla semper sagittis. Maecenas vitae nulla vitae erat egestas vulputate. Sed hendrerit. In et massa. Mauris lectus velit, adipiscing non, luctus quis, ullamcorper a, nulla. Etiam posuere orci ut tortor interdum lacinia. Phasellus feugiat ligula ac neque ultrices commodo. Vivamus vitae magna vel eros ultricies rhoncus. Sed consectetuer luctus orci. Nulla rutrum volutpat dui. Nam fringilla eros laoreet diam tristique interdum. Curabitur ligula. Nam placerat nulla ut eros. Nunc tellus.</p>
  11.  
  12. <p>Donec purus. Donec sodales vestibulum ligula. Pellentesque bibendum tortor eget nisl. Cras nec mi ac ligula sodales mollis. Quisque pretium. Aenean nibh lacus, aliquam ut, sagittis sodales, fermentum id, nibh. Cras fermentum scelerisque magna. Quisque nunc dolor, condimentum nec, venenatis sit amet, pretium id, nisl. Nam bibendum auctor dolor. Sed quis magna eu sapien pharetra iaculis. Phasellus magna. Ut accumsan mattis augue. Ut non est. Fusce ligula nulla, tincidunt id, dapibus vitae, tempor vel, nisi. Nullam blandit diam eget dui. Mauris sollicitudin tincidunt mi. Praesent dictum fermentum odio. Quisque enim lorem, rhoncus sit amet, porta in, semper non, ante. Morbi eget justo ac quam dapibus aliquam.</p>
  13.  
  14. <p>Etiam sit amet eros. Ut posuere sollicitudin turpis. Donec cursus. Nullam tristique. Ut in urna blandit quam euismod eleifend. Mauris euismod augue eu augue. Nam vehicula nulla quis sapien. Curabitur mattis pharetra orci. Suspendisse pede velit, ultricies id, luctus non, malesuada et, libero. Sed ut quam eget felis venenatis consequat. Praesent at magna. Morbi odio. Mauris a ante. Integer consectetuer sapien eget odio. Sed dapibus nibh molestie augue. Proin eget nisl.</p>
  15.  
  16. <p>Phasellus venenatis. Sed at eros. Nullam convallis iaculis arcu. Duis justo nisl, consectetuer eget, venenatis eget, euismod eu, arcu. Curabitur nec lectus non enim imperdiet convallis. Sed ornare. Suspendisse potenti. come sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce tristique. Integer sagittis consectetuer nunc. Ut tempor luctus velit. Aliquam vehicula.</p>
  17.  
  18. <p>Aliquam facilisis nulla at est. Pellentesque quis pede. Nullam porttitor nisi eu odio. Cras sed leo ac sem congue tempus. Proin mauris. Fusce mattis, libero eget mollis elementum, risus quam placerat mi, eu viverra nisl mi in pede. Nulla urna orci, vehicula eu, bibendum at, vulputate eu, sem. Aenean id elit. Donec id ipsum ac sem gravida sodales. Aenean lobortis. Nam lacinia mi et nunc. Nulla facilisi. Morbi molestie scelerisque quam. Praesent dapibus erat at diam. Mauris in lorem a est tempus porttitor. Integer vel tellus. Sed condimentum rhoncus dui. Sed aliquam ligula quis risus.</p>
  19.  
  20. <p>Phasellus tincidunt odio in mauris. Mauris sit amet nunc in turpis posuere rutrum. Nunc tincidunt sapien ut justo. Mauris at ante eu augue bibendum consequat. Suspendisse nibh. Aenean semper, ante nec blandit dapibus, lorem lectus adipiscing elit, at congue tortor leo sit amet velit. In pellentesque, libero malesuada tincidunt interdum, pede nulla consectetuer felis, ut cursus nibh risus sed magna. Praesent eu ligula et erat euismod tempor. Aenean nibh tellus, pulvinar in, iaculis at, pulvinar non, magna. Mauris purus diam, bibendum in, semper a, lobortis non, est. Mauris felis arcu, placerat eu, faucibus sed, aliquet non, lorem. Vivamus volutpat. Aenean aliquet libero at nunc. Donec mollis elit at enim. Aliquam molestie congue est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed lacinia. Donec ultricies. Nam blandit, odio sed scelerisque aliquet, tellus erat elementum nisl, eget ornare neque nulla vitae est.</p>

This should help :)
01000010 01101111 01100111 01100101 01111001
My Developing Blog (5)
  • Fabinator
  • Proficient
  • Proficient
  • User avatar
  • Joined: 05 May 2007
  • Posts: 402
  • Loc: Holland
  • Status: Online

Post May 10th, 2008, 5:48 am

Maybe you could use the universal selector:

This code will target anything nested in your resultsText div:
  1. .resultsText * {
  2. /*your style*/
  3. }


You could try that ;)

@Bogey
file2.php should be file2.html or it won't be included ;)
  • Bogey
  • Ounce of 'Zu'
  • Web Master
  • User avatar
  • Joined: 14 Jul 2005
  • Posts: 4221
  • Loc: Ozzu
  • Status: Offline

Post May 10th, 2008, 8:11 pm

Fabinator wrote:
@Bogey
file2.php should be file2.html or it won't be included ;)

Yeah, your right... oops! I'll fix that
01000010 01101111 01100111 01100101 01111001
My Developing Blog (5)

Post Information

  • 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
 
 

© Unmelted Enterprises 1998-2008. Driven by phpBB © 2001-2008 phpBB Group.

 
 
 
 

Need a pre-made web design for your website?

Check out our templates here: Ozzu Templates


400+ FREE Website Templates. Download Now!