css - HTML Text Wrapping Behind Vertical Navigation -


relatively new html5 , css style sheets. i'm in process of building small website roleplay group, , overjoyed figure out how create vertical navigation bar; i'm noticing on every display, text falls behind it. i'm wondering if there's way set text begins , navigation ends? thanks!

ul {  	list-style-type: none;  	margin: 0;  	padding: 0;  	width: 200px;  	background-color: #d9d9d9;  	height: 100%;  	position: fixed;  	display: inline-block;  }    li {  	text-align: center;  	border-bottom: 1px solid #555;  }  	    li {  	display: block;  	color: #000;  	padding: 8px 16px;  	text-decoration: none;  	font-family: "arial"  }    .active {  	background-color: #990000;  	color: white;  }    li a:hover {  	background-color: #990000  	color: white;  }    #titletext {  	text-align: center;  	font-family: "arial";  	font-size: 52;  }    #welcome {  	text-align: center;  	font-family: "arial"  }    #intro {  	text-align:center;  	font-family: "arial"   }
<html>  	<head>  		<link rel="stylesheet" type="text/css" href="home_page.css">  		<title>ffxiv rp database</title>  		<style>  			div.head {  				background-color: #000000;  				color: white;  				text-decoration: none;  				margin: 5px 0 5px 0;  				padding: 20px;  			}  		</style>  	</head>    	<body>  <!--navigation bar-->  		<div class="navigation">  			<ul>  				<li id="first"><img src="xiv logo.png" width="200px"></li>  				<li><a href="1.html" class="active">home</a></li>  				<li><a href="2.html">characters</a></li>  				<li><a href="3.html">story</a></li>  				<li><a href="4.html">stats</a></li>  				<li><a href=".html">contact</a><li>  			</ul>  		</div>  <!--header-->  		<div class="head">  			<h1 id="titletext">ffxiv rp database</h1>  		</div>  <!--below head content-->  		<div class="welcome">  			<p>  				<h2 id="welcome">welcome eorzea!</h2>  				<div style="text-align:center;">  					<img src="group.png" width="40%">  				</div>  				<div class="introparagraph" style="text-align:center;" id="intro">  					<p><i>"such marvel proof not gods exist, love, , profoundly."</i>  					<br/><b>orrick ballard (explorer , map-maker)</b><br/>  					<br/>  					<b>eorzea</b> setting of final fantasy xiv. vast region of <b>hydaelyn</b>, , consists of continent <b>aldenard</b>,  					outlying islands. realm has known many unique civilizations throughout long history, , harbors many starkly different ones  					to day. in north, mountains loom tall overhead, buried under feet of snow , lashed @ icy winds. ,  					south, vast expanse of unforgiving desert harbors few willing brave scalding heat.</p>  					<p>despite unique geography , vastly different regions, eorzea holds hearts of many expansive currents of <b>aether</b>,  					very stones of land rich veins of power-infused crystals. </p>  <!--write-up: "eorzea"-->  		<div class="welcome">  				<p>  					<h2 id="welcome">city-states of eorzea</h2>  					<div style="text-align:left;">  						<img src="eorzea.jpg" width="40%">  						<p>due size, region of eorzea has been divided 6 major city-states, each own unique cultures , climates:</p>  							<ol type="i">  								<li><b>limsa lominsa</b> seated across multitude of islands across southern coast of island <b>vylbrand</b>, each connected single city bridge.</li>  								<li><b>gridania</b> stands east of aldenard, forests lush , vibrant. dense woodlands know many agriculturists , crafters, whom seek refine craft.  								the city-state emphasizes harmony of man , nature, resident <b>white mages</b> keeping peace between forest’s <b>elementals.</b></li>  								<li><b>ul’dah</b> sits buried in sands of southern aldenard, popular more hedonistic pleasures; ranging fierce gladiator fights gambling halls.  								claimed sovereign <b>sultana</b>, rule belongs wealthiest among residents; affluence holds reigns of city, allowing rich , influential  								to determine fate of city’s citizens. </li>  								<li>  				</div>  			</p>  	</body>  </html>

to start, suggest pinning through code , making adjustments tot structure. there looks lot of missing tags (which tried correct in fiddle). 1 tip add comments closing div tags can see each section ends.

with said, can apply margin-left: 200px; .welcome class in order shift on left side of page. since 200px width of fixed navigation, want compensate width. , since welcome class wrapping body content, add margin class

https://fiddle.jshell.net/kez8alam/

.welcome {    margin-left: 200px;  }    ul {    list-style-type: none;    margin: 0;    padding: 0;    width: 200px;    background-color: #d9d9d9;    height: 100%;    position: fixed;    display: inline-block;  }    li {    text-align: center;    border-bottom: 1px solid #555;  }    li {    display: block;    color: #000;    padding: 8px 16px;    text-decoration: none;    font-family: "arial"  }    .active {    background-color: #990000;    color: white;  }    li a:hover {    background-color: #990000 color: white;  }    #titletext {    text-align: center;    font-family: "arial";    font-size: 52;  }    #welcome {    text-align: center;    font-family: "arial";  }    #intro {    text-align: center;    font-family: "arial"  }
<div class="home-wrap">      <div class="navigation">      <ul>        <li id="first"><img src="xiv logo.png" width="200px"></li>        <li><a href="1.html" class="active">home</a></li>        <li><a href="2.html">characters</a></li>        <li><a href="3.html">story</a></li>        <li><a href="4.html">stats</a></li>        <li><a href=".html">contact</a>          <li>      </ul>    </div>    <!--header-->    <div class="head">      <h1 id="titletext">ffxiv rp database</h1>    </div>    <!--below head content-->    <div class="welcome">      <p>        <h2 id="welcome">welcome eorzea!</h2>        <div style="text-align:center;">          <img src="group.png" width="40%">        </div>        <div class="introparagraph" style="text-align:center;" id="intro">          <p><i>"such marvel proof not gods exist, love, , profoundly."</i>            <br/><b>orrick ballard (explorer , map-maker)</b>            <br/>            <br/>            <b>eorzea</b> setting of final fantasy xiv. vast region of <b>hydaelyn</b>, , consists of continent <b>aldenard</b>, outlying islands. realm has known many unique civilizations throughout long history,            , harbors many starkly different ones day. in north, mountains loom tall overhead, buried under feet of snow , lashed @ icy winds. , south, vast expanse of unforgiving desert harbors few willing brave            scalding heat.</p>          <p>despite unique geography , vastly different regions, eorzea holds hearts of many expansive currents of <b>aether</b>, stones of land rich veins of power-infused crystals. </p>        </div>        </div>        </div>        <!--write-up: "eorzea"-->        <div class="welcome">          <p>            <h2 id="welcome">city-states of eorzea</h2>            <div style="text-align:left;">              <img src="eorzea.jpg" width="40%">              <p>due size, region of eorzea has been divided 6 major city-states, each own unique cultures , climates:</p>              <ol type="i">                <li><b>limsa lominsa</b> seated across multitude of islands across southern coast of island <b>vylbrand</b>, each connected single city bridge.</li>                <li><b>gridania</b> stands east of aldenard, forests lush , vibrant. dense woodlands know many agriculturists , crafters, whom seek refine craft. city-state emphasizes harmony of man , nature,its                  resident <b>white mages</b> keeping peace between forest’s <b>elementals.</b></li>                <li><b>ul’dah</b> sits buried in sands of southern aldenard, popular more hedonistic pleasures; ranging fierce gladiator fights gambling halls.                  <li>claimed sovereign <b>sultana</b>, rule belongs wealthiest among residents; affluence holds reigns of city, allowing rich , influential determine fate of city’s citizens. </li>              </ol>                  </div>          </div>


Comments

Post a Comment

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

consider, toml node module can use: // toml.d.ts declare module toml { export function parse(value:string):any; } declare module "toml" { export = toml; } then: /// <reference path="../../../../../defs/toml/toml.d.ts"/> import toml = require('toml'); toml.parse(...); however, node module export single function, such 'glob' ( https://github.com/isaacs/node-glob ). the node usage of module be: var glob = require("glob") glob("*.js", {}, callback(err, files) { ... }); you'd naively expect this: // glob.d.ts declare function globs(paths:string, options:any, callback:{(err:any, files:string[]):void; ...but because typescripts 'import' semantics bit strange, seems can use 'import .. = require()' statement alias modules . trying call: /// <reference path="../../../../../defs/glob/glob.d.ts"/> import blog = require('glob'); results in: error ts2072: mod...
Read more

openid - Okta: Failed to get authorization code through API call -

i'm integrating okta own idp server using okta's api. i'm implementing authorization code flow following steps below: in own server, use /api/v1/authn endpoint sessiontoken. use sessiontoken obtain authorization calling endpoint: /oauth2/v1/authorize?client_id=" + clientid + "&sessiontoken=" + sessiontoken + "&response_type=code&response_mode=query&scope=openid&redirect_uri=" + redirecturl + "&state=evanyang&nonce=" it's supposed return response status code 302 , location header containing redirect url code value. however, keep getting response status code 200 , without location header, html body saying "you using unsupported browser." , "javascript disabled on browser." according api documentation: http://developer.okta.com/docs/api/resources/oidc.html#authentication-request , sessiontoken parameter sufficient this: an okta one-time sessiontoken. allows api-based ...
Read more

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more