Home > Article > Web Front-end > Newbie asking for help, making DIV CSS navigation bar! _html/css_WEB-ITnose
Newbie asking for help, making DIV CSS navigation bar! _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:25:361742browse
Hello everyone, I am making another navigation bar and encounter the following problems
The web navigation of the target website is like this:
After I layout it using DIV CSS , the style is like this. From the picture below, you can see that the text spacing of the navigation is obviously much larger than that of the target website.
If you adjust the width smaller but still can’t fit it, as shown in the picture
The following is the HTML part
<div class="maindiv"> <div class="head"> <div class="menu"> <ul> <li>home</li> <li>SPECIALS</li> <li>ALL PRODUCTS</li> <li>CONTACT US</li> <li>ABOUT</li> <li>BACK TO TUTORIAL</li> </ul> </div> <div></div> <div></div> </div> </div></body>
Below is the CSS part
body{ background:url(../images/body-bg.jpg) fixed}.maindiv{ width:1000px; height:1200px; margin:0 auto}.head{ width:1000px; height:210px; margin:25px auto 0px} .menu{ width:1000px; height:30px; background:#060; color:#FFF; text-align:left} .menu ul { width:1000px; height:30px;} .menu ul li{font-size:11px; line-height:35px; text-transform:uppercase; text-align:left; width:100px; font-weight:bolder; float:left; list-style:none;} Please tell me how to make the navigation bar look like the target website. Please give me some advice. Thank you very much! ! ! !
Reply to discussion (solution)
.maindiv { width: 1000px; height: 1200px; margin: 0 auto } .head { width: 1000px; height: 210px; margin: 25px auto 0px } .menu { width: 1000px; height: 30px; background: #060; color: #FFF; text-align: left } .menu ul { width: 1000px; /*height: 30px;*/ padding-left:0; overflow:hidden; } .menu ul li { font-size: 11px; line-height: 30px; text-transform: uppercase; text-align: left; /*width: 100px;*/ font-weight: bolder; float: left; list-style: none; } .menu ul li a{ text-decoration:none; color:#ffffff; padding: 10px 15px; } .homeSpecail{ padding-left:0; background-color:#333333; } <body> <div class="maindiv"> <div class="head"> <div class="menu"> <ul> <li class="homeSpecail"> <a href="#">home</a> </li> <li> <a href="#">SPECIALS</a> </li> <li> <a href="#">ALL PRODUCTS</a> </li> <li> <a href="#">CONTACT US</a> </li> <li> <a href="#">ABOUT</a> </li> <li> <a href="#">BACK TO TUTORIAL</a> </li> </ul> </div> <div></div> <div></div> </div> </div> </body>
The "options" in the navigation here are generally links, so you can wrap the navigation "options" with a tags in HTML, and then control the spacing between the "options" through the padding of the a tags.
I am also a novice, let’s discuss and learn together, haha.
You should be able to see from the target image that
The width of the menu is not equal
The spacing of the menu is the same
Then it proves that the width is auto to let the content support it
spacing? Both padding and margin can be set, but padding will not overlap and margin will overlap
From the picture above, it can be seen that padding should be used because the spacing on the left is smaller than the spacing inside and seems to be half the size
.maindiv { width: 1000px; height: 1200px; margin: 0 auto } .head { width: 1000px; height: 210px; margin: 25px auto 0px } .menu { width: 1000px; height: 30px; background: #060; color: #FFF; text-align: left } .menu ul { width: 1000px; /*height: 30px;*/ padding-left:0; overflow:hidden; } .menu ul li { font-size: 11px; line-height: 30px; text-transform: uppercase; text-align: left; /*width: 100px;*/ font-weight: bolder; float: left; list-style: none; } .menu ul li a{ text-decoration:none; color:#ffffff; padding: 10px 15px; } .homeSpecail{ padding-left:0; background-color:#333333; } <body> <div class="maindiv"> <div class="head"> <div class="menu"> <ul> <li class="homeSpecail"> <a href="#">home</a> </li> <li> <a href="#">SPECIALS</a> </li> <li> <a href="#">ALL PRODUCTS</a> </li> <li> <a href="#">CONTACT US</a> </li> <li> <a href="#">ABOUT</a> </li> <li> <a href="#">BACK TO TUTORIAL</a> </li> </ul> </div> <div></div> <div></div> </div> </div> </body>
The "options" in the navigation here are generally links, so you can wrap the navigation "options" with a tag in html , and then control the spacing between "options" through the padding of the a tag.
I am also a newbie, let’s discuss and learn together, haha.
Thank you very much to the guy upstairs, the problem has been solved, thank you very much
Well, you’re welcome...
letter-spacing