Help - Search - Members - Calendar
Full Version: div background not showing up! WTF!
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
the_digital_don
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
pandy
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 -->
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.