DIVs on Top, ummm. . . Options

[NaShae]

OK. I've done very VERY simple DIVs before.
But I've never done anything like this -> http://www.myspace.com/caliswagdistrict
I like how they have the links, but HOW do you get it like that?
Is there a tutorial on it?
Appreciate the help. . .

[fixtatik]

Really no need to chop it up; in fact, it's better (speed-wise) if you don't. If you have your image already set up as a banner, you can just use blank links positioned over each part (sort of like an image map).

As an example:

CODE

.top { background:url(URL TO BANNER IMAGE); height:300px; left:50%; margin:110px 0 0 -400px; position:absolute; top:0; width:800px; }
.top a { display:block; height:100px; position:absolute; width:200px; }
.link_1 { left:100px; top:300px; }
.link_2 { left:100px; top:450px; }
.link_3 { right:100px; top:300px; }
.link_4 { right:100px; top:450px; }

CODE

<div class="top">
  <a class="link_1" href="#"></a>
  <a class="link_2" href="#"></a>
  <a class="link_3" href="#"></a>
  <a class="link_4" href="#"></a>
</div>

".top a" defines properties for all links inside the "top" div. Since the "top" div has absolute positioning, you can absolutely position links inside that div with respect to their parent. So, in that example, "link_1" and "link_2" will both be 100 pixels from the left. "link_3" and "link_4" will be 100 pixels from the right.

Obviously, you can adjust sizes and positioning to however you need it, but this is a general idea.