html - Correct way to position elements using CSS -

-

hi want position navigation next site name in header, proven difficult , have had use position:absoutle , margins have go minus numbers appear correctly.

i wondering if there easier way make these appear side side?

click here view jsfiddle!

or view code below:

index.html

<header> <h1>imanage</h1>  <nav>     <ul class="maina">         <li><a href="home">home</a></li>         <li><a href="projects">projects</a></li>         <li><a href="settings">settings</a></li>     </ul> </nav>   </header>

style.css

header {  width:auto; height:50px; background-color:#374348;  }  header > h1 { font-size:16px; font-weight:bold; text-align:left; color:#fff; padding:10px;    }   .maina > li  { display:inline;  list-style:none; }  header > nav { text-align:center; width:300px; height:auto; border:medium #999;  position:absoulte; top:0; margin: -50px 0px 0px 60px; }

well, correct way so...

explanation: need float h1 left, same goes nav element well, float do? float element left here, create empty space right of floated element, make space nav shift up, , using .clear:after self clear parent element, can use overflow: hidden; instead of .clear:after(cuz ie spoil game here)...

you can read this answer of mine explain concept clearing floating elements using clear: both; , why need clear them.

demo

header {     width:auto; /* don't need */     height:50px;     background-color:#374348; }  header > h1 {     font-size:16px;     font-weight:bold;     float: left;     color:#fff;     padding:10px;    }   .maina > li  {     display:inline;      list-style:none; }  header > nav {     width:300px;     height:auto;     border:medium #999;     float: left;     margin: 10px; }  .clear:after {     content: "";     display: table;     clear: both; }

tips: have margin , padding on menu items, suggest use display: inline-block; instead of block, can rid of > if don't find need use that.

last not least, using header html5 element, make sure using html5 reset stylesheet, declare other elements footer, aside, nav display: block; example html5 doctor stylesheet reset


Comments

Post a Comment

Popular posts from this blog

Unable to remove the www from url on https using .htaccess -

-
i want remove www site url. ie. https://www.domainname.com.au https://domainname.com.au . i have tried various .htacces code nothing work me. here present code remove www http not work https. rewriteengine on rewritebase / rewritecond %{http_host} ^www\.(.*)$ [nc] rewriterule ^/(.*)$ http://%1/$1 [r=301,l] rewritecond %{https} off rewriterule ^(.*)$ https://domainname.com.au/$1 [r=301,l] rewriterule ^code-of-conducts/(.*)/$ code-of-conducts.php?type=$1 rewriterule ^parents/post-a-job/(.*)/edit/$ parents/post-a-job.php?action=edit&id=$1 rewriterule ^parents/post-a-job/(.*)/$ parents/post-a-job.php?job_type=$1 rewriterule ^parents/open-jobs/(.*)/delete/$ parents/open-jobs.php?action=delete&id=$1 rewriterule ^parent-profile/(.*)/$ parent-profile.php?id=$1 rewriterule ^parents/job-details/(.*)$ parents/job-details.php?applied_id=$1 rewriterule ^sitterprofile/(.*)/$ sitterprofile.php?id=$1 rewriterule ^sitter/job-board/state/(.*)/page/(.*)/$ sitter/job-board.ph...
Read more