Estoy en el proceso de construir un pequeño sitio web para mi grupo de Roleplay, y me alegró descubrir cómo crear una barra de navegación vertical, pero me doy cuenta de que en cada pantalla, el texto queda atrás.

¿Hay alguna manera de establecer dónde comienza el texto y termina la navegación?

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 a {
  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 to 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 a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
          <br/><b>Orrick Ballard (Explorer and Map-Maker)</b><br/>
          <br/>
          <b>Eorzea</b> is the setting of Final Fantasy XIV. It is a vast region of <b>Hydaelyn</b>, and consists of the continent <b>Aldenard</b>, as well as its outlying islands. The realm has known many unique civilizations throughout its long history,
          and harbors many starkly different ones to this day. In the North, mountains loom tall overhead, buried under feet of snow and constantly lashed at by icy winds. And to the South, a vast expanse of unforgiving desert harbors few willing to brave
          its scalding heat.</p>
        <p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the very stones of the land rich with veins of the 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 to its size, the region of Eorzea has been divided into six major city-states, each with their own unique cultures and climates:</p>
              <ol type="I">
                <li><b>Limsa Lominsa</b> is seated across a multitude of islands across the Southern Coast of the island <b>Vylbrand</b>, each connected into a single city by bridge.</li>
                <li><b>Gridania</b> stands to the east of Aldenard, its forests lush and vibrant. Its dense woodlands know many agriculturists and crafters, all whom seek to refine their craft. The city-state greatly emphasizes the harmony of man and nature,
                  its resident <b>White Mages</b> keeping the peace between the forest’s <b>Elementals.</b></li>
                <li><b>Ul’dah</b> sits buried in the sands of southern Aldenard, popular for its more hedonistic pleasures; ranging from fierce Gladiator fights to its gambling halls. Claimed sovereign by the <b>Sultana</b>, its rule truly belongs to the
                  wealthiest among its residents; affluence holds the reigns of the city, allowing the rich and influential to determine the fate of the city’s citizens. </li>
                <li>
            </div>
          </p>
</body>

</html>
0
M. Son 6 abr. 2017 a las 16:03

2 respuestas

La mejor respuesta

Para comenzar, sugeriría fijar su código y hacer algunos ajustes en la estructura. Parece que faltan muchas etiquetas (que intenté corregir en el violín). Un consejo sería agregar comentarios a sus etiquetas de cierre div para que pueda ver dónde termina cada sección.

Dicho esto, lo que puede hacer es aplicar una margin-left: 200px; a su clase .Welcome para cambiar todo desde el lado izquierdo de la página. Dado que 200px es el ancho de su navigation fijo, desea compensar ese ancho. Y dado que su clase Welcome está envolviendo su contenido body, debe agregar el margen a esta clase

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 a {
  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 to 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 a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
          <br/><b>Orrick Ballard (Explorer and Map-Maker)</b>
          <br/>
          <br/>
          <b>Eorzea</b> is the setting of Final Fantasy XIV. It is a vast region of <b>Hydaelyn</b>, and consists of the continent <b>Aldenard</b>, as well as its outlying islands. The realm has known many unique civilizations throughout its long history,
          and harbors many starkly different ones to this day. In the North, mountains loom tall overhead, buried under feet of snow and constantly lashed at by icy winds. And to the South, a vast expanse of unforgiving desert harbors few willing to brave
          its scalding heat.</p>
        <p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the very stones of the land rich with veins of the 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 to its size, the region of Eorzea has been divided into six major city-states, each with their own unique cultures and climates:</p>
            <ol type="I">
              <li><b>Limsa Lominsa</b> is seated across a multitude of islands across the Southern Coast of the island <b>Vylbrand</b>, each connected into a single city by bridge.</li>
              <li><b>Gridania</b> stands to the east of Aldenard, its forests lush and vibrant. Its dense woodlands know many agriculturists and crafters, all whom seek to refine their craft. The city-state greatly emphasizes the harmony of man and nature,its
                resident <b>White Mages</b> keeping the peace between the forest’s <b>Elementals.</b></li>
              <li><b>Ul’dah</b> sits buried in the sands of southern Aldenard, popular for its more hedonistic pleasures; ranging from fierce Gladiator fights to its gambling halls.
                <li>Claimed sovereign by the <b>Sultana</b>, its rule truly belongs to the wealthiest among its residents; affluence holds the reigns of the city, allowing the rich and influential to determine the fate of the city’s citizens. </li>
            </ol>        
        </div>
        </div>
0
Mike Diglio 6 abr. 2017 a las 13:31

La razón por la cual "el texto se queda atrás de la navegación" es: la posición del elemento ul es fixed, lo que lo separa del documento (se mueve a otra capa y no ocupa ningún espacio en la página). Por lo tanto, el texto ocupa todo el espacio de la página y parte de ellos queda detrás de ul.

Como puede necesitar fixed ul por una buena razón, el siguiente código solo agrega una regla CSS: defina el relleno izquierdo para el texto, lo que deja espacio para la visualización del elemento ul:

.Head, .Welcome {
    padding-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 a {
	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" 
}

.Head, .Welcome {
    padding-left: 200px;
}
<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 to 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 a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
					<br/><b>Orrick Ballard (Explorer and Map-Maker)</b><br/>
					<br/>
					<b>Eorzea</b> is the setting of Final Fantasy XIV. It is a vast region of <b>Hydaelyn</b>, and consists of the continent <b>Aldenard</b>, as well as its
					outlying islands. The realm has known many unique civilizations throughout its long history, and harbors many starkly different ones
					to this day. In the North, mountains loom tall overhead, buried under feet of snow and constantly lashed at by icy winds. And to the
					South, a vast expanse of unforgiving desert harbors few willing to brave its scalding heat.</p>
					<p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the
					very stones of the land rich with veins of the 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 to its size, the region of Eorzea has been divided into six major city-states, each with their own unique cultures and climates:</p>
							<ol type="I">
								<li><b>Limsa Lominsa</b> is seated across a multitude of islands across the Southern Coast of the island <b>Vylbrand</b>, each connected into a single city by bridge.</li>
								<li><b>Gridania</b> stands to the east of Aldenard, its forests lush and vibrant. Its dense woodlands know many agriculturists and crafters, all whom seek to refine their craft.
								The city-state greatly emphasizes the harmony of man and nature, its resident <b>White Mages</b> keeping the peace between the forest’s <b>Elementals.</b></li>
								<li><b>Ul’dah</b> sits buried in the sands of southern Aldenard, popular for its more hedonistic pleasures; ranging from fierce Gladiator fights to its gambling halls.
								Claimed sovereign by the <b>Sultana</b>, its rule truly belongs to the wealthiest among its residents; affluence holds the reigns of the city, allowing the rich and influential
								to determine the fate of the city’s citizens. </li>
								<li>
				</div>
			</p>
	</body>
</html>
0
shaochuancs 6 abr. 2017 a las 13:29