HTML and CSS positioning and float HELP? can you do it!!
/* plz help me in placing the links on left side rather than center where as the words "navigation bar" should stay in center, THANKS. */ <html> <head> <head> <title>layout </title> <style> p{ margin-top: 6px; text-align: center; border-style: dotted; border-color: red; border-width: 1px; width: 3cm; background-color: yellow; display: block; } div.head { padding-left: 14cm; border: 2px solid green; height:10%; } div.menu{ border-style: outset; border-width: 3px; padding-left: 14cm; padding-bottom: 4pt; height: 20%; max-width: 100%; direction: ltr; } span{ vertical-align: middle; } .btn { border: none; color: white; padding: 4px; font-size: 14px; cursor: pointer; } .home {background-color: #4CAF50;} /* Green */ .home:hover {background-color: #46a049;} .gallery {background-color: #2196F3;} /* Blue */ .gallery:hover {background: #0b7dda;} .contactme {background-color: #ff9800;} /* Orange */ .contactme:hover {background: #e68a00;} .aboutme {background-color: #e7e7e7; color: black;} /* Gray */ .aboutme:hover {background: #ddd;} a{ text-decoration: none; } </style> </head> </html> <body> <div class="head"> <p>Header</p> </div><br/> <div class="menu"> <p>Navigation bar</p> <span> <a class="btn home" href="weblayout.html">Home</a> <a class="btn gallery" href="gallery.html">Gallery</a> <a class="btn contactme" href="contactme.html">contact me</a> <a class="btn aboutme" href="aboutme.html">About</a> </span> </div> </body> </html>
Often have questions like this?
Learn more efficiently, for free:
