Okay, so I want to make a rollover on my navbar. I could find a rollover code of a google search, but I wouldn't know how to use it will all the other CSS and HTML that puts together my navbar. Also, I'd rather just use HTML and CSS instead of any javascript.
All I simply want to do is make this image:
To this:
I was thinking since what I want to do is so simple (just changing the color of the dots), maybe we could just make it show a different image when you hover it with the mouse? But I did a search on that and I don't think it's possible.
From what i've got, how would I add in the rollover? (It would be great if you could actually show me rather than tell me. It always helps when I ask on this forum.)
UL.ListMenuBlock {
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
text-align: left;
}
LI.MenuHeader {
background-image: url('navheadXA.png');
background-repeat: no-repeat;
background-position: top left;
height: 32px;
}
LI.MenuFooter {
background-image: url('navheadG.png');
background-repeat: no-repeat;
background-position: top left;
height: 32px;
}
LI.ListMenuItem {
width: 142px;
height: 21px;
background-image: url('navbg.jpg');
background-repeat: no-repeat;
background-position: top left;
text-align: left;
vertical-align: top;
padding-left: 7px; /* Give some extra space from the left side */
}
LI.ListMenuItem:link, LI.ListMenuItem:visited {
height: 21px; /* this is the width and height of the "navbg.png" */
width: 142px;
background-image: url('navbg.jpg');
background-repeat: no-repeat;
background-position: top left;
text-align: left;
vertical-align: top;
padding-left: 7px; /* preserve the space */
}
LI.ListMenuItem:hover {
height: 21px; /* this is the width and height of the "navbg.png" */
width: 142px;
background-image: url('navbg_OVER.jpg'); /* Add the new image for the mouse over event */
background-repeat: repeat-x; /* repeat horizontaly only if the image doesn't fit */
background-position: top left;
text-align: left;
vertical-align: top;
padding-left: 7px; /* preserve the space */
}
A.ListItemLink:link, A.ListItemLink:visited {
font-weight: bold;
color: #dddddd;
text-decoration: underline;
}
A.ListItemLink:hover {
color: #00ff00;
text-decoration: underline;
}
5. The HTML:
Code:
<body>
<!-- Begin Left Navigation -->
<ul class="ListMenuBlock">
<li class="MenuHeader"></li>
<li class="ListMenuItem"><a class="ListItemLink" href="#">Forum</a></li>
<li class="ListMenuItem"><a class="ListItemLink" href="#">txboxr</a></li>
<li class="ListMenuItem"><a class="ListItemLink" href="#">Staff Team</a></li>
<li class="ListMenuItem"><a class="ListItemLink" href="#">Contact XA</a></li>
<li class="ListMenuItem"><a class="ListItemLink" href="#">Downloads</a></li>
<li class="ListMenuItem"><a class="ListItemLink" href="#">Search</a></li>
<li class="ListMenuItem"><a class="ListItemLink" href="#">XA Chatroom</a></li>
<li class="ListMenuItem"><a class="ListItemLink" href="#">Community</a></li>
<li class="MenuFooter"></li>
</ul>
<!-- End Left Navigation -->
<!-- Begin Content -->
<div class="body" valign="top">
This is my test content for I am just testing.
</div>
<!-- End Content -->
</body>
Thank you SO much! It looks great! http://xboxattacker.freehostia.com/test.html (I'll have it for the index page in a minute so just check there). You even helped me with my "ah!! so confusing thread" Two birds with one stone. Thanks!
I've got a quick question. I made the links smaller so they would fit better because some of them are kind of long. But how do I move them down a few pixels so it lines up with the bottom of the background image rather than the top? http://xboxattacker.freehostia.com
LI.ListMenuItem {
width: 142px;
height: 21px;
background-image: url('navbg.jpg');
background-repeat: no-repeat;
background-position: top left;
text-align: left;
vertical-align: top;
padding-left: 7px; /* Give some extra space from the left side */
padding-top: 3px; /* Change it accordingly to your needs*/
}
if this doesn't do it, then you have to wait for me to get to my computer so I can actually work on it...(but this is not going to happen very soon... )
Yeah, that is exactly what I want it to do. Your new code actually did something different when the rollover image moves 3px down. I probably didn't type it right, but it's ok, it isn't really that important.
I do have a new question which I think is going to be hard to do. You see the big black banner I added, with the navbar looking backgrounds in it? I want to do the same thing as the real navbar with that. Put links in those boxes, and do the rollover thing.
Right now that is a blank banner with those boxes just pasted there in MS paint. But I'm sure there is away to get the boxes there using CSS and HTML and also get links inside those boxes with the rollover image.
To the far left there would be an image called "navbanhead.PNG" then the actual box which is called "navban.PNG" (with the rollover as "navbanover.PNG) and to finish it another small image called "navbanfoot.PNG." Oh, and the big black (empty) banner is called "banner.PNG."
So, do you think it is possible? Basically, I'm trying to do something similar to how www.planetxbox360.com with their home, forum, news, etc. links only using my banner/background/rollover image.
1. I need to know what font you're using for the sidebar menu and i also need the font size; 2. As for the header that's not hard to do since all you have to do is to display the list "inline"; 3. I need the images you're talking so I can actually help you here. Maybe you can attach them and also I will need your html page in order to apply the changes directly to it.
2. Alright, good. Not sure what that means but I know you do.
3.
CSS
Code:
/* *** Xbox Attacker CSS *** *//* *** by Foxx *** */
body {
background-image: url('/images/background.PNG');
background-repeat: repeat;
font-size: 7pt;
font-family: verdana;
}
UL.ListMenuBlock {
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
text-align: left;
}
LI.MenuHeaderXA {
background-image: url('/images/navheadXA.PNG');
background-repeat: no-repeat;
background-position: top left;
height: 32px;
}
LI.MenuHeaderG {
background-image: url('/images/navheadG.PNG');
background-repeat: no-repeat;
background-position: top left;
height: 32px;
}
LI.MenuHeaderS {
background-image: url('/images/navheadS.PNG');
background-repeat: no-repeat;
background-position: top left;
height: 32px;
}
LI.MenuFooter {
background-image: url('/images/navfoot.PNG');
background-repeat: no-repeat;
background-position: top left;
height: 32px;
}
LI.ListMenuItem {
width: 142px;
height: 21px;
background-image: url('/images/navbg.PNG');
background-repeat: no-repeat;
background-position: top left;
text-align: left;
vertical-align: top;
padding-left: 20px; /* Give some extra space from the left side */
}
LI.ListMenuItem:link, LI.ListMenuItem:visited {
height: 21px; /* this is the width and height of the "navbg.PNG" */
width: 142px;
background-image: url('/images/navbg.PNG');
background-repeat: no-repeat;
background-position: top left;
text-align: top;
vertical-align: top;
padding-left: 20px; /* preserve the space */
font-weight: bold;
color: #dddddd;
text-decoration: underline;
margin-top: 3px;
}
LI.ListMenuItem:hover {
height: 21px; /* this is the width and height of the "navbg.png" */
width: 142px;
background-image: url('/images/navbgover.PNG'); /* Add the new image for the mouse over event */
background-repeat: no-repeat; /* repeat horizontaly only if the image doesn't fit */
background-position: top left;
text-align: left;
vertical-align: top;
padding-left: 20px; /* preserve the space */
color: #00ff00;
text-decoration: underline;
margin-top: 3px;
}
A.ListItemLink:link, A.ListItemLink:visited {
font-weight: bold;
color: #dddddd;
text-decoration: underline;
}
A.ListItemLink:hover {
color: #00ff00;
text-decoration: underline;
}
HTML
HTML Code:
<html><head><!-- Property of Foxx. Layout and all content of Foxx. Not for your own use. --><title>Xbox 360 Cheats, Guides, and News by XboxAttacker</title><LINK href="/css/xathemesheet.css" rel="stylesheet" type="text/css"></head><body><img src="/images/bannerwnav.PNG"><br><br><!-- Begin Left Navigation --><ul class="ListMenuBlock"><li class="MenuHeaderXA"></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Forum</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">txboxr</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Staff Team</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Contact XA</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Downloads</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Search</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">XA Chatroom</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Community</a></li></ul><ul class="ListMenuBlock"><li class="MenuHeaderG"></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Games List</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">New Releases</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Upcoming Games</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Previews</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Reviews</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Walkthroughs</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Cheats</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Achievements</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Screenshots</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Game Videos</a></li></ul><ul class="ListMenuBlock"><li class="MenuHeaderS"></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Xbox 360 Hardware</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Xbox 360 Core</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Xbox 360 Pro</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Xbox 360 Elite</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Halo 3 Edition</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Xbox 360 Accessories</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Hardware Reviews</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Manufacturers</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Pictures</a></li><li class="ListMenuItem"><a class="ListItemLink" href="#">Hardware Videos</a></li><li class="MenuFooter"></li></ul><!-- End Left Navigation --><!-- Begin Content --><div class="body" valign="top">
This is my test content for I am just testing.
</div><!-- End Content --></body></html>
/***--------------------------------------------------------- GLOBAL DECLARATIONS ***/
* {
text-align: left;
vertical-align: top;
}
BODY {
background-image: url("../images/background.PNG");
background-repeat: repeat;
font-family: Verdana, Sans-Serif;
font-size: 7pt;
margin: auto auto auto auto; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
text-align: center !important;
vertical-align: top;
}
/***--------------------------------------------------------- PAGE LAYOUT ***/
DIV.PageLayoutManager {
width: 989px; /* this is the width of your banner image */
height: auto;
margin: auto auto auto auto; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
}
/*
Will split the page content in two sides:
- Page Left Sidebar -> width: 145 px;
- Main Page Content -> width: 844 px;
*/
/***--------------------------------------------------------- PAGE HEADER CONTENT ***/
DIV.PageHeaderManager {
width: 100%;
height: auto;
margin: 20px 0px 0px 0px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
clear: both;
}
DIV.HeaderWrapper {
width: 100%;
height: 157px !important; /* This is the "bannerwnav.jpg" height so do not go beyond this height !!! */
background-image: url("../images/bannerwnav.jpg");
background-repeat: no-repeat;
background-position: top left;
text-align: left;
vertical-align: top;
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
}
TABLE#PageTopMenuWrapper_Table {
width: 100%;
height: auto;
text-align: left;
vertical-align: bottom;
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
}
TD.HeaderContentWrapper_Cell {
width: 100%;
height: 122px;
text-align: left;
vertical-align: middle;
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
}
TD.TopMenuWrapper_Cell {
width: 100%;
height: 35px; /* Same width as the List Item */
text-align: right !important;
vertical-align: top !important;
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
}
/***--------------------------------------------------------- PAGE HEADER CONTENT -> TOP CONTENT ***/
H3.SiteTitle {
font-family: Georgia, Times New Roman, Serif;
font-size: 16pt;
color: #FFA500; /* Orange */
margin-left: 30px;
}
TD.HeaderContentWrapper_Cell span {
font-size: 10pt;
color: #eee;
margin-left: 60px;
}
/***--------------------------------------------------------- PAGE HEADER CONTENT -> TOP MENU ***/
DIV.TopMenuWrapper {
width: auto;
height: auto;
text-align: right !important;
vertical-align: top;
margin: 0px 15px 0px 0px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
}
DIV.TopMenuItem {
width: 142px;
height: 21px;
background-image: url("../images/navbg.jpg");
background-repeat: repeat-x;
background-position: top left;
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
text-align: center;
vertical-align: middle;
float: right;
}
DIV.TopMenuItem:link, DIV.TopMenuItem:visited {
width: 142px;
height: 21px;
background-image: url("../images/navbg.jpg");
background-repeat: no-repeat;
background-position: top left;
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
text-align: center;
vertical-align: middle;
float: right;
}
DIV.TopMenuItem:hover {
width: 142px;
height: 21px;
background-image: url("../images/navbgover.PNG");
background-repeat: no-repeat;
background-position: top left;
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
text-align: center;
vertical-align: middle;
float: right;
}
A.TopMenuListItemLink:link, A.TopMenuListItemLink:visited {
font-weight: bold;
color: #dddddd;
text-decoration: underline;
}
A.TopMenuListItemLink:hover {
color: #00ff00;
text-decoration: underline;
}
/***--------------------------------------------------------- PAGE MAIN CONTENT ***/
DIV.PageContentManager {
width: auto;
height: auto;
margin-top: 10px; /* Set the space between the "PAGE HEADER" and the "MAIN PAGE CONTENT" */
clear: both;
}
/***--------------------------------------------------------- PAGE MAIN CONTENT -> SIDEBAR CONTENT ***/
DIV.PageLeftSidebar {
width: 145px;
height: auto;
text-align: left;
vertical-align: top;
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
float: left !important;
}
DIV.SidebarWrapper {
width: auto;
height: auto;
text-align: left;
vertical-align: top;
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
}
.separator { /* ListItem vertical alignment hack */
margin-top: 2px !important;
}
UL.ListMenuBlock {
padding: 0px 0px 0px 0px; /* T R B L */
margin: 0px;
text-align: left;
list-style-type: none; /* Do not remove this. Otherwise FF will show the bullets */
}
LI.MenuHeaderXA {
background-position: left top;
background-image: url("../images/navheadXA.PNG");
background-repeat: no-repeat;
height: 32px;
}
LI.MenuHeaderG {
background-position: left top;
background-image: url("../images/navheadG.PNG");
background-repeat: no-repeat;
height: 32px;
}
LI.MenuHeaderS {
background-position: left top;
background-image: url("../images/navheadS.PNG");
background-repeat: no-repeat;
height: 32px;
}
LI.MenuFooter {
background-position: left top;
background-image: url("../images/navfoot.PNG");
background-repeat: no-repeat;
height: 32px;
}
LI.ListMenuItem {
background-position: left top;
padding-left: 20px;
background-image: url("../images/navbg.jpg");
vertical-align: middle;
width: 142px;
background-repeat: no-repeat;
height: 21px;
text-align: left;
}
LI.ListMenuItem:link, LI.ListMenuItem:visited {
background-position: left top;
padding-left: 20px;
background-image: url("../images/navbg.jpg");
vertical-align: middle;
width: 142px;
background-repeat: no-repeat;
height: 21px;
}
LI.ListMenuItem:hover {
background-position: left top;
padding-left: 20px;
background-image: url("../images/navbgover.PNG");
vertical-align: middle;
width: 142px;
background-repeat: no-repeat;
height: 21px;
text-align: left;
}
A.ListItemLink:link, A.ListItemLink:visited {
font-weight: bold;
color: #dddddd;
text-decoration: underline;
}
A.ListItemLink:hover {
color: #00ff00;
text-decoration: underline;
}
/***--------------------------------------------------------- PAGE CONTENT ***/
DIV.MainPageContent {
width: 844px;
height: auto;
text-align: left;
vertical-align: top;
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
float: left !important;
clear: both;
}
DIV.MainContentWrapper {
width: 100%;
height: auto;
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px 5px 5px 5px; /* T R B L */
}
SPAN.ContentText {
font-family: Verdana, Sans-Serif;
font-size: 10pt;
color: #FFA500; /* Orange */
}
I couldn't find the images you used in the header for the menu so I used those ones from the sidebar.
If you plan me to help you further please do not modify the css or the html...I will do it (I like to keep my code clean and xhtml valid. A lot of people don't like that), otherwise I will not be able to help you while the code and the css grow (hope you understand my point of view)
07-23-2007, 04:35 PM
)