CSS internal issue
Page 1 of 1
CSS internal issue
I am making two iframes on my forum page. one controls the other with an internal CSS vertical navigation that I created. though it is not working correctly. www.pimpkings.com is the website. if you want to check what i am talking about. the code I am using is this
INTERNAL Code for the navigation in the iframe page. sorry i did not realize i left out the explanation of this code below. I know what an iframe is hahaa. my bad
thank you ahead of time for dealing with me
INTERNAL Code for the navigation in the iframe page. sorry i did not realize i left out the explanation of this code below. I know what an iframe is hahaa. my bad
- Code:
<head>
<style type="text/css">
*{
margin: 0px;
padding 0px;
}
*/Where the menu will be*/
#menu-container {
width:215px;
margin: 20px auto;
border: none;
}
a
{
display:block;
width:60px;
padding-bottom: 1px;
}
*/Rids of Bullets*/
ul#topnav{
list-style-type: none;
}
*/Sets the viewing size as well as gives space from margin*/
ul#topnav li{
width: 213px;
height: 51px;
margin:5px;
}
*/Sets image size */
ul#topnav li a{
display:block
font-family:Tahoma, Geneva, sans-serif;
font-size:15px;
font-weight:bold;
color:#ffffff;
text-shadow: #fff 1px 1px 1px;
width: 213px;
height: 51px
background-image: url(http://i45.servimg.com/u/f45/17/65/05/15/navima11.gif);
text-align: center;
line-height: 51px;
Text-decoration: none;
}
*/ hover effect to reposition upward do negative tag*/
ul#topnav li a:hover{
background-position: 0px -51px;
}
ul#topnav li a:current {
background-poition: 0px -102px;
}
</style>
</head>
<body>
<div id="menu-container">
<ul id="topnav">
<li id="topnav1"><a href="/h4-thankyou.html" target="iframe" title="Home">Home</a></li>
<li id="topnav2"><a href="/h3-ops.html" target="iframe" title="Services">Services</a></li>
<li id="topnav3"><a href="/h2-application.html" target="iframe" title="About Us">About Us</a></li>
<li id="topnav4"><a href="/h1-contribute.html" target="iframe" title="Contact Us">Contact Us</a></li>
</ul>
</ul>
</div>
</body>
thank you ahead of time for dealing with me
Last edited by nextlevelgaming on July 13th 2012, 12:11 am; edited 1 time in total (Reason for editing : rideem say an error of my explanation.oops)
Re: CSS internal issue
Rideem I have the full code working correctly now. just having an issue on the hover effect. I want it to hover the whole image and change not just the text...code is here
check out what i mean at www.pimpkings.com
- Code:
<head>
<style type="text/css">
* {
margin : 0;
}
/* Where the menu will be*/
#menu-container {
width : 215px;
margin : 20px auto;
border : none;
}
*/Rids of Bullets*/
ul#topnav{
list-style-type : none;
}
/* Sets the viewing size as well as gives space from margin*/
ul#topnav li {
width : 215px;
height : 51px;
margin : 5px;
}
/* Sets image size */
ul#topnav li a {
display : block;
font-family : Tahoma, Geneva, sans-serif;
font-size : 15px;
font-weight : bold;
text-shadow : #0 2px 2px 2px;
color : #006600;
width : 215px;
height : 51px;
background-image : url(http://i45.servimg.com/u/f45/17/65/05/15/navima11.gif);
text-align : center;
line-height : 51px;
text-decoration : none;
}
/* hover effect to reposition upward do negative tag*/
ul#topnav li a:hover{
color: #000000;
text-shadow : #127 2px 2px 2px;
background-position: -1px -53px;
}
ul#topnav li a : link {
background-poition: -1px -103px;
}
</style>
</head>
<body>
<div id="menu-container">
<ul id="topnav">
<li id="topnav1"><a href="/h4-thankyou.html" target="iframe" title=" Home ">Home</a></li>
<li id="topnav2"><a href="/h3-ops.html" target="iframe" title="Services"> Services </a></li>
<li id="topnav3"><a href="/h2-application.html" target="iframe" title="About Us"> About Us </a></li>
<li id="topnav4"><a href="/h1-contribute.html" target="iframe" title="Contact Us"> Contact Us </a></li>
</ul>
</ul>
</div>
<body bgcolor="#1F1F1F">
</body>
</html>
check out what i mean at www.pimpkings.com
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum