...

View Full Version : 3 State Background



Jakeumms
01-13-2008, 04:51 PM
Okay. Basically I need a three state background.
I have an image which needs to repeat itself on the x-axis, and another image that needs to repeat itself on the y a-xis. Both of them need to start from the top left corner of the page. Then I just want under the image a main color (not image).

Heres an example:
http://img32.picoodle.com/img/img32/4/1/13/f_3statebackgm_657e109.jpg

AoR Zeta
01-13-2008, 04:55 PM
Well assign one of the background images to the body tag then have a div inside the body that has height or width (or both, I don't know how you want it... it's not really that clear) 100% and apply the other background image to that.

Is that ok for you or do you need me to actually show you how to do it?

Jakeumms
01-13-2008, 05:00 PM
Well. I know that inside of the css tag in my head I can put

body {
background-image: url(images/bg_linear.gif);
background-repeat: repeat-x;
}
So what I also need is

body {
background-image: url(images/bg_main.gif);
background-repeat: repeat-y;
}
and also

body {
background-color: #380C0C;
}
The first two axis images doesn't matter which one is on top of another. And the background color and be behind all of the axis images.

So since you can't put all of the together. I need something that does it smiler. And yes, can you please show me how to do it.

VIPStephan
01-13-2008, 05:10 PM
As AoR said, put a div in your body and apply the y repeating image as background to that div while haveing the x repeating image as body background.



<body>
<div id="container">
content
</div>
</body>




body {background: #380C0C url(images/bg_linear.gif) repeat-x;}
#container {background: url(images/bg_main.gif) repeat-y;}

AoR Zeta
01-13-2008, 05:12 PM
So then do this...



body { background:#380C0C url(images/bg_linear.gif) repeat-x; }
div#main { background:url(images/bg_main.gif) repeat-y; }


...and this...



<body>
<div id="main">
</div>
</body>


That should work.

Jakeumms
01-13-2008, 05:18 PM
okay. The y-axis image only goes down to the where the content ends. And since the content ends in the middle of the page I need the y-axis image to be 100&#37; of the page vertically so that is goes past the content. How do I do this?

AoR Zeta
01-13-2008, 05:21 PM
*headdesk*

height:100&#37;;

Jakeumms
01-13-2008, 05:25 PM
what do i apply that to? I tried applying it to the table that all of the content was in.

<div code>
<table(that all the stuff is in) height="100&#37;"></table>
</div>

that didnt work though....

VIPStephan
01-13-2008, 05:29 PM
*headdesk*

height:100%;

Not quite. You need to apply 100% height to the html element and a min-height of 100% to the body and the div inside (IE 6 needs height since it doesn’t know min-height) in order to get it to work.

Effectively, your CSS should look like this then:



html {height: 100%;}
body, #container {
height: 100%; /* for IE 6 */
min-height: 100%; /* for modern browsers */
}
html > body, body > #container {height: auto; /* revert for modern browsers */}

AoR Zeta
01-13-2008, 05:32 PM
Ah, yes. I'm not really in a thinking mood.

Jakeumms
01-13-2008, 05:39 PM
... thats confusing code. Could you please tell me which part to insert into


<style type="text/css">
<!--
div#container {
background: url(images/bg_main.gif) repeat-y;
}
body {
background: #380C0C url(images/bg_linear.gif) repeat-x;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>

and which part to put into


<body>
<div id="container">
<table(with stuff in it)>
</table>
</div>
</body>

AoR Zeta
01-13-2008, 05:42 PM
Here you go.


<style type="text/css">
html{height:100&#37;;}
body{background:#380C0C url(images/bg_linear.gif) repeat-x;margin:0;}
div#container{background: url(images/bg_main.gif) repeat-y;}
body, #container{height:100%;min-height:100%;}
html > body, body > #container{height: auto;}
</style>

VIPStephan
01-13-2008, 05:43 PM
The HTML part is the same as it used to be. You only add the CSS is posted above.

I’m just wondering what this table is used for? Are you actually displaying tabular data?

And by the way: all that margin stuff in your CSS body rule could be shortened to margin: 0;.

Eh, screw it. I’m just gonna sit here and be quiet.

AoR Zeta
01-13-2008, 05:45 PM
Lol, did I beat you to it? :D

Jakeumms
01-13-2008, 05:54 PM
still doesnt work.

Heres all of my 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=iso-8859-1" />
<title>Teacup Media - Web design that's on a different level!</title>
<style type="text/css">
<!--
html{height:100&#37;;}
body{background:#380C0C url(images/bg_linear.gif) repeat-x;margin:0;}
div#container{background: url(images/bg_main.gif) repeat-y;}
body, #container{height:100%;min-height:100%;}
html > body, body > #container{height: auto;}
.search {
width: 132px;
height: 21px;
border: none;
font-family: Tahoma, verdana, arial,sans-serif;
font-size: 15px;
color: #563C21;
text-decoration: none;
background-image: url(images/top_scb_searchbox.jpg);
}
-->
</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>
<style type="text/css">


/*!!!!!!!!!!! QuickMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}


/*!!!!!!!!!!! QuickMenu Styles [Please Modify!] !!!!!!!!!!!*/


/* QuickMenu 0 */

/*"""""""" (MAIN) Items""""""""*/
#qm0 a
{
width:107px;
padding:11px 0px 15px 0px;
background-image:url(images/navi_menu_out.jpg);
background-repeat:repeat;
background-position:left top;
color:#FFFFFF;
font-family:Arial;
font-size:12px;
text-decoration:none;
text-align:center;
font-variant:normal;
}


/*"""""""" (MAIN) Parent Hover State""""""""*/
#qm0 .qmparent:hover
{
background-image:url(images/navi_menu_out_active.jpg);
}


/*"""""""" (SUB) Items""""""""*/
#qm0 div a, #qm0 ul a
{
width:107px;
padding:0px;
background-image:url(images/navi_dropdown_middle.jpg);
background-repeat:repeat-y;
background-position:0% 0%;
color:#EEEEEE;
font-family:Arial;
font-size:12px;
text-decoration:none;
text-align:left;
border-style:none;
border-color:#000000;
}


/*"""""""" (SUB) Hover State""""""""*/
#qm0 div a:hover, #qm0 ul a:hover
{
color:#FFFFFF;
text-decoration:underline;
}


/*"""""""" (SUB) Parent Hover State""""""""*/
#qm0 div .qmparent:hover
{
background-image:none;
}


/*"""""""" (SUB) Active State""""""""*/
body #qm0 div .qmactive, body #qm0 div .qmactive:hover
{
background-color:#FFFFFF;
color:#000000;
}


</style><!-- Core QuickMenu Code -->
<script type="text/javascript">/* <![CDATA[ */var qm_si,qm_li,qm_lo,qm_tt,qm_th,qm_ts,qm_la,qm_ic,qm_ib;var qp="parentNode";var qc="className";var qm_t=navigator.userAgent;var qm_o=qm_t.indexOf("Opera")+1;var qm_s=qm_t.indexOf("afari")+1;var qm_s2=qm_s&&qm_t.indexOf("ersion/2")+1;var qm_s3=qm_s&&qm_t.indexOf("ersion/3")+1;var qm_n=qm_t.indexOf("Netscape")+1;var qm_v=parseFloat(navigator.vendorSub);;function qm_create(sd,v,ts,th,oc,rl,sh,fl,ft,aux,l){var w="onmouseover";var ww=w;var e="onclick";if(oc){if(oc=="all"||(oc=="lev2"&&l>=2)){w=e;ts=0;}if(oc=="all"||oc=="main"){ww=e;th=0;}}if(!l){l=1;qm_th=th;sd=document.getElementById("qm"+sd);if(window.qm_pure)sd=qm_pure(sd);sd[w]=function(e){qm_kille(e)};document[ww]=qm_bo;if(oc=="main"){qm_ib=true;sd[e]=function(event){qm_ic=true;qm_oo(new Object(),qm_la,1);qm_kille(event)};document.onmouseover=function(){qm_la=null;clearTimeout(qm_tt);qm _tt=null;};}sd.style.zoom=1;if(sh)x2("qmsh",sd,1);if(!v)sd.ch=1;}else if(sh)sd.ch=1;if(oc)sd.oc=oc;if(sh)sd.sh=1;if(fl)sd.fl=1;if(ft)sd.ft=1;if(rl)sd.rl=1;sd.style.zIndex =l+""+1;var lsp;var sp=sd.childNodes;for(var i=0;i<sp.length;i++){var b=sp[i];if(b.tagName=="A"){lsp=b;b[w]=qm_oo;if(w==e)b.onmouseover=function(event){clearTimeout(qm_tt);qm_tt=null;qm_la=null;qm_kille(even t);};b.qmts=ts;if(l==1&&v){b.style.styleFloat="none";b.style.cssFloat="none";}}else if(b.tagName=="DIV"){if(window.showHelp&&!window.XMLHttpRequest)sp[i].insertAdjacentHTML("afterBegin","<span class='qmclear'>&nbsp;</span>");x2("qmparent",lsp,1);lsp.cdiv=b;b.idiv=lsp;if(qm_n&&qm_v<8&&!b.style.width)b.style.width=b.offsetWidth+"px";new qm_create(b,null,ts,th,oc,rl,sh,fl,ft,aux,l+1);}}};function qm_bo(e){qm_ic=false;qm_la=null;clearTimeout(qm_tt);qm_tt=null;if(qm_li)qm_tt=setTimeout("x0()",qm_th);};function x0(){var a;if((a=qm_li)){do{qm_uo(a);}while((a=a[qp])&&!qm_a(a))}qm_li=null;};function qm_a(a){if(a[qc].indexOf("qmmc")+1)return 1;};function qm_uo(a,go){if(!go&&a.qmtree)return;if(window.qmad&&qmad.bhide)eval(qmad.bhide);a.style.visibility="";x2("qmactive",a.idiv);};;function qa(a,b){return String.fromCharCode(a.charCodeAt(0)-(b-(parseInt(b/2)*2)));}eval("ig(xiodpw/sioxHflq&'!xiodpw/qnv7&'(xiodpw/lpcbtjoo+#\"*.uoMoxesCbsf(*.jneeyOg(#hutq:#),1*amest)\"Uhjs!cppz pf!QvidkNeou!hbs!npt!bfeo qusciatee.!(xwx.ppfnduce/cpm*\"*;".replace(/./g,qa));;function qm_oo(e,o,nt){if(!o)o=this;if(qm_la==o&&!nt)return;if(window.qmv_a&&!nt)qmv_a(o);if(window.qmwait){qm_kille(e);return;}clearTimeout(qm_tt);qm_tt=null;qm_la=o;if(!nt&&o.qmts){qm_si=o;qm_tt=setTimeout("qm_oo(new Object(),qm_si,1)",o.qmts);return;}var a=o;if(a[qp].isrun){qm_kille(e);return;}if(qm_ib&&!qm_ic)return;var go=true;while((a=a[qp])&&!qm_a(a)){if(a==qm_li)go=false;}if(qm_li&&go){a=o;if((!a.cdiv)||(a.cdiv&&a.cdiv!=qm_li))qm_uo(qm_li);a=qm_li;while((a=a[qp])&&!qm_a(a)){if(a!=o[qp]&&a!=o.cdiv)qm_uo(a);else break;}}var b=o;var c=o.cdiv;if(b.cdiv){var aw=b.offsetWidth;var ah=b.offsetHeight;var ax=b.offsetLeft;var ay=b.offsetTop;if(c[qp].ch){aw=0;if(c.fl)ax=0;}else {if(c.ft)ay=0;if(c.rl){ax=ax-c.offsetWidth;aw=0;}ah=0;}if(qm_o){ax-=b[qp].clientLeft;ay-=b[qp].clientTop;}if(qm_s2&&!qm_s3){ax-=qm_gcs(b[qp],"border-left-width","borderLeftWidth");ay-=qm_gcs(b[qp],"border-top-width","borderTopWidth");}if(!c.ismove){c.style.left=(ax+aw)+"px";c.style.top=(ay+ah)+"px";}x2("qmactive",o,1);if(window.qmad&&qmad.bvis)eval(qmad.bvis);c.style.visibility="inherit";qm_li=c;}else if(!qm_a(b[qp]))qm_li=b[qp];else qm_li=null;qm_kille(e);};function qm_gcs(obj,sname,jname){var v;if(document.defaultView&&document.defaultView.getComputedStyle)v=document.defaultView.getComputedStyle(obj,null).getPropertyV alue(sname);else if(obj.currentStyle)v=obj.currentStyle[jname];if(v&&!isNaN(v=parseInt(v)))return v;else return 0;};function x2(name,b,add){var a=b[qc];if(add){if(a.indexOf(name)==-1)b[qc]+=(a?' ':'')+name;}else {b[qc]=a.replace(" "+name,"");b[qc]=b[qc].replace(name,"");}};function qm_kille(e){if(!e)e=event;e.cancelBubble=true;if(e.stopPropagation&&!(qm_s&&e.type=="click"))e.stopPropagation();};function qm_pure(sd){if(sd.tagName=="UL"){var nd=document.createElement("DIV");nd.qmpure=1;var c;if(c=sd.style.cssText)nd.style.cssText=c;qm_convert(sd,nd);var csp=document.createElement("SPAN");csp.className="qmclear";csp.innerHTML="&nbsp;";nd.appendChild(csp);sd=sd[qp].replaceChild(nd,sd);sd=nd;}return sd;};function qm_convert(a,bm,l){if(!l)bm[qc]=a[qc];bm.id=a.id;var ch=a.childNodes;for(var i=0;i<ch.length;i++){if(ch[i].tagName=="LI"){var sh=ch[i].childNodes;for(var j=0;j<sh.length;j++){if(sh[j]&&(sh[j].tagName=="A"||sh[j].tagName=="SPAN"))bm.appendChild(ch[i].removeChild(sh[j]));if(sh[j]&&sh[j].tagName=="UL"){var na=document.createElement("DIV");var c;if(c=sh[j].style.cssText)na.style.cssText=c;if(c=sh[j].className)na.className=c;na=bm.appendChild(na);new qm_convert(sh[j],na,1)}}}}}/* ]]> */</script>

<!-- Add-On Core Code (Remove when not using any add-on's) -->
<style type="text/css">.qmfv{visibility:visible !important;}.qmfh{visibility:hidden !important;}</style><script type="text/JavaScript">var qmad = new Object();qmad.bvis="";qmad.bhide="";</script>


<!-- Add-On Code: Item Images -->
<script type="text/javascript">/* <![CDATA[ */qmad.image=new Object();qmad.image.preload=new Array();if(qmad.bvis.indexOf("qm_image_switch(b,1);")==-1){qmad.bvis+="qm_image_switch(b,1);";qmad.bhide+="qm_image_switch(a.idiv,false,1);";if(window.attachEvent){window.attachEvent("onload",qm_image_preload);document.attachEvent("onmouseover",qm_image_off);}else if(window.addEventListener){window.addEventListener("load",qm_image_preload,1);document.addEventListener("mouseover",qm_image_off,false);}document.write('<style type="text/css">.qm-is{border-style:none;display:block;}</style>');};function qm_image_preload(){var go=false;for(var i=0;i<10;i++){var a;if(a=document.getElementById("qm"+i)){var ai=a.getElementsByTagName("IMG");for(var j=0;j<ai.length;j++){if(ai[j].className.indexOf("qm-is")+1){go=true;var br=qm_image_base(ai[j]);if(ai[j].className.indexOf("qm-ih")+1)qm_image_preload2(br[0]+"_hover."+br[1]);if(ai[j].className.indexOf("qm-ia")+1)qm_image_preload2(br[0]+"_active."+br[1]);ai[j].setAttribute("qmvafter",1);if((z=window.qmv)&&(z=z.addons)&&(z=z.image))z["on"+i]=true;}}if(go){ai=a.getElementsByTagName("A");for(var j=0;j<ai.length;j++){if(window.attachEvent)ai[j].attachEvent("onmouseover",qmv_image_hover);else if(window.addEventListener)ai[j].addEventListener("mouseover",qmv_image_hover,1);}}if(go)a.onmouseover=function(e){qm_kille(e)};}}};function qmv_image_hover(e){e=e||window.event;var targ=e.srcElement||e.target;while(targ&&targ.tagName!="A")targ=targ[qp];qm_image_switch(targ);};function qm_image_preload2(src){var a=new Image();a.src=src;qmad.image.preload.push(a);};function qm_image_base(a,full){var br=qm_image_split_ext_name(a.getAttribute("src",2));br[0]=br[0].replace("_hover","");br[0]=br[0].replace("_active","");if(full)return br[0]+"."+br[1];else return br;};function qm_image_off(){if(qmad.image.la&&qmad.image.la.className.indexOf("qmactive")==-1){qm_image_switch(qmad.image.la,false,1);qmad.image.la=null;}};function qm_image_switch(a,active,hide,force){if((z=window.qmv)&&(z=z.addons)&&(z=z.image)&&!z["on"+qm_index(a)])return;if(!active&&!hide&&qmad.image.la &&qmad.image.la!=a&&qmad.image.la.className.indexOf("qmactive")==-1)qm_image_switch(qmad.image.la,false,1);var img=a.getElementsByTagName("IMG");for(var i=0;i<img.length;i++){var iic=img[i].className;if(iic&&iic.indexOf("qm-is")+1){var br=qm_image_base(img[i]);if(!active&&!hide&&iic.indexOf("qm-ih")+1&&(a.className.indexOf("qmactive")==-1||force)){qmad.image.la=a;img[i].src=br[0]+"_hover."+br[1];continue;}if(active){if(iic.indexOf("qm-ia")+1)img[i].src=br[0]+"_active."+br[1];else if(iic.indexOf("qm-ih")+1)img[i].src=br[0]+"_hover."+br[1];continue;}if(hide)img[i].src=br[0]+"."+br[1];}}};function qm_image_split_ext_name(s){var ext=s.split(".");ext=ext[ext.length-1];var fn=s.substring(0,s.length-(ext.length+1));return new Array(fn,ext);}/* ]]> */</script>
</head>
<body onload="MM_preloadImages('images/top_scb_clientlogin-over.jpg','images/top_scb_requestquote-over.jpg','images/top_scb_go-over.jpg')">
<div id="container">
<table width="825" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="800" valign="top"><table width="800" height="178" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="347" background="images/top_logo.jpg"></td>
<td width="453"><table width="453" height="178" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="114"><table width="453" height="114" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="442" background="images/top_bigtiledbox.jpg"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="442" height="114">
<param name="movie" value="newsbox.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="newsbox.swf" width="442" height="114" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object></td>
<td width="11" background="images/top_space_right.jpg">&nbsp;</td>
</tr>

</table></td>
</tr>
<tr>
<td height="23" background="images/top_space_bottom.jpg"></td>
</tr>
<tr>
<td height="41" align="left" valign="top" background="images/navi_menu_out.jpg"><a style="font-size:13px;color:#444444;font-family:arial;text-decoration:none;display:block;margin-bottom:0px;" id="qmv_open_visual_interface" href="javascript:javascript:if (qm_s3){window.name='qm_launch_visual';window.location = window.location.href;}else{var qmnw = window.open(window.location.href,'qm_launch_visual','scrollbars=no,location=no,status=yes,menu=no,to olbar=no,resizable=yes');if (window.focus) {qmnw.focus()}}"></a>
<!-- QuickMenu Structure [Menu 0] -->

<ul id="qm0" class="qmmc">

<li><a class="qmparent" href="javascript:void(0)">HOME</a>

<ul>
<li><a href="javascript:void(0)">Management</a></li>
<li><a href="javascript:void(0)">Worldwide</a></li>
<li><a href="javascript:void(0)">Product Overview</a></li>
<li><a href="javascript:void(0)">Publicity</a></li>
<li><a href="javascript:void(0);"><img class="qm-is" src="images/navi_dropdown_bottom.jpg" width="107" height="11"></a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0)">SERVICES</a>

<ul>
<li><a href="javascript:void(0)">Satisfaction</a></li>
<li><a href="javascript:void(0)">Our Goals</a></li>
<li><a href="javascript:void(0)">Product Warranty</a></li>
<li><a href="javascript:void(0)">Future Outlook</a></li>
<li><a href="javascript:void(0)">Product Quality</a></li>
<li><a href="javascript:void(0)">Continued Support</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0)">WORK</a>

<ul>
<li><a href="javascript:void(0)">Annual Meetings</a></li>
<li><a href="javascript:void(0)">Financial Reports</a></li>
<li><a href="javascript:void(0)">Nasdaq Quoting</a></li>
<li><a href="javascript:void(0)">Future Outlook</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0);">CONTACT</a>

<ul>
<li><a href="javascript:void(0);">New Item</a></li>
<li><a href="javascript:void(0);">New Item</a></li>
</ul></li>

<li class="qmclear">&nbsp;</li></ul>

<!-- Create Menu Settings: (Menu ID, Is Vertical, Show Timer, Hide Timer, On Click ('all' or 'lev2'), Right to Left, Horizontal Subs, Flush Left, Flush Top) -->
<script type="text/javascript">qm_create(0,false,0,500,false,false,false,false,false);</script>


<!-- This script references optionally loads the QuickMenu visual interface, to run the menu stand alone remove the script.-->
<script type="text/javascript">if (window.name=="qm_launch_visual"){document.write('<scr'+'ipt type="text/javascript" src="http://www.opencube.com/qmv6/qm_visual.js"></scr'+'ipt>')}</script>
</td>
</tr>
</table></td>
</tr>
</table>
<table width="800" height="60" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="347" align="left"><table width="347" height="60" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="310"><table width="310" height="60" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="21"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Client Login','','images/top_scb_clientlogin-over.jpg',1)"><img src="images/top_scb_clientlogin.jpg" alt="Client Login" name="Client Login" width="133" height="21" border="0" id="Client Login" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Request A Quote','','images/top_scb_requestquote-over.jpg',1)"><img src="images/top_scb_requestquote.jpg" alt="Request A Quote" name="Request A Quote" width="177" height="21" border="0" id="Request A Quote" /></a></td>
</tr>
<tr>
<td height="6" background="images/top_scb_topspace.jpg"></td>
</tr>
<tr>
<td height="23"><table width="310" height="23" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="107" background="images/top_scb_searchsite.jpg"></td>
<td width="132"><input type="text" class="search"></td>
<td width="9" background="images/top_scb_midleftspace.jpg"></td>
<td width="39"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Go','','images/top_scb_go-over.jpg',1)"><img src="images/top_scb_go.jpg" alt="GO" name="Go" width="39" height="23" border="0" id="Go" /></a></td>
<td width="23" background="images/top_scb_midrightspace.jpg"></td>
</tr>

</table></td>
</tr>
<tr>
<td height="10" background="images/top_scb_bottom.jpg"></td>
</tr>
</table></td>
<td width="37" background="images/top_scb_right.jpg"></td>
</tr>
</table></td>
<td width="453" bgcolor="#380C0D"></td>
</tr>
</table>
</td>
<td width="25" background="images/right_bar.gif"></td>
</tr>
</table>
</div>
</body>
</html>

AoR Zeta
01-13-2008, 05:57 PM
Jesus christ, no way am I scouring through all of that. Do you have a live version of this that I could take a look at?

Jakeumms
01-13-2008, 06:30 PM
Sorry about that. Heres a simpler version. The y-axis image only extends to the height of the table. I need it to extend to the height of the window. Live Example: Click Here (http://teacupmedia.com/3statebackground.html)


<!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=iso-8859-1" />
<title>Untitled</title>
<style type="text/css">
<!--
html{height:100&#37;;}
body{background:#4D2424 url(images/bg_linear.gif) repeat-x;margin:0;}
div#container{background: url(images/bg_main.gif) repeat-y;}
body, #container{height:100%;min-height:100%;}
html > body, body > #container{height: auto;}
.search {
width: 132px;
height: 21px;
border: none;
font-family: Tahoma, verdana, arial,sans-serif;
font-size: 15px;
color: #563C21;
text-decoration: none;
background-image: url(images/top_scb_searchbox.jpg);
}
-->
</style>
</head>
<body>
<div id="container">
<table width="825" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>

Jakeumms
01-13-2008, 07:48 PM
anyone know the solution?

VIPStephan
01-13-2008, 07:52 PM
Sorry, that’s the problem of not testing it…

The body needs a height of 100&#37;, too, not a min-height.



html, body {height:100%;}
body{
background:#4D2424 url(images/bg_linear.gif) repeat-x;
margin:0;
}
div#container{background: url(images/bg_main.gif) repeat-y;}
#container{
height: 100%;
min-height:100%;
}
body > #container {height: auto;}


But still: What are you using this table for?

_Aerospace_Eng_
01-13-2008, 07:55 PM
I agree about the table. If you aren't displaying data then don't use it. Read the link in my sig titled "Why Tables for Layout is Stupid?". As to the code posted above, it should work though resetting the height of the #container back to auto I don't think is necessary. I think setting a min-height on the #container and then just setting 100&#37; height for IE6 and below by using a conditional comment is the better way to go.

<!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=iso-8859-1" />
<title>Untitled</title>
<base href="http://teacupmedia.com/" />
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
}
body {
background:#4D2424 url(images/bg_linear.gif) repeat-x;
}
#container {
background: url(images/bg_main.gif) repeat-y;
width:825px;
min-height:100%;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container"> </div>
</body>
</html>

Jakeumms
01-13-2008, 09:03 PM
Wow thanks everyone for all your help. VIPStephan your code did the trick. I'll be thanking all of you. I'm using tables because I have many slice images that I like to table background. I just find them simple to use.

VIPStephan
01-14-2008, 12:53 PM
I'm using tables because I have many slice images that I like to table background. I just find them simple to use.

That’s not the right way to use them, though. “Simple to use” is a very short-sighted approach as a properly and semantically marked up website may be a little more involved in the beginning but changing things around afterwards may be done within seconds and with a lot less amout of work involved.

This also requires some thinking about how to slice images and how to apply them to the website. Images that are of purely aesthetic value, i.e. images whose only purpose is to make the site look pretty should only be applied as background images (using CSS). The only images that can be actual HTML images (<img>) should be images that are crucial for the understanding of the content of that site, i.e. product images, photos in a photo gallery, etc…

And Aero, I agree with you that conditional comments are a cleaner way but in this case I tried to keep it simple in the way that you only have to edit that one file to make changes.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum