PenguinBoy
Full Member
indude
Posts: 270
Reputation: 4
35 /  / –
Joined: Jun 2003
|
O.P. RE: IE not paying attentions to proportions
html + css?
it might be a bit messy
i'm a bit paranoid about it getting stolen lol, no worries i'll post it anyhoo
the html
code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Rench's Official Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="music and information on the bedfordshire band; Rench">
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="copyright" content="www.PenguinBoy.esmartdesign.com">
<script 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);
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 ; 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];}
}
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
function MM_displayStatusMsg(msgStr) { //v1.0
status=msgStr;
document.MM_returnValue = true;
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('menu-NEWS-hover.gif',,'menu-biographies-hover.gif','menu-photos-hover.gif','menu-forum-hover.gif','menu-shop-hover.gif','menu-links-hover.gif','menu-shows-hover.gif')">
<table width="776" border="0" align="center" cellpadding="0" cellspacing="0"><!--DWLayoutTable-->
<tr>
<th width="50" rowspan="7" valign="top" class="leftpan"><img src="backstripes-left.png" width="50" height="2" align="top"></th>
<th height="100" colspan="13"><div align="left"><img src="widebanner.gif" width="750" height="100"></div>
</th>
<th width="50" rowspan="7" valign="top" background="backstripes-right.png" class="rightpan">
<p><img src="backstripes-right.png" width="50" height="2"></p></th>
</tr>
<tr>
<th height="24" colspan="2" align="left" class="menu1"> </th>
<td width="35" class="menu1"><!--DWLayoutEmptyCell--> </td>
<td width="67" background="menu-news-back.gif" class="menu1"><img src="menu-NEWS.gif" alt="NEWS" width="67" height="24" class="main" id="Image1" onClick="MM_goToURL('parent','index.htm');return document.MM_returnValue" onMouseOver="MM_swapImage('Image1','','menu-NEWS-hover.gif',1);MM_displayStatusMsg('The Main Page, with all new info.');return document.MM_returnValue" onMouseOut="MM_swapImgRestore()"></td>
<td width="93" background="menu-biographies.gif" class="menu1"><div align="center"><img src="menu-biographies.gif" width="93" height="24" id="Image2" onClick="MM_goToURL('parent','biographies.htm');return document.MM_returnValue" onMouseOver="MM_swapImage('Image2','','menu-biographies-hover.gif',1)" onMouseOut="MM_swapImgRestore()"></div></td>
<td width="100" class="menu1"><img src="menu-photos.gif" width="100" height="24" id="Image3" onClick="MM_goToURL('parent','photos.htm');return document.MM_returnValue" onMouseOver="MM_swapImage('Image3','','menu-photos-hover.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
<td width="81" class="menu1"><div align="center"><img src="menu-forum.gif" width="81" height="24" id="Image4" onMouseOver="MM_swapImage('Image4','','menu-forum-hover.gif',1)" onMouseOut="MM_swapImgRestore()"></div></td>
<td width="72" class="menu1"><img src="menu-shop.gif" width="72" height="24" id="Image5" onMouseOver="MM_swapImage('Image5','','menu-shop-hover.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
<td width="84" class="menu1"><img src="menu-links.gif" width="84" height="24" id="Image6" onMouseOver="MM_swapImage('Image6','','menu-links-hover.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
<td width="112" class="menu1"><img src="menu-shows.gif" width="112" height="24" id="Image7" onMouseOver="MM_swapImage('Image7','','menu-shows-hover.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
<td width="39" class="menu1"><!--DWLayoutEmptyCell--> </td>
<td class="menu1"><!--DWLayoutEmptyCell--> </td>
<td class="menu1" width="4"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<th width="8" rowspan="2" class="main"><!--DWLayoutEmptyCell--> </th>
<td width="28" height="300" rowspan="2" background="sideframe-top-fade.jpg" class="sideframes"><img src="sideframe-top-fade.jpg" width="28" height="300" hspace="0" vspace="0" class="sideframes"></td>
<td height="50" background="sideframe-top-fade.jpg"><p align="center"><a href="http://www.penguinboy.esmartdesign.com" class="sideframes"></a></p> </td>
<td height="50" colspan="7" class="penguinboy"><a href="http://www.penguinboy.esmartdesign.com"><img src="also visit banner.jpg" width="608" height="50" border="0" class="main"></a></td>
<td height="50" background="sideframe-top-fade.jpg"><!--DWLayoutEmptyCell--> </td>
<td width="28" height="300" rowspan="2" class="sideframes"><img src="sideframe-top-fade.jpg" width="28" height="300"></td>
<th width="4" rowspan="5" class="main"><!--DWLayoutEmptyCell--> </th>
</tr>
<tr>
<td colspan="9" rowspan="3" align="center" valign="top" class="main"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="main">
<tr>
<td width="24" height="2"><p> </p></td>
<td width="559"> </td>
<td width="27"> </td>
</tr>
<tr>
<td width="24" height="117"><p class="main"> </p></td>
<td width="559" height="117"><p class="main"><em>Website now Up and running!</em><br>
<br>
Welcome to the Official Rench Website... Some of the sections are not yet functional but they are indeed being worked on. please go and Join the forum for the most up-to-date information on the band </p>
<p align="center" class="main"><img src="spanner-spacer.jpg" width="102" height="30" class="main"></p></td>
<td width="27" height="117"> </td>
</tr>
<tr>
<td width="24" height="525"><p class="main"> </p></td>
<td width="559"><p class="main"><em>Rench's Debut GIG! </em></p>
<p align="left" class="main">Rench's Debut was a a gig for the social legend; Gary Brosnan. Their set was simply amazing... <a href="/shows.htm">click here to view the review </a> or click bellow on the photo to go to the photos section. </p>
<p align="center" class="main"><a href="photos.htm"><img src="Debut Gig.jpg" width="512" height="400" border="0"></a></p>
<p align="center" class="main"><img src="spanner-spacer.jpg" width="102" height="30"></p></td>
<td width="27"> </td>
</tr>
</table></td>
</tr>
<tr>
<th width="8" class="main"><!--DWLayoutEmptyCell--> </th>
<td height="313" class="sideframes"><!--DWLayoutEmptyCell--> </td>
<td height="313" class="sideframes"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<th width="8" class="main"><!--DWLayoutEmptyCell--> </th>
<td height="100" class="sideframes"><img src="bottomfade.gif" width="28" height="100"></td>
<td height="100" class="sideframes"><img src="bottomfade.gif" width="28" height="100"></td>
</tr>
<tr>
<th width="8" class="main"><!--DWLayoutEmptyCell--> </th>
<td height="15" colspan="4" class="footnote"><img src="footer-graphic-left.gif" width="160" height="30"></td>
<td height="15" colspan="3" class="footnote"><div align="center" class="footnote">"RENCH" Official website Copyright 2005 <br>
Concept, HTML, CSS and RSS by PenguinBoy </div></td>
<td height="15" colspan="4" class="footnote"><div align="right"><img src="footer-graphic-right.gif" width="160" height="30"></div></td>
</tr>
</table>
</body>
</html>
The style css
code:
.menu1 {
background-color: #000000;
border-top-style: none;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
overflow: visible;
color: #D4D0C8;
}
.default {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.footnote {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #101045;
color: #303092;
}
.header {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #3366FF;
height: 190px;
width: 678px;
}
.main {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #10103A;
font-size: 10px;
background-color: #FFFFFF;
}
.sideframes {
background-color: #A6A6E1;
width: 28px;
}
.main p {
}
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-decoration: underline;
}
body {
margin-top: 0px;
background-color: #FFFFFF;
background-image: url(backstripes.gif);
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 65px;
top: 103px;
}
#Layer2 {
position:absolute;
width:216px;
height:159px;
z-index:1;
top: 89px;
left: 233px;
background-image: url(Layerback.jpg);
}
.style7 {font-size: 14px}
.leftpan {
background-image: url(backstripes-left.png);
width: 50px;
}
.rightpan {
background-image: url(backstripes-right.png;
background-image: url(backstripes-right.png);
width: 50px;
}
.penguinboy {
background-image: url(sideframe-top-fade.jpg);
width: 608px;
height: 50px;
}
This post was edited on 09-30-2005 at 05:47 PM by PenguinBoy.
|
|
