block did not work

**jemz** · Sep 13, 2012 23:23

It's working now on I.E 8, it was just i have no html tag,that's why the I.E 8 cannot render properly my css...again please correct me if i am wrong ralph

**ralph.m** · Sep 13, 2012 23:26

You've left out a lot of important CSS there. Go back to Paul's code and start with that. Then make one change at a time and test the results, so if you make a mistake, you know where you went wrong. It seems to me you just need to change a few colors.

**ralph.m** · Sep 13, 2012 23:27

Originally Posted by jemz

It's working now on I.E 8 ...

Yes, but not in Chrome etc. You've left out too much of Paul's CSS as mentioned above.

**jemz** · Sep 13, 2012 23:30

Originally Posted by ralph.m

You've left out a lot of important CSS there. Go back to Paul's code and start with that. Then make one change at a time and test the results, so if you make a mistake, you know where you went wrong. It seems to me you just need to change a few colors.

yup the color, i don't know how to use the RGB colors,

You've left out a lot of important CSS there

Okay i will try to see what is lacking

**jemz** · Sep 13, 2012 23:32

Originally Posted by ralph.m

Yes, but not in Chrome etc. You've left out too much of Paul's CSS as mentioned above.

Thank you ralph for letting me know in chrome,okay i will fix this..

**ralph.m** · Sep 14, 2012 00:01

Originally Posted by jemz

i don't know how to use the RGB colors

Tht's quite easy. If you have Photoshop, open the color palette and choose a color your like (visually) and it will give you the RGB values and the hex values. E.g. black is rgb(0,0,0) or hex #000000.

If you don't have Photoshop, you can use any of a number of online services, like Color Scheme Designer. Pick the color you want and it will give you the code.

**jemz** · Sep 14, 2012 00:29

Hi, ralph how did paul invisible the sub menu,i don't see the display none

**jemz** · Sep 14, 2012 00:37

why he used margin-left to hide the sub menu and he put valued -999em?

Code:

#nav li ul {
	position: absolute;
	margin-left: -999em; /* hide menu from view */
	top: auto;
	left:0;
}

**jemz** · Sep 14, 2012 00:57

Originally Posted by ralph.m

Yes, but not in Chrome etc. You've left out too much of Paul's CSS as mentioned above.

why it did not work on chrome?..i tried to fixed but nothing happen.are all my css is wrong or not in standard?

**jemz** · Sep 14, 2012 01:15

Originally Posted by ralph.m

Yes, but not in Chrome etc. You've left out too much of Paul's CSS as mentioned above.

It's working now on chrome,take a look at...by the way some alignment i did not fix and also the color,i just only fix the background color in chrome when it's going to hover..please correct me if i am wrong.

Code:

<!Doctype html>

<html lang="en">
<head>
 <meta charset="utf-8" />
 
 <link rel="stylesheet" href="menu2.css" style="text/css"/>
 
</head>

 <body>
    <ul class="nav">
       <li><a href="#">home</a></li>
	   <li><a href="#">about</a>
	       <ul>
		       <li><a href="#">how</a></li>
			   <li><a href="#">where</a></li>
			   <li><a href="#">when</a></li>
	       </ul>
	   </li>
	   <li><a href="#">services</a>
	      <ul>
			  <li><a href="#">Web Design</a></li>
			  <li><a href="#">Internet Marketing</a></li>
			  <li><a href="#">Hosting</a></li>
			  <li><a href="#">Domain Names</a></li>
			  <li><a href="#">Broadband</a></li>
		  </ul>
	   </li>

    </ul>	

 <body>
</html>

Code:

 .nav {
  list-style: none;
  padding: 0;
  margin: 0;

}

.nav > li:first-letter{
  text-transform: uppercase;
  
}

.nav > li{
   float: left;
   margin-right: 0.1em #959597;
   min-width: 8em;
   text-align: center;
   background-color: #E56500;
   border:solid 1px #959597;
}


.nav li a:link,
.nav li a:visited{
  text-decoration: none;
 
 
}

.nav li ul {
  list-style: none;
  margin: 0;
  padding: 0;
   
}

.nav ul li{
  display: none;
}


.nav li:hover  li{
  display: block; 
  padding: 0.1em;
  background-color: #d2cb08;
  color: #bebeb8;
  text-align: justify; 
}
/*
.nav li:hover,
.nav ul li:hover {
  background-color: #E56500;
  display: block;
  color: #FFF;
}
*/
.nav ul li{
  border: solid 1px #959597;
}

.nav ul li:hover,
.nav ul li:hover a{
  color: #FFF;
  background-color: #E56500;
}

**ralph.m** · Sep 14, 2012 01:21

I've tested it in Chrome and Firefox and it seems to work fine. Well done.

I might test it in IE later, but I don't have it handy right now.

**jemz** · Sep 14, 2012 01:25

Originally Posted by ralph.m

I've tested it in Chrome and Firefox and it seems to work fine. Well done.

I might test it in IE later, but I don't have it handy right now.

Thank you ralph,..I learned it from you

By the way can you also please check in safari i don't have safari...Thank you in advance.

**ralph.m** · Sep 14, 2012 06:34

Originally Posted by jemz

i don't have safari...

Yes, it works in Safari, and Opera, too.

**jemz** · Sep 14, 2012 09:14

Originally Posted by ralph.m

Yes, it works in Safari, and Opera, too.

The first letter to uppercase did not work anymore because i have changes,and i tried to put the prefix vendor still doesn't work.

Code:

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li:first-letter{
 -moz-text-transform: uppercase;
 -ms-text-transform: uppercase;
}
.nav > li{
   float: left;
   margin-right: 0.1em #959597;
   min-width: 8em;
   text-align: center;
   background-color: #FFF;
   border:solid 1px #959597;
}

.nav li a:link,
.nav li a:visited{
  text-decoration: none; 
  color: #606061;
  display: block; /* here i put block because when i am going to hover the about the text will change to white like paul example*/

}

.nav li ul {
  list-style: none;
  margin: 0;
  padding: 0;
   
}

.nav ul li{
  display: none;
}

.nav li:hover  li{
  display: block; 
  text-align: justify;
  color: #606061;
}
/*
.nav li:hover,
.nav ul li:hover {
  background-color: #E56500;
  display: block;
  color: #FFF;
}
*/
.nav ul li{
  border: solid 1px #959597;
}

.nav ul li:hover, .nav li:hover,
.nav li:hover li a:hover, .nav li:hover a
{
  color: #FFF;
  background-color: #E56500;
}

.nav li:hover li a{
  color: #777777;
  background-color: #d2cb08;
}

Code:

<!Doctype html>

<html lang="en">
<head>
 <meta charset="utf-8" />
 
 <link rel="stylesheet" href="menu2.css" style="text/css"/>
 
</head>

 <body>
    <ul class="nav">
       <li><a href="#">home</a></li>
	   <li><a href="#">about</a>
	       <ul>
		       <li><a href="#">how</a></li>
			   <li><a href="#">where</a></li>
			   <li><a href="#">when</a></li>
	       </ul>
	   </li>
	   <li><a href="#">services</a>
	      <ul>
			  <li><a href="#">Web Design</a></li>
			  <li><a href="#">Internet Marketing</a></li>
			  <li><a href="#">Hosting</a></li>
			  <li><a href="#">Domain Names</a></li>
			  <li><a href="#">Broadband</a></li>
		  </ul>
	   </li>

    </ul>	

 <body>
</html>

**jemz** · Sep 14, 2012 09:30

Hi raplh, it's working now the uppercase

.nav li a:first-letter{
text-transform: uppercase;
}

**jemz** · Sep 14, 2012 10:31

Originally Posted by ralph.m

Yes, it works in Safari, and Opera, too.

Thank you for testing it on other browser.

**ralph.m** · Sep 14, 2012 17:39

Originally Posted by jemz

Hi raplh, it's working now the uppercase

Yes, the more up to date browsers support that.

**jemz** · Sep 15, 2012 08:24

Originally Posted by ralph.m

Here is a nice example by Paul:

http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

Hi ralph,can you please enlighten my mind on this script what does this do?

sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\b"), "");
}

**ralph.m** · Sep 15, 2012 16:39

It's just a bit of JavaScript to help IE6 with the hover effect. For more details, you'll have to ask about it in the JS forum.

**jemz** · Sep 15, 2012 23:08

ok thanks i will try to ask them.

**ralph.m** · Sep 16, 2012 01:29

Really, IE6 is dead and buried now, so unless you are asking because you want to learn JS, I wouldn't bother.

I would just leave that code out.

**jemz** · Sep 16, 2012 11:26

Originally Posted by ralph.m

Really, IE6 is dead and buried now, so unless you are asking because you want to learn JS, I wouldn't bother.

I would just leave that code out.

yup i am also learning js...

**jemz** · Nov 17, 2012 10:11

Originally Posted by ralph.m

Are you using the same HTML as Paul? If you've changed it at all, post that too.

Hi ralph, I am having problem on this my drop down menu i want to put scrollbar on my subitems which is very long,but i could not display it properly...I want that when i am going to hover the subitems it will display in the left side,and if this have many items the scrollbar will be visible,...can you help me on this,i am confuse.

Thank you in advance. here is my css and html file.

Code:

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li a:first-letter{
 text-transform: uppercase;

}

.nav > li{ 
   float: left;
   margin-right: #959597 0.1em;
   min-width: 8em;
   text-align: center;
   background-color: #FFF;
   border:solid 1px #959597;
}

.nav li a:link,
.nav li a:visited{
  text-decoration: none; 
  color: #606061;
  display: block;
}

.nav li ul {
  list-style: none;
  margin: 0;
  padding: 0;
   
}

 .nav ul li,
 .nav #scroll1div ul li,
 #scroll1,#scroll2,#scroll3{
  display: none;
}

.nav li:hover  li,
.nav li:hover #scroll1,
.nav li:hover #scroll2,
.nav li:hover #scroll3
{
  display: block;
  text-align: justify;
  color: #606061;
}

.nav ul li{
  border: solid 1px #959597;
}

.nav ul li:hover, .nav li:hover,
.nav li:hover li a:hover, .nav li:hover a
{
  color: #FFF;
  background-color: #E56500;
}

.nav li:hover li a{
  color: #777777;
  background-color: #d2cb08;
}

html file

Code:

  <!Doctype html>

<html lang="en">
<head>
 <meta charset="utf-8" />
 
 <link rel="stylesheet" href="menu2.css" style="text/css"/>
 
</head>

 <body>
    <ul class="nav">
       <li><a href="#">home</a>
			<ul>
				<li><a href="#">how</a></li>
				<li><a href="#">where</a></li>
				<li><a href="#">when</a></li>
			</ul>
		</li>
	   <li><a href="#">about</a>
          <div style="overflow:auto;height:200px;" id="scroll1">
               <ul>
                   <li><a href="#">A</a></li>
                   <li><a href="#">B</a></li>
                   <li><a href="#">C</a></li>
                   <li><a href="#">D</a></li>
                   <li><a href="#">E</a></li>
                   <li><a href="#">F</a></li>
                   <li><a href="#">G</a></li>
                   <li><a href="#">H</a></li>
                   <li><a href="#">I</a></li>
                   <li><a href="#">J</a></li>
                   <li><a href="#">L</a></li>
                   <li><a href="#">M</a></li>
                   <li><a href="#">N</a></li>
                   <li><a href="#">O</a></li>
                   <li><a href="#">P</a></li>
                   <li><a href="#">Q</a></li>
               </ul>
          </div>
       </li>

	    <li><a href="#">when</a></li>


	   <li><a href="#">services</a>
	      <ul>
			  <li><a href="#">Web Design</a></li>
			  <li><a href="#">Internet Marketing</a></li>
			  <li><a href="#">Hosting</a>
                  <div style="overflow:auto;height:200px;" id="scroll2">
                      <ul>
                          <li><a href="#">A</a></li>
                          <li><a href="#">B</a></li>
                          <li><a href="#">C</a></li>
                          <li><a href="#">D</a></li>
                          <li><a href="#">subitems</a>
                              <div style="overflow:auto;height:200px;" id="scroll3">
                                  <ul>
                                      <li><a href="#">A</a></li>
                                      <li><a href="#">B</a></li>
                                      <li><a href="#">C</a></li>
                                      <li><a href="#">D</a></li>
                                      <li><a href="#">E</a></li>
                                      <li><a href="#">F</a></li>
                                      <li><a href="#">G</a></li>
                                      <li><a href="#">H</a></li>
                                      <li><a href="#">I</a></li>
                                      <li><a href="#">J</a></li>
                                      <li><a href="#">L</a></li>
                                      <li><a href="#">M</a></li>
                                      <li><a href="#">N</a></li>
                                      <li><a href="#">O</a></li>
                                      <li><a href="#">P</a></li>
                                      <li><a href="#">Q</a></li>
                                  </ul>
                              </div>



                          </li>
                          <li><a href="#">F</a></li>
                          <li><a href="#">G</a></li>
                          <li><a href="#">H</a></li>
                          <li><a href="#">I</a></li>
                          <li><a href="#">J</a></li>
                          <li><a href="#">L</a></li>
                          <li><a href="#">M</a></li>
                          <li><a href="#">N</a></li>
                          <li><a href="#">O</a></li>
                          <li><a href="#">P</a></li>
                          <li><a href="#">Q</a></li>
                      </ul>
                  </div>
              </li>
			  <li><a href="#">Domain Names</a></li>
			  <li><a href="#">Broadband</a></li>
		  </ul>
	   </li>

    </ul>	

 </body>
</html>

User Tag List

Thread: block did not work

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions