css - Header breaks a apart when resizing browser window -

-

i've got simple page header element consisting of logo image within anchor tag nested in h1 element , nav element 4 links. below i've got 2 elements each holding image , text. i'm wondering why header breaks apart when resize browser window, , why text not wrap around respect images , landing right of them. i've noticed when hover passed logo there's slight area still link shouldn't be. i'd appreciate assistance here, i'm looking understand what's happening under hood css.

http://s27.postimg.org/7eyff3ivn/header_break1.png

http://s28.postimg.org/fwg9lohjh/header_break2.png

html

<!doctype html> <html lang="en"> <head>    <meta charset="utf-8">    <title>acme</title>    <meta name="viewport" content="width=device-width, initial-scale=1">    <meta name="description" content="">    <link rel="stylesheet" href="layout.css"> </head>  <body>        <header>     <h1><a href="index.html"><img src="images/logo.png" alt="respond"></a></h1>          <nav>               <ul>             <li><a href="">link 1</a></li>             <li><a href="">link 2</a></li>             <li><a href="">link 3</a></li>             <li><a href="">link 4</a></li>            </ul>         </nav>      </header>      <section class="first">          <h2>image 1</h2>          <figure>                 <img src="images/featured.png" alt="image 1" />         </figure>          <p>lorem ipsum dolor sit amet, et eum vocibus neglegentur, id nisl quidam<br>             melius nam. agam inani vel ei, reque putent oportere qui ad. cum<br>              autem veniam in, soluta everti volumus no ius. utinam tritani est ex,<br>              mei decore putent vidisse ne, justo nulla eirmod duo. te liber<br>              libris adolescens eos, id regione gloriatur neglegentur pri. mei sanctus deleniti repudiandae<br>              at, sit tritani fabulas dissentias et, salutandi vituperata vim ex.</p>      </section>      <section class="second">          <h2>image 2</h2>          <figure>            <img src="images/featured.png" alt="image 2" />         </figure>          <p>lorem ipsum dolor sit amet, et eum vocibus neglegentur, id nisl quidam             melius nam. agam inani vel ei, reque putent oportere qui ad. cum<br>              autem veniam in, soluta everti volumus no ius. utinam tritani est ex,<br>              mei decore putent vidisse ne, justo nulla eirmod duo. te liber<br>              libris adolescens eos, id regione gloriatur neglegentur pri. mei sanctus deleniti repudiandae<br>              at, sit tritani fabulas dissentias et, salutandi vituperata vim ex.</p>      </section>      <footer>             <p id="copyright">&copy; 2014 acme</p>     </footer>  </body> </html>

css

/* reset ------------------------------------------------------------ */ * { margin: 0; padding: 0; } html { overflow-y: scroll;} body { background:#ffffff; font-size: 16px; color: #666666; font-family: arial, helvetica, sans-serif;} ol, ul { list-style: none; margin: 0;} ul li { margin: 0; padding: 0;} h1 { margin-bottom: 10px; color: #111111;}   a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;} p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;} img { display: block; margin-bottom: 10px;} aside { font-style: italic; font-size: 0.9em;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {      display: block;     }  /*  structure   */ body {     font-family: helvetica neue, helvetica, arial;     background: white;     color: #555; }  header {   width: 100%;   overflow: auto;   border-bottom: 1px solid black;  }  /* logo h1 */ header h1 {   float: left; }  header h1 {   display: block;   text-decoration: none;   margin-top: .5em;   margin-left: 5.5em;   width: 25%; }  /* navigation*/  nav {   width: 75%;   overflow: auto; }  ul {   float: right;   list-style-type: none;   margin: 0;   padding: 0;   margin-right: 20em;  }  ul li {   float: left; }  ul li {   display: block;   text-decoration: none;   margin: 5px;   margin-top: 1.5em;   padding: 2px;   font-size: 1.2em; }  ul li a:hover {   border-bottom: 1px solid #6fc36e; } /* content*/ section {   text-align: center;   margin: 0.625em auto;   overflow: auto; }  section h2 {   margin-top: 1em;   margin-bottom: 1em; }  section img {   max-width: 100%; }  .first {   width: 45%;   float: left;   margin-left: 2%; }  .first figure {   width: 75%; }  .second {   width: 45%;   float: left;   margin-left: 2%; }  .second figure {   width: 75%; }   /* footer*/ footer {   clear: both;   text-align: center; }

this answer addresses problems having navigation.

i remove following properties ul in css.

float: right; margin-right: 20em;

you don't need float menu right , margin decreases available space menu. 75% width set in css should enough constrain menu size.

the wrapping of nav occur when width of nav less width of elements in menu. if want prevent can enlarge width of nav or take different approach.

hope helps.


Comments

Post a Comment

Popular posts from this blog

php - render data via PDO::FETCH_FUNC vs loop -

-
i've been using 2 methods render data. the first one: function name($id,$name){ return '<div id="'.$id.'">'.$name.'</div>'; } echo implode($pdo->query("select id,name user")->fetchall(pdo::fetch_func,'name')); the second one: $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); foreach($users $user){ echo name($user->id,$user->name); } i don't understand how pdo::fetch_func works. tried figure out. however, not well-documented. could please explain fetch mode? , also, 1 performs better? thank you. both methods wrong , have learn how use templates , how separate business logic presentation logic. $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); tpl::assign('users', $users); is code business logic part. then in template <?php foreach $users $row): ?> <div id="<?=$...
Read more

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

-
i read alot other solution still confused should mine... #include <opencv2/objdetect/objdetect.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> #include <stdio.h> using namespace std; using namespace cv; int main(int argc, const char** argv) { //create cascade classifier object used face detection cascadeclassifier face_cascade; //use haarcascade_frontalface_alt.xml library face_cascade.load("haarcascade_frontalface_alt.xml"); //setup video capture device , link first capture device videocapture capturedevice; capturedevice.open(0); //setup image files used in capture process mat captureframe; mat grayscaleframe; //create window present results namedwindow("outputcapture", 1); //create loop capture , find faces while (true) { //capture new image frame capturedevice >> captureframe; ...
Read more

The canvas has been tainted by cross-origin data in chrome only -

-
uncaught securityerror: failed execute 'getimagedata' on 'canvasrenderingcontext2d': canvas has been tainted cross-origin data i getting above error in chrome. code(following) works fine in mozilla. have not corss domain issue. why above error in chrome? var wheel_canvas, wheel_context, can_w, can_h, wheel_grd; var large_radius = 160; var small_radius = 120; var wheel_canvas = document.getelementbyid('wheel_canvas'); var wheel_context = wheel_canvas.getcontext('2d'); var can_w = $(wheel_canvas).width(); var can_h = $(wheel_canvas).height(); var centerx = can_w / 2, centery = can_h / 2; var wheel_grd = null; test('#ff0000'); function test(hex) { $('#clrpicker').css({'left': 210, 'top': 210 }); inverted = hexbw(hex); $('#color_val_show').val(hex); current_color_hex_val_selected = hex; $('#color_val_show').css({'color':inverted,'background':hex}); fillgradient...
Read more