Welcome to HBH! If you have tried to register and didn't get a verification email, please using the following link to resend the verification email.

Css/Html Help


ghost's Avatar
0 0

Hello people :) i want to learn how to code a design. i have a Css book but it dont help, anyone could have have a look and see what i did wrong here: Index.html file:

"http://www.w3.org/TR/xhtml/DTD/xhtmll-strict.dtd">
<html>
      <head>
        <title>Bandome</title>
     </head>
<style type='stilius.css' media='all'>
p#desine1 {
  padding: 10px;
  hight: 200px;
  border: 1px thin solid gray;
  margin: 10px
  background: white;
  }
p#desine2 {
  padding: 10px;
  hight: 200px;
  border: 1px thin solid gray;
  margin: 10px
  background: white;
  }

</style>
     <body>
<body bgcolor="#363636">

<p id='desine1'>
belekas
</p>
       </body>
</html>```
Css sheet:
```markup/* CSS Document */
p#desine1 {
  padding: 10px;
  hight: 200px;
  border: 1px thin solid gray;
  margin: 10px
  background: white;
  }
p#desine2 {
  padding: 10px;
  hight: 200px;
  border: 1px thin solid gray;
  margin: 10px
  background: white;
  }

I am seriously green at this, all i can do is graphics :)


ghost's Avatar
0 0

Try taking out the "p" before the "#"s and you don't need an external css sheet, because your not calling an external css sheet in your html code.

edit Or add " " (space) between the "p" and the "#".


AldarHawk's Avatar
The Manager
0 0

Okay lets check this over…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtmll-strict.dtd">
<html>
      <head>
        <title>Bandome</title>
     </head>
<link href="stilius.css" rel="stylesheet" type="text/css" />
     <body>
<body bgcolor="#363636">
<p id='desine1'>
belekas
</p>
       </body>
</html>
p#desine1 {
  padding: 10px;
  hight: 200px;
  border: 1px thin solid gray;
  margin: 10px
  background: white;
  }
p#desine2 {
  padding: 10px;
  hight: 200px;
  border: 1px thin solid gray;
  margin: 10px
  background: white;
  }

This should work.


ghost's Avatar
0 0

AldarHawk wrote: Okay lets check this over…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtmll-strict.dtd">
<html>
      <head>
        <title>Bandome</title>
     </head>
<link href="stilius.css" rel="stylesheet" type="text/css" />
     <body>
<body bgcolor="#363636">
<p id='desine1'>
belekas
</p>
       </body>
</html>
p#desine1 {
  padding: 10px;
  hight: 200px;
  border: 1px thin solid gray;
  margin: 10px
  background: white;
  }
p#desine2 {
  padding: 10px;
  hight: 200px;
  border: 1px thin solid gray;
  margin: 10px
  background: white;
  }

This should work.

What is this :o You didn't link the style sheet in the header… or the body… you linked it in the HTML tag… does that work?


AldarHawk's Avatar
The Manager
0 0

it does. that is how I code all my css pages.


ghost's Avatar
0 0

I guess I'm just picky, because that wouldn't be correct XHTML syntax :p


SySTeM's Avatar
-=[TheOutlaw]=-
20 0

Feralas wrote: I guess I'm just picky, because that wouldn't be correct XHTML syntax :p

Ewww. XHTML compliancy FTW.

No xml namespace, css isn't linked inside the head. Body tag uses "bgcolor" rather than having it declared in the css.

Ew ew ew.


spyware's Avatar
Banned
0 0

Aldar, what's the use of declaring the doctype if you're not going to stick to it anyway :/.

If you're not going to code 'compliantly', which is fine, just remove the whole W3C muck-schmuck, or, change to a different mode of compliancy.


ghost's Avatar
0 0

This is a time where i do have to agree with spy (no offence, but to be honest, I don't always see it from your point of view),

compliance is what people want and is what we should have. Just because some people don't want to stick to solid and fair outlines, doesn't mean that browsers should suffer, especially now with smaller devices with less spare resources to deal with the mess.

so anyway, back to the OP's problem, ive done a couple of things to produce a working, valid page.

working demo

index.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" xml:lang="en" lang="en">
	<head>
		<title>Bandome</title>
		<link href='style.css' rel='stylesheet' type='text/css'>
	</head>
	
	<body>
		<div id='container'>
	
			<p class='desine1'>
				belekas
			</p>
			
			<p class='desine1'>because I'm using classes, i can repeat the same p and have the same styling</p>
			
			<p class='desine1'>classes are fun</p>
		</div>
	</body>
</html>

you will notice some changes, most of them are mentioned in the CSS code:

/* CSS document */

html, body {
background:#363636; 	/*set background colour here rather than as bgcolor */
margin:0;  			/*getting rid of any dodgy browser specific styling */
padding:0;			/*same as above */
}
			
#container {			/*container div to center and set width of elements inside */
width:500px;		       /*set width of container*/
margin:0px auto;             /*centering the div (thats the auto bit) */
}
			
p.desine1 {		        /*used a class instead of an id so multiple instances can be styled */
padding:10px;		      /* your styles */
margin:10px;		       /* your styles */
height:200px;		      /* your styles (you spelt height wrong (missed the 'e')*/
background:white;	     /* you missed the semi colon off of the property before background */
border:1px solid grey;	     /* your styles */
}```

i hope this clears a few things up (the valid way)

*OK, didnt realise that indentation didnt work...sorry for the legibility*