Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Sep 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Converting iframe layout to div layout

    I created this graphic with the intention of using it as an iframe layout but I realised that iframes can cause problems for other browsers and would like to convert it into a div layout since css codes would be easier in the long run to maintain.
    But I have absolutely no idea where to start, I've tried to use various div layers but the main text disappeared behind the graphics.
    And I haven't any clue how to arrange the menu on the left in divs.
    Here's a link to the test site:
    http://www.elspethmac.com/test/

    Here's my html code:
    Code:
    <html>
    <head>
    <title>kimmer's tattoos</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="style.css" type="text/css">
    <style>
    body {
    scrollbar-face-color: #B1721E;
    scrollbar-shadow-color: #4C1E08;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #4C1E08;
    scrollbar-darkshadow-color: #B1721E;
    scrollbar-track-color:#B1721E;
    scrollbar-arrow-color: #4C1E08;
    }
    </style>
    </head>
    <body bgcolor=#ecbe7c leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
    <table width=780 border=0 cellpadding=0 cellspacing=0 align="center">
    <tr>
    <td colspan=5>
    <img src="images/medusa_01.jpg" width=780 height=22 alt=""></td>
    <td>
    <img src="images/spacer.gif" width=1 height=22 alt=""></td>
    </tr>
    <tr>
    <td rowspan=4>
    <img src="images/medusa_02.jpg" width=59 height=498 alt=""></td>
    <td rowspan=3 background="images/medusa_03.jpg" style="background-repeat: no-repeat; padding: 7px;" width="155" height="398" valign="top">
    <div id="nav">
        <a href="main.html" target="main">Forside</a><br>
        <a href="tatovering.html" target="main">Tattoos</a><br>
        <a href="mig.html" target="main">Om Mig</a><br>
        <a href="spørg.html" target="main">Spørgsmål</a><br>
        <a href="links.html" target="main">Links</a><br>
        <a href="email.html" target="main">Email</a><br>
        <a href="guestbook.html" target="main">Guestbook</a>
    </div>
        </td>
    <td colspan=3>
    <img src="images/medusa_04.jpg" width=566 height=24 alt=""></td>
    <td>
    <img src="images/spacer.gif" width=1 height=24 alt=""></td>
    </tr>
    <tr>
    <td rowspan=3>
    <img src="images/medusa_05.jpg" width=24 height=474 alt=""></td>
    <td style="background: url(images/medusa_06.jpg)">
    <iframe frameborder="0" framespacing="0" marginwidth=0 marginheight=0 hspace=0 vspace=0 style="filter: chroma(color=#ff00ff)" allowtransparency="false" width="519" height="340" src="main.html" name="main"></iframe></td>
    <td rowspan=3>
    <img src="images/medusa_07.jpg" width=13 height=474 alt=""></td>
    <td>
    <img src="images/spacer.gif" width=1 height=340 alt=""></td>
    </tr>
    <tr>
    <td rowspan=2>
    <img src="images/medusa_08.jpg" width=529 height=134 alt=""></td>
    <td>
    <img src="images/spacer.gif" width=1 height=34 alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/medusa_09.jpg" width=155 height=100 alt=""></td>
    <td>
    <img src="images/spacer.gif" width=1 height=100 alt=""></td>
    	</tr>
    </table>
    
    </body>
    </html>
    And my css code:
    Code:
    body { font-family:arial,verdana; 
           font-size:11px;
           letter-spacing: 2px;
           line-height:15px; 
           color:#F9E5C1; 
           cursor:normal; 
           text-align:justify
           margin-top:0; margin-bottom:0; 
           margin-left:0; margin-right:0;
    
    scrollbar-face-color: #8B4117;
    scrollbar-shadow-color: #4C1E08;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #4C1E08;
    scrollbar-darkshadow-color: #8B4117;
    scrollbar-track-color:#8B4117;
    scrollbar-arrow-color: #4C1E08;
    }
    
    a:link{color:2F1403;text-decoration:none;}
    a:visited{color:2F1403;text-decoration:none;}
    a:active{color:F9E5C1;text-decoration:none;}
    a:hover{color:66491C;cursor:help; height:0; font-weight: bold; letter-spacing: 3px; padding-left: 1px;background-color:F9E5C1}
    
    
    .title{font-family:arial,verdana; 
           text-align: right; 
           border: dashed #D7A24F; 
           border-width: 0px 0px 1px 0px; 
           color: #F9E5C1;
           font-size: 10px; 
           font-weight: bold; 
           letter-spacing: 3px; 
           text-transform:uppercase;}
    
    #nav{font-family:arial,verdana;
         font-size: 11px; 
         font-weight: bold; 
         letter-spacing: 5px;
         line-height:15px;
         margin-top:40; margin-bottom:0; 
         margin-left:15; margin-right:0;
    }
    I would greatly appreciate any help anyone can offer.
    Last edited by elspethmac; 08-23-2006 at 01:57 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,876
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Where you have to start is with the structure of your HTML, beginning with a valid doctype declaration (if you recode the entire page "strict" is your keyword) and continuing with semantic code.

    Then you use CSS to style the HTML elements you have.
    Since your layout looks like a basic two column layout you might read this tutorial (and maybe some other pages on that website) to get a starting point.

    Hope that helps and good luck.

  • #3
    New to the CF scene
    Join Date
    Sep 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the quick reply.

    I had actually taken the doctype declaration out because it caused a gap to appear between the top images in Firefox - not sure why. But I'll be sure to put it back in.

    Thanks for the link to that site, only problem I can see with the two columns layout is that it specify's a background to scroll along with the text, my background was initally made for an iframe so it won't scroll - is there a way round that so that only the text scrolls like in an iframe and my background stays fixed where it is and in it's current size?

    Thanks for the help... it's really appreciated.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,876
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Yes, that's the easiest thing:
    You take a div, set a width and height, put a fixed background image (background: url(image.gif) center center fixed;), and apply overflow: auto;.
    All this is done with CSS, of course.

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Canada
    Posts
    253
    Thanks
    0
    Thanked 0 Times in 0 Posts
    just a quick note (as i've seen it before) in case you didnt think of it yet...

    iframe = allows you to change that area contents with a click of a link.
    no iframe = you will be reloading a new page with new contents each link click.

  • #6
    New to the CF scene
    Join Date
    Sep 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for clarifying the fixed background image.

    Oh I know that now I won't be using an iframe it'll have to load a new page (but thanks for pointing it out anyway )... I'm hoping once I get the divs sorted out that I'll be able to redo it yet again into a php website. But I thought I'd get the divs sorted out first.

    Only problem with the php layout that I can think of is that the div content area will have to be in every page rather than my header.
    But if I can't get that to work I'll just stick to plain old html pages.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,876
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Quote Originally Posted by elspethmac
    Only problem with the php layout that I can think of is that the div content area will have to be in every page rather than my header.
    But if I can't get that to work I'll just stick to plain old html pages.
    Don't quite understand what you mean but PHP is just producing HTML anyway. To simulate frames you can work with includes (<?php include("file.txt"); ?>) that you have one navigation and with each click on a link you include an external file... much like frames but it's one big HTML file in the end.

  • #8
    New to the CF scene
    Join Date
    Sep 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've worked with php includes before but the one time I've worked with php and divs was really confusing since the div containing the content and navigation were on floating layers above the fixed background.

    I had a hard time keeping it all straight and ended up giving up on all of since I couldn't get the layers to align correctly - the text was either too far down or it made the images seperate. Of course it was my coding but I couldn't figure out where I was going wrong - so I hope this time I have better luck.


  •  

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •