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. . .

[creole]

can't really help you much out since i'm not a fan of divs, but the person definitely cut the banner into pieces. each link has it's own image, so i'm guessing the person made the picture with the correct navigation link it leads to and positioned it up their page?

for example;

is the picture, and it's part of the banner. you just add a link to the image and just adjust the alignment of it on your profile?





edit;
here are some tutorials from createblog that can get you started in the right direction.

[NaShae]

Thanks but are you saying I'd have absolutely no choice but to chop up the banner and position it accordingly?
There's no alternatives?

[creole]

mm, i'm pretty sure there could be another way, but the most common way is to chop up the banner.

[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.

[NaShae]

I believe the last one is the answer I was looking for. . .now let's see if I can do this.
Thanks.