HTML & CSS: Centering the Navbar -

-

i've looked other people have had similar problems can't seem find answer works me. i'm trying center nav bar keeps getting pushed off left. appreciated! thanks.

    body {        background-color: rgb(222, 243, 246);        /* background-image: url("capitola.jpg");           background-repeat: no-repeat;          background-attachment: fixed;          background-position: center;          background-size: contain;          margin: 0;          padding: 0;          border: 0;      */      }      div.image {        background-image: url("capitola.jpg");        background-repeat: no-repeat;        background-attachment: fixed;        background-position: center;        background-size: 100% 100%;        margin: 0;        padding: 0;        border: 10 solid #021a40;        position: absolute;        height: 100%;        width: 100%;      }      div#wrapper {        position: fixed;        text-align: center;        z-index: 1000;        margin: 0 auto;      }      .navbar ul {        list-style-type: none;        display: inline-block;        padding: 0;        margin: 0;        overflow: hidden;        border-radius: 500px;        border: 1px solid black;      }      .navbar li {        float: left;        display: inline;        text-align: center;      }      .navbar {        display: inline-block;        font-weight: bold;        width: 120px;        color: black;        background-color: rgb(254, 255, 241)        /*rgb(219,243,245)*/        ;        text-align: center;        padding: 10px;        text-decoration: none;      }      .navbar a:hover {        background-color: rgb(239, 162, 180);      }      h1 {        font-family: florence, cursive;        margin-top: 8%;        margin-left: 60%;        color: white;        font-size: 3.5em;      }
<!doctype html>  <html>    <head>    <link type="text/css" rel="stylesheet" href="stylesheet.css" />    <title>michael leath</title>  </head>    <body>    <div class="image">      <h1>michael leath</h1>    </div>    <div id="wrapper">      <div class="navbar">        <ul>          <li><a href="#aboutme">about me</a>          </li>          <li><a href="#contact">contact</a>          </li>          <li><a href="#education">eduation</a>          </li>          <li><a href="#background">background</a>          </li>        </ul>      </div>    </div>  </body>    </html>

you need set width #wrapper margin: 0 auto work :)

body {    background-color: rgb(222, 243, 246);    /* background-image: url("capitola.jpg");           background-repeat: no-repeat;          background-attachment: fixed;          background-position: center;          background-size: contain;          margin: 0;          padding: 0;          border: 0;      */  }  div.image {    background-image: url("capitola.jpg");    background-repeat: no-repeat;    background-attachment: fixed;    background-position: center;    background-size: 100% 100%;    margin: 0;    padding: 0;    border: 10 solid #021a40;    position: absolute;    height: 100%;    width: 100%;  }  div#wrapper {    position: fixed;    text-align: center;    z-index: 1000;    margin: 0 auto;    width: 100%;  }  .navbar ul {    list-style-type: none;    display: inline-block;    padding: 0;    margin: 0;    overflow: hidden;    border-radius: 500px;    border: 1px solid black;  }  .navbar li {    float: left;    display: inline;    text-align: center;  }  .navbar {    display: inline-block;    font-weight: bold;    width: 120px;    color: black;    background-color: rgb(254, 255, 241)    /*rgb(219,243,245)*/    ;    text-align: center;    padding: 10px;    text-decoration: none;  }  .navbar a:hover {    background-color: rgb(239, 162, 180);  }  h1 {    font-family: florence, cursive;    margin-top: 8%;    margin-left: 60%;    color: white;    font-size: 3.5em;  }
<!doctype html>  <html>    <head>    <link type="text/css" rel="stylesheet" href="stylesheet.css" />    <title>michael leath</title>  </head>    <body>    <div class="image">      <h1>michael leath</h1>    </div>    <div id="wrapper">      <div class="navbar">        <ul>          <li><a href="#aboutme">about me</a>          </li>          <li><a href="#contact">contact</a>          </li>          <li><a href="#education">eduation</a>          </li>          <li><a href="#background">background</a>          </li>        </ul>      </div>    </div>  </body>    </html>


Comments

Post a Comment

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

-
i had following code works fine on localhost: $document = new domdocument(); $document->loadhtml($p_result); $form = $document->getelementsbytagname('form')->item(0); // code continues using $form variable after same code updated on outside server, loadhtml() failed , issued warning. warning: domdocument::loadhtml() expects parameter 1 valid path, string given in path/name/to/script.php returned null instead of object code pretty gets fatal error. note contents of $p_result absolutely same on outside server , on localhost. but why displays kind of warning , why not work? doesn't loadhtml() expects argument 1 string in first place? why method expects parameter 1 valid path ? just make clear i'm not calling loadhtmlfile() , i'm calling loadhtml() . thanks. you're affected one of php bugs . issue present in php 5.6.8 , 5.6.9. have affected php version on server, , bug-free version on localhost. the bug forbids null
Read more

python - How to create jsonb index using GIN on SQLAlchemy? -

-
here's current code creating index jsonb. index("mytable_data_idx_id_key", mytable.data['id'].astext, postgresql_using='gin') but got error. sqlalchemy.exc.programmingerror: (psycopg2.programmingerror) data type text has no default operator class access method "gin" hint: must specify operator class index or define default operator class data type. [sql: "create index event_data_idx_id_key on event using gin ((data ->> 'id'))"] is there way create index on sqlalchemy? the postgresql specific sqlalchemy docs @ http://docs.sqlalchemy.org/en/latest/dialects/postgresql.html#operator-classes mention postgresql_ops dictionary provide "operator class" used postgresql, , provide example illustrating use: index('my_index', my_table.c.id, my_table.c.data, postgresql_ops={ 'data': 'text_pattern_ops',
Read more

c# - TransactionScope not rolling back although no complete() is called -

-
i'm using transactionscope rollback transaction fail bool errorreported = false; action<importerrorlog> newerrorcallback = e => { errorreported = true; errorcallback(e); }; using (var transaction = new transactionscope()) { foreach (importtaskdefinition task in taskdefinition) { loader.load(streamfile, newerrorcallback, task.destinationtable, processingtaskid); } if (!errorreported) transaction.complete(); } i'm sure there no transactionscope started ahead or after code. i'm using entity framework insert in db. regardless state of errorreported transaction never rolled in case of error. what missing ? transactionscope sets transaction.current . that's does. wants transacted must @ property. i believe ef each time connection opened reason. probably, connection open when scope installed. open connection inside of scope or enlist manually. ef has nasty "design decision": default opens
Read more