I'm creating a site for a friend and having a few issues which I think are CSS related. Incidentally, the page looks fine in Dreamweaver design view, but not live.

 

The problems:

 

1. there should be about a 10 px cardboard frame on all 4 sides of the page - its only showing up on the right and left sides - be full page i.e no white space at the top and sides.

2. the font for the email address, telephone number and footer text should be sans serif.

 

 

Thanks for your suggestions.

 

Here's the CSS

 

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


#cardboard {
	background-image:url(/cardboardBG.jpg);
	width:1024px;
}

#black {
               background-color:#000;
	width: 1000px;
	margin:10px;
	font-size:16px;
	color:#FFFFFF;
}

#email {
	color:#FFF;
	font: Verdana, Geneva, sans-serif;
	font-size:24px;
	margin-left:360px;
	padding-top:75px;
}

#tel {
margin-left:428px;
font:Verdana, Geneva, sans-serif;
margin-top:8px;
font-size:24px;
color:#FF9;
}	

#logo {
	padding-top:145px;
	padding-left:100px;
}

#products {
padding-top:100px;
padding-bottom: 20px;

}
#products li {
display:inline;
margin-right:20px;
}

#products li a {
	text-decoration:none;
}

#footer {
	width: 1000px;
	font:Verdana, Geneva, sans-serif;
	font-size:14px;
	color:#F37E31;
	padding-bottom:5px;
}

ul {
list-style:none;
}

#footer li {
display:inline;
margin-right:22px;
}

#copy {	
color:#FF9;
}
#footer a {
color:#F37E31;
text-decoration:none;
}

#footer a:hover, #footer a:active, email a:hover, email a:active { 
color: #FFF;
font-style:italic; 
}

I can't see the site. Your site is apparently under review on the webhost site and isn't viewable by the public. However, I just tried the code myself and it doesn't work probably because the height isn't specified. This of course can't be specified because it will need to grow to the content size.

So, take out the margin:10px and add the padding:10px to the cardboard container.

Like so...

 

#cardboard {

background-image:url(/cardboardBG.jpg);

width:1024px;

padding:10px;

}

 

#black {

background-color:#000;

width: 1000px;

font-size:16px;

color:#FFFFFF;

}

 

And it works.

Edited February 16, 201115 yr by LadyRuby

try adding

 

add ".." before the slash in the image. like this:

 

background-image:url(../cardboardBG.jpg);

 

Maybe it isnt reading the image file.

thanks for the suggestions - always helpful to get feedback.

 

LadyRuby - I made the changes you suggested, made padding 18px and the width of the #black container to 1022px -looks better I think. Thanks for putting me on the right track. Any suggestions why the page is offset by about 5 px? I'm surprised you aren't able to see the sit. If you fancy it, try again.

 

I'm still not sure why the font is the default serif font and not picking up the specified verdana font, but I'll keep looking...

 

rallport - haha, no that's not how I test my site, but it is surprising how the 2 dreamweaver views differ so widely - that functionality is useless, why do they bother providing it??

In your CSS, add:

 

body {
margin:0;
}

 

And also where ever is says:

font: Verdana, Geneva, sans-serif;

Change it to:

font-family: Verdana, Geneva, sans-serif;

Edited February 16, 201115 yr by Spitfire

In your CSS, add:

 

body {
margin:0;
}

 

And also where ever is says:

font: Verdana, Geneva, sans-serif;

Change it to:

font-family: Verdana, Geneva, sans-serif;

 

yep - got it. a few months away from coding and I forget the basics! Thank you.