Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ div background not showing up! WTF!

Posted by: the_digital_don May 13 2012, 11:47 PM

So here it is fellas, Newbie designer here trying to solve the one problem that is bugging the hell out of me. I am creating a website that has 100% width to most of the parent divs. The div that I want to add a gradient background to is inside a Div titled "main" >which is inside of the "container div. (So Container>main >content). The content div is set at a fixed width of 960 px and centered using margin-auto. Now when I put in a background image onto "div id="content", nothing is there can someone please help!



here is the 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=utf-8" />
<title>Cedric</title>
<style type="text/css">
</style>
<link href="style1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://use.typekit.com/itw3qlc.js"></script>
<script type="text/javascript">
try{Typekit.load();}catch(e){}
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>
</head>

<body onload="MM_preloadImages('images/logo2.png')">
<div id="container"><!--start of container-->
<div id="welcome">
<div id="slider">
</div>
<div id="header">
<ul id="nav">
<li><a href="/">HOME</a></li>
<li><a href="/about/">ABOUT</a></li>
<li><a href="/portfolio/">PORTFOLIO</a></li>
<li><a href="/services/">SERVICES</a></li>
<li><a href="/blog/">BLOG/ LIFESTYLE</a></li>
<li><a href="/contact/">CONTACT</a></li>
</ul>
<div id="logo"><a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('cedric logo','','images/logo2.png',1)"><img src="images/logo.png" alt="cedric poole logo" name="cedric logo" width="265" height="278" border="0" id ="cedric logo" /></a></div><!--end logo -->
<img src="images/cedric_brand.png" width="171" height="83" alt= "cedric poole brand designer" />
</div><!--end logo -->
</div><!--end welcome -->
<div id="middlebar">
</div>
<div id="main">
<div id="content">
</div><!--end main -->
<div id="footer">
</div><!--end footer -->

</div> <!--container -->
</body>
</html>


and now the CSS

Posted by: pandy May 14 2012, 04:56 AM

QUOTE(the_digital_don @ May 14 2012, 06:47 AM) *

and now the CSS



Yeah? Where is it? tongue.gif The URL to the page would be even better since images are involved, so we can see what happens.

Meanwhile, you have one end tag for DIV too little. If what's in your comment here is you intention, #content isn't closed.

CODE
<div id="main">
<div id="content">
</div><!--end main -->

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)