CSS redesign
Tracy sent me the PSD design of the site, so I ripped out the navigation buttons and put each onto a transparent background, uploaded them, then edited the navigation.inc file to display them:
<div class=”option1″><a href=”"><img src=”/tmh/sitegfx/nav_portfolio.gif” alt=”portfolio” /></a></div>
<div class=”option2″><a href=”"><img src=”/tmh/sitegfx/nav_resume.gif” alt=”resume” /></a></div>
<div class=”option3″><a href=”"><img src=”/tmh/sitegfx/nav_home.gif” alt=”home” /></a></div>
Then in the CSS file I formatted the main navigation block, and each option class:
#navigation {
position:relative;
top: 120px;
left: 200px;
float:left;
height: 36px;
}.option1 {
float:left;
border-left:2px solid black;
border-right:2px solid black;
margin-left:50px;
}.option2 {
float:left;
border-left:2px solid black;
border-right:2px solid black;
margin-left:50px;
}.option3 {
float:left;
border-left:2px solid black;
border-right:2px solid black;
margin-left:150px;
}
The navigation block is set to be 120 pixels from the top of the screen and 200 from the left.
Each option class is set to float: left; – this means that they will line up together, rather than each being on a new line. I also used a margin-left to push them apart from each other, and ended up with this:
Its almost right – I need to adjust the spacing, the nav bar needs moved a little to the left an a little higher up, but the main problem are those purple boxes.
By default, all HTML images that are links get a purple border round them. That’s easy to kill:
img {
border:0;
}
So after switch off the border and tinkering with with the positioning, I’ve ended up with this nice layout:
The black lines at each side of a navigation link should only be there if that is the current active section of the site, so I’ll set the colour of the border to be trasparent, then override it to be black on the active page.
I’ve going to alter the CSS now so that when you roll the mouse pointer over an option, the background goes darker. This is simple enough, all I do is define any HTML anchor tag that is inside the navigation object to go orange when rolled over and transparent at all other times. I created images to be the backgrounds, just to get more control, and after some tweaking, I ended up with this:
When you roll over a navigation icon the background changes. The CSS for the entire navigation system looks like this:
#navigation {
position:relative;
top: 119px;
left: 190px;
float:left;
}#navigation a:link, #navigation a:visited {
background-image: none;
display:block;
}#navigation a:hover, #navigation a:active {
background-image: url(/tmh/sitegfx/nav_hover.gif);
display:block;
}.option1 {
float:left;
border:none;
margin-left:30px;
}.option2 {
float:left;
border:none;
margin-left:15px;
}.option3 {
float:left;
border:none;
margin-left:180px;
}
Next up, I’ll create the resume and portfolio pages – I just create two folder, one called resume and one called portfolio, and copy my index.shtml and localcontent.inc files into them. They I quickly alter the localcontent.inc files to hold the correct information, and upload them.
Next I edit the navigation file to point to the correct pages on the site:
<div class=”option1″><a href=”/tmh/portfolio/”><img src=”/tmh/sitegfx/nav_portfolio.gif” alt=”portfolio” /></a></div>
<div class=”option2″><a href=”/tmh/resume”><img src=”/tmh/sitegfx/nav_resume.gif” alt=”resume” /></a></div>
<div class=”option3″><a href=”/tmh”><img src=”/tmh/sitegfx/nav_home.gif” alt=”home” /></a></div>
And you have to beleive me – the entire site works.
Final touches
Once final thing that I want to do is to make the active navigation tab be a different colour – so in each folder I’ll include a local stylesheet and edit the index.shtml file so that it loads it.
All three are very slightly different – the add borders to the sides of the active option, change the background, and alter the margin a little. Here is the override for the portfolio page:
.option1 {
float:left;
border-left:2px solid black;
border-right:2px solid black;
margin-left:28px;
background-image: url(/tmh/sitegfx/nav_active.gif);
}.option2 {
float:left;
border:none;
margin-left:13px;
}.option3 {
float:left;
border:none;
margin-left:180px;
}
As you can see in the final image, the active tab is works, the second tab is being hovered over thus highlighted, and the last tab is normal.
And the site is done – check it out here. I say it’s done, but in reality there is a still more work to be done – the content will need to be styled, but that’s also easy. If Tracy puts some content online, we can work through that too.