PDA

View Full Version : div background not showing up


silverglade
04-13-2009, 04:23 PM
hi, i want a div background to show up in my #right div. and its not showing up. any help greatly appreciated. derek

here is the page im talking about (the dimensions of the image are w280,h375)

http://derekvanderven.com/boston_coffee/index.html


here is the css

@charset "utf-8";
/* CSS Document */

body {
background-color:#D0B8A0;
margin:0;
padding:0;
}
#wrapper {
margin: 50px auto 0 auto;
width: 580px;

}

#navigation {
float: left;
width: 143px;
}
#middle {
float: left;
width: 151px;
}



#right {
float: left;
width: 280px;
background-image: url(images/img_right_middle.jpg);
background-repeat: no-repeat;

}


and 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" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<link href="boston.css" rel="stylesheet" type="text/css"/>
<title>Boston Coffee Home</title>


<body onbeforeunload="beforeUnloadHandler()" style="margin: 0pt; padding: 0pt; overflow: visible; height: 100%; width: 100%; position: absolute;">



<title> </title>
<script type="text/JavaScript" language="JavaScript">
1
2<!--
3function MM_preloadImages() { //v3.0
4 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
5 var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
6 if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
7}
8
9function MM_swapImgRestore() { //v3.0
10 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
11}
12
13function MM_findObj(n, d) { //v4.01
14 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
15 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
16 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
17 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
18 if(!x && d.getElementById) x=d.getElementById(n); return x;
19}
20
21function MM_swapImage() { //v3.0
22 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
23 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
24}
25//-->
26
</script>
</head>


<body link="#333333" alink="#333333" vlink="#333333" onload="MM_preloadImages('images/navigation/home_on.jpg','images/navigation/about_on.jpg','images/navigation/menus_on.jpg','images/navigation/contact_on.jpg','images/navigation/locations_on.jpg')">


<div id="wrapper">


<div id="navigation">
<a href="/index.html"><img src="images/logo_top.jpg" width="143" height="95" /></a>

<a href="/index.html"><img src="images/navigation/home_on.jpg" width="143" height="38" border="0" /></a>
<a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/navigation/about_on.jpg',1)" href="/about.html">
<img id="Image2" border="0" name="Image2" alt="about" src="http://www.cafevanilleboston.com/images/navigation/about_off.jpg"/></a>
<a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/navigation/menus_on.jpg',1)" href="/menus/index.html">

<img id="Image3" border="0" name="Image3" alt="menus" src="http://www.cafevanilleboston.com/images/navigation/menus_off.jpg"/></a>
<a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/navigation/contact_on.jpg',1)" href="/contact.html">

<img id="Image4" border="0" name="Image4" alt="contact" src="http://www.cafevanilleboston.com/images/navigation/contact_off.jpg"/></a>
<a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/navigation/locations_on.jpg',1)" href="/locations.html"></a><img src="images/navigation/locations_off.jpg" width="143" height="35" /><br />
<img src="images/img_left_bottom.jpg" width="143" height="197" /></div>

<!---end navigation-->

<div id="middle"><img src="images/img_middle.jpg" width="151" height="470" /></div>



<div id="right"><img src="images/img_right_top.jpg" width="280" height="95" /></div>

<p class="textbody"><img src="images/cv_welcome.gif" width="70" height="23" />
<br/>
<br/>
<span class="blue">F</span>
resh, delectable French pastries are the </p>
<p class="textbody">foundation of Boston Coffee's success. </p>
<p class="textbody">Stop in one of our three locations in the Boston area for classic Parisian sandwiches, coffees, and desserts - we offer a slice of France in a slice of cake.</p>

<img alt="Boston Coffee" src="/images/img_left_bottom.jpg"/></td>

2009 Boston Coffee

Site Design:
<a target="_blank" href="http://derekvanderven.com">Derek Van Derven Web Design</a>


</div>
</body>
</html>


</body>
</html>

silverglade
04-13-2009, 04:35 PM
nevermind, i added heights to the background divs and the images showed up, thanks. derek (note i did try to solve this problem a long time before posting).

silverglade
04-13-2009, 05:04 PM
i have a new problem in IE6. the letters "gn" are showing above my footer. any help greatly appreciated. thanks. derek (i fixed the missing head tag yikes!)

here is the page

http://derekvanderven.com/boston_coffee/index.html

here is the css

@charset "utf-8";
/* CSS Document */

body {
font-family: times;
background-color:#D0B8A0;
margin:0;
padding:0;
}
#wrapper {
margin: 50px auto 0 auto;
width: 580px;

}

#navigation {
float: left;
width: 143px;
}
#middle {
float: left;
width: 151px;
height: 470px;
background-image: url(images/img_middle.jpg);
background-repeat: no-repeat;
}



#right {
float: left;
width: 280px;
height: 469px;
background-image: url(images/img_right_middle.jpg);
background-repeat: no-repeat;
background-position: bottom center
}


#welcome {
margin: 175px auto 0 auto;
clear: both;
width: 280px;
color: #ffffff;
}

#welcome p {
padding: 10px;
}
#footer {
float: left;
clear: both;
width: 430px;
margin:0 auto 0 150px;
}

#footer a:link {
color: #5F4C3D;
}

.blue {
color: #A7D3DB;
}

heres 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" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<link href="boston.css" rel="stylesheet" type="text/css"/>
<title>Boston Coffee Home</title>
</head>

<body onbeforeunload="beforeUnloadHandler()" style="margin: 0pt; padding: 0pt; overflow: visible; height: 100%; width: 100%; position: absolute;">



<title> </title>
<script type="text/JavaScript" language="JavaScript">
1
2<!--
3function MM_preloadImages() { //v3.0
4 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
5 var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
6 if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
7}
8
9function MM_swapImgRestore() { //v3.0
10 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
11}
12
13function MM_findObj(n, d) { //v4.01
14 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
15 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
16 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
17 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
18 if(!x && d.getElementById) x=d.getElementById(n); return x;
19}
20
21function MM_swapImage() { //v3.0
22 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
23 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
24}
25//-->
26
</script>
</head>


<body link="#333333" alink="#333333" vlink="#333333" onload="MM_preloadImages('images/navigation/home_on.jpg','images/navigation/about_on.jpg','images/navigation/menus_on.jpg','images/navigation/contact_on.jpg','images/navigation/locations_on.jpg')">


<div id="wrapper">


<div id="navigation">
<a href="/index.html"><img src="images/logo_top.jpg" width="143" height="95" /></a>

<a href="/index.html"><img src="images/navigation/home_on.jpg" width="143" height="38" border="0" /></a>
<a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/navigation/about_on.jpg',1)" href="/about.html">
<img id="Image2" border="0" name="Image2" alt="about" src="http://www.cafevanilleboston.com/images/navigation/about_off.jpg"/></a>
<a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/navigation/menus_on.jpg',1)" href="/menus/index.html">

<img id="Image3" border="0" name="Image3" alt="menus" src="http://www.cafevanilleboston.com/images/navigation/menus_off.jpg"/></a>
<a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/navigation/contact_on.jpg',1)" href="/contact.html">

<img id="Image4" border="0" name="Image4" alt="contact" src="http://www.cafevanilleboston.com/images/navigation/contact_off.jpg"/></a>
<a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/navigation/locations_on.jpg',1)" href="/locations.html"></a><img src="images/navigation/locations_off.jpg" width="143" height="35" /><br />
<img src="images/img_left_bottom.jpg" width="143" height="197" /></div>

<!---end navigation-->

<div id="middle"></div>



<div id="right">

<div id="welcome">
<img src="images/cv_welcome.gif" width="70" height="23" />
<br/>
<br/>
<p><span class="blue">F</span>resh, delectable French pastries are thefoundation of Boston Coffee's success.Stop in one of our three locations in the Boston area for classic Parisian sandwiches, coffees, and desserts - we offer a slice of France in a slice of cake.</p></div>
<!--end div welcome--></div> <!--end of right div-->

<div id="footer"> 2009 Boston Coffee

/Site Design:
<a target="_blank" href="http://derekvanderven.com">Derek Van Derven Web Design</a></div>

</div>
</body>
</html>

domedia
04-13-2009, 06:18 PM
The code is completely broken. You have more than one body tag for example..

silverglade
04-13-2009, 08:14 PM
thanks. i have the site done now i only need help with one more thing.

. on this page, my #about_welcome links are blue, but that css is making my footer link blue as well, i cant figure out why. any help greatly appreciated. here is one of the pages i am talking about, notice the blue #footer link.

http://derekvanderven.com/boston_coffee/menus/index.html

here is the css

@charset "utf-8";
/* CSS Document */

body {
font-family: times;
background-color:#D0B8A0;
margin:0;
padding:0;
}
#wrapper {
margin: 50px auto 50px auto;
width: 580px;

}

#navigation {
float: left;
width: 143px;
}
#middle {
float: left;
width: 151px;
height: 470px;
background-image: url(images/img_middle.jpg);
background-repeat: no-repeat;
}



#right {
float: left;
margin: 0 -3px 0 auto;
width: 280px;
height: 470px;
background-image: url(images/img_right_middle.jpg);
background-repeat: no-repeat;

}


#welcome {
margin: 175px auto 0 auto;
clear: both;
width: 280px;
color: #ffffff;
}

#welcome p {
padding: 10px;
}

#award {
margin: 0 auto 0 55px;
float: left;
width: 153px;
height: 72px;
background-image: url(images/best_boston.jpg);
background-repeat: no-repeat;
}

#footer {

float: left
clear: both;
width: 580px;

}

#footer a:link , a:hover, a:visited{
color: #664A35;
}

.blue {
color: #A7D3DB;
}

/***********************about page****************************/

#about_middle {
float: left;
width: 151px;
height: 470px;
background-image: url(images/img_middle_about.jpg);
background-repeat: no-repeat;
}

#about_welcome {

margin: 160px auto 0 auto;
clear: both;
width: 280px;
color:#E2DCD7;
font-family:arial,verdana,sans-serif;
font-size:9pt;
font-weight:bold;
text-decoration:none;
}


#about_welcome a:link, a:hover, a:visited {
color: #ADDCE5;
text-decoration: none;
}



#about_welcome p {
padding: 10px;
}

/*************************menus**************/
#menu_middle {
float: left;
width: 151px;
height: 470px;
background-image: url(images/img_middle_menus.jpg);
background-repeat: no-repeat;
}

/************************contact******************* **/

#contact_middle {
float: left;
width: 151px;
height: 470px;
background-image: url(images/img_middle_contact.jpg);
background-repeat: no-repeat;
}

#contact_welcome {
width: 280px;
margin-top: 160px;

color: white;
}


#form_wrapper{
width: 200px;
margin-left: 40px;
}

/************************location****************** ***/
#location_middle {
float: left;
width: 151px;
height: 470px;
background-image: url(images/img_middle_locations.jpg);
background-repeat: no-repeat;
}



and 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" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<link href="../boston.css" rel="stylesheet" type="text/css"/>
<script language="JavaScript" type="text/JavaScript">
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_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_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>
<script language="JavaScript" type="text/JavaScript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}

<title>Boston Coffee Menus</title>
</head>





<script type="text/JavaScript" language="JavaScript">
1
2<!--
3function MM_preloadImages() { //v3.0
4 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
5 var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
6 if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
7}
8
9function MM_swapImgRestore() { //v3.0
10 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
11}
12
13function MM_findObj(n, d) { //v4.01
14 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
15 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
16 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
17 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
18 if(!x && d.getElementById) x=d.getElementById(n); return x;
19}
20
21function MM_swapImage() { //v3.0
22 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
23 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
24}
25//-->
26
</script>
<title>Boston Coffee Menus</title></head>


<body link="#333333" alink="#333333" vlink="#333333" onload="MM_preloadImages('images/navigation/home_on.jpg','images/navigation/about_on.jpg','images/navigation/menus_on.jpg','images/navigation/contact_on.jpg','images/navigation/locations_on.jpg')">


<div id="wrapper">


<div id="navigation">
<a href="/index.html"><img src="../images/logo_top.jpg" width="143" height="95" /></a>

<a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','../images/navigation/home_on.jpg',1)" href="../index.html">
<img id="Image1" border="0" name="Image1" alt="home" src="http://www.cafevanilleboston.com/images/navigation/home_off.jpg"/></a>
<a href="../about.html"><img src="../images/navigation/about_off.jpg" width="143" height="36" border="0" /></a>
<a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../images/navigation/menus_on.jpg',1)" href="index.html"><img src="../images/navigation/menus_on.jpg" width="143" height="35" border="0" /></a>
<a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','../images/navigation/contact_on.jpg',1)" href="../contact.html"><img src="../images/navigation/contact_off.jpg" width="143" height="34" border="0" /></a>
<a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','../images/navigation/locations_on.jpg',1)" href="../locations.html">
<img id="Image5" border="0" name="Image5" alt="locations" src="http://www.cafevanilleboston.com/images/navigation/locations_off.jpg"/></a><br />
<img src="../images/img_left_bottom.jpg" width="143" height="197" /></div>

<!---end navigation-->

<div id="menu_middle"></div>



<div id="right">

<div id="about_welcome"><img src="../images/cv_menus.gif" width="60" height="21" />
<br/>
<br/>
<p><a href="individual_desserts.html" onClick="MM_openBrWindow('individual_desserts.html','Indivi dualDesserts','scrollbars=yes,width=330,height=400 ')">Individual Desserts</a><br>
<a href="cakes.html" onClick="MM_openBrWindow('cakes.html','Cakes','scrollbars=y es,width=330,height=400')">Cakes</a><br>
<a href="tarts.html" onClick="MM_openBrWindow('tarts.html','Tarts','scrollbars=y es,width=330,height=400')">Tarts</a><br>
<a href="breakfast_croissants.html" onClick="MM_openBrWindow(' breakfast_croissants.html','BreakfastCroissants',' scrollbars=yes,width=330,height=400')">Breakfast Croissants</a><br>
<a href="cookies.html" onClick="MM_openBrWindow('cookies.html','Cookies','scrollba rs=yes,width=330,height=400')">Cookies</a><br>

<a href="custom_made_sandwiches.html" onClick="MM_openBrWindow('custom_made_sandwiches.html','Cus tomMadeSandwiches','scrollbars=yes,width=330,heigh t=400')">Custom-made Sandwiches</a><br>
<a href="french_favorites.html" onClick="MM_openBrWindow('french_favorites.html','FrenchFav orites','scrollbars=yes,width=330,height=400')">French Favorites</a><br>

</div>
<!--end div welcome-->

</div> <!--end of right div-->


<div id="footer"> 2009 Boston Coffee

/Site Design:
<a target="_blank" href="http://derekvanderven.com">Derek Van Derven Web Design</a></div>

</div><!--end wrapper-->
</body>
</html>

Cary
04-13-2009, 09:33 PM
Make sure your code validates, because you still have a whole second copy of your script, title, the closing head tag, and the opening body tag. Then check how things work.

silverglade
04-14-2009, 08:11 AM
thank you. i think i fixed all the repeating code ( i think) . my javascript is a waste anyway because it doesnt work . LOL!> but at least my page turned out ok with the link problem because i put this in the css

#footer a:link ,#footer a:hover, #footer a:visited{
color: #664A35;
}

the code to my page is still a mess i think but the pages work. i shouldnt have tried to use javascript, it made my code messed up. here is the site finished, or at least i want it to be. LOL.:mrgreen:

http://derekvanderven.com/boston_coffee/index.html

Corrosive
04-14-2009, 08:28 AM
thank you. i think i fixed all the repeating code ( i think) . my javascript is a waste anyway because it doesnt work . LOL!> but at least my page turned out ok with the link problem because i put this in the css

#footer a:link ,#footer a:hover, #footer a:visited{
color: #664A35;
}

the code to my page is still a mess i think but the pages work. i shouldnt have tried to use javascript, it made my code messed up. here is the site finished, or at least i want it to be. LOL.:mrgreen:

http://derekvanderven.com/boston_coffee/index.html

Looking good Derek. Nice job :) Great use of the coffee colours etc.

silverglade
04-14-2009, 08:35 AM
thanks very much!! i was worried it looked stupid. LOL!:mrgreen: this is only my 10th website and im still a newbie so i guess i will have to have patience. i really dont like the IE6 bugs that i constantly run into. its insane. hehe. derek

Corrosive
04-14-2009, 09:05 AM
Don't fret. I reckon it looks good. No-one likes IE6. Next time you see someone if IE6 just secretly update their browser for them whilst they aren't looking. If we all do it we can rid the world of IE6 and all its bugs!

silverglade
04-22-2009, 08:08 AM
haha that is true. i should just put on my site. UPDATE YOUR DA#N IE6!! hehe