Converting From Frames to CSS and Div Tags

Posted on 2009-04-15
Last Modified: 2012-05-06
I am trying to convert from using frames to using CSS and Div Tags. I am having problems with my graphics not displaying correctly in my banner Div. There is a large gap where a repeat is not working.

Here is what I tried to do with a Div tag it isn't working:

<Div id=banner style="margin: 0; background: url(/Web_Dev_Pro/images/v8/banner_middle_bg.jpg) repeat-x;">
 <map name=banner_map>
  <area coords="45,20,240,50" href="home link">
 <img src=/Web_Dev_Pro/images/v8/login-top-graphic.jpg align=left hspace=0 width=195 height=60>
 <img src=/Web_Dev_Pro/images/v8/banner_left.jpg align=left hspace=0>
 <img src=/Web_Dev_Pro/images/v8/banner_right.jpg align=right hspace=0 border=0 usemap=#banner_map>

What is the correct CSS and Div code to fix this?

Here is the old Frame:



<frameset border=0 rows="0,60,*">

  <FRAME src="blank.html" name="HiddenScreen" noresize scrolling=no>

  <frame scrolling=no name="MainFrame" src="banner.htm"> 

  <frameset cols="151,*">

  <frameset rows=102,*">

    <frame name="navframe" scrolling=no src="top_left.htm">

    <frame name="menuframe" src="left.htm">


  <frame name="details" src="login.htm" noresize>




Here is the banner htm:




<body style="margin: 0; background: url(banner_middle_bg.jpg) repeat-x;">

 <map name=banner_map>

  <area coords="45,20,240,50" href="home link">


 <img src=login-top-graphic.jpg align=left hspace=0 width=195 height=60>

 <img src=banner_left.jpg align=left hspace=0>

 <img src=banner_right.jpg align=right hspace=0 border=0 usemap=#banner_map><br> 



Open in new window

Question by:sfletcher1959
    1 Comment
    LVL 42

    Accepted Solution

    I'm glad you're trying to stop using frames. However, I recommend you take the opportunity to start writing strict markup.  The align, hspace, and border attributes are obsolete. CSS should be used instead. Also you should use quotes around the values of all attributes.

    align=left works like float:left, so since floated elements are removed from the normal document flow, the height of #banner is collapsing to 0. A quick and dirty fix would be to give #banner overflow:hidden

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Adobe Dreamweaver CC 2015

    Adobe Dreamweaver Creative Cloud is used by web designers and front-end developers and allows you to visualize your site in real-time as you code. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    Suggested Solutions

    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now