Messages - sk8rdude461
1
HTML & CSS / Why is the nav bar so low?
« on: January 16, 2012, 04:36:26 AM »
This image shows my error pretty well:
http://dl.dropbox.com/u/31065410/help.png (image tags arent allowed
The main nav bar with the Home, Forums, Support, and clans are so far right because they are floated and I cropped the image after zooming out.
The problem is that the entire nav bar is supposed to be directly under the image.
I used both HTML and CSS in this.
HTML:
CSS:
http://dl.dropbox.com/u/31065410/help.png (image tags arent allowed
The main nav bar with the Home, Forums, Support, and clans are so far right because they are floated and I cropped the image after zooming out.
The problem is that the entire nav bar is supposed to be directly under the image.
I used both HTML and CSS in this.
HTML:
Code: [Select]
<HTML>
<HEAD>
<TITLE>Everlast Webclient</TITLE>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<script>
function closeIt() {
return "Are you sure you want to leave Abstract PK? When leaving this page you will log out!";
}
window.onbeforeunload = closeIt;
</script>
</HEAD>
<BODY>
<img src="banner.jpg" alt="Banner image" align="top"/>
</br>
<!-- <p>
<a href="http://www.everlastpk.com/client.jar" target="_blank"><img src="download.png" alt="download link"/></a>
<a href="http://forums.everlastpk.com" target="_blank"><img src="forum.png" alt="download link"/></a>
<a href="http://www.everlastpk.com/vote.php" target="_blank"><img src="vote.png" alt="vote link"/></a></br></p> -->
<p>
<div id="content">
<table cellpadding=0 cellspacing=0>
<tr>
<td colspan=2>
<div id="top">
<div id="menu">
<div>
<ul>
<li class="home">
<a class="hoverImg" target="_blank" href="http://www.runescape.com/g=runescape/title.ws"><img src="http://www.runescape.com/img/game/home.jpg" alt="Home" title="" /></a>
</li>
<li class="support">
<a class="hoverImg" target="_blank" href="http://services.runescape.com/m=rswiki/en/Customer+Support"><img src="http://www.runescape.com/img/game/support.jpg" alt="Support" title="" /></a>
</li>
<li class="forums">
<a class="hoverImg" target="_blank" href="http://services.runescape.com/m=forum/g=runescape/forums.ws"><img src="http://www.runescape.com/img/game/forums.jpg" alt="Forums" title="" /></a>
</li>
<li class="subscribe">
<a class="hoverImg" target="_blank" href="http://www.runescape.com/g=runescape/members_benefits.ws"><img src="http://www.runescape.com/img/game/subscribe.jpg" alt="Subscribe" title="" /></a>
</li>
<li class="clans">
<a class="hoverImg" target="_blank" href="http://services.runescape.com/m=clan-home/g=runescape/"><img src="http://www.runescape.com/img/game/clans.jpg" alt="Clans" title="" /></a>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</br>
<applet name="Everlast Client "code="client.class" archive="client.jar" width="765px" height="530px" align="middle">
Java is not installed on your machine or your browser does not allowed Java Applet to run<br /><br />Get the latest Java technology at <a href="http://www.java.com/">http://www.java.com/</a>
<param name="java_arguments" value="-Xmx512m">
</applet>
<p>Warning: Do not mess with the page While downloading.
It can freeze or ruin the download</p>
<div id="bottom">
</div>
</BODY>
</HTML>Note: the <p> tag that is commented out is the old nav bar that had 3 lame buttons.CSS:
Code: [Select]
p
{
text-align:center;
}
html,
body,
#content,
table {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#content {
position: absolute;
top: 0;
left: 0;
}
td {
text-align: center;
}
a img {
border: none;
}
.hoverImg {
display: block;
overflow: hidden;
position: relative;
font-weight: normal;
}
#menu {
width: 100%;
position: absolute;
left: 0;
top: 7px;
}
#menu div {
width: 492px;
margin: auto;
height: 44px;
background: url(http://www.runescape.com/img/game/menu_bg.png) left top no-repeat;
overflow: hidden;
position: relative;
}
#menu div ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu div ul li {
position: absolute;
top: 4px;
}
#menu div ul li a {
height: 35px;
}
#menu .home {
width: 87px;
left: 39px;
}
#menu .support {
width: 106px;
left: 126px;
}
#menu .forums {
width: 103px;
right: 157px;
}
#menu .subscribe,
#menu .clans {
width: 120px;
right: 37px;
}
.hoverImg img {
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 100%;
}
.hoverImg:hover img {
left: -100%;
text-indent: 100%;
}
.hoverImg:hover {
font-weight:bold;
}
#top,
#bottom {
width: 100%;
position: absolute;
background-repeat: repeat-x;
background-color: black;
}
#top {
position: relative;
float: top;
height: 60px;
background-image: url(http://www.runescape.com/img/game/menu_bg.jpg);
}
#bottom {
float: left;
height: 58px;
background-position: center top;
background-image: url(http://www.runescape.com/img/game/footer_bg.jpg);
}
#bottom div ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
}
#bottom div li {
float: left;
margin-left: 10px;
}
#bottom div{
display: block;
text-align: left;
width: 500px;
font-size: 10px;
color: #b6b6b6;
}