html - Navigation overlaps elements when wrapping -


i have bunch of inline-blocks want wrap when browser window shrunken. this:

[nav element 1] [nav element 2] [nav element 3] [nav element 4]
this {h1} header.

when browser resized, want them wrap, do. overwrite header on next line:

[nav element 1] [nav element 2] [nav element 3]
[nav element 4]eader.

i've tried separating header paragraphs , linebreaks. nope.
i've tried putting "clear:both" on {h1} style. nope.
i've tried putting {div} around {h1} "display:block" and/or "clear:both". nope.

i want page content move down when nav bar wraps.

any hints?

my code , results can seen @ criv.com/test

edit

body {      margin-left: auto;      margin-right: auto;      width: 80%;      background-color: #ffffff;  }  h1 {      display:inline-block;      background:#ff0000;      border:2px solid black;      clear:both;  }  .nav {      display: block;      position: absolute;      top: -1px;      float: left;      overflow: auto;  }  .nav {      display:inline-block;      width:88px;      height:50px;      font-family:"comic sans ms", arial, sans-serif;      color:#ffffff;      background-color:#008000;      text-align:center;      padding:0px;      margin:0px;      border-style:solid;      border-color:#ffffff;      border-width:1px;      text-decoration:none;  }  .nav a:visited {      color:#cccccc;  }  .nav a:hover, a:active {      color:#008000;      background-color:#cccccc;  }  .nav a#here {      color:#008000;      background-color:white;  }  ul.subnav {      background-color:#009000;      padding:0px;      margin:0px;      border:1px solid #009000;      width:618px;      height:18px;      position:absolute;      top:72px;      left:220px;  }  ul.subnav li {      display:block;      width:123px;      height:18px;      background-color:#009000;      list-style-type:none;      margin:0px;      padding:0px;      border-width:0px;      overflow:hidden;      float:left;  }  ul.subnav {      display:block;      width:123px;      height:18px;      font-family:"comic sans ms", arial, sans-serif;      font-size:75%;      font-weight:bold;      color:#ffffff;      background-color:#009000;      text-align:center;      padding:0px;      border-width:0px;      margin:0px;      text-decoration:none;  }  ul.subnav a:visited {      color:#cccccc;  }  ul.subnav a:hover, a:active {      color:#008000;      background-color:#cccccc;  }  ul.subnav a#here {      color:#008000;      background-color:white;  }  .note {      background-color:#7a991a;  }  .text {      background-color:white;      font-family:"comic sans ms", arial, sans-serif;      color:#008000;      width:80%;      left:10%;  }  .text a:link {      color:#008000;  }  .text a:visited {      color:#999999;  }
<div class="nav">      <a href="list.html">2014 peony&nbsp;list</a>      <a href="bloom.html">bloom calendar</a>      <a href="gallery.html">photo gallery</a>      <a href="howto.html">peony<br />how-to's</a>      <a href="tales.html">peony<br />tales</a>      <a href="visit.html"> <br />visit</a>      <span class="clearfix"><a href="contact.html">contact/ order</a></span>  </div>  <br />  <div class="notreally"><h1>peonies of coos riviera</h1></div>  <span class="text">      above connecticut river in new hampshire's coos county,      more hundred varieties of herbaceous peonies, tree peonies,      , intersectional-hybrid peonies bloom late may july.      <p>the display garden has closed season.  order peonies fall planting,           email <a href="mailto:peonies@criv.com">peonies@criv.com</a>, or phone 603.837.9800.</p>      <p>review <a href="now.html"><b>the 2014 bloom season</b></a> in pictures!</p>  </span>

remove position absolute it. if want nav push 1px top can use margin-top:-1px

here working code.

body {      margin-left: auto;      margin-right: auto;      width: 80%;      background-color: #ffffff;  }  h1 {      display:inline-block;      background:#ff0000;      border:2px solid black;      clear:both;  }  .nav {      display: block;      float: left;      overflow: auto;  }  .nav {      display:inline-block;      width:88px;      height:50px;      font-family:"comic sans ms", arial, sans-serif;      color:#ffffff;      background-color:#008000;      text-align:center;      padding:0px;      margin:0px;      border-style:solid;      border-color:#ffffff;      border-width:1px;      text-decoration:none;  }  .nav a:visited {      color:#cccccc;  }  .nav a:hover, a:active {      color:#008000;      background-color:#cccccc;  }  .nav a#here {      color:#008000;      background-color:white;  }  ul.subnav {      background-color:#009000;      padding:0px;      margin:0px;      border:1px solid #009000;      width:618px;      height:18px;      position:absolute;      top:72px;      left:220px;  }  ul.subnav li {      display:block;      width:123px;      height:18px;      background-color:#009000;      list-style-type:none;      margin:0px;      padding:0px;      border-width:0px;      overflow:hidden;      float:left;  }  ul.subnav {      display:block;      width:123px;      height:18px;      font-family:"comic sans ms", arial, sans-serif;      font-size:75%;      font-weight:bold;      color:#ffffff;      background-color:#009000;      text-align:center;      padding:0px;      border-width:0px;      margin:0px;      text-decoration:none;  }  ul.subnav a:visited {      color:#cccccc;  }  ul.subnav a:hover, a:active {      color:#008000;      background-color:#cccccc;  }  ul.subnav a#here {      color:#008000;      background-color:white;  }  .note {      background-color:#7a991a;  }  .text {      background-color:white;      font-family:"comic sans ms", arial, sans-serif;      color:#008000;      width:80%;      left:10%;  }  .text a:link {      color:#008000;  }  .text a:visited {      color:#999999;  }
<div class="nav">      <a href="list.html">2014 peony&nbsp;list</a>      <a href="bloom.html">bloom calendar</a>      <a href="gallery.html">photo gallery</a>      <a href="howto.html">peony<br />how-to's</a>      <a href="tales.html">peony<br />tales</a>      <a href="visit.html"> <br />visit</a>      <span class="clearfix"><a href="contact.html">contact/ order</a></span>  </div>  <br />  <div class="notreally"><h1>peonies of coos riviera</h1></div>  <span class="text">      above connecticut river in new hampshire's coos county,      more hundred varieties of herbaceous peonies, tree peonies,      , intersectional-hybrid peonies bloom late may july.      <p>the display garden has closed season.  order peonies fall planting,           email <a href="mailto:peonies@criv.com">peonies@criv.com</a>, or phone 603.837.9800.</p>      <p>review <a href="now.html"><b>the 2014 bloom season</b></a> in pictures!</p>  </span>


Comments

Post a Comment

Popular posts from this blog

node.js - Using Node without global install -

i'm working on few node & electron (atom shell) projects , i'm curious how them work without user having install node globally. i've seen few applications including node directory in project contains node.exe binary. how go setting node project use binary? edit: thought should add, i've searched everywhere answer this, unrelated results.
Read more

How to access a php class file from PHPFox framework into javascript code written in simple HTML file? -

i've website developed using phpfox v3.0.7 . now i'm trying implement 'sse(server sent events)' 1 of php files. reference i'm giving below necessary code part of file. file titled process.class.php , present @ location /var/www/module/notification/include/service/process.class.php present on server having ip http://34.124.40.142/ . <?php /** * [phpfox_header] */ header('content-type: text/event-stream'); header('cache-control: no-cache'); defined('phpfox') or exit('no dice!'); /** * * * @copyright [phpfox_copyright] * @author raymond benc * @package phpfox_service * @version $id: service.class.php 67 2009-01-20 11:32:45z raymond_benc $ */ class notification_service_process extends phpfox_service { /** * class constructor */ public function __construct() { $this->_stable = phpfox::gett('notification'); } public function add($...
Read more

java - Null response to php query in android, even though php works properly -

Image
table i'm trying retrieve above data using 2 php files below. want pass email parameter , return bets user = email. work fine when tested advanced rest client, problem not php. however, when try through android 2 java classes below, null pointer exception (logcat below) , json object returned null. i'm not sure error is, think i'm not passing parameter php , that's why it's producing null response. logcat 05-31 15:10:50.227 26074-26074/com.example.albert.betterapp e/androidruntime﹕ fatal exception: main process: com.example.albert.betterapp, pid: 26074 java.lang.runtimeexception: unable start activity componentinfo{com.example.albert.betterapp/com.example.albert.betterapp.displayallbets}: java.lang.nullpointerexception @ android.app.activitythread.performlaunchactivity(activitythread.java:2292) @ android.app.activitythread.handlelaunchactivity(activitythread.java:2350) @ android.app.activitythread.acce...
Read more