Floats, CSS, HTML - How can I do my positioning? -


previously asked how position buttons align horizontally element?. need little more css , html until i've completed it.

i have buttons correctly positioned, so, great! in advance.

current output:

current output

current 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>aspen development | home</title>     <link href="stylesheet.css" rel="stylesheet" type="text/css" />     </head>  <body>  <div id="container">   <div id="navmenu">         <div id="header">                 <div id="brand"><a href="index.html">aspen development</a></div>                 <ul>                   <li class="navbutton">home</li>                   <li class="navbutton">pricing</li>                   <li class="navbutton">contact us</li>                 </ul>         </div>       </div>       <div id="content">         <div id="contentcontainer">         <p><b>4.21.14</b> welcome aspen development.</p>         <p><b>4.19.14</b> website has been created!</p>         </div>       </div>   <div id="footer">         <center><p style="margin-top: 17px; margin-bottom: 20px; font-size: 0.75em; ">copyright &copy; 2014 aspen development | rights reserved</p></center>       </div> </div> </body> </html> 

current css:

    @charset "utf-8";  body, h1, h2, h3, h4, h5, h6, p, div {     margin: 0;     padding: 0; }  #header ul {     list-style-type: none;     padding: 0;     margin: 0; }  #header ul li {     display: inline;     cursor: pointer; }  body {     font-family: arial, helvetica, sans-serif;     background-color: #fff; }  #navmenu, #footer {     width: 100%;     height: 50px;     background-color: #f8f8f8;     border: 2px solid #e6e6e6;     margin: 0 auto; }  #header {     width: 1104px;     height: 50px;     margin: 0 auto;     text-align: right; }  #menu {     float: right;     padding: 12px 14px 16px;     padding-top: 12px; }  #brand {     float: left; }  #brand {     display: block;     padding-top: 12px;     padding-bottom: 16px;     padding-right: 14px;     color: black;     font-size: 1.25em;     text-align: justify;     text-decoration: none; }  .navbutton {     padding: 0 14px;     margin-top: 50px;     color: black;     font-size: 0.75em; }  #content {     width: 100%; }  #contentcontainer {     width: 1140px;     margin: 0 auto; }  #contentcontainer p {     margin: 20px; } 

once again, help! :)


Comments

Popular posts from this blog

jQuery Mobile app not scrolling in Firefox -

c++ - How to add Crypto++ library to Qt project -

php array slice every 2th rule -