DIVs on Top, ummm. . . |
DIVs on Top, ummm. . . |
May 15 2010, 03:42 PM
Post
#1
|
|
-N[dot]Shae- Group: Member Posts: 36 Joined: Jul 2008 Member No: 668,276 |
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. . . |
|
|
May 15 2010, 03:50 PM
Post
#2
|
|
Senior Member Group: Staff Alumni Posts: 4,665 Joined: Aug 2008 Member No: 676,364 |
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. |
|
|
May 15 2010, 08:35 PM
Post
#3
|
|
-N[dot]Shae- Group: Member Posts: 36 Joined: Jul 2008 Member No: 668,276 |
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? |
|
|
May 15 2010, 08:37 PM
Post
#4
|
|
Senior Member Group: Staff Alumni Posts: 4,665 Joined: Aug 2008 Member No: 676,364 |
mm, i'm pretty sure there could be another way, but the most common way is to chop up the banner.
|
|
|
May 15 2010, 10:28 PM
Post
#5
|
|
Senior Member Group: Member Posts: 1,237 Joined: May 2008 Member No: 648,123 |
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. |
|
|
May 19 2010, 04:01 PM
Post
#6
|
|
-N[dot]Shae- Group: Member Posts: 36 Joined: Jul 2008 Member No: 668,276 |
I believe the last one is the answer I was looking for. . .now let's see if I can do this.
Thanks. |
|
|