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