Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Senior Member kevind_2007's Avatar
    Join Date
    Sep 2003
    Location
    South Carolina
    Posts
    586
    Member #
    3059
    Hey all,
    I was just needing advice. I was wanting to know if it was appropriate to use an iFrame for the 'main content' section and the 'featured work' section and set the bgcolor of it to the bgcolors of the sections and allow scrolling and set the border to 0? Would this be effective if say someone has a larger text size set in their browser and it wouldn't distort my webpage but just allow the iframe to scroll instead of breaking all the images up? I need quick advice because I'm hoping to launch this site soon... I was just wondering if this was the most effective and correct way to solve this resolution. If not, please tell me your suggestion! Thanks a lot! See attachment for image.
    Attached Images Attached Images
    --Kevin
    15" MacBook Pro With: Mac OSX 10.4.11(Tiger) 1440x900 Windows XP SP2 3GB RAM 1TB HDD
    kevind_2007--"Never let the fear of striking out get in your way."--Babe Ruth

    Links:Firefox Download||Google|| HTML Help||DHTML|| Web Design Terminology||Good-Tutorials

  2.  

  3. #2
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    Why not use a div and set overflow to auto? Your layout would not get distorted that way.

  4. #3
    Senior Member kevind_2007's Avatar
    Join Date
    Sep 2003
    Location
    South Carolina
    Posts
    586
    Member #
    3059
    Is there a tutorial on that or can you write me up an example script right quick? I've never worked with DIV's
    --Kevin
    15" MacBook Pro With: Mac OSX 10.4.11(Tiger) 1440x900 Windows XP SP2 3GB RAM 1TB HDD
    kevind_2007--"Never let the fear of striking out get in your way."--Babe Ruth

    Links:Firefox Download||Google|| HTML Help||DHTML|| Web Design Terminology||Good-Tutorials

  5. #4
    Junior Member
    Join Date
    Jun 2005
    Posts
    4
    Member #
    10327
    iframe should do the trick if not using divs..

  6. #5
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    iframes are crap for SEO. I'm sure we all know the problem with frames by now, so I won't elaborate. With a div you'd get the scroll effect without having to put the content on a separate page.

    If you understand HTML you will without a doubt understand CSS. You'll catch on quickly, so please try it out. When in doubt, go to the W3C: http://www.w3schools.com/css/default.asp

    A div (logical division) is like a box. Here's a very quick ( and annotated) example page:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Example of div</title>
    <style type="text/css">
    #main {
      position: absolute; /*calculated from top left browser corner*/
      top: 20px;
      left: 20px;
      width: 200px; /*width of div*/
      height: 200px; /*height of div*/
      padding: 8px; /*padding within div*/
      background: #CCCCCC; /*background color of div*/
      border: 1px solid #000000; /*solid black border*/
      font-family: Verdana, sans-serif; /*default font in div*/
      font-size: .9em; /*default font size in div*/
      color: #000000; /*default font color in div*/
      overflow: auto; /*controls content flow in div*/
      }
    </style>
    </head>
    <body> 
    <div id="main">Lorem ipsum dolor...<br>
    <b>Padding, margins,</b> and <b>borders</b> add to the div's <b>width</b> and <b>height</b>. Keep that in mind while designing.<br>
    Lorem ipsum dolor...</div> 
    </body>
    </html>
    Copy and paste that into a new HTML page. Try putting a lot of text in that div tag and watch how the overflow is controlled. Play around with the styles.

  7. #6
    Senior Member kevind_2007's Avatar
    Join Date
    Sep 2003
    Location
    South Carolina
    Posts
    586
    Member #
    3059
    Nice! I've tried it out and I think I'll use it instead of iframes! It works really well!
    --Kevin
    15" MacBook Pro With: Mac OSX 10.4.11(Tiger) 1440x900 Windows XP SP2 3GB RAM 1TB HDD
    kevind_2007--"Never let the fear of striking out get in your way."--Babe Ruth

    Links:Firefox Download||Google|| HTML Help||DHTML|| Web Design Terminology||Good-Tutorials

  8. #7
    Senior Member kevind_2007's Avatar
    Join Date
    Sep 2003
    Location
    South Carolina
    Posts
    586
    Member #
    3059
    When I want another DIV, say under the 'featured project' section, do I have to create another 'style' with #featuredproject?
    --Kevin
    15" MacBook Pro With: Mac OSX 10.4.11(Tiger) 1440x900 Windows XP SP2 3GB RAM 1TB HDD
    kevind_2007--"Never let the fear of striking out get in your way."--Babe Ruth

    Links:Firefox Download||Google|| HTML Help||DHTML|| Web Design Terminology||Good-Tutorials

  9. #8
    Senior Member kevind_2007's Avatar
    Join Date
    Sep 2003
    Location
    South Carolina
    Posts
    586
    Member #
    3059
    Or is this acceptable, putting a comma after #main?
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Example of div</title>
    <style type="text/css">
    #main,#featuredproject {
      position: absolute; /*calculated from top left browser corner*/
      top: 20px;
      left: 20px;
      width: 200px; /*width of div*/
      height: 200px; /*height of div*/
      padding: 8px; /*padding within div*/
      background: #CCCCCC; /*background color of div*/
      border: 1px solid #000000; /*solid black border*/
      font-family: Verdana, sans-serif; /*default font in div*/
      font-size: .9em; /*default font size in div*/
      color: #000000; /*default font color in div*/
      overflow: auto; /*controls content flow in div*/
      }
    </style>
    </head>
    <body> 
    <div id="main">Lorem ipsum dolor...<br>
    <b>Padding, margins,</b> and <b>borders</b> add to the div's <b>width</b> and <b>height</b>. Keep that in mind while designing.<br>
    Lorem ipsum dolor...</div> 
    </body>
    </html>
    --Kevin
    15" MacBook Pro With: Mac OSX 10.4.11(Tiger) 1440x900 Windows XP SP2 3GB RAM 1TB HDD
    kevind_2007--"Never let the fear of striking out get in your way."--Babe Ruth

    Links:Firefox Download||Google|| HTML Help||DHTML|| Web Design Terminology||Good-Tutorials

  10. #9
    Senior Member kevind_2007's Avatar
    Join Date
    Sep 2003
    Location
    South Carolina
    Posts
    586
    Member #
    3059
    Never mind, I've got it
    --Kevin
    15" MacBook Pro With: Mac OSX 10.4.11(Tiger) 1440x900 Windows XP SP2 3GB RAM 1TB HDD
    kevind_2007--"Never let the fear of striking out get in your way."--Babe Ruth

    Links:Firefox Download||Google|| HTML Help||DHTML|| Web Design Terminology||Good-Tutorials

  11. #10
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Quote Originally Posted by Eddy Bones
    When in doubt, go to the W3C: http://www.w3schools.com/css/default.asp
    Let me just clarify, I'm pretty sure W3Schools is not affiliated with the W3C... Correct me if I'm wrong, of course.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:39 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com