ahile91 Posted April 6, 2017 Share Posted April 6, 2017 hi everyone i'm trying to learn the code to build my own website. i want to make a website using 960grid system 16 colum. but i coulden't find anywhere how to make category? i want to be the navigator on top right and under to be 2 category and multiple subcategory. <!DOCTYPE html> <html lang="en-US"> <head> <title>title</title> <meta name="keywords" content="bla bla"> <meta name="description" content="about bla bla"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Serif Pro"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]--> </head> <!-- body --> <body> <div class="container_16"> <style> body,h1,h2,h3,h4,h5,h6 {font-family: "Source Serif Pro", sans-serif} </style> <!-- header --> <header> <div class="grid_5 alpha brand">webname</div> <div class="grid_11 omega"> <!-- navigation --> <nav> <ul> <li><a href="#">Contact</a> |</li> <li><a href="#">Home</a> |</li> <li><a href="#">SingUp</a></li> </ul> </nav> </div> </header> <!-- footer --> <!--footer> <p>© 2017 All rights reserved.</p> </footer> </body> </html> for the style i use grid 960_16_col.css and i add this. under this on the same header i want to make another container with 2 category like i said up. body { min-width: 960px; background-image: url(headerbackground.png); background-repeat:repeat-x; } .brand { font-size: 55px; font-weight: 600; } /* text color */ header { color: #ff1e00; } /* navigator position */ nav { text-align: right; margin-top: 20px; } /* navigator text */ nav a { color: #ff1e00; text-decoration: none; padding: 5px; } /* navigator hover */ nav a:hover { background: #6b7d6f; border-radius: 12px; } /* An Unordered List */ header ul { margin: 0; padding: 0; } /* navigator alignment */ header li { list-style: none; display: inline; margin-left: 5px; padding: 0; font-size: 16px; } Link to comment Share on other sites More sharing options...
ahile91 Posted April 6, 2017 Author Share Posted April 6, 2017 (edited) so...no one here can help me ? sorry for double post but no answer in 7h p.s i was thinking this website, this forum is a bad a$$, i was wrong ? Edited April 6, 2017 by ahile91 Link to comment Share on other sites More sharing options...
Ingolme Posted April 8, 2017 Share Posted April 8, 2017 Your question is not very clear, so people haven't been answering. I suspect you want a dropdown menu. There are plenty of example of different CSS-based dropdown menus on this website: http://www.cssplay.co.uk/menus/ Link to comment Share on other sites More sharing options...
ahile91 Posted April 8, 2017 Author Share Posted April 8, 2017 i diden't know how to make a categories and sub-categories Link to comment Share on other sites More sharing options...
dsonesuk Posted April 8, 2017 Share Posted April 8, 2017 That is vague also? I suspect you mean main parent menu with child sub-menus, which in turn can have child sub-menu and so on. Its just the same as using un/ordered list which have sub-child list-items, then another sub-child list-item. You just style li elements that are hovered over to show its child ul including all its child list-items. Link to comment Share on other sites More sharing options...
Ingolme Posted April 8, 2017 Share Posted April 8, 2017 We don't know what your definition of "category" is. Link to comment Share on other sites More sharing options...
Johnny7oak Posted April 28, 2017 Share Posted April 28, 2017 (edited) put them into horizontal lists. Preview Website <html> <body> <style> li { float: left; list-style-type:none; } </style> <ul> <li><a href="#">Contact</a> |</li> <li><a href="#">Home</a> |</li> <li><a href="#">SignUp</a></li> </ul> </body> </html> to correct yours... <!-- change style to include header --> <style> body,h1,h2,h3,h4,h5,h6 {font-family: "Source Serif Pro", sans-serif} header {float:left; list-style-type:none;} </style> If you want multiple lists, make multiple lists in columns. Nobody says you can't float and use tables. Edited April 28, 2017 by Johnny7oak just figured it out.. 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