2.0 layout link help Options

[kalientemexikana]

how do i make my links look like block headers?

rectangles with the words if you are confused

please help me out

<3

[Mikeplyts]

can you give an example?

[kalientemexikana]

[Mikeplyts]

^ That's a 1.0 layout though. But I guess you can sort of make links like that in 2.0.

First, we'll need to hide the navigation. Put this in your CSS:

CODE

#topnav li {display:none;}
div#googlebar {display:none;}

Next, we'll add a custom div class to your CSS so we can display it later in your HTML. Put this in your CSS:

CODE

.cstmnav {
position:absolute;
top:###px;
_top:###px;
left:50%;
_left:50%;
margin-left:-###px;
_margin-left:-###px;
width:###px;
height:###px;
}

Replace the ### with your own values.

Now, we need to define a class for how our little block header links are going to look like. Use this in your CSS:

CODE

a.cstmnav_link {
font-family:arial;
font-size:12px;
color:#FFFFFF;
background-color:#333333;
border-width:1px;
border-color:#777777;
border-style:solid;
padding:4px;
display:block;
}
a.cstmnav_link:hover {
font-family:arial;
font-size:12px;
color:#333333;
background-color:#FFFFFF;
border-width:1px;
border-color:#010101;
border-style:solid;
padding:4px;
display:block;
}

You can edit or add more properties if you'd like. Finally, we move on to the HTML.

We're going add the DIV container and the links inside it so add this in your About Me:

CODE

<div class="cstmnav">
<a class="cstmnav_link" href="URL">TEXT</a>
<a class="cstmnav_link" href="URL">TEXT</a>
<a class="cstmnav_link" href="URL">TEXT</a>
<a class="cstmnav_link" href="URL">TEXT</a>
<a class="cstmnav_link" href="URL">TEXT</a>
<a class="cstmnav_link" href="URL">TEXT</a>
<a class="cstmnav_link" href="URL">TEXT</a>
</div>

Now edit that stuff, Save Changes, and you're done!

[kalientemexikana]

omg thank you!! ive been trying to do this since i switched to 2.0

[Mikeplyts]

haha, no problem.

[Mickey]

Topic closed & moved.