 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
elqboy
Joined: 07 Nov 2008
Posts: 6
|
 Posted: Mon Nov 17, 2008 8:31 pm CSS cuztome links problem |
 |
|
|
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: 1284
|
| Posted: Mon Nov 17, 2008 11:23 pm |
|
|
|
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: 1284
|
| Posted: Tue Nov 18, 2008 5:02 am |
|
|
|
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">
<!--main page content goes here -->
<p>Main content goes here</p>
</div>
</div>
<div id="sidebar">
<!--sidebar content, menu goes here -->
<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"><!--
var EXlogin='elqboy' // Login
var EXvsrv='s11' // VServer
EXs=screen;EXw=EXs.width;navigator.appName!="Netscape"?
EXb=EXs.colorDepth:EXb=EXs.pixelDepth;
navigator.javaEnabled()==1?EXjv="y":EXjv="n";
EXd=document;EXw?"":EXw="na";EXb?"":EXb="na";
EXd.write("<img src=http://e2.extreme-dm.com",
"/"+EXvsrv+".g?login="+EXlogin+"&",
"jv="+EXjv+"&j=y&srw="+EXw+"&srb="+EXb+"&",
"l="+escape(parent.document.referrer)+" height=1 width=1>");//-->
</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
|
| Posted: Tue Nov 18, 2008 8:37 am |
|
|
|
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. |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
