Menu
I am in need of some help. I am developing a site, really some one else did the intial framework & css of it, minus the main content area. The issues that I’ve run into are ones with screen resoloutions. I have my monitor set at 1280 x 1024 and on that it’s fine. But the content moves around as you go up or down. I pretty sure this is a result of my in-experience in combining CSS/HTML.
The site is: [url]http://67.62.217.48/index.html
If you click on a few of the bottom icons and adjust your screen resolution you’ll see what I mean.
I’ll provide the CSS & the Main content Div so you can see how I did it, I’d just like some feedback on if there is a better way to do it not only for this site but future sites. I bought a copy of Zen Garden CSS and it’s really good. But I think with the static size of the main content window and text & inner graphic sizes scaling will be hard. But anyways, thanks in advance, the code is below.
[code]
/* CSS Document */
* {
margin: 0px;
padding: 0px;
}
body {
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
line-height: 15px;
color: #000;
overflow: hidden;
height: 100%;
width: 100%;
max-height: 100%;
}
img, a img {
border: none;
}
h1 {
font-size:48px;
}
a:link, a:hover
{ color:#000000;
font-size:16px;
text-decoration:none;
}
a, a:hover
{ color:#000000;
font-size:16px;
text-decoration:none;
}
p {
line-height:20px;
font-size: 16px;
padding: 5px;
font-weight:bold;
}
#header {
width: 100%;
}
#header table {
width: 100%;
border: none;
}
#header table tr {
background-image: url(images/top_bg.jpg);
background-repeat: repeat-x;
width: 100%;
height: 27px;
}
#header ul {
display: block;
padding-top: 3px;
}
#header li {
display: inline;
padding-left: 15px;
}
#header li a {
font-size: 12px;
text-decoration: none;
color: #000;
font-weight: bold;
}
#header li a:hover {
color: #3A92BE;
}
#right_corner {
font-size: 12px;
text-decoration: none;
color: #000;
font-weight: bold;
width: 80px;
text-align: right;
padding-right: 10px;
}
#right_corner span {
display: block;
padding-top: 3px;
}
#bottom {
position: absolute;
width: 100%;
left: 0;
top: auto;
bottom: 0;
height: 100px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to “scroll” to enable*/
color: white;
text-align: center;
}
#bottom_nav {
width: 765px;
height: 100px;
background-image: url(images/bottom_bar.jpg);
background-repeat: no-repeat;
background-position: bottom;
margin: 0px auto;
}
#main_content {
position: relative;
top: 27px; /*Set top value to HeightOfTopFrameDiv*/
left: 50%;
margin-left: -448px;
right: 0;
/*Set bottom value to HeightOfBottomFrameDiv*/
overflow: hidden;
height: 923px;
width: 100%;
}
#main_content a, a:hover
{ color:#000000;
font-size:16px;
text-decoration:none;
}
[code]
<div id=”main_content”>
<table width=”100%” height=”100%” background=”images/print_window.gif” style=”background-repeat:no-repeat;” >
<tr>
<td valign=”top” >
<table width=”70%” style=”margin-left:3%; margin-top: 3%;”>
<tr>
<td height=”66″ valign=”middle” colspan=”4″><br/>
<span style=”font-size: xx-large; line-height:inherit;”>Print Work</span></td>
</tr>
<tr >
<td width=”45%” height=”347″ colspan=”3″ valign=”top”><p>Whether it is an ad, sales prochure, or informational packet, it is a representation of your business. It also needs to be successful. Awards are not won with a yellow pages ad, but a successful yellow pages add can develop more business than an award winning ad. Ideas in Marketing provides its customers with the best solution to fit the media being used. We work on yellow page and newspaper ads as well as full color ads for national magazines. We have developed everything from simple two-color sales material to elaberate die cut pocket folders with success across the board.</p> </td>
<td width=”550″ colspan=”3″ valign=”top” >
<div id=”pr1″ style=”visibility: visible; position: absolute; width:500px;” >
<div align=”left”><img src=”images/print1.gif” /></div>
</div>
<div id=”pr2″ style=”visibility:hidden; position: absolute; width:500px;” >
<div align=”left”><img src=”images/print2.gif” /></div></div>
<div id=”pr3″ style=”visibility:hidden; position: absolute; width:500px;” >
<div align=”center”><img src=”images/print3.gif” /></div>
</div>
<div id=”pr4″ style=”visibility:hidden; position: absolute; width:500px;” >
<div align=”center”><img src=”images/print4.gif” /></div>
</div>
<div id=”pr5″ style=”visibility:hidden; position: absolute; width:500px;” >
<div align=”left”><img src=”images/print5.gif” /></div>
</div>
<div id=”pr6″ style=”visibility:hidden; position: absolute; width:500px;” >
<div align=”left”><img src=”images/print6.gif” /></div>
</div> </td>
</tr>
<tr valign=”top”>
<td colspan=”6″>
<table width=”93%” >
<tr valign=”middle”>
<td width=”17%”><div align=”center”>
<h4 align=”center”><span style=”font-weight: bold”><a href=”javascript:showDiv(‘pr1’); javascript:hideDiv(‘pr2’); javascript:hideDiv(‘pr3’); javascript:hideDiv(‘pr4’);javascript:hideDiv(‘pr5’);javascript:hideDiv(‘pr6’);”><img src=”images/print_thumb1.gif” width=”104″ height=”74″ /></a></span></h4>
</div></td>
<td width=”16%”><div align=”center”>
<h4 align=”center” style=”font-weight: bold”><a href=”javascript:showDiv(‘pr2’); javascript:hideDiv(‘pr1’); javascript:hideDiv(‘pr3’); javascript:hideDiv(‘pr4’);javascript:hideDiv(‘pr5’);javascript:hideDiv(‘pr6’);”><img src=”images/print_thumb2.gif” width=”91″ height=”87″ /></a></h4>
</div></td>
<td width=”18%”><div align=”center”>
<h4 align=”center” style=”font-weight: bold”><a href=”javascript:showDiv(‘pr3’); javascript:hideDiv(‘pr2’); javascript:hideDiv(‘pr1’); javascript:hideDiv(‘pr4’);javascript:hideDiv(‘pr5’);javascript:hideDiv(‘pr6’);”><img src=”images/print_thumb3.gif” width=”110″ height=”82″ /></a></h4>
</div></td>
<td width=”17%”><div align=”center”>
<h4 align=”center” style=”font-weight: bold”><a href=”javascript:showDiv(‘pr4’); javascript:hideDiv(‘pr2’); javascript:hideDiv(‘pr3’); javascript:hideDiv(‘pr1’);javascript:hideDiv(‘pr5’);javascript:hideDiv(‘pr6’);”><img src=”images/print_thumb4.gif” width=”77″ height=”90″ /></a></h4>
</div></td>
<td width=”17%”><div align=”center”>
<h4 align=”center” style=”font-weight: bold”><a href=”javascript:showDiv(‘pr5’); javascript:hideDiv(‘pr2’); javascript:hideDiv(‘pr3’); javascript:hideDiv(‘pr4’);javascript:hideDiv(‘pr1’);javascript:hideDiv(‘pr6’);”><img src=”images/print_thumb5.gif” width=”78″ height=”91″ /></a></h4>
</div></td>
<td width=”15%”><div align=”center”>
<h4 align=”center” style=”font-weight: bold”><a href=”javascript:showDiv(‘pr6’); javascript:hideDiv(‘pr2’); javascript:hideDiv(‘pr3’); javascript:hideDiv(‘pr4’);javascript:hideDiv(‘pr1’);javascript:hideDiv(‘pr5’);”><img src=”images/print_thumb6.gif” width=”66″ height=”70″ /></a></h4>
</div></td>
</tr>
</table> </td>
</tr>
</table> </td>
</tr>
</table>
</div>