The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

CSS internal issue

View previous topic View next topic Go down

CSS internal issue

Post by nextlevelgaming on July 12th 2012, 11:07 pm

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
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 Very Happy


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)

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Re: CSS internal issue

Post by nextlevelgaming on July 13th 2012, 12:09 am

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

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

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Re: CSS internal issue

Post by nextlevelgaming on July 14th 2012, 1:25 am

bump

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum