HTML Help

elqboy · Joined: 07 Nov 2008 Posts: 6

Only some links work while the mouse is hovering over it...

here is the life page and code:
http://thechozenfew.co.cc/left_frame.htm

Code:
<style type="text/css">
body {
background-image:url(images/gray_gradient.gif);
background-repeat:repeat-y;
}
div#eXTReMe {
position:absolute;
bottom:0px;
}
a:link{
text-decoration:none;
color:#F00;
}
a:hover{
font-size:20px;
text-decoration:underline;
color:#00C;

}
a:visited{
text-decoration:none;
color:#F00;
}

</style>
</head>

<body>
<p><a href="pictures-table.htm" target="mainFrame">Pictures</a></p>
<p><a href="zip_files/wlsetup-web.zip" target="_blank">Windows Live Messenger</a></p>
<p><a href="zip_files/LimeWireWin.zip" target="_blank">LimeWire Pro</a></p>
<p><a href="SpreedTest/index-php.html" target="mainFrame">Test Your Connection Speed</a></p>
<p><a href="pics_index.htm" target="mainFrame">Las Fotos</a></p>
<p><a href="9-11-08/video.htm" target="_blank">Video de las Fotos</a></p>

sticks464 · Joined: 31 Dec 2006 Posts: 1283

To keep the links inside the gradient background do this
Code: #nav {
margin: 0;
padding-left: 5px;
list-style: none;
width:150px;
}
ul#nav li {
position: relative;
width:160px;
}
ul#nav li a {
display:block;
text-decoration: underline;
color: #f00;
line-height:2;
height:2em;
padding:0 5px;
width:160px;
white-space:nowrap;
}
ul#nav li a:hover {
text-decoration:underline;
color:#00C;
}
ul#nav li a:visited{
text-decoration:none;
color:#F00;
}

<body>
<ul id="nav">
<li><a href="pictures-table.htm" target="mainFrame">Pictures</a></li>
<li><a href="zip_files/wlsetup-web.zip">Windows Live Messenger</a></li>
<li><a href="zip_files/LimeWireWin.zip">LimeWire Pro</a></li>
<li><a href="SpreedTest/index-php.html" target="mainFrame">Test Your Connection Speed</a></li>
<li><a href="pics_index.htm" target="mainFrame">Las Fotos</a></li>
<li><a href="9-11-08/video.htm" target="mainFrame">Video de las Fotos</a></li>
</ul>

</body>
</html>

sticks464 · Joined: 31 Dec 2006 Posts: 1283

If you want to do this without frames (which I can't find a reference anywhere except the target element in the links), use this page as a guide for each page. Replace <p>Main content goes here</p> with the content of each page, save and name appropiately and your site will have the same background for each page. You can put the css on it's own page and give it a name with the extention css and link to it on each page.
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background:#fff url(images/gray_gradient.gif) repeat-y;
font-size: 1em;
}
#container {
width:100%; /* any width including 100% will work */
color: inherit;
}
#header {
width: 100%;
}
#content {/* use for left sidebar */
color: #000;
float: right;
margin: 0 0 0 -200px; /* adjust margin if borders added */
width: 100%;
}
#content .wrapper {/* use for main content */
margin: 0 0 0 200px;
overflow: hidden;
padding: 10px; /* optional, feel free to remove */
}
#sidebar {
float: left;
width: 200px;
/*padding: 10px;*/
}
.clearer {
height: 1px;
font-size: -1px;
clear: both;
}
#footer {
clear: both;
text-align: center;
font-size: 50%;
font-weight: bold;
}

/*---------- content styles ----------*/
div#eXTReMe {
position:absolute;
bottom:10px;
left:10px;
width:41px;
height:38px;
}

#nav {
margin: 0;
padding-left: 5px;
list-style: none;
width:150px;
}
ul#nav li {
position: relative;
width:160px;
}
ul#nav li a {
display:block;
text-decoration: underline;
color: #f00;
line-height:2;
height:2em;
padding:0 5px;
width:160px;
white-space:nowrap;
}
#nav li a:hover {
text-decoration:underline;
color:#00C;
}
#nav li a:visited{
text-decoration:none;
color:#F00;
}
</style>
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="content">
<div class="wrapper">

<p>Main content goes here</p>

</div>
</div>
<div id="sidebar">

<ul id="nav">
<li><a href="pictures-table.htm" target="mainFrame">Pictures</a></li>
<li><a href="zip_files/wlsetup-web.zip">Windows Live Messenger</a></li>
<li><a href="zip_files/LimeWireWin.zip">LimeWire Pro</a></li>
<li><a href="SpreedTest/index-php.html" target="mainFrame">Test Your Connection Speed</a></li>
<li><a href="pics_index.htm" target="mainFrame">Las Fotos</a></li>
<li><a href="9-11-08/video.htm" target="mainFrame">Video de las Fotos</a></li>
</ul>
<div id="eXTReMe"><a href="http://extremetracking.com/open?login=elqboy">
<img src="http://t1.extreme-dm.com/i.gif" id="EXim" alt="eXTReMe Tracker" /></a>
<script type="text/javascript">
</script><noscript><div id="neXTReMe"><img height="1" width="1" alt=""
src="http://e2.extreme-dm.com/s11.g?login=elqboy&j=n&jv=n" />
</div></noscript>
</div>
</div>
</body>
</html>

Tom Andersen · Joined: 18 Nov 2008 Posts: 20

Straight away your code is wrong. You need to create an unordered list just how Sticks suggests.

If you want to have a better looking menu, as I believe yours is fairly basic, you will find free HTML/CSS menus at CSS Play.

All menus are easy to replicate and there's plenty of tutorials and code sniplets.