April 8th 2017 03 Easter Rare Cutouts April 1st 2017 03 Easter Background PSDS01 Easter Brush Pack05 Easter Color Schemes03 Easter Phone Wallpapers03 Easter Cutouts March 19th 2017 03 Easter Cutouts01 Easter Color Scheme Template March 17th 2017 20 Site Names 10 Font Previews Easter + Spring Content 04 Sign Decos 20 Color Schemes 04 Vector Masks 03 Border PSDS 03 Tiff Montesco Cutouts 06 Avatars 02 Brush Packs Installing WordPress Using FTP Installing WordPress Themes Using FTP Defining Patterns Individual Letter Coloring Patterned Text Preppy Text Version One Simple Text Version One Simple Text Version Two March 14th 2017 01 St. Patrick's Cutout March 8th 2017 01 St. Patrick's Cutout 01 Cara Daley Cutout 02 Miranda Seto Cutouts 02 Rare Zoe Monroe Cutouts 02 Zoe Monroe Cutouts Double Box Navigation Tutorial March 1st 2017 15 Color Schemes 10 Avatars 01 Pattern PSDs 02 Brush Packs 02 Alva Jay Cutouts 03 Alva Jay Rare Cutouts 03 St Patricks Color Schemes 03 St Patricks Background PSDs Creating ABR File Tutorial Installing ABR File Tutorial Kerning Text Tutorial Creating Circle Brushes Tutorial Feb 16th 2017 Circle Navigation Tutorial Defining Brushes Tutorial Feb 14th 2017 10 Color Schemes Coding A College Layout Feb 8th 2017 2 textures 3 site model singles 10 avatars 2 Laura Delagarza cutouts 2 Zoe Monroe cutouts
- - - Previous Updates - - -
a b c d e

Double Box Navigation

Information

Difficulty: Medium
Class: HTML Coding

Date Posted: March 2nd 2017
Comments: Please don’t forget to credit everaft3r.net,
please do not redistribute my tutorial.


This tutorial will teach you how to style your navigation links into a double box. It should look something like this.

Step One


Start by creating an image document in photo shop with the following dimensions. Width 148px and Height 105px. Save the image for later. Now copy the following code into you style.css page
a.link2:active,
a.link2:visited,
a.link2:link {
width: 78px;
height: 20px;
display: inline-block;
font-size: 10px;
font-family: verdana;
text-align: center;
line-height: 20px;
margin: 1px;
margin-top: 5px;
background-color: #aaaaa;
color: #ffffff;
text-decoration: none;
}

This going is the link button coding that you see above (link here). Now you are going to edit the coding so that it matches with your current layout. Below are the main areas that you want to focus when editing this coding.

width: this is how long you want the buttons to be, you can play around with the size if you would like
height: this is how tall you want the buttons to be, you can play around with the size if you would like
font-size: this is the size of your font
font-family: this is the font style, you change it anyone you want
margin: this will center the text in the button to the middle of it (inside)
margin-top: this will align the text from the top in the inside of the button
background-color: this changes the base color of the link button
color: this changes the color of your font

Step Two


Once again you are going to take this code, and paste it to your style.css right under the last code you just posted. This code is your link button hover code. So when you hover over the buttons with your mouse, this is the coding for it.

a.link2:hover {
background: #88888;
color: #ffffff;
letter-spacing: 1px;
}

background: this is the background color, when you hover over the link button
color: this is the color of the font, when you hover over the link button
letter spacing: this is the size of how many spaces are between each letter of your font

Step Three


For the next step we are going to add the box that goes around the whole image, and link buttons that we just created. Copy the code below and paste it on to your style.css page.

#box{
background-color:#e2e8e1;
text-align:justify;
padding:2px;
width:180px;
height:auto;
margin-top:3px;
float:left;
}

background-color: this is the background color code for your box
text-align: this is where the text aligns inside of the box, you can just leave this as is
padding: this is the area inside the element
width:this is how wide your box is going to be, if you are using the same image dimension, you won’t need to play around with this number.
height:this is how tall your box is going to be. It is set to auto right now so you won’t need to do anything it will adjust the height for you.
margin-top: this is the area outside of the box, at the top. Nothing will come in this area unless its 3 pixels aways.
float-left: this will make the box float left side

Step Four


This next code is your main code that will like what we put into the style sheet onto the main page. Copy and paste the code below on to the desired page of where you would like to have the navigation box.

<div class=”box”>
<img src=”IMAGE URL HERE”/></a><br>
<a href=”URL LINK 1″ class=”link2″>Link Here<a href=”URL LINK 2″ class=”link2″>Link Here</div>
</center>

Where it says IMAGE URL HERE you are going to replace that with the image you made in step one. Where it says URL LINK 1 replace that with the first you want on your link buttons, do the same with URL LINK 2 Once you have done that your double box navigation is done.