page layout problem

big_moe · 12-01-2006 5:48pm #1

i made a site for my mates using dreamweaver. on dreamweaver the layout looks grand. i use firefox and when i previewed the page it was fine. but i got a few complaints that the page was all over the place. i checked it out with Internet explorer and opera browser and i saw what they meant. the page looks fine in firefox - flash navi bar at top, picture of band under that, and then 2 text boxes side by side under that.

in IE and opera, the first text box is at the top of the page in the centre, then the flash bar, then the picture with the 2nd text in the middle of that????

what is going on with it??

i have attached 2 pics, the first is an image of what it looks like for me in firefox and the second is the image of IE/opera

the page in question is http://www.noahtakesthejungle.com/home.htm

any help appreciated,
cheers
moe

Ph3n0m · 12-01-2006 5:54pm

stop using absolute positioning - there is no need for it.

what you really should do - since you are not comfortable using divs - is build the site using tables and then convert them from tables to divs

frodo_dcu · 12-01-2006 6:35pm

Replace the code of your page with bellow. the problem was using layers when you didin't need to i just replaced the two layers with a two div's the first one floated to the left. you may need to float the second one too i don't have a browser here to test on. let know if this works

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Noah Takes The Jungle :: Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	background-color: #000000;
}
.style1 {color: #FFFFFF}
.style2 {font-family: Garamond}
.style3 {color: #FFFFFF; font-family: Garamond; }
.style4 {color: #E0DFE3}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>

<p>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="704" height="60">
    <param name="movie" value="menu.swf">
    <param name="quality" value="high">
    <embed src="menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="704" height="60"></embed>
  </object>
</p>
<p><img src="images/home_image2.jpg" width="700" height="350"></p>

<div style="float: left; overflow:auto; width:268px; height:179px;"><p align="center"><span class="style1"><img src="images/button_latestnews.PNG" height="22" width="117"></span></p>
<p align="center" class="style1">19/10/05 Posted By: <img src="images/band.png" height="29" width="73"></p>
<p align="center" class="style1">Out of Global Battle Of The Bands.... </p>

<p align="center" class="style1">12/10/05 Posted By: <img src="images/band.png" height="29" width="73"></p>
<p align="center"><span class="style1">Noah Takes The Jungle are through to the regional final of the Global Battle Of The Bands... </span></span></p>
</div>
<div style="width:294px; height:225px; overflow: auto;">
  <p align="center"><img src="images/button_upcominggigs.PNG" height="22" width="131"></p>
  <p align="center" class="style1 style2">(See Live section for more details) </p>
  <p align="center" class="style3">*NOTE CHANGE OF VENUE* </p>
  <p align="center" class="style3">Sunday 20/11/05 Voodoo @ 8pm </p>

  <p align="center" class="style3">Wednesday 08/02/06 Emergenza Festival </p>
</div>


<p class="style4">All media &copy; &reg; &#8482; etc.Noah Takes The Jungle 2005. Made by Moe (muwahahahahahahaha)</p>
</body>
</html>

big_moe · 12-01-2006 8:10pm

oh yeah! it works great, cheers frodo, your a lifesaver!!

frodo_dcu · 13-01-2006 12:38am

no worries glad i could help

page layout problem

Comments