Web Analytics Made Easy - StatCounter Rollover button for CSS - CodingForum

Announcement

Collapse
No announcement yet.

Rollover button for CSS

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Rollover button for CSS

    Hello Everyone!

    I need a little advise on how to get my button for css working correctly. Moreso, the layout. It seems the button itself and rollover function work great (thanks to Aerospace) but it seems the layout is not the way it should be. The images should be stuck together.

    Here's the link: (http://www.michelbayard.bobos.ca/lbp/index.html)

    Any help and/or advise would be greatly appreciated.

    Thanks in advance,

    mbay
    Tags: None
  • #2
    Your images seem to missing at the moment. What type of layout are you trying to achieve? Are you trying to get a vertical menu that uses CSS rollovers? You could try using an ordered or unordered list.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment

    • #3
      Hi Aerospace!

      Thanks for replying!

      Actually, the images aren't missing - they're all there.

      This is the page I want to re-construct:

      http://www.michelbayard.bobos.ca/lbp/indexold.html

      And this is the new one:

      http://www.michelbayard.bobos.ca/lbp/index.html

      It seems once I add the css rollover, that my image breaks to a different line, which it shouldn't.

      I know you mentionned unordered-lists. That would great! It would just have to be horizontal so that images follow one-another.

      Thanks for any help in advance,

      mbay

      Comment

      • #4
        You seem to have a <br /> tag after your first image. I still don't see any images, their alts are appearing for me on both layouts. Here is an example of a horizontal list http://css.maxdesign.com.au/listutor...tal_master.htm Here is a site where you can choose of a whole slew of menus http://www.stunicholls.myby.co.uk/menus/index.html
        ||||If you are getting paid to do a job, don't ask for help on it!||||

        Comment

        • #5
          Thanks for the help Aerospace!

          I will look into this to help me out!

          Thanks again,

          mbay

          Comment

          • #6
            Hello Everyone!

            I am in need of help with using "un-ordered lists" and images within the "list-item". I can't seem to align properly what I want done.

            The url for the page i'm attempting to reconstruct is:

            http://www.michelbayard.bobos.ca/lbp/indexold.html

            The new one is:

            http://www.michelbayard.bobos.ca/lbp/index.html

            I believe it must have to do with the css and I've been studying code for over 4hrs. If anyone has any idea, i'd really appreciate it.

            Thanks in advance!

            Comment

            • #7
              Your images still don't appear for me. Draw a picture what type of navigation you are looking for and attach the images, I might be able to work something up.
              ||||If you are getting paid to do a job, don't ask for help on it!||||

              Comment

              • #8
                Hi Aerospace!

                Thanks for replying.

                I've included a folder with images and a markup.

                Thanks again for any help.
                Attached Files

                Comment

                • #9
                  How is this?
                  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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
background-color:#FFFFFF;
color:#FFFFFF;
}
a img {
border:0;
}
#container {
width:760px;
height:230px;
margin:auto;
/*Hide from IE Mac\*/
position:absolute;
top:50%;
left:50%;
margin-top:-115px; /*this is half the height of the container*/
margin-left:-380px; /*this is half the width of the container*/
/*End Hide*/
}
#content {
height:187px;
background-color:#661E0C;
border:10px solid #E28A49;
border-width:10px 11px 0 10px;
border-color:#E28A49;
}
#navbar ul {
margin:0;
padding:0;
list-style:none;
}
#navbar ul li {
float:left;
line-height:0;
font-size:0;
height:33px;
}
a.roll-1, a.roll-1:link {
display:block;
height:33px;
width:82px;
background:url(img/temp_03.gif) no-repeat;
}
a.roll-1:hover {
background:url(img/temp_03_ov.gif) no-repeat;
}
a.roll-2, a.roll-2:link {
display:block;
height:33px;
width:92px;
background:url(img/temp_05.gif) no-repeat;
}
a.roll-2:hover {
background:url(img/temp_05_ov.gif) no-repeat;
}
.nodisplay {
visibility:hidden;
}
</style>
</head>

<body>
<div id="container">
	<div id="content"><h1>Your content here</h1></div>
	<div id="navbar">
		<ul>
			<li><img src="img/temp_02.gif" width="153" height="33" alt="" /></li>
			<li><a href="#" class="roll-1"><img src="img/temp_03_ov.gif" width="82" height="33" alt="" class="nodisplay" /></a></li>
			<li><img src="img/temp_04.gif" width="251" height="33" alt="" /></li>
			<li><a href="#" class="roll-2"><img src="img/temp_05_ov.gif" width="92" height="33" alt="" class="nodisplay" /></a></li>
			<li><img src="img/temp_06.gif" width="182" height="33" alt="" /></li>
		</ul>
	</div>
</div>
</body>
</html>
                  ||||If you are getting paid to do a job, don't ask for help on it!||||

                  Comment

                  • #10
                    Hi Aerospace!

                    Thank you soooo much for helping me out with the coding. It works great!

                    I was studying your code a little and came up with the one of the conclusions for my code not working; the visibility of the image. I see you put the image as part of the list-item but made it hidden which kept the aspect ratio the same.
                    Unfortunately, while reviewing information on w3 I did not see an example of this , but I suppose it's common sense.

                    So thanks again, Aerospace, I really really appreciate the time you took.

                    mbay

                    Comment

                    • #11
                      I did that so it acts as an image preloader without using javascript.
                      ||||If you are getting paid to do a job, don't ask for help on it!||||

                      Comment

                      Previous template Next
                      Working...
                      X