Learning by using the two following books

HTML & CSS
1

html: utopia: design w/out tables using CSS by andrew & shafer
&
beginning css by york.
Nice books & all but i might type some code go stupid because it doesn’t work, keep working it & trouble shooting it but find out two paragraphs later in the book that firefox/mozilla doesn’t support a specific bit of code, & they offer no alternative.
any advice on the best way to do a code that is universal at least for someone that is starting out at this css stuff?

2

never mind…just saw my one my of errors.
d’ho
apologies.

3

you had some SERIOUS markup issues.

you used </3> instead </h3>

<label for=“keywords”>Keywords<label>: instead of <label for=“keywords”>Keywords</label>:

second:
where is your bg image file? by the way you coded it it should be on the same directory level as your document.

4

cut it back down to the bare minium to see if I can get the background image & tested by placing the same image w/an <img src=“”/> tag.
this is in my .htlm

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=“http://www.w3.org/1999/xhtml”>

<head>
<title> Footbag Frseaks </title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8895-1”/>
<link rel=“stylesheet” type=“text/css” href=“blankSource.css” />
</head>

<body>

<img src=“blueMarble.jpg” />
<img src=“images/blueMarble.jpg” height=“100” width=“100” />
</body>

</html>

this is my .css
body {
background-image: url(blueMarble.jpg);
background-repeat: repeat-x;
}

body {
margin: 10;
padding: 10;
font: small Arial, Helvetica, Vedana, sans-serif;
}

body {
background-color: #00ffff;
color: #ffa500;
}

5

here is the html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=“http://www.w3.org/1999/xhtml”>

<head>
<title> Footbag Freaks </title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8895-1/”>
<link re=“stylesheet” type=“text/css” href=“styles.css”>
</head>

<body>

<div id=“header”>
<p>home of the hack</p>
<ul>
<li><a href=“”>Contact us</a></li>
<li><a href=“”>About us</a></li>
<li><a href=“”>Privacy</a></li>
<li><a href=“”>Site map</a></li>
</ul>
</div><!–header–>

<div id=“content”>
<h2>simon says</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt

ut laborum.</p>
<p><a href=“”>Read more</a></p>
<h2>recent features</h2>
<ul>
<li>
<h3>head for the hills: is altitude training the answer?</3>
<p>by Lachlan ‘supertoe’ donald</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut laborum.</p>
<p><a href=“”>Full story</a></p>
</li>

		&lt;li&gt;
			&lt;h3&gt;hack up the place&lt;/3&gt;
			&lt;p&gt;by jules 'pony king'Szemere&lt;/p&gt;
			&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut laborum.</p>
<p><a href=“”>Full story</a></p>
</li>
<li>
<h3>complete black hat hacker survival guide</3>
<p>by mark 'steel tip’harbottle</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut laborum.</p>
<p><a href=“”>Full story</a></p>
</li>
<li>
<h3>five tricks you did not know you knew</3>
<p>by simon ‘mack dady’ mackie</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut laborum.</p>
<p><a href=“”>Full story</a></p>
</li>
</ul>
</div><!–content–>

<div id=“sidebar”>
<h3>site search</h3>
<form method=“post” action=“” id=“searchform”>
<div>
<label for=“keywords”>Keywords<label>:
<input type=“text” name=“keywords” id=“keywords” />
</div>
<div>
<input type=“submit” name=“btnSearch” id=“btnSearch” />
</div>
</form>
<h3>Coming events</h3>
<ul>
<li>10 apr 06 -<br/><a href=“”>world cup - round 8</a></li>
<li>21 apr 06 -<br/><a href=“”>Footbagoom 05</a></li>
<li>28 apr 06 -<br/><a href=“”>WFPA AGM- Hong Kong</a></li>
<li>01 may 06 -<br/><a href=“”>World cup - round 9</a></li>
</ul>

&lt;h3&gt;move of the month&lt;/h3&gt;
&lt;h4&gt;outer stall&lt;/h4&gt;
	&lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea

commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. Excepteur sint occaeca</p>
</div><!–sidebar–>

</body>
</html>

<!–Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et

dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea

commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est

laborum.–>

& here is the css, just starting it.

body {
margin:0;
padding: 0;
color: #00ffff;
background-image: url(blueMarble.jpg);
background-repeat: repeat-x;
font: small Arial, Helvetica, Verdana, sans-serif;
}

don’t understand why the back ground image won’t show & repeat.

6

I don’t have those books. Can you post some examples they describe?

7

May I ask what error that was? It may be helpful for others arround :slight_smile:

By the way, like dresden_phoenix already said

you had some SERIOUS markup issues.
and I’m a bit confused by your CSS as well and it comes to no surprise to me that you get all kind or errors. Why, for example, are you using three times the body tag and why don’t you have any units declared for your margin and padding.


body { 
background-image: url(blueMarble.jpg);
background-repeat: repeat-x;
} 

body { 
margin: 10;
padding: 10;
font: small Arial, Helvetica, Vedana, sans-serif;
}

body { 
background-color: #00ffff;
color: #ffa500;
}

where this will do as well:


body { 
    margin: 10px;
    padding: 10px;
    background: #00ffff url(blueMarble.jpg) repeat-x
    font: small Arial, Helvetica, Vedana, sans-serif;
    color: #ffa500;
}

This way you ask for trouble. Css is a very strong tool, but you should use it accordingly.

8

Hi there!
Good morning & absolutely Donboe.
It made me feel even dumber that I saw the error just mocking at after I hit the save/submit button.
Two errors:

  1. the directory, one of the link has the wrong directory. I played it w/it throughout the day so I don’t know if that was always the prob & I first did have one single tag for the “body” as I kept trying to fix it I decided to break it down into several to see if bit of code was more the erratic one.
    1
    <img src=“images/blueMarble.jpg” height=“100” width=“100” />

background-image: url(blueMarble.jpg);
I had even placed the image to prove (d’ho) that the image were in the same place. A true homer simpson moment.:blush:

2.the: background-repeat: repeat-x
I have just been reading & trying out some samples from various books, this only repeats the image at the top horizontal border, Afterward one I finally got a pic I tried w/repeat-y and w/out it to see the effects.

so thank you all:). Now back to the books.