TECH - RED

[tswift]

Tech Red now in CSS! Finally finished converting a recent theme form a tabled layout to a CSS. Still working out a few little details, but this theme should be ready for release within a few short days.


See the demo;

Tech Red

[tswift]

This theme is available for download. Visit our FREEBIES page below to find the download link.       

http://www.themekings.net/freebies.html

[XRG Kamikaze XF]

Alright, as far as tech red goes, what is up with the header links? it looks like they are stairs moving down behind the rest of the template. Any easy fix for this?

[tswift]

Yes, give me a day and I'll post new code for it. Just a minor change. 

[XRG Kamikaze XF]

I appreciate it TSwift!
I'm doing a complete redesign on this one, but im using the code as is. Only the look will be different haha

[ghost21]

You should make them drop down menu.

[tswift]

FIXING THE HORIZONTAL NAVIGATION MENU "STAIR-STEP" GLITCH IN PREVIEW MODE WHEN EDITING TECH RED'S WEB PAGE

Find the following code in TECH RED's CSS page (techredcss.css) and delete it.

Code:

#nav {
margin: 0px auto 2px auto;
padding: 0px;
width: 796px;
height: 34px;
overflow: hidden;
position: relative;
background-color: #999999;
background-image: url('theme/filler.gif');
background-repeat: no-repeat;
list-style-type: none;
}
#nav ul {
padding: 0px;
margin: 2px 0px 2px 2px;
list-style-type: none;
}
#nav li a {
font-family: Verdana;
font-size: .8em;
text-decoration: none;
font-weight: normal;
color: #FFFFFF;
text-align: center;
line-height: 220%;
border-right-style: solid;
border-right-width: thin;
border-right-color: #333333;
padding: 0px;
margin: 0px;
position: relative;
width: 110px;
height: 30px;
float: left;
overflow: hidden;
list-style-type: none;
display: block;
}
#nav li a:hover {
color: #ffffff;
text-decoration: underline;
}

Now copy the code below and place it into the css file, replacing the code above. (doesn't matter where you place it on the sheet)

Code:

#menu {
width: 796px;
height: 34px;
overflow: hidden;
margin: 0px auto 2px auto;
padding: 0px;
position: relative;
background-image: url('theme/filler.gif');
background-repeat: no-repeat;
}
#menu ul{
margin: 0; padding: 0;
float: left;
}
#menu ul li{
display: inline;
}
#menu ul li a{
float: left;
color: #FFFFFF;
text-decoration: none;
background-position: center;
padding: 0px;
margin: 0px;
width: 110px;
height: 34px;
position: relative;
overflow: hidden;
font-family: Verdana;
font-size: .8em;
font-weight: normal;
font-style: normal;
font-variant: normal;
list-style-type: none;
text-align: center;
line-height: 250%;
border-right-style: solid;
border-right-width: thin;
border-right-color: #333333;
}
#menu ul li a:visited{
color: #FFFFFF;
}
#menu ul li a:hover, .menu ul li .current{
color: #ffffff;
text-decoration: underline;
}

Now open the html page (index.html) or page(s) you may have already created and change the HTML code for the horizontal nav ID from:

Code:

<div class="banner">
<div class="logo"></div>
</div>
<div id="nav">
<ul>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
</ul>
</div>
<div class="navimgbtm"></div>

TO:

Code:

<div class="banner">
<div class="logo"></div>
</div>
<div id="menu">
<ul>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
</ul>
</div>
<div class="clearL"></div>
<div class="navimgbtm"></div>

Notice all your changing is the ID from "nav" to "menu" and adding the "left clear" line.

This will fix the "stair-step " preview glitch.  

.....