13
Hello,
I've been searching over lots of forums for this solution and I can't seem to make any of the solutions work for me. This is my first time I'm posting a question and I'm also far from a css expert , but really am trying to convert my main layouts over from tables. Basically I need my #outerpermiter div which has a vertically repeating background to have a minimum height but expand when needed. Maybe I'm having trouble because I'm using a template, I have a background repeating image or ??? Below I put my template code and then my attached css 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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Wisconsin Event Video is more than Videography</title>
<!-- TemplateEndEditable -->
<link href="../css/layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-image: url();
background-color: #880000;
}
.italic {
font-size: 14px;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
}
.link {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFFFFF;
}
.heading {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #8F0F11;
font-weight: bold;
font-style: italic;
}
.bodytext {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #000000;
}
-->
</style>
<link rel="stylesheet" type="text/css" href="../pro_dropdown_2/pro_dropdown_2/pro_dropdown_2.css" />
<script src="file:///Macintosh HD/Users/kristalyoung/Desktop/pro_dropdown_2/pro_dropdown_2/stuHover.js" type="text/javascript"></script>
<style type="text/css">
<!--
a:link {
color: #880000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #880000;
}
a:hover {
text-decoration: underline;
color: #333333;
}
a:active {
text-decoration: none;
}
.style1 {color: #000000}
-->
</style>
<script type="text/javascript">
<!--
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_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_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>
<link href="../css/inside-layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style2 {
font-size: 24px;
font-weight: bold;
}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body onload="MM_preloadImages('../images/r2c3-commercial-hover.jpg','../images/in-r2c2-residential-hover.jpg','../images/in-r2c3-commercial-hover.jpg')">
<div id="outer_permiter">
<div id="tophalf">
<div id="Row1">
<div id="in-r1c1"></div>
<div id="in-r1c2"><br />
<a href="http://bytes.com/submit/index.html">Home</a> | <a href="http://bytes.com/submit/about_milwaukee_plumbing.html">About Us</a> | <a href="http://bytes.com/submit/green_plumbing.html">Go Green</a> | <a href="http://bytes.com/submit/tips_help.html">Tips</a> | <a href="http://bytes.com/submit/contact_milwaukee_plumbing.html">Contact Us</a> | <a href="http://bytes.com/submit/testimonials_milwaukee_plumbing">Testimonials</a> </div>
</div>
<div id="Row2">
<div id="in-r2c1"></div>
<div id="in-r2c2"><a href="http://bytes.com/submit/residential_plumbing_services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('residential plumbing services','','../images/in-r2c2-residential-hover.jpg',1)"><img src="http://bytes.com/submit/images/in-r2c2-residential.jpg" alt="residential plumbing services" name="residential plumbing services" width="229" height="99" border="0" id="residential plumbing services" /></a></div>
<div id="in-r2c3"><a href="http://bytes.com/submit/commercial_plumbing_services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Commercial Plumbing Services','','../images/in-r2c3-commercial-hover.jpg',1)"><img src="http://bytes.com/submit/images/in-r2c3-commericial.jpg" alt="Commercial Plumbing Services" name="Commercial Plumbing Services" width="230" height="99" border="0" id="Commercial Plumbing Services" /></a></div>
<div id="in-r2c4">
<p>all<br />
<span class="style2">414-257-9000</span><br />
For Immediate Service</p>
</div>
<div id="RowBottom"><!-- TemplateBeginEditable name="body" -->
<table width="90%" align="center" cellpadding="10">
<tr>
<td class="bodytext"><p class="heading">"Quality Craftsmanship, Professionalism and Superior Customer Service"</p>
<p class="italic">“We pride ourselves on quality of plumbing and piping work that we provide. Customer satisfaction is our primary goal. Our technicians are trained and certified in various plumbing specialties, which ensures quality workmanship and reliable service.”</p>
<p align="right" class="italic"> Al Holtz, President and Master Plumber of Milwaukee Plumbing & Piping Inc.</p>
<p>Milwaukee Plumbing & Piping Inc. offers a wide range of both residential and commercial plumbing services. Some services include: plumbing and piping installations, sewer and drains, home appliance connections, water lines, medical gas installation, solar heating systems, mechanical piping, boilers, pump repair and installation, and routine and preventative maintenance. <a href="http://bytes.com/submit/about_milwaukee_plumbing.html">Read more about us</a></p></td>
</tr>
</table>
<!-- TemplateEndEditable -->
<div id="RowBtm-footer">
<p>11200 West Greenfield Avenue • Milwaukee, WI 53214 • 414-257-9000 • fax: 414-257-9104</p>
<p class="blacklink"><a href="http://bytes.com/submit/index.html" class="style14"><span class="style14 style1">Home</span></a><span class="style15"> | <a href="http://bytes.com/submit/about_milwaukee_plumbing.html"><span class="style14 style1">About</span> <span class="style14 style1">Us</span></a> | <a href="http://bytes.com/submit/residential_plumbing_services.html"><span class="style14 style1">Residential</span> <span class="style14 style1">Services</span></a> | <a href="http://bytes.com/submit/commercial_plumbing_services.html" class="style1"><span class="style14 style1">Commercial</span> <span class="style14 style1">Services</span></a> | <a href="http://bytes.com/submit/green_plumbing.html"><span class="style14 style1">Go</span> <span class="style14 style1">Green</span> </a>| </span><a href="http://bytes.com/submit/tips_help.html" class="style14"><span class="style14 style1">Tips</span></a> <span class="style15">| <a href="http://bytes.com/submit/contact_milwaukee_plumbing.html"><span class="style14 style1">Contact</span> <span class="style14 style1">Us</span></a> | </span><a href="http://bytes.com/submit/testimonials_milwaukee_plumbing"><span class="style14 style1">Testimonials</span></a> </p>
</div>
</div></div>
</div>
<div style="clear:left;"></div>
</div>
</body>
</html>
ATTACHED CSS CODES:
LAYOUT.CSS=
@charset "UTF-8";
#outer_permiter {
background-image: url(../images/pipe-background.gif);
background-repeat: repeat-y;
width: 1000px;
margin-left: -500px;
position: absolute;
top: 0px;
left: 50%;
overflow: visible;
height: 100%;
}
#tophalf {
width: 883px;
margin-left: -442px;
position: absolute;
top: 0px;
left: 50%;
}
#Row1 {
width: 883px;
}
#R1C1 {
float: left;
width: 264px;
height: 51px;
background-image: url(../images/r1c1.gif);
}
#R1C2 {
width: 619px;
float: left;
background-image: url(../images/r1c2-navbar.jpg);
height: 51px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #880000;
text-align: center;
}
#Row2 {
width: 883px;
clear: left;
}
#R2C1 {
float: left;
width: 264px;
height: 85px;
background-image: url(../images/r2c1-logo.jpg);
}
#R2C2 {
height: 85px;
width: 345px;
float: left;
background-image: url(../images/r2c2-residential.jpg);
}
#R2C3 {
background-image: url(../images/r2c3-commercial.jpg);
float: left;
height: 85px;
width: 274px;
}
#Row3 {
clear: left;
width: 883px;
}
#R3C1 {
background-image: url(../images/r3c1-call.jpg);
float: left;
height: 248px;
width: 264px;
}
#R3C2 {
background-image: url(../images/r3c2.jpg);
float: left;
height: 248px;
width: 176px;
}
#R3C3 {
float: left;
height: 248px;
width: 443px;
background-image: url(../images/r3c3-testimonial.jpg);
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-style: italic;
}
#RowBottom {
clear: left;
width: 883px;
background-color: #FFFFFF;
}
#RowBtm-footer {
background-image: url(../images/rbtm-footer.jpg);
background-repeat: repeat-x;
float: left;
width: 883px;
font-family: Arial, Helvetica, sans-serif;
color: #880000;
text-align: center;
height: 75px;
background-color: #880000;
font-weight: bold;
clear: left;
}
.clearleft {
clear: left;
}
INSIDE-LAYOUT.CSS=
@charset "UTF-8";
#in-r1c1 {
height: 51px;
width: 216px;
float: left;
background-image: url(../images/in-r1c1.jpg);
}
#in-r1c2 {
float: left;
height: 51px;
width: 667px;
background-image: url(../images/in-r1c2-navbar.jpg);
font-weight: bold;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #880000;
}
#in-r2c1 {
float: left;
height: 99px;
width: 216px;
background-image: url(../images/in-r2c1-logo.jpg);
}
#in-r2c2 {
background-image: url(../images/in-r2c2-residential.jpg);
float: left;
height: 99px;
width: 229px;
}
#in-r2c3 {
background-image: url(../images/in-r2c3-commericial.jpg);
float: left;
height: 99px;
width: 230px;
}
#in-r2c4 {
background-image: url(../images/in-r2c4.jpg);
float: left;
height: 99px;
width: 208px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-align: center;
color: #880000;
}
I APPOLOGIZE IF MY STANDARD OF SUBMITTING THIS CODE IS INCORRECT, BUT LIKE I SAID IT'S MY FIRST QUESTION TO POST. THANK YOU SO MUCH FOR ANY HELP!!
