css - My div tags won't fit -
the main idea have color-specific menu throughout whole site. in order i've made different style each of 6 main pages. on every main page there submenu.
here's want like:
and here looks like:
as can see i'm having hard time setting submenu in place. seems there weird gap between , main menu. placed * margin/padding/border 0 rule @ beginning of css i'm still @ loss.
html:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>dds / om skolen</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <!--body--> <body> <!--wrapper--> <div id="wrapper"> <!--header--> <div id="header"> <div id="headlogo"> <h1>den demokratiske skole</h1> </div> </div> <!--menuer--> <div id="menu"> <!--nav abc--> <div id="navbara"> </div> <!--nav zxy--> <div id="navbary"> </div> <ul id="nav"> <!--inbound--> <li><a href="#">om skolen</a></li> <li><a href="#">optagelse</a></li> <li><a href="#">kontakt</a></li> <li><a href="#">mere info</a></li> <!--outbound--> <li><a href="#">foredrag</a></li> <li><a href="#">presse</a></li> </ul> </div> <div id="navmarka"> </div> <div id="subnav"> <ul> <li><a href="#">skolen</a></li> <li><a href="#">vÆrdier</a></li> <li><a href="#">ansatte</a></li> <li><a href="#">bestyrelsen</a></li> <li><a href="#">vennekreds</a></li> <li><a href="#">intranet</a></li> </ul> </div> <!--content--> <div id="content"> </div> <div id="footer"> </div> </div> </body> </html> css:
@charset "utf-8"; /*overalls*/ * { margin: 0px; border: 0px; padding: 0 px; } h1 { font-size: 10px; text-indent: -99999px; } /*singles*/ #wrapper { margin-right: auto; margin-left: auto; width: 780px; margin-top: 20px; height: auto; } #header { width: 780px; height: 84px; float: left; margin-bottom: 10px; } #headlogo { background-image: url(../images/headerlogo.png); height: 84px; width: 215px; float: left; } #menu { height: 30px; width: 780px; float: left; } #bars { float: left; height: 10px; } /*navbarabc*/ #navbara { height: 10px; width: 381px; float: left; margin-right: 26px; background-color: #3fa9f5; } #navbarb { height: 10px; width: 380px; float: left; margin-right: 26px; background-color: #3cf; } #navbarc { height: 10px; width: 380px; float: left; margin-right: 26px; background-color: #3cf; } #navbard { height: 10px; width: 380px; float: left; margin-right: 26px; background-color: #3cf; } #navbare { height: 10px; width: 380px; float: left; margin-right: 26px; background-color: #3cf; } /*navbarzxy*/ #navbarz { height: 10px; width: 154px; float: left; background-color: #3cf; } #navbarx { height: 10px; width: 154px; float: left; background-color: #3cf; } #navbary { height: 10px; width: 154px; float: left; background-color: #000; } #nav { float:left; padding: 0px; width: 780px; font-size: 14px; font-weight: 100; height: 10px; margin-top: 5px; } #nav ul{ list-style-type:none; } #nav li{ display:inline; margin-right: 21px; } #nav li a{ text-decoration: none; font-family: helvetica; color: #000; } #navmarka { height: 1px; width: 83px; background-color: #3fa9f5; float: left; margin-right: 697px; } /*subnav*/ #subnav { float:left; width: 200px; font-size: 12px; height: 100px; margin-top: 20px; border-left-width: 1px; border-left-style: solid; border-left-color: #3cf; } #subnav ul{ list-style-type:none; } #subnav li a{ padding: 0px; } #subnav li a{ text-decoration: none; font-family: helvetica; color: #000; } #footer { clear: both; height: 20px; width: 780px; }
your <div id="subnav">...</div> has margin-top: 20px; set remove that, gap disappears.
edit; noticed on image have gap between top line , sub navigation too, can achieve adding padding-top: 20px;
Comments
Post a Comment