CSS Website Layout | web page layout examples
WebsiteLayoutAwebsiteisoftendividedintoheaders,menus,contentandafooter:ContentMainContentContentTherearetonsofdifferentlayoutdesignstochoosefrom.However,thestructureabove,isoneofthemostcommon,andwewilltakeacloserlookatitinthistutorial.HeaderAheaderisusuallylocatedatthetopofthewebsite(orrightbelowatopnavigationmenu).Itoftencontainsalogoorthewebsitename:Example.header{ background-color:#F1F1F1; text-align:center; padding:20px;}ResultTryitYourself»[1]NavigationBarAnavigationbarcontainsalistofli...
Website LayoutA website is often divided into headers, menus, content and a footer:
Content
Main Content
Content
There are tons of different layout designs to choose from. However, the structure above, is one of the most common, and we will take a closer look at it in this tutorial.
HeaderA header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name:
Example.header { background-color: #F1F1F1; text-align: center; padding: 20px;}
Result
Try it Yourself »[1] Navigation BarA navigation bar contains a list of links to help visitors navigating through your website:
Example /* The navbar container */.topnav { overflow: hidden; background-color: #333;}/* Navbar links */.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; t...