html - Horizontal Navigation Bar won't be as long as page -



horizontal nav bar won't take whole screen , i'm not sure how that. here's looks like. also, once it's done that, want image on top of nav bar, instead of above it. appreciated.

html,  body,  div,  span,  applet,  object,  iframe,  h1,  h2,  h3,  h4,  h5,  h6,  p,  blockquote,  pre,  a,  abbr,  acronym,  address,  big,  cite,  code,  del,  dfn,  em,  img,  ins,  kbd,  q,  s,  samp,  small,  strike,  strong,  sub,  sup,  tt,  var,  b,  u,  i,  center,  dl,  dt,  dd,  ol,  ul,  li,  fieldset,  form,  label,  legend,  table,  caption,  tbody,  tfoot,  thead,  tr,  th,  td,  article,  aside,  canvas,  details,  embed,  figure,  figcaption,  footer,  header,  hgroup,  menu,  nav,  output,  ruby,  section,  summary,  time,  mark,  audio,  video {      margin: 0;      padding: 0;      border: 0;      font-size: 100%;      font: inherit;      vertical-align: baseline;  }    nav li {      list-style-type: none;      display: inline-block;      padding: 1em;      background-color: aqua;      float: right;  }    nav {      text-decoration: none;      color: white;      background-color: black;      padding: 1em;      font-size: 1.2em;  }    img#sushi {}    nav ul {    }
<a href=""><img src="../_images/imgres.jpg" id="sushi" width="50" height="50" alt="sushi"></a>      <nav role="navigation">      <ul>          <li><a href="">home</a></li>          <li><a href="">about</a></li>          <li><a href="">contact us</a></li>      </ul>      </nav>  </body>

since lielements floated, have add overflow: auto; ul wrap floated li s (otherwise have 0px height , therefore not visible). also, have apply background color ul:

nav li {    list-style-type: none;    display: inline-block;    padding: 1em;    background-color: aqua;    float: right;  }    nav {    text-decoration: none;    color: white;    background-color: black;    padding: 1em;    font-size: 1.2em;  }    img#sushi {}    nav ul {    overflow: hidden;    background-color: aqua;  }
<a href=""><img src="../_images/imgres.jpg" id="sushi" width="50" height="50" alt="sushi"></a>  <nav role="navigation">    <ul>      <li><a href="">home</a></li>      <li><a href="">about</a></li>      <li><a href="">contact us</a></li>    </ul>  </nav>

p.s.: image link in question leads page shows nothing...


Comments

Popular posts from this blog

php - Permission denied. Laravel linux server -

google bigquery - Delta between query execution time and Java query call to finish -

python - Pandas two dataframes multiplication? -