css coding issue [Archive] - Dynamic Drive Forums

drummer7771212

01-18-2012, 03:04 AM

I have a problem that needs some help,please.

<!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" xml:lang="en" lang="en">
<head>
<style type="text/css" />
body{background-image:url('wood.jpg');
}
img
{
position:absolute;
left:100px;
top:100px;
height:450px;
width:1000px;
}
</style>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<meta name="Author" content="Armando" />
<title>MainPage</title>
</head>

<body>
<div class="wood" />
<img src="wood.jpg" alt ="wooden background" width="10" height="10" />
</div>
<div class="ed" />
<img src="ed.jpg" alt ="chalkboard" width="10" height="10" />

</div>
</body
</html>

here's the code that i have written so far. My problem is how can i put text written in chalk on the "chalkboard . Another thing is how can i place the word "enter" on the bottom center????
Any help would be greatly appreciated!!!

[Nicolas]

01-18-2012, 07:52 AM

If that is your full page code, you have a big problem already.

<div class="wood" />
<img src="wood.jpg" alt ="wooden background" width="10" height="10" />
</div>
<div class="ed" />
<img src="ed.jpg" alt ="chalkboard" width="10" height="10" />

For one, on the alt ="chalkboard" it should be alt="chalkboard" ...
For two, you don't have a class for Wood nor ED... Here is an example of a class:
In the head:

<style>
.class1{
height:20px;
width:20px;
position:absolute;
}
</style>

You don't have a .wood{ or .ed{ o_o

ibullock

01-20-2012, 03:13 PM

You might also want to slice your design again, and use those images as background-image in CSS on your containing divs.

If they are wood texture and chalkboard texture, they should be able to be tiled. If they aren't tile-able then I'd suggest finding some new textures. This will make your design more efficient and more flexible.

If you're using a set image for the background, what happens if it needs to scale?

Whenever I'm coding CSS/HTML for a page I always ask myself: "What happens if I need to change that next week?"

For text written in chalk, you're probably going to want to look at some web fonts. I'm not sure I've ever seen one that looks like chalk, but you may have some luck.

Google WebFonts is a good (free) place to start, and they're pretty easy to use too!

jironimo

01-23-2012, 07:29 PM

Hmm,
First of all I think you should learn the selectors in css.

If you want to associate a certain style to an element you can and should use classes.
So doing a style like

.myclass {
position: absolute;
etc:etc;
}

you can then associate it with an html element like this

<div class="myclass"></div>

There are a lot of selectors like:

* - all elements
div - all divs
img - all imgs
div span - a span within a div
div, span - <div> and a <span>
div + span - <span> preceded by a <div>
.class - this you already know, is for an element with class="class"
div.class - and <div> with class="class"
#id - an element with the id="id"