Hello friends. I am trying to create this effect (<!-- m --><a class="postlink" href="http://www.biomedsolutions.com/Y/">http://www.biomedsolutions.com/Y/</a><!-- m -->) in *pure* CSS using only this image (<!-- m --><a class="postlink" href="http://www.biomedsolutions.com/Y/bg_nav.jpg">http://www.biomedsolutions.com/Y/bg_nav.jpg</a><!-- m -->) and this image (<!-- m --><a class="postlink" href="http://www.biomedsolutions.com/Y/bg_over.gif">http://www.biomedsolutions.com/Y/bg_over.gif</a><!-- m -->) as interchangeable div backgrounds. (very small images, look closely and carefully).
I want to have raw centered text embedded inside each of the div's which would change to white on mouseover. It is very important that the user would be able to click the entire div as if it were an image and not just the text.
It is also very important to get a code that works successfully in as many browsers as possible.
I would appreciate it if someone could supply me with a dummy script in which I could alter. I know how to achieve this effect using CSS + tables but I want to stick to pure CSS and have not a clue how to program it efficiently. Please give me a push in the right direction. Thanks so much for any help!Here's a start:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic css menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
background:#eee;
font-size:80%;
}
#menu {
list-style-type: none;
}
#menu a {
display:block;
width:8em;
padding:6px;
background:#fff url(bg_nav.jpg) repeat-x bottom;
color:#333;
text-align:center;
vertical-align:bottom;
text-decoration:none;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:smaller;
}
#menu a:hover {
background:#555 url(bg_over.gif) repeat-x bottom;
color:#fff;
}
-->
</style>
</head>
<body>
<ul id="menu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">HOME</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">COMPANY</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">CONTACT</a></li>
</ul>
</body>
</html>Thanks a lot, extremely helpful. That will work out even better because I won't even have to use a secondary mousover image since it is just a solid color to begin with.
Sorry, I don't mean to come off as a newb (my knowledge of CSS is rather limited), but how would I go about making the following alterations to the (practically completed) script that you so kindly supplied.
1.) I need to align the menu buttons horizontally instead of vertically w/ a 1 pixel spacing to the right of each button (no top, bottom, or left spacing).
2.) Also, each button needs to be a different specified size. There is a total of 8 buttons that will span a width of 745 pixels and a height of 23 pixels. First to last buttons being (53px, 90px, 80px, 115px, 116px, 94px, 99px, 90px, + the 8 pixels that would be spaced between buttons). I can fill in those variables myself, but I need to know the correct format in which to do so.
Once, I figure out how to apply these final alterations I will be able to complete and launch my menu. I would really appreciate it if someone could give me a blank code (based upon the code above) that will meet my requirements. Thanks again.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic css menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
* {margin:0;padding:0;}
body {
background:#ddd;
font-size:80%;
}
#menu {
width:745px;
list-style-type: none;
}
#menu li {
float:left;
}
#menu a {
display:block;
height:23px;
margin-right:1px;
background:#fff url(bg_nav.jpg) repeat-x bottom;
color:#333;
text-align:center;
line-height:23px;
vertical-align:bottom;
text-decoration:none;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:9px;
}
#menu a:hover {
background:#555 url(bg_over.gif) repeat-x bottom;
color:#fff;
}
#m1 {width:53px;}#m2 {width:90px;}#m3 {width:80px;}#m4 {width:115px;}#m5 {width:116px;}#m6 {width:94px;}#m7 {width:99px;}#m8 {width:90px;margin-right:0;}
-->
</style>
</head>
<body>
<ul id="menu">
<li><a id="m1" href=http://www.webdeveloper.com/forum/archive/index.php/"#">HOME</a></li>
<li><a id="m2" href=http://www.webdeveloper.com/forum/archive/index.php/"#">COMPANY</a></li>
<li><a id="m3" href=http://www.webdeveloper.com/forum/archive/index.php/"#">CONTACT</a></li>
<li><a id="m4" href=http://www.webdeveloper.com/forum/archive/index.php/"#">XXXXX</a></li>
<li><a id="m5" href=http://www.webdeveloper.com/forum/archive/index.php/"#">XXXXX</a></li>
<li><a id="m6" href=http://www.webdeveloper.com/forum/archive/index.php/"#">XXXX</a></li>
<li><a id="m7" href=http://www.webdeveloper.com/forum/archive/index.php/"#">XX</a></li>
<li><a id="m8" href=http://www.webdeveloper.com/forum/archive/index.php/"#">XX</a></li>
</ul>
</body>
</html>Fang, what attribute is keeping the links from indenting?
I am trying to do the same thing but mine are indented.
<!-- m --><a class="postlink" href="http://web.ics.purdue.edu/~liugc/temp/menu.html">http://web.ics.purdue.edu/~liugc/temp/menu.html</a><!-- m -->
thank you.oh, never mind. I got it.
margin-left: 0;
padding-left: 0;Fang (or any knowledgeable member),
I am experiencing several problems with this style-sheet (<!-- m --><a class="postlink" href="http://www.tillc.com/BIO_CSS_TEST2.htm">http://www.tillc.com/BIO_CSS_TEST2.htm</a><!-- m -->). Please help me remedy these following problems.
1.) I experience the following problems in the listed browsers using Window's operating system.
- Internet Explorer 6.0 (Flawless)
- Opera 8.0 (Flawless)
- Netscape 8.0 (Flawless)
- FireFox (Flawless)
2.) I experience the following problems in the listed browsers using Mac OSX Operating System.
- Internet Explorer (Flawless)
- Opera (Spacing Problem Between div's) (<!-- m --><a class="postlink" href="http://www.tillc.com/Biomed_New/problemMapOut1.jpg">http://www.tillc.com/Biomed_New/problemMapOut1.jpg</a><!-- m -->). Looks like the menu isn't even inside the specified div.
- Netscape (Flawless)
- Safari (1 pixel Spacing Problem) (<!-- m --><a class="postlink" href="http://www.tillc.com/Biomed_New/problemMapOut.jpg">http://www.tillc.com/Biomed_New/problemMapOut.jpg</a><!-- m -->)
3.) The 1 pixel spacing to the right of each button is not visible in Safari (OSX). It looks like the spacing is still there, but it is showing the background *image* of the menu, instead of revealing the darker background *color* of the div beneath it (See screenshot taken in Safari) (<!-- m --><a class="postlink" href="http://www.tillc.com/Biomed_New/problemMapOut.jpg">http://www.tillc.com/Biomed_New/problemMapOut.jpg</a><!-- m -->) .
If anyone can help me solve this problem , I would greatly appreciate it. By using pure CSS, instead of the nav images that I originally planned, I was able to cut the load time by 2/3. Now, I just need to get it cleaned up and fully functional.Add as first rule:* {margin:0;padding:0;}
this may require specifically setting other margins and paddings, notably headings (h1-h6)Fang,
Thanks, that fixed the left indent on all browsers.
In Safari [only], the menu falls 8 pixels short (737px). Meaning, that it is not properly executing the {margin-right:1px} command. Is there some sort of alternate or additional command that can be used?I don't have a Mac here, but try using border instead of margin
#menu a {
border-right:1px solid #ccc;
/* margin-right:1px; */
#m8 {
width:90px;
border-right:0;
/* margin-right:0; */
}Hahahaha. Oh, wow. That worked great!
One *final* question for the CSS scholar. I don't need to apply this feature to the current menu, but assuming I did......
How would I add *multiple* hidden drop down menus w/ a 1 pixel border and 5 pixel padding to the current menu?
The hidden menus would have to fit within the mainFrame of (745px) so how would I go about positioning a hidden menu on the far right button versus the first button?
I am assuming that this could be solved through the use of an absolute position, but I am not sure that would work, considering that the mainFrame is set to {margin:auto} so that it appears perfectly centered regardless of screen resolution.
If you find some free time, could you possibly supply me with a dummy script showing how to add mutiple hidden drop down menus to the provided menu (<!-- m --><a class="postlink" href="http://www.tillc.com/BIO_CSS_TEST2.htm">http://www.tillc.com/BIO_CSS_TEST2.htm</a><!-- m -->)? I am inexplainably thankful that you have helped me thus far, and it would benefit me greatly to have such a script on file. Thanks a million again!The basic method using css, with a little JavaScript for IE, is discussed in Suckerfish dropdowns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/dropdowns/">http://www.alistapart.com/articles/dropdowns/</a><!-- m -->) and continued in Sons of Suckerfish (<!-- m --><a class="postlink" href="http://www.htmldog.com/ptg/archives/000051.php">http://www.htmldog.com/ptg/archives/000051.php</a><!-- m -->)Great, thanks again!More tweaking, add after all other style:
<!--[if IE lt 6]>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"IE5x.css" />
<![endif]-->
IE5x.css contains tweaks for IE5 versions
body {text-align:center;}
#menu {margin:0;}
#menu a {border:0;margin-right:1px;}Thanks a lot, I appreciate it. Otherwise, I never would have known about that.
I want to have raw centered text embedded inside each of the div's which would change to white on mouseover. It is very important that the user would be able to click the entire div as if it were an image and not just the text.
It is also very important to get a code that works successfully in as many browsers as possible.
I would appreciate it if someone could supply me with a dummy script in which I could alter. I know how to achieve this effect using CSS + tables but I want to stick to pure CSS and have not a clue how to program it efficiently. Please give me a push in the right direction. Thanks so much for any help!Here's a start:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic css menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
background:#eee;
font-size:80%;
}
#menu {
list-style-type: none;
}
#menu a {
display:block;
width:8em;
padding:6px;
background:#fff url(bg_nav.jpg) repeat-x bottom;
color:#333;
text-align:center;
vertical-align:bottom;
text-decoration:none;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:smaller;
}
#menu a:hover {
background:#555 url(bg_over.gif) repeat-x bottom;
color:#fff;
}
-->
</style>
</head>
<body>
<ul id="menu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">HOME</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">COMPANY</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">CONTACT</a></li>
</ul>
</body>
</html>Thanks a lot, extremely helpful. That will work out even better because I won't even have to use a secondary mousover image since it is just a solid color to begin with.
Sorry, I don't mean to come off as a newb (my knowledge of CSS is rather limited), but how would I go about making the following alterations to the (practically completed) script that you so kindly supplied.
1.) I need to align the menu buttons horizontally instead of vertically w/ a 1 pixel spacing to the right of each button (no top, bottom, or left spacing).
2.) Also, each button needs to be a different specified size. There is a total of 8 buttons that will span a width of 745 pixels and a height of 23 pixels. First to last buttons being (53px, 90px, 80px, 115px, 116px, 94px, 99px, 90px, + the 8 pixels that would be spaced between buttons). I can fill in those variables myself, but I need to know the correct format in which to do so.
Once, I figure out how to apply these final alterations I will be able to complete and launch my menu. I would really appreciate it if someone could give me a blank code (based upon the code above) that will meet my requirements. Thanks again.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic css menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
* {margin:0;padding:0;}
body {
background:#ddd;
font-size:80%;
}
#menu {
width:745px;
list-style-type: none;
}
#menu li {
float:left;
}
#menu a {
display:block;
height:23px;
margin-right:1px;
background:#fff url(bg_nav.jpg) repeat-x bottom;
color:#333;
text-align:center;
line-height:23px;
vertical-align:bottom;
text-decoration:none;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:9px;
}
#menu a:hover {
background:#555 url(bg_over.gif) repeat-x bottom;
color:#fff;
}
#m1 {width:53px;}#m2 {width:90px;}#m3 {width:80px;}#m4 {width:115px;}#m5 {width:116px;}#m6 {width:94px;}#m7 {width:99px;}#m8 {width:90px;margin-right:0;}
-->
</style>
</head>
<body>
<ul id="menu">
<li><a id="m1" href=http://www.webdeveloper.com/forum/archive/index.php/"#">HOME</a></li>
<li><a id="m2" href=http://www.webdeveloper.com/forum/archive/index.php/"#">COMPANY</a></li>
<li><a id="m3" href=http://www.webdeveloper.com/forum/archive/index.php/"#">CONTACT</a></li>
<li><a id="m4" href=http://www.webdeveloper.com/forum/archive/index.php/"#">XXXXX</a></li>
<li><a id="m5" href=http://www.webdeveloper.com/forum/archive/index.php/"#">XXXXX</a></li>
<li><a id="m6" href=http://www.webdeveloper.com/forum/archive/index.php/"#">XXXX</a></li>
<li><a id="m7" href=http://www.webdeveloper.com/forum/archive/index.php/"#">XX</a></li>
<li><a id="m8" href=http://www.webdeveloper.com/forum/archive/index.php/"#">XX</a></li>
</ul>
</body>
</html>Fang, what attribute is keeping the links from indenting?
I am trying to do the same thing but mine are indented.
<!-- m --><a class="postlink" href="http://web.ics.purdue.edu/~liugc/temp/menu.html">http://web.ics.purdue.edu/~liugc/temp/menu.html</a><!-- m -->
thank you.oh, never mind. I got it.
margin-left: 0;
padding-left: 0;Fang (or any knowledgeable member),
I am experiencing several problems with this style-sheet (<!-- m --><a class="postlink" href="http://www.tillc.com/BIO_CSS_TEST2.htm">http://www.tillc.com/BIO_CSS_TEST2.htm</a><!-- m -->). Please help me remedy these following problems.
1.) I experience the following problems in the listed browsers using Window's operating system.
- Internet Explorer 6.0 (Flawless)
- Opera 8.0 (Flawless)
- Netscape 8.0 (Flawless)
- FireFox (Flawless)
2.) I experience the following problems in the listed browsers using Mac OSX Operating System.
- Internet Explorer (Flawless)
- Opera (Spacing Problem Between div's) (<!-- m --><a class="postlink" href="http://www.tillc.com/Biomed_New/problemMapOut1.jpg">http://www.tillc.com/Biomed_New/problemMapOut1.jpg</a><!-- m -->). Looks like the menu isn't even inside the specified div.
- Netscape (Flawless)
- Safari (1 pixel Spacing Problem) (<!-- m --><a class="postlink" href="http://www.tillc.com/Biomed_New/problemMapOut.jpg">http://www.tillc.com/Biomed_New/problemMapOut.jpg</a><!-- m -->)
3.) The 1 pixel spacing to the right of each button is not visible in Safari (OSX). It looks like the spacing is still there, but it is showing the background *image* of the menu, instead of revealing the darker background *color* of the div beneath it (See screenshot taken in Safari) (<!-- m --><a class="postlink" href="http://www.tillc.com/Biomed_New/problemMapOut.jpg">http://www.tillc.com/Biomed_New/problemMapOut.jpg</a><!-- m -->) .
If anyone can help me solve this problem , I would greatly appreciate it. By using pure CSS, instead of the nav images that I originally planned, I was able to cut the load time by 2/3. Now, I just need to get it cleaned up and fully functional.Add as first rule:* {margin:0;padding:0;}
this may require specifically setting other margins and paddings, notably headings (h1-h6)Fang,
Thanks, that fixed the left indent on all browsers.
In Safari [only], the menu falls 8 pixels short (737px). Meaning, that it is not properly executing the {margin-right:1px} command. Is there some sort of alternate or additional command that can be used?I don't have a Mac here, but try using border instead of margin
#menu a {
border-right:1px solid #ccc;
/* margin-right:1px; */
#m8 {
width:90px;
border-right:0;
/* margin-right:0; */
}Hahahaha. Oh, wow. That worked great!
One *final* question for the CSS scholar. I don't need to apply this feature to the current menu, but assuming I did......
How would I add *multiple* hidden drop down menus w/ a 1 pixel border and 5 pixel padding to the current menu?
The hidden menus would have to fit within the mainFrame of (745px) so how would I go about positioning a hidden menu on the far right button versus the first button?
I am assuming that this could be solved through the use of an absolute position, but I am not sure that would work, considering that the mainFrame is set to {margin:auto} so that it appears perfectly centered regardless of screen resolution.
If you find some free time, could you possibly supply me with a dummy script showing how to add mutiple hidden drop down menus to the provided menu (<!-- m --><a class="postlink" href="http://www.tillc.com/BIO_CSS_TEST2.htm">http://www.tillc.com/BIO_CSS_TEST2.htm</a><!-- m -->)? I am inexplainably thankful that you have helped me thus far, and it would benefit me greatly to have such a script on file. Thanks a million again!The basic method using css, with a little JavaScript for IE, is discussed in Suckerfish dropdowns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/dropdowns/">http://www.alistapart.com/articles/dropdowns/</a><!-- m -->) and continued in Sons of Suckerfish (<!-- m --><a class="postlink" href="http://www.htmldog.com/ptg/archives/000051.php">http://www.htmldog.com/ptg/archives/000051.php</a><!-- m -->)Great, thanks again!More tweaking, add after all other style:
<!--[if IE lt 6]>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"IE5x.css" />
<![endif]-->
IE5x.css contains tweaks for IE5 versions
body {text-align:center;}
#menu {margin:0;}
#menu a {border:0;margin-right:1px;}Thanks a lot, I appreciate it. Otherwise, I never would have known about that.