Click to See Complete Forum and Search --> : Index.html & <style type=text/css">


Cyberpawz
03-24-2007, 11:16 AM
I just purchased the O'reilly book called Head First: HTML with CSS & XHTML because I have decided to bite the bullet and learn HTML again with CSS and XHTML backing up my knowledge... as of now though I am not doing so great, I have come up to a block and I can't see why...

This is the HTML code as per what the book shows me what it should say by now, and it does... the problem is that I should have a tanish background with two margins on either side of the page taking up 20% of the page itself, separated by a 1px dotted grey box around the body of the text.

This is a problem, because I've looked through the first chapter which I am still on, and this code looks fine, yet for some reason it doesn't work. Can anyone see where the mistake is? As far as I know this is a CSS issue, but I can't be too sure, I am new at this, and do need help.

Thanks in advance...

P.S. I am using Safari and SeaMonkey as my test browsers, and both come up with the correct text layout, but the CSS part of it doesn't work...

<html>

<head>
<title>Starbuzz coffee</title>
<style type=”text/css”>
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>

<body>
<h1>Starbuzz Coffee Beverages</h1>

<h2>House Blend, $1.49</h2>
<p>A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p>

<h2>Mocha Cafe Latte, $2.35</h2>
<p>Espresso, steamed milk and chocolate syrup.</p>

<h2>Cappuccino, $1.89</h2>
<p>A mixture of espresso, steamed milk and foam.</p>

<h2>Chai Tea, $1.85</h2>
<p>A spicy drink made with black tea, spices, milk and honey.</p>
</body>
</html>

ray326
03-24-2007, 12:08 PM
It's the characters you've used for quote marks in "text/css".

WebJoel
03-24-2007, 12:20 PM
Yes, -those do not apper to be "double-quote" marks, -but something other...
Also, is this created for an 800 x 600 resolution?

While this works:body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
} , -on a wide monitor like mine, only the margin-left is "20%" while the margin-right is more like 30% or a bit more. How about 'centering' this? With a valid !doctype added before the "<html>"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> You can do this:body {
background-color: #d2b48c;
width:40%;
margin:0 auto;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
} and quite effectively 'center' this for all monitor sizes. (although all the text is 'left aligned', the result is more centered) :)

Cyberpawz
03-24-2007, 12:54 PM
Yes, -those do not apper to be "double-quote" marks, -but something other...
Also, is this created for an 800 x 600 resolution?


This is a "generic page" where I'm learning about how to do HTML & CSS together, for now the page resolution isn't going to be an issue, I'm just following the book... or at least hoping to.


While this works:, -on a wide monitor like mine, only the margin-left is "20%" while the margin-right is more like 30% or a bit more. How about 'centering' this? With a valid !doctype added before the "<html>" You can do this: and quite effectively 'center' this for all monitor sizes. (although all the text is 'left aligned', the result is more centered) :)

Again I'm learning from scratch, thanks for the offer though I'll probably hit that at page 40 :) I'm only on page 30 right now.

It's the characters you've used for quote marks in "text/css".

OK, I've fixed that, and it now is coming up with a blank page...

ray326
03-24-2007, 01:29 PM
OK, I've fixed that, and it now is coming up with a blank page...You must have finger checked something else then because as soon as I corrected the quotes the page displayed correctly for me in Fx2.

Cyberpawz
03-24-2007, 04:08 PM
You must have finger checked something else then because as soon as I corrected the quotes the page displayed correctly for me in Fx2.

I figured out the problem, the quotes overall were the issue, they were smart quotes, I fixed it so the page doesn't show smart quotes, now it works, thanks :)

WebJoel
03-24-2007, 06:05 PM
-Color of background made we wanna run to the nearest Starbux for a calorie fest! :D