SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Location
    Texas, USA
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Browser Resizing

    I am designing a Web site (hasn't launched yet) and have noticed that when I resize it by dragging one of the corners, that the text and graphics get all jumbled up/squished together. However, when I resize the browser back to normal, everything is fine. My screen resolution is 1024x768. I would like the Web site to appear correctly no matter what size the browser or screen resolution may be. I've heard people talk about using CSS to do this, but I don't know CSS. What is the best way to resolve this issue. If I need CSS, could someone provide me with the right code and tell me whree it should be inserted? Thanks in advance.

    Here is the code:

    <code>

    <?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Michigan Tin Ceilings</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1" />
    <META NAME="keywords" CONTENT="INSERT KEYWORDS BETWEEN QUOTES">
    <META NAME="description" CONTENT="INSERT DESCRIPTION HERE BETWEEN QUOTES">
    <META name="Author" content="INSERT AUTHOR BETWEEN QUOTES">
    <META name=Robots content="index, follow">
    <style type="text/css">
    .menuOut {cursor:pointer; margin:0px; background-color:#0099cc; color:#000000; width:110px; border:1px solid #000000; padding:2px; text-align:left; font-weight:bold;}
    .menuOver {cursor:pointer; margin:0px; background-color:#000000; color:#0099cc; width:110px; border:1px solid #0099cc; padding:2px; text-align:left; font-weight:bold;}
    .submenu {width:170px; font-family:Verdana; font-size:12px; padding-left:25px;}
    .submenu a {color:#336699; text-decoration:none; font-weight:bold;}
    .submenu a:hover {color:#ff0000; text-decoration:none; font-style:oblique; font-weight:bold;}
    </style>
    <script type="text/javascript">

    function SwitchMenu(obj){
    if(document.getElementById){
    var el = document.getElementById(obj);
    var ar = document.getElementById("cont").getElementsByTagName("DIV");
    if(el.style.display == "none"){
    for (var i=0; i<ar.length; i++){
    ar[i].style.display = "none";
    }
    el.style.display = "block";
    }else{
    el.style.display = "none";
    }
    }
    }
    function ChangeClass(menu, newClass) {
    if (document.getElementById) {
    document.getElementById(menu).className = newClass;
    }
    }
    document.onselectstart = new Function("return false");
    </script>
    </head>

    <body bgcolor="#996633" link="#0000FF" vlink="#FF0000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div align="center"></div>

    <table width="71%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#000000">
    <tr>
    <td height="75">
    <div align="center"><font color="#FFFFFF" size="+6" face="Arial"><strong>Michigan
    Tin Ceilings</strong></font></div></td>
    </tr>
    </table>
    <table width="72%" border="0" align="center">
    <tr>
    <td height="20"><img src="Images/antique_burgandy_tin_ceiling_tile_resized1.jpg" width="58" height="30" /><img src="Images/antique_gold_tin_ceiling_tile_resized1.jpg" width="58" height="30" /><img src="Images/black_satin_tin_ceiling_tile_resized1.jpg" width="58" height="30" /><img src="Images/forest_green_vein_tin_ceiling_tile_resized1.jpg" width="58" height="30" /><img src="Images/satin_copper_tin_ceiling_tile_resized1.jpg" width="58" height="30" /><img src="Images/white_tile_tin_ceiling_tile_resized1.jpg" width="58" height="30" /><img src="Images/antique_burgandy_tin_ceiling_tile_resized1.jpg" width="58" height="30" /><img src="Images/antique_gold_tin_ceiling_tile_resized1.jpg" width="58" height="30" /><img src="Images/black_satin_tin_ceiling_tile_resized1.jpg" width="58" height="30" /><img src="Images/forest_green_vein_tin_ceiling_tile_resized1.jpg" width="58" height="30" /><img src="Images/satin_copper_tin_ceiling_tile_resized1.jpg" width="58" height="30" /><img src="Images/white_tile_tin_ceiling_tile_resized1.jpg" width="58" height="30" /></td>
    </tr>
    </table>
    <table width="71%" height="186" border="0" align="center">
    <tr>
    <td><table width="26%" height="186" border="0">
    <tr>
    <td height="29"> <div align="left"><font color="#FFFFFF" size="+1" face="Arial, Helvetica, sans-serif">MENU</font></div></td>
    </tr>
    <tr>
    <td>
    <div id="cont" align="left">
    <p id="menu1" class="menuOut" onclick="SwitchMenu('sub1')" onmouseover="ChangeClass('menu1','menuOver')" onmouseout="ChangeClass('menu1','menuOut')">Patterns</p>
    <div class="submenu" id="sub1" style="display:none;">
    <a href="#" title="Pattern 1">Pattern 1</a><br/>

    <a href="#" title="Pattern 2">Pattern 2</a><br/>
    <a href="#" title="Pattern 3">Pattern 3</a>
    </div>

    <p id="menu2" class="menuOut" onclick="SwitchMenu('sub2')" onmouseover="ChangeClass('menu2','menuOver')" onmouseout="ChangeClass('menu2','menuOut')">Colors</p>
    <div class="submenu" id="sub2" style="display:none;">
    <a href="#" title="Color 1">Color 1</a><br/>

    <a href="#" title="Color 2">Color 2</a><br/>
    <a href="#" title="Color 3">Color 3</a>
    </div>

    <p id="menu3" class="menuOut" onclick="SwitchMenu('sub3')" onmouseover="ChangeClass('menu3','menuOver')" onmouseout="ChangeClass('menu3','menuOut')">Pricing</p>
    <div class="submenu" id="sub3" style="display:none;">
    <a href="#" title="Price 1">Price 1</a><br/>
    <a href="#" title="Price 2">Price 2</a><br/>

    <a href="#" title="Price 3">Price 3</a>
    </div>

    <p id="menu4" class="menuOut" onclick="SwitchMenu('sub4')" onmouseover="ChangeClass('menu4','menuOver')" onmouseout="ChangeClass('menu4','menuOut')">Samples</p>
    <div class="submenu" id="sub4" style="display:none;">
    <a href="#" title="Sample 1">Sample 1</a><br/>
    <a href="#" title="Sample 2">Sample 2</a><br/>

    <a href="#" title="Sample 3">Sample 3</a><br/>
    </div>

    <p id="menu5" class="menuOut" onclick="SwitchMenu('sub5')" onmouseover="ChangeClass('menu5','menuOver')" onmouseout="ChangeClass('menu5','menuOut')">Photo Gallery</p>
    <div class="submenu" id="sub5" style="display:none;">
    <a href="#" title="Gallery 1">Gallery 1</a><br/>
    <a href="#" title="Gallery 2">Gallery 2</a><br/>

    <a href="#" title="Gallery 3">Gallery 3</a><br/>
    </div>

    <p id="menu6" class="menuOut" onmouseover="ChangeClass('menu6','menuOver')" onmouseout="ChangeClass('menu6','menuOut')"><a href="http://www.michigantinceilings.com">About Us</a></p>
    </div>
    </td>
    </tr>
    </table></td>
    </tr>
    </table>
    </body>

    </code>

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,173
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)

    browser resizing

    I don't know to what extent this affects rendering, but the doctype is shown as XHTML strict. XHTML strict is just that, strict. The code throws 53 W3c validation errors. http://validator.w3.org/
    That aside I notice that in some places you are using absolute size values i.e. px, and in other places just a number with no type specified. To help ensure reasonable consistency at different resolutions I would suggest using relative value types such as percent for your sizes.
    Also, I see event handling in some p tags. I have never seen this before and I would try to find another way to achieve the desired actions, but it might be OK the way it is, I don't know.
    BTW to anyone copying and pasting the code, I had to change the bullets to get it through the validator.

  3. #3
    Fine Tuned silver trophy KC's Avatar
    Join Date
    Sep 2001
    Posts
    2,291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Moved to a more appropriate forum.
    Former Design Your Site Team Leader


Bookmarks

Posting Permissions

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