CSS Help

[MaDDoG1221]

Im new to CSS but a friend started me off. So what I want to do is add some pictures as a menu and make them hyperlinked.. I have a news/blog thing on my site so this menu will be next to it, looks like so... http://img157.imageshack.us/img157/5249/sm3vp1.jpg

But im stuck here, How do i add other images without the first one disappearing? Also want to make them hyperlinked to another part of the site. If you need to see my site ill post link..

This is the code I got from a friend;

<style type="text/css">
body
{ 
background-image: url('/images/SM3_01.gif');
background-repeat: no-repeat;
background-position: 174px 148px; 
}
</style>

Help a newbie? lol

edit: forgot to mention that the menu image is sliced up in Photoshop and will be in peices

[Tomassi]

If you want to do it with css you can make a div with the menu image as a background and make it clickable with a simple javascript line, or create a div, postition it where you want and put a <a href> in it with the image.
the easiest would be something like this:

<div style="width:200px">
<a href="#"><img src="link1.jpg"></a><br>
<a href="#"><img src="link1.jpg"></a><br>
</div>

[MaDDoG1221]

OK now im even more confused. lol.

my site involves a little php script aswell as html, I tried what you said, but couldnt get it to appear in the correct place.

This is my site, if it helps you understand what im saying. http://www.smp.game-host.org/

[Tomassi]

The easiest way is probably to create a main #div container of 750px or so, and place you're content form left to right
easy example

<style>
#container {
	width:750px;
	margin:0 auto;
}
#menu {
	width:150px;
	float:left;
}
#content {
	width:450px;
	float:left;
}
</style>

<div id="container">
	<div id="menu">you're menu stuff</div>
	<div id="content">your content</div>
</div>

[MaDDoG1221]

Ive thought of doing it that way, But I dont really like the way its layout, personally I like the side menu better, But thanks anyway.

[Tomassi]

so when the user scales their browser your side menu will overlap everything?

[MaDDoG1221]

Hmm I never thought of that, Ill have to ask my friend how they stopped theirs from moving when the brower is scaled down.

[Tomassi]

well, I know one way ^^

theres just this age old problem that surfers use different resolutions etc.
The 800/600 percentage is dropping though, thank god

[MaDDoG1221]

Yes thats one reason why I make all my sites in 800x600, I know a few people who still live in that age lol, And whats your way?

[Tomassi]

that was post #4, keep it all in a main div of less than 800px wide

[MaDDoG1221]

Ok.. Just a lil question, how do i add more than one image using the code like in post #1, making each appear at a differnt locaction?

[Tomassi]

in post 1 you're using a background image in your body tag, and you only have 1 body,

You can use divs or table cells and place images in those

[MaDDoG1221]

So how I use divs with that first code? i think the divs are like <div> </div> right?

[Tomassi]

well, you have to define a div first in your stylesheet.css for example:

.textbox {
  font-family:verdana;
}

and then in your html:

<div class="textbox"> your content </div>

you can ad more functions in your class like the background image etc

[MaDDoG1221]

Ok thanks, so the "textbox" bit I can change to anything? i would just have to change this to the same aswell? .textbox {

[Tomassi]

yeah it's just an example, it could be .goatherder if you want

[MaDDoG1221]

Ah ok thanks, I was just checking

[Tomassi]

you can find alot of info about css here

[MaDDoG1221]

Thanks, been looking through that site, But it doesnt say how you position a image using pixels or % values.

Ive made it so its not an internal CSS, easier to work with now.

Only what I have in it so far;

body
{ 
background-image: url('/images/SM3_01.gif');
background-repeat: no-repeat;
background-position: 174px 148px; 
}

.image01 {
  background-position: 174px 248px; 
}

Though I thought the background would work the same with the image01 code, guess not lol.

[Tomassi]

the width and height statement you're using will use the outer div or body as a starting point,
like you had in your body the background image will be placed 174px from the left side of your browser, no matter what the size/scale is.
You should try to avoid that cause it will overlap your content.
If I were you you should use my example in post #4 as a basis and continue from there.

You can ad classes in classes to place images etc, and you don't need to use the background statement to call an image every time.