html - Why won't my nav be 100% in width relative to the browser -

-

if test out code , resized browser window, last list-item "sign up" when hovered (is way tell) doesn't stretch 100%. i've tried many different ways. if can test out , find solution; please explain how fixed way can learn. please.

html,  body {    margin: 0;    padding: 0;    height: 100%;    width: 100%;    background-color: rgba(182, 182, 182, 1);  }  div.main_container {    position: fixed;    height: 100%;    width: 100%;    background-image: url("../images/img_0060.jpg");    background-repeat: no-repeat;    background-size: cover;    background-attachment: fixed;  }  div.nav_container {    position: fixed;    z-index: 1;    height: 50px;    width: 100%;    min-width: 700px;    background-color: rgba(34, 34, 34, .75);  }  ul.nav {    margin: 0;    padding: 0;    list-style: none;    list-style-type: none;    height: 100%;    width: 100%;  }  ul.nav li {    background-color: transparent;    display: table;    float: left;    height: 50px;    width: 12.5%;    text-align: center;  }  ul.nav li marquee {    position: relative;    display: table-cell;    vertical-align: middle;    color: white;    font-weight: bold;    font-family: fantasy;  }  ul.nav li {    text-decoration: none;    text-transform: capitalize;    font-family: fantasy;    position: relative;    display: table-cell;    vertical-align: middle;    color: lightgray;    font-weight: bold;  }  ul.nav li:hover {    background-color: rgba(205, 205, 205, .50);  }  ul.nav li:hover marquee {    background-color: black;    color: lightgreen;  }  ul.nav li:hover {    color: black;  }
<!doctype html>  <html lang="en-us">    <head>    <title>kendall's portfolio</title>    <link rel="stylesheet" type="text/css" href="css/index.css" />  </head>    <body>    <div class="main_container">      <div class="nav_container">        <ul class="nav">          <li>            <a href="#">home</a>          </li>          <li>            <a href="#">kendall</a>          </li>          <li>            <a href="#">projects</a>          </li>          <li>            <a href="#">social</a>          </li>          <li>            <a href="#">tutorials</a>          </li>          <li>            <marquee scrollamount="2">              sliding text            </marquee>          </li>          <li>            <a href="#">login</a>          </li>          <li>            <a href="#">sign up</a>          </li>        </ul>        <!--closing of nav-->      </div>      <!--closing of nav_container-->    </div>    <!--closing of main_container-->  </body>    </html>

you can change last-child of ul.nav li float:right

html,  body {    margin: 0;    padding: 0;    height: 100%;    width: 100%;    background-color: rgba(182, 182, 182, 1);  }  div.main_container {    position: fixed;    height: 100%;    width: 100%;    background-image: url("../images/img_0060.jpg");    background-repeat: no-repeat;    background-size: cover;    background-attachment: fixed;  }  div.nav_container {    position: fixed;    z-index: 1;    height: 50px;    width: 100%;    min-width: 700px;    background-color: rgba(34, 34, 34, .75);  }  ul.nav {    margin: 0;    padding: 0;    list-style: none;    list-style-type: none;    height: 100%;    width: 100%;  }  ul.nav li {    background-color: transparent;    display: table;    float: left;    height: 50px;    width: 12.5%;    text-align: center;  }  ul.nav li:last-child {    float:right;    }  ul.nav li marquee {    position: relative;    display: table-cell;    vertical-align: middle;    color: white;    font-weight: bold;    font-family: fantasy;  }  ul.nav li {    text-decoration: none;    text-transform: capitalize;    font-family: fantasy;    position: relative;    display: table-cell;    vertical-align: middle;    color: lightgray;    font-weight: bold;  }  ul.nav li:hover {    background-color: rgba(205, 205, 205, .50);  }  ul.nav li:hover marquee {    background-color: black;    color: lightgreen;  }  ul.nav li:hover {    color: black;  }
<!doctype html>  <html lang="en-us">    <head>    <title>kendall's portfolio</title>    <link rel="stylesheet" type="text/css" href="css/index.css" />  </head>    <body>    <div class="main_container">      <div class="nav_container">        <ul class="nav">          <li>            <a href="#">home</a>          </li>          <li>            <a href="#">kendall</a>          </li>          <li>            <a href="#">projects</a>          </li>          <li>            <a href="#">social</a>          </li>          <li>            <a href="#">tutorials</a>          </li>          <li>            <marquee scrollamount="2">              sliding text            </marquee>          </li>          <li>            <a href="#">login</a>          </li>          <li>            <a href="#">sign up</a>          </li>        </ul>        <!--closing of nav-->      </div>      <!--closing of nav_container-->    </div>    <!--closing of main_container-->  </body>    </html>


Comments

Post a Comment

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

-
i have spring project , try make use spring boot , run @ embadded tomcat following : https://spring.io/guides/gs/rest-service/ this application //@configuration //@enableaspectjautoproxy @springbootapplication @componentscan(basepackages = "gux.prome") public class application { public static void main(string[] args) { springapplication.run(application.class, args); } } if use maven command: mvn spring-boot:run , project starts fine, need debug , run main method @ intelij, exception occurs: exception in thread "main" java.lang.illegalargumentexception: cannot instantiate interface org.springframework.context.applicationlistener : org.springframework.boot.logging.classpathloggingapplicationlistener @ org.springframework.boot.springapplication.createspringfactoriesinstances(springapplication.java:414) @ org.springframework.boot.springapplication.getspringfactoriesinstances(springapplication.java:394) @ org.springframework.bo...
Read more

reactjs - React router and this.props.children - how to pass state to this.props.children -

-
i'm using react-router first time , don't know how think in yet. here's how i'm loading components in nested routes. entry point .js reactdom.render( <router history={hashhistory} > <route path="/" component={app}> <route path="models" component={content}> </route> </router>, document.getelementbyid('app') ); app.js render: function() { return ( <div> <header /> {this.props.children} </div> ); } so child of app content component sent in. i'm using flux , app.js has state , listens changes, don't know how pass state down this.props.children. before using react-router app.js defines children explicitly, passing state natural don't see how now. using couple of react helper methods can add state, props , whatever else this.props.children render: function() { var children = react.ch...
Read more

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -

-
i have excel workbook used generate quotations customers. there main page user inputs data, , there buttons generate various pdfs , send them customer. however, 1 user consistently getting error preventing generating , sending pdfs. i beleive "microsoft windows common controls 6.0 (sp6)". it's installed on users' computers. on mine, location "c:\windows\syswow64\mscomctl.ocx" on others "c:\windows\system32\mscomctl.ocx" the user experiencing issues on 32-bit machine, "mscomctl.ocx" file should in system32. have manually put in there, , pointed common controls reference in vba it. issue seems keep reverting looking in syswow64. since folder doesn't exist, can't find it, , can't produce pdfs. i thought perhaps issue user running older version of office (2007) there users on 2013 , 2016. thought perhaps mixture of 64-bit , 32-bit users. user gets sent workbook other users (as quotation process goes further, gets passed ...
Read more