PDA

View Full Version : How can I make a box for links?


sea
11-26-2007, 01:09 AM
I tried doing the code myself but it would effect the way the homepage looked.

Here's what I'm trying to achieve:

http://img218.imageshack.us/img218/3600/asdfsz6.jpg
http://img218.imageshack.us/img218/3600/asdfsz6.jpg

Any help is appreciated. Thanks!

Micha
11-26-2007, 10:20 AM
Well I will assume that you want box with tabs, since the screenshot looks like one :)

Try with this code for your box:

<div class="box box_tabs">
<div class="box_title_holder">
<div class="box_title">
<ul id="custom_box_tabs" class="tabs">
<li><a href="#box_1"><span>Friends</span></a></li>
<li><a href="#box_2"><span>Links</span></a></li>
</ul>
</div>
</div>
<div class="box_body">
<div class="box_content">
<div id="box_1" style="width:100%;overflow:hidden;">
<ul style="width:46%;float:left;">
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
</ul>
<ul style="width:46%;float:left;">
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
</ul>
</div>
<div id="box_2" style="width:100%;overflow:hidden;">
<ul style="width:46%;float:left;">
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
</ul>
<ul style="width:46%;float:left;">
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
</ul>
</div>
<script type="text/javascript">
var custom_box_tabs = new Control.Tabs('custom_box_tabs');
</script>
</div>
</div>
</div>

Hope this helps :)