aniketpunk Posted June 23, 2014 Share Posted June 23, 2014 (edited) Guys..A small help is needed..I need my navigation buttons to be side by side (like using display :inline) with a css design but it isnt coming..The code is given below please tell me a small modification. {Please open an Editor} <!DOCTYPE html> <html> <head> <style> a:link, a:visited { display: block; font-weight: bold; color: #ffffff; background-color: #98bf21; width: 120px; text-align: center; padding: 4px; text-decoration: none; } a:hover, a:active { background-color: #7A991A; } li { font-size :11px; font-weight :bold; padding-top :14px; padding-bottom :14px; padding-left :10px; padding-right :10px; text-transform :uppercase; } </style> </head> <body> <ul> <li><a href="default.asp" target="_blank">This is a link</a></li> <li><a href="default.asp" target="_blank">This is a link</a></li> </ul> </body> </html> Edited June 23, 2014 by aniketpunk Link to comment Share on other sites More sharing options...
newseed Posted June 23, 2014 Share Posted June 23, 2014 The 'display: block' that is assigned to your <a> tag will tell it to expand the full with in whatever it's contained in. Since the <li> is also a block element by default it too will expand the width of whatever it's contained in. Your solution is to add float: left; to the <li> li { float: left;} Link to comment Share on other sites More sharing options...
aniketpunk Posted June 23, 2014 Author Share Posted June 23, 2014 Oh proo!!...Thank You!!! Link to comment Share on other sites More sharing options...
aniketpunk Posted June 24, 2014 Author Share Posted June 24, 2014 Bro..CAn you help me again?..CAN you get me spaces between each box?? <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; } a:link, a:visited { display: block; font-weight: bold; color: #FFFFFF; background-color: #98bf21; width: 120px; text-align: center; padding: 4px; text-decoration: none; text-transform: uppercase; } a:hover, a:active { background-color: #7A991A; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html> Link to comment Share on other sites More sharing options...
newseed Posted June 24, 2014 Share Posted June 24, 2014 A couple of ways to do that. I assume that you want spacing below each link. ul li {margin-bottom: 1px;} or ul li a {margin-bottom: 1px;} You can also use border-bottom and define whatever color you like. Link to comment Share on other sites More sharing options...
aniketpunk Posted June 24, 2014 Author Share Posted June 24, 2014 Thank You Brother..You are a Professional!!..Can yoi suggest me how can I develop my web development skills..I have learnt HTML5 ,bit of CSS..Also I am learning Bootstrap framework..Is it a good practise?? Link to comment Share on other sites More sharing options...
newseed Posted June 24, 2014 Share Posted June 24, 2014 I don't have any one particular thing I use to learn HMTL/CSS but w3school is a good start. You can google specific 'How to..' topics and you will find all sorts of resource. No matter how much you learn, trial and error will help you push forward to understand how it all works. After 10 years, I am still learning some stuff. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now