hyperlink - my menu affecting href image -


menu style affects image when add link image (href), notice purple affectng google image.

<!doctype html> <html> <head> <style> ul { float:left; width:100%; padding:0; margin:0; list-style-type:none;} { float:left; width:6em; text-decoration:none; color:white; background-color:purple;  padding:0.2em 0.6em; border-right:1px solid white; } a:hover {background-color:#ff3300;} li {display:inline;} </style> </head>  <body> <ul> <li><a href="#">link one</a></li> <li><a href="#">link two</a></li> <li><a href="#">link three</a></li> <li><a href="#">link four</a></li> </ul>  <p> body text </p> <a href="test.php" target="_blank"><img src="http://www.google.se/images/google_80wht.gif"  </body> </html> 

the css rule you've defined applies both navigation links , test.php link includes google image. if intend target navigation links rule there variety of approaches typically you'd apply class element containing navigation , alter rule navigation links apply class present. this:

<!doctype html> <html> <head> <style> ul { float:left; width:100%; padding:0; margin:0; list-style-type:none;} ul.nav { float:left; width:6em; text-decoration:none; color:white; background-color:purple;  padding:0.2em 0.6em; border-right:1px solid white; } ul.nav a:hover {background-color:#ff3300;} li {display:inline;} </style> </head>  <body> <ul class="nav"> <li><a href="#">link one</a></li> <li><a href="#">link two</a></li> <li><a href="#">link three</a></li> <li><a href="#">link four</a></li> </ul>  <p> body text </p> <a href="test.php" target="_blank"><img src="http://www.google.se/images/google_80wht.gif"  </body> </html> 

Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

css - Firefox for ubuntu renders wrong colors -