Hi,
How can I make this rollover image working in a div? I have two images that have the same size and the same positioning.
The normal state is:
nav_menu.gif
and the rollover state is:
nav_menuR.gif
In the HTML:
<div class="menu" style="position:absolute;
left:182px; top:194px; width:92px; height:47px;
z-index:2; visibility: default;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"menu.html">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/nav_menu.gif" width="92"
height="47" border="0"></a></div>
and the external CSS:
#menu:hover {
position:relative;
display:block;
left:182px;
top:194px;
width:92px;
height:47px;
z-index:2;
background-image: url(../images/nav_menuR.gif) 0 0 no-repeat;
}
Thanks.
-jmshttp://bonrouge.com/br.php?page=rollover2Thanks Bon Rouge,
I used the code, plugged in the width and height of my images, had to modify some things (by trail and error) so it works on IE, but doesn't work on Mozilla. I changed #rollover2 margin to 0px because everything was appearing about 50px to the right of where I wanted it. On Mozilla, the normal and rollover state still appear about 50 px to the right. Also, I use Dreamweaver and I don't see the image displaying, until I click on Preview in Browser.
Can you tell me where I'm wrong? Thanks.
/** rollover 2 (pure css) **/
#rollover2 a {
text-decoration:none;
display:block;
height:100%;
}
* html #rollover2 a {
width:100%;
}
#rollover2 {
width:92px;
margin:0px;
}
#rollover2 li {
float:left;
height:47px;
width:92px;
}
#rollover2 li#a a{
background-image:url(../images/nav_menu.gif);
}
#rollover2 li#a a:hover {
background-image:url(../images/nav_menuR.gif);
}
#rollover2 a img {
border:0;
width:0;
height:0px;
margin-top:0;
font-size:0;
overflow:hidden;
}I apologise - I think I forgot to include a tiny bit of the relevant code... Add this : #rollover2 {
width:92px;
margin:0px;
padding:0;
}
I think that should sort you out.
As for Dreamweaver... there's nothing I can do about what that shows you.there is a big black dot slightly above and to the left of the rollover image on Mozilla only. It stays there constantly. Does the repeating of the:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"nav_menuR.gif" alt="whisky1"> in the HTML, and
#rollover2 li#a a:hover {
background-image:url(../images/nav_menuR.gif);
} in the CSS have anything to do with it? Also the ALT text is not appearing on IE as it would usually do, so that means there might be something in the HTML?
This is the HTML:
<ul id="rollover2">
<li id="a"><a href=http://www.webdeveloper.com/forum/archive/index.php/"menu.html"><img src="nav_menuR.gif" alt="whisky1"></a></li>
</ul> and the ul is within a div.
-jmsAs you hadn't mentioned the big black dot before, I assumed you'd figured it out for yourself (I guess I should add this to the code in my demo too...). You'll need this : #rollover2 {
list-style-type:none;
}
The image is on the page twice - once in the html and once in the CSS - the one in the CSS would never show alt text anyway while the one in the html is hidden - its job is to preload the image - not to be seen. Sorry, but you'll see no alt text with this method.
Actually, looking again at the code you have, the pre-loading probably won't work anyway - for two reasons. Firstly, you've changed my code. The image needs to have some height to be loaded up - the 1px height I give to the image is hidden by the negative 1px of top margin. Secondly, it looks like the paths you have to the image are different. They need to be paths to the same image in the same place for the browser to identify it as the same thing. The image in the html is loaded up but invisible when you open the page. When you hover over the image to show the background image, the browser then has to retrieve that image from the server unless it's already cached. If it's not cached you'll see a slight pause between the hover and the display of the hover image. If the browser recognises that the image it needs now is already loaded then there is no delay - you get a seamless rollover.
I hope this helps.I changed the height and margin-top. As for the path of the images, I don't know what more to do. I know this is neccessary ../images/ otherwise just the image name wouldn't work. The margin I have to leave at zero, otherwise if it's auto it gets messed up in Mozilla and IE. Should the preload work now?#rollover2 a {
text-decoration:none;
display:block;
height:100%;
}
* html #rollover2 a {
width:100%;
}
#rollover2 {
list-style-type:none;
width:150px;
margin:0px;
padding:0;
}
#rollover2 li {
float:left;
height:47px;
width:92px;
}
#rollover2 li#a a{
background-image:url(../images/nav_menu.gif);
}
#rollover2 li#a a:hover {
background-image:url(../images/nav_menuR.gif);
}
#rollover2 a img {
border:0;
width:0px;
height:1px;
margin-top:-1px;
font-size:0;
overflow:hidden;
}Can you give me a link to this page you're working on? It would be easy to give you a good answer then.<!-- m --><a class="postlink" href="http://www.xn3ct.net/SampleSite02/index.html">http://www.xn3ct.net/SampleSite02/index.html</a><!-- m -->
And this is the external CSS:
/* CSS Document */
div.container {
position: relative;
margin: 0 auto;
width: 1024px;
height: 1230px;
text-align: left;
top: 0px;
left: 0px;
visibility: visible;
z-index: 1;
}
/** rollover 2 (pure css) **/
#rollover2 a {
text-decoration:none;
display:block;
height:100%;
}
* html #rollover2 a {
width:100%;
}
#rollover2 {
list-style-type:none;
width:150px;
margin:0px;
padding:0;
}
#rollover2 li {
float:left;
height:47px;
width:92px;
}
#rollover2 li#a a{
background-image:url(../images/nav_menu.gif);
}
#rollover2 li#a a:hover {
background-image:url(../images/nav_menuR.gif);
}
#rollover2 a img {
border:0;
width:0px;
height:1px;
margin-top:-1px;
font-size:0;
overflow:hidden;
}OK. Please have a look here : <!-- m --><a class="postlink" href="http://bonrouge.com/test/taste.htm">http://bonrouge.com/test/taste.htm</a><!-- m -->.
I've cleaned it up for you. I hope this is easier to work with.
(You might notice I've removed the table - nasty things they are).Thanks for making the effort to go thus far. Are you using the same CSS code (that I posted) on the example on your site?
I tested my site's code with your example's code, but things are not working out well: restaurant veers off to the right and menu jumps down and to the left. So I was thinking that you might've changed the CSS.
Shouldn't ul have id?
What is <div id="header">?
Thanks.
-jmsRight, I'm sorry - I'm assuming too much. You can find a css file by looking in the head. In my head you'll find this line : <link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"main1.css">That means that if you put'main1.css' onto the end of the directory address in your browser, you'll find the file. To put it another way, it's here : <!-- m --><a class="postlink" href="http://bonrouge.com/test/main1.css">http://bonrouge.com/test/main1.css</a><!-- m -->.
Alternatively, you can use Firefox and install the WebDev toolbar which points you to the css file.Here it is:
<!-- m --><a class="postlink" href="http://www.xn3ct.net/SampleSite02/index.html">http://www.xn3ct.net/SampleSite02/index.html</a><!-- m -->
Now, since I would want the website to be centered, especially if the viewer's monitor is set at high resolution, I guess I would have to play with the coordinates of container and its margin. Or, instead of playing with margins, can I call the container to be centered at all times? Thanks.
-jmsExcellent!
You'll just need to give the container a width - if that's how wide you want the page (your header width), I'd suggest 680px.
How can I make this rollover image working in a div? I have two images that have the same size and the same positioning.
The normal state is:
nav_menu.gif
and the rollover state is:
nav_menuR.gif
In the HTML:
<div class="menu" style="position:absolute;
left:182px; top:194px; width:92px; height:47px;
z-index:2; visibility: default;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"menu.html">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/nav_menu.gif" width="92"
height="47" border="0"></a></div>
and the external CSS:
#menu:hover {
position:relative;
display:block;
left:182px;
top:194px;
width:92px;
height:47px;
z-index:2;
background-image: url(../images/nav_menuR.gif) 0 0 no-repeat;
}
Thanks.
-jmshttp://bonrouge.com/br.php?page=rollover2Thanks Bon Rouge,
I used the code, plugged in the width and height of my images, had to modify some things (by trail and error) so it works on IE, but doesn't work on Mozilla. I changed #rollover2 margin to 0px because everything was appearing about 50px to the right of where I wanted it. On Mozilla, the normal and rollover state still appear about 50 px to the right. Also, I use Dreamweaver and I don't see the image displaying, until I click on Preview in Browser.
Can you tell me where I'm wrong? Thanks.
/** rollover 2 (pure css) **/
#rollover2 a {
text-decoration:none;
display:block;
height:100%;
}
* html #rollover2 a {
width:100%;
}
#rollover2 {
width:92px;
margin:0px;
}
#rollover2 li {
float:left;
height:47px;
width:92px;
}
#rollover2 li#a a{
background-image:url(../images/nav_menu.gif);
}
#rollover2 li#a a:hover {
background-image:url(../images/nav_menuR.gif);
}
#rollover2 a img {
border:0;
width:0;
height:0px;
margin-top:0;
font-size:0;
overflow:hidden;
}I apologise - I think I forgot to include a tiny bit of the relevant code... Add this : #rollover2 {
width:92px;
margin:0px;
padding:0;
}
I think that should sort you out.
As for Dreamweaver... there's nothing I can do about what that shows you.there is a big black dot slightly above and to the left of the rollover image on Mozilla only. It stays there constantly. Does the repeating of the:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"nav_menuR.gif" alt="whisky1"> in the HTML, and
#rollover2 li#a a:hover {
background-image:url(../images/nav_menuR.gif);
} in the CSS have anything to do with it? Also the ALT text is not appearing on IE as it would usually do, so that means there might be something in the HTML?
This is the HTML:
<ul id="rollover2">
<li id="a"><a href=http://www.webdeveloper.com/forum/archive/index.php/"menu.html"><img src="nav_menuR.gif" alt="whisky1"></a></li>
</ul> and the ul is within a div.
-jmsAs you hadn't mentioned the big black dot before, I assumed you'd figured it out for yourself (I guess I should add this to the code in my demo too...). You'll need this : #rollover2 {
list-style-type:none;
}
The image is on the page twice - once in the html and once in the CSS - the one in the CSS would never show alt text anyway while the one in the html is hidden - its job is to preload the image - not to be seen. Sorry, but you'll see no alt text with this method.
Actually, looking again at the code you have, the pre-loading probably won't work anyway - for two reasons. Firstly, you've changed my code. The image needs to have some height to be loaded up - the 1px height I give to the image is hidden by the negative 1px of top margin. Secondly, it looks like the paths you have to the image are different. They need to be paths to the same image in the same place for the browser to identify it as the same thing. The image in the html is loaded up but invisible when you open the page. When you hover over the image to show the background image, the browser then has to retrieve that image from the server unless it's already cached. If it's not cached you'll see a slight pause between the hover and the display of the hover image. If the browser recognises that the image it needs now is already loaded then there is no delay - you get a seamless rollover.
I hope this helps.I changed the height and margin-top. As for the path of the images, I don't know what more to do. I know this is neccessary ../images/ otherwise just the image name wouldn't work. The margin I have to leave at zero, otherwise if it's auto it gets messed up in Mozilla and IE. Should the preload work now?#rollover2 a {
text-decoration:none;
display:block;
height:100%;
}
* html #rollover2 a {
width:100%;
}
#rollover2 {
list-style-type:none;
width:150px;
margin:0px;
padding:0;
}
#rollover2 li {
float:left;
height:47px;
width:92px;
}
#rollover2 li#a a{
background-image:url(../images/nav_menu.gif);
}
#rollover2 li#a a:hover {
background-image:url(../images/nav_menuR.gif);
}
#rollover2 a img {
border:0;
width:0px;
height:1px;
margin-top:-1px;
font-size:0;
overflow:hidden;
}Can you give me a link to this page you're working on? It would be easy to give you a good answer then.<!-- m --><a class="postlink" href="http://www.xn3ct.net/SampleSite02/index.html">http://www.xn3ct.net/SampleSite02/index.html</a><!-- m -->
And this is the external CSS:
/* CSS Document */
div.container {
position: relative;
margin: 0 auto;
width: 1024px;
height: 1230px;
text-align: left;
top: 0px;
left: 0px;
visibility: visible;
z-index: 1;
}
/** rollover 2 (pure css) **/
#rollover2 a {
text-decoration:none;
display:block;
height:100%;
}
* html #rollover2 a {
width:100%;
}
#rollover2 {
list-style-type:none;
width:150px;
margin:0px;
padding:0;
}
#rollover2 li {
float:left;
height:47px;
width:92px;
}
#rollover2 li#a a{
background-image:url(../images/nav_menu.gif);
}
#rollover2 li#a a:hover {
background-image:url(../images/nav_menuR.gif);
}
#rollover2 a img {
border:0;
width:0px;
height:1px;
margin-top:-1px;
font-size:0;
overflow:hidden;
}OK. Please have a look here : <!-- m --><a class="postlink" href="http://bonrouge.com/test/taste.htm">http://bonrouge.com/test/taste.htm</a><!-- m -->.
I've cleaned it up for you. I hope this is easier to work with.
(You might notice I've removed the table - nasty things they are).Thanks for making the effort to go thus far. Are you using the same CSS code (that I posted) on the example on your site?
I tested my site's code with your example's code, but things are not working out well: restaurant veers off to the right and menu jumps down and to the left. So I was thinking that you might've changed the CSS.
Shouldn't ul have id?
What is <div id="header">?
Thanks.
-jmsRight, I'm sorry - I'm assuming too much. You can find a css file by looking in the head. In my head you'll find this line : <link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"main1.css">That means that if you put'main1.css' onto the end of the directory address in your browser, you'll find the file. To put it another way, it's here : <!-- m --><a class="postlink" href="http://bonrouge.com/test/main1.css">http://bonrouge.com/test/main1.css</a><!-- m -->.
Alternatively, you can use Firefox and install the WebDev toolbar which points you to the css file.Here it is:
<!-- m --><a class="postlink" href="http://www.xn3ct.net/SampleSite02/index.html">http://www.xn3ct.net/SampleSite02/index.html</a><!-- m -->
Now, since I would want the website to be centered, especially if the viewer's monitor is set at high resolution, I guess I would have to play with the coordinates of container and its margin. Or, instead of playing with margins, can I call the container to be centered at all times? Thanks.
-jmsExcellent!
You'll just need to give the container a width - if that's how wide you want the page (your header width), I'd suggest 680px.