[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Converting From Frames to CSS and Div Tags

Posted on 2009-04-15
Medium Priority
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 43

Accepted Solution

David S. earned 2000 total points
ID: 24153187
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

834 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