im complete newbie css , im struggling know what's correct way things. there many examples online, seem bit different. have specific questions markup. right way?
my css feels bloated me it? overflow command causing scrollbar, don't know why top-menu has large padding on left, li + li guess, how rid of layout of divs best way achieve im trying do. using margin-top 70 force down second menu doesn't seem best approach me, isn't there float bottom or valign bottom?
any guidance me starting of on right foot appreciated.
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="wrapper"> <div class="logo"> logo </div> <div class="top-menu"> <ul> <li>lorum</li> <li>blog</li> <li>contact us</li> </ul> </div> <div class="main-menu"> <ul> <li>about us</li> <li>countries <li>vacancies</li> <li>about us</li> <li>countries <li>vacancies</li> </ul> </div> </div> </body> </html> .wrapper { background-color: aqua; width: 600px; overflow: auto; padding: 5px; } .logo { background-color: black; height: 100px; width: 100px; float: left; } .top-menu { background-color: blue; float: right; line-height: 5px; } .top-menu > ul { line-style: none; } .top-menu > ul > li { display: inline-block; } .top-menu li + li:before{ content: " | "; padding: 0 10px; } .main-menu > ul { line-style: none; } .main-menu > ul > li { display: inline-block; padding-right: 10px; } .wrapper { background-color: aqua; width:100%; overflow: auto; padding: 5px; } .top-menu { background-color: blue; float: right; line-height: 5px; } .main-menu { font-family: arial; font-szie: 14px; background-color: crimson; clear: right; margin-top: 70px; height: 30px; line-height: 30px; text-align: center; }
.wrapper class duplicated different width. many other class duplicated.
pay attention code cleanup :)
in anyway margin of ul in main-menu flowed out div, creating scrollbar. if want, can find problem using inspect element in browser in chrome: https://developer.chrome.com/devtools/docs/dom-and-styles
.logo { background-color: black; height: 100px; width: 100px; float: left; } .wrapper { background-color: aqua; width:100%; overflow: auto; padding: 5px; } .top-menu { background-color: blue; float: right; line-height: 5px; } .top-menu::after { clear: both; } .main-menu { font-family: arial; font-size: 14px; background-color: crimson; clear: right; margin-top: 70px; height: 30px; line-height: 30px; text-align: center; } .top-menu > ul > li { display: inline-block; } .top-menu li + li:before{ content: " | "; padding: 0 10px; } .main-menu > ul { margin: 0; } .main-menu > ul > li { display: inline-block; padding-right: 10px; }<div class="wrapper"> <div class="logo"> logo </div> <div class="top-menu"> <ul> <li>lorum</li> <li>blog</li> <li>contact us</li> </ul> </div> <div class="main-menu"> <ul> <li>about us</li> <li>countries</li> <li>vacancies</li> <li>about us</li> <li>countries</li> <li>vacancies</li> </ul> </div> </div>
Comments
Post a Comment