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
Post a Comment