CSS

 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me



Go Back   Tutorialized ForumsWeb Design & DevelopmentCSS

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Tutorialized Forums Sponsor:
  #1  
Old October 1st, 2008, 06:00 AM
robert475 robert475 is offline
Contributing User
Tutorialized Newbie (0 - 499 posts)
 
Join Date: Dec 2006
Posts: 24 robert475 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 h 35 m 43 sec
Reputation Power: 0
Div tags

Hi there

I have attempted to design a webpage using the css and div tags approach. I designed it using a screen res of 1024 x 768. All is well when I test it in my browser, but when I test it on a higher screen res everything is out of place e.g. the header, main content and footer is out of proportion and not layed out how I originally did it.

I know I'm going to have to start again but how can I ensure this doesn't happen again? Any ideas why this is happening?

Thanks in advance for your help.

Here is the code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />-->
<title>Tapson ARC - Accident Repair Centre</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<link href="services_over1.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css" media="screen">
	@import url("services_over1.css");
</style>
<script language="JavaScript1.2" type="text/javascript" src="mm_css_menu.js"></script>



<script language="JavaScript1.2" type="text/javascript" src="file:///F|/Robert/tapsonarc/website/img/work/mm_css_menu.js"></script>
<style type="text/css" media="screen">
	@import url("file:///F|/Robert/Tapsonarc/website/img/work/work_bttn.css");
</style>
</head>

<body class="oneColFixCtrHdr" onload="MM_preloadImages('img/about_over.jpg','img/services_over.jpg','img/work_over.jpg','img/map_over.jpg','img/contact_over.jpg','img/service_bttn.jpg')"
body id="menu-home">

<div id="apDiv1">
  <div align="left">
    <p class="menutext"><span class="menutext"><a href="index.html" id="menu-home" class="whichpage">Home</a></span> | <a href="about.html" id="menu-about">About Us</a> | <a href="services.html" id="menu-services">Our Services</a> | <a href="#" id="menu-work">Our Work</a> | <a href="map.html" id="menu-map">Map</a> | <a href="contact.html" id="menu-contact">Contact Us</a></span></p>
  </div>
</div>
<div id="container">
  <div id="header">
    <div id="phone_graphic"><img src="img/phone.gif" alt="" width="343" height="57" /></div>
    <div id="hme_btn"><a href="index.html"><img src="img/home_over.jpg" alt="Home" border="0" /></a></div>
    <div id="about_btn"><a href="about.html"><img src="img/about_bttn.jpg" alt="About Us" name="Image1" width="95" height="57" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','img/about_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
    <div id="service_btn"><a href="services.html">
    
    
    

</a>
      <div id="FWTableContainer1053333746"> <a href="javascript:;" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MMMenuContainer0915233522_0', 'MMMenu0915233522_0',0,57,'services_over1');"><img src="img/service_bttn.jpg" alt="Our Services" name="img/services_over1" width="118" height="57" border="0" onmouseover="MM_swapImage('img/services_over1','','img/service_bttn.jpg',1);MM_swapImage('img/services_over1','','img/services_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>
        <div id="MMMenuContainer0915233522_0">
          <div id="MMMenu0915233522_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="free_estimate.html" target="_self" id="MMMenu0915233522_0_Item_0" class="MMMIFVStyleMMMenu0915233522_0" onMouseOver="MM_menuOverMenuItem('MMMenu0915233522_0');">
			Free&nbsp;Estimate
		</a>
		<a href="collection.html" target="_self" id="MMMenu0915233522_0_Item_1" class="MMMIVStyleMMMenu0915233522_0" onMouseOver="MM_menuOverMenuItem('MMMenu0915233522_0');">
			Collection/Delivery&nbsp;Service
		</a>
		<a href="accident.html" target="_self" id="MMMenu0915233522_0_Item_2" class="MMMIVStyleMMMenu0915233522_0" onMouseOver="MM_menuOverMenuItem('MMMenu0915233522_0');">
			Unfortunate&nbsp;Accidents
		</a>
		<a href="courtesy_cars.html" target="_self" id="MMMenu0915233522_0_Item_3" class="MMMIVStyleMMMenu0915233522_0" onMouseOver="MM_menuOverMenuItem('MMMenu0915233522_0');">
			Courtesy&nbsp;Cars
		</a>
		<a href="valet.html" target="_self" id="MMMenu0915233522_0_Item_4" class="MMMIVStyleMMMenu0915233522_0" onMouseOver="MM_menuOverMenuItem('MMMenu0915233522_0');">
			Valeting&nbsp;Service
		</a></div>
        </div>
      </div>




    </div>
    <div id="work_btn">
    <div id="FWTableContainer145916389">
<table border="0" cellpadding="0" cellspacing="0" width="100">
<!-- fwtable fwsrc="work_bttn.png" fwpage="Page 1" fwbase="work_bttn.jpg" fwstyle="Dreamweaver" fwdocid = "145916389" fwnested="0" -->
  <tr>
<!-- Shim row, height 1. -->
   <td><img src="file:///F|/Robert/Tapsonarc/website/img/work/spacer.gif" width="100" height="1" border="0" alt=""></td>
   <td><img src="file:///F|/Robert/Tapsonarc/website/img/work/spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>

  <tr><!-- row 1 -->
   <td><a href="javascript:;" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuShowMenu('MMMenuContainer0916014049_0', 'MMMenu0916014049_0',0,57,'work_bttn_r1_c1');"><img src="file:///F|/Robert/Tapsonarc/website/img/work/work_bttn_r1_c1.jpg" alt="" name="work_bttn_r1_c1" width="100" height="56" border="0" onmouseover="MM_swapImage('work_bttn_r1_c1','','img/work_over.jpg',1)" onmouseout="MM_swapImgRestore()"></a></td>
   <td><img src="file:///F|/Robert/Tapsonarc/website/img/work/spacer.gif" width="1" height="56" border="0" alt=""></td>
  </tr>
  <tr><!-- row 2 -->
   <td><img name="work_bttn_r2_c1" src="file:///F|/Robert/Tapsonarc/website/img/work/work_bttn_r2_c1.jpg" width="100" height="1" border="0" alt=""></td>
   <td><img src="file:///F|/Robert/Tapsonarc/website/img/work/spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>
<!--   This table was automatically created with Adobe Fireworks   -->
<!--   http://www.adobe.com   -->
</table>
<div id="MMMenuContainer0916014049_0">
	<div id="MMMenu0916014049_0" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuResetTimeout();">
		<a href="free_estimate.html" target="_self" id="MMMenu0916014049_0_Item_0" class="MMMIFVStyleMMMenu0916014049_0" onMouseOver="MM_menuOverMenuItem('MMMenu0916014049_0');">
			Accident&nbsp;Repairs
		</a>
		<a href="collection.html" target="_self" id="MMMenu0916014049_0_Item_1" class="MMMIVStyleMMMenu0916014049_0" onMouseOver="MM_menuOverMenuItem('MMMenu0916014049_0');">
			Restoration&nbsp;Work
		</a>
		<a href="accident.html" target="_self" id="MMMenu0916014049_0_Item_2" class="MMMIVStyleMMMenu0916014049_0" onMouseOver="MM_menuOverMenuItem('MMMenu0916014049_0');">
			Cold&nbsp;Dent&nbsp;Removal
		</a>
		<a href="courtesy_cars.html" target="_self" id="MMMenu0916014049_0_Item_3" class="MMMIVStyleMMMenu0916014049_0" onMouseOver="MM_menuOverMenuItem('MMMenu0916014049_0');">
			Wheel&nbsp;Alignment
		</a>
		<a href="valet.html" target="_self" id="MMMenu0916014049_0_Item_4" class="MMMIVStyleMMMenu0916014049_0" onMouseOver="MM_menuOverMenuItem('MMMenu0916014049_0');">
			Vehicle&nbsp;Servicing
		</a>
	</div>
</div>
</div>
    
    
    
    
    
    
    
    
    </div>
    <div id="map_btn"><a href="http://www.multimap.com/maps/?zoom=16&countryCode=GB&qs=MK420HB" target="_blank"><img src="img/map_bttn.jpg" alt="Find Us" name="Image4" width="60" height="57" border="0" id="Image4" onmouseover="MM_swapImage('Image4','','img/map_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
    <div id="contact_btn"><a href="contact.html"><img src="img/contact_bttn.jpg" alt="Contact Us" name="Image5" width="103" height="57" border="0" id="Image5" onmouseover="MM_swapImage('Image5','','img/contact_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
    <div id="banner"><img src="img/banner.jpg" alt="" width="955" height="125" /></div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <h1>&nbsp;</h1>
  <!-- end #header --></div>
  <div id="mainContent">
    <div id="title"><img src="img/title.jpg" alt="" width="955" height="42" /></div>
    <div class="maintext" id="main_text">
      <p><br />
      Tapson ARC is a progressive accident repair centre that has been serving for more than a decade. </p>
      <p>Our services are second to none & we can guarantee quality workmanship.</p>
      <blockquote>
        <p><br />
          <strong><br />
          <br />
          </strong></p>
      </blockquote>
    </div>
  <div id="main_graphic"><img src="img/right_graphic.jpg" alt="" width="472" height="300" /></div>
  </div>
  <div id="footer">
    <div id="foot"></div>
    <p></p>
  </div>
</div>
</body>
</html>

Reply With Quote
Reply

Viewing: Tutorialized ForumsWeb Design & DevelopmentCSS > Div tags


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 

Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap