css - Divs overlapping - push one up and the other down? -

-

i have "hamburger" mobile navigation button when clicked brings div titled #navigation. however, due div positioned (it in other divs) div not extend 100% of width of document, 100% of width of container div.

not problem there secondary issue because navigation div overlaps both header div , div below it. i'd rather push header , div below down.

whilst take div out of container , possibly fix problems placing elsewhere, causes problems navigation on full size version of page #navigation div same both versions of page, different styling. here's code.

body {      margin: 0;  	line-height: 1.428;  	}  .wrap {    	width: 90%;    	max-width: 71.5em;    	margin: 0 auto;    	padding: 0.625em 0.625em;  }  #header {  	background: #442869;   	padding-top: 1em;  	padding-bottom: 1em;  	min-height: 6em;  }  #mobile-navigation-btn {  	display: none;  	float: right;   }  #navigation {  	display: block;  	float: right;  }    #navigation ul {    	list-style: none;    }    #navigation li {    	display: inline-block;  	float: left;  	padding-right: 2em;  	padding-top: 0.7em;  	padding-bottom: 0.7em;    }  #navigation li:last-child {  padding-right: 0em;  }  #navigation li {  	color: #ffffff;  		text-decoration: none;   }    .show-menu {  	text-decoration: none;  	color: black;  	background: #ac3333;  	text-align: center;  	padding: 20px 10px;  border: 1px black solid;      }    .show-menu:hover {  	background: #ac1111;  }  #extra {  	background: #222922;   	padding-top: 1em;  	padding-bottom: 1em;  	min-height: 2em;  	color: white;    }    /*hide checkbox*/  input[type=checkbox]{      display: none;  }    /*show menu when invisible checkbox checked*/  input[type=checkbox]:checked ~ #navigation{      display: block;  }      #hamburger {  display: inline-block;  }    .icon-bar {  display: block;      width: 22px;      height: 2px;      border-radius: 1px;      margin-bottom: 4px;      background-color: black;    }    @media screen , (max-width : 920px) {  #mobile-navigation-btn {  	display: block;  	}  	  #navigation {  	display: none;  	width: 100%;     margin: 0;     padding: 0;     background-color:#333333;     top: 0;     left: 0;  }    	/*create vertical spacing*/  	#navigation li {  		margin-bottom: 1px;  	}  	/*make dropdown links vertical*/  #navigation ul li {  	display: block;  	float: none;  	  margin:0;    padding:0;  }    	/*make menu links full width*/  	#navigation ul li, li {  		width: 100%;  	}  }
<!doctype html>  <head>    <script>      // picture element html5 shiv      document.createelement( "picture" );    </script>    <script src="picturefill.min.js" async>    </script>    <title>    </title>    <link rel="stylesheet" type="text/css" href="style.css">  </head>  <body>    <div id="header">      <div class="wrap">                <picture>          <source srcset="seiri-logo-regular.png" media="(min-width: 1100px)">          <img srcset="seiri-logo-small.png" alt="…">        </picture>                <div id="mobile-navigation-btn">          <label for="show-menu" class="show-menu">            <div id="hamburger">              <span class="icon-bar">              </span>              <span class="icon-bar">              </span>              <span class="icon-bar">              </span>            </div>            menu          </label>      	        </div>                <input type="checkbox" id="show-menu" role="button">        <div id="navigation">          <ul>            <li>              <a href="#" class="current">                home              </a>            </li>            <li>              <a href="#">                customer research              </a>            </li>            <li>              <a href="#">                business improvement              </a>            </li>            <li>              <a href="#">                contact              </a>            </li>            <li>              <a href="#">                blog              </a>            </li>          </ul>        </div>      </div>    </div>        <div id="extra">      <div class="wrap">        test      </div>    </div>      </body>  </html>

i posted , had advice perhaps adding "position: relative" #header , "position: absolute" #navigation (plus using "top" adjust location) solve problem, doesn't work either doesn't push divs below down account space navigation takes up!

any appreciated.


Comments

Post a Comment

Popular posts from this blog

html - Firefox flex bug applied to buttons? -

-
i'm trying apply flex button on firefox i'm having problem on chrome doesn't happens. this css: .button { display: inline-flex; align-items: center; } as can see in fiddle, "caret" word moved new line, happens if element <button> tag, <div> works expected. http://codepen.io/anon/pen/xblmgx is firefox bug or there css i'm missing? nevermind, looks "mr firefox" doesn't idea... <button> not implementable (by browsers) in pure css, bit of black box, perspective of css. means don't react in same way e.g. <div> would. this isn't specific flexbox -- e.g. don't render scrollbars if put "overflow:scroll" on button, , don't render table if put "display:table" on it. stepping further, isn't specific <button> . consider <fieldset> , <table> have special rendering behavior: data:text/html,<fieldset style="d
Read more

html - Missing border-right in select on Firefox -

-
Image
when put select div width , padding-left, options have no border on right. more, happend if select have width 118px , parent have 15px of padding left! have idea, going on? my code: <!doctype html> <html> <head lang="en"> </head> <body> <div style="width: 1000px; padding-left: 15px;"> <select style="width: 118px;"> <option>a</option> <option>b</option> <option>c</option> </select> </div> </body> </html> and result: here plunker: click it happend on firefox on windows. tested on 40.0.2 version -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; source: https://stackoverflow.com/a/11390432/4431269 source of problem: https://bugzilla.mozilla.org/show_bug.cgi?id=924068 and use of google ! edit: (source of problem, explained) after rea
Read more

c# - two queries in same method -

-
i trying execute 2 queries in same method gives me exception. can red of exception declaring new command there way use same command? string id="hi"; connection.open(); oledbcommand command1 = new oledbcommand(); command1.connection = connection; string query1 = "select * products category='" + combobox1.text + "' , subcategory = '" + combobox2.text + "' , sizes='" + combobox3.text + "'"; command1.commandtext = query1; oledbdatareader reader = command1.executereader(); while (reader.read()) { id = reader[0].tostring(); } textbox1.text = id; string query = "insert category_in (category_id,amount,amount_in) values ('"+ id+"' ,500,300)"; command1.commandtext = query; command1.executenonquery(); messagebox.show("saved"); connection.close();
Read more