2017-04-06 10 views
0

HTML5 및 CSS 스타일 시트의 새로운 기능입니다. 저는 롤 플레잉 그룹을위한 작은 웹 사이트를 구축하는 과정에 있으며 수직 탐색 모음을 만드는 방법을 알아내는 데 너무 기뻤습니다. 하지만 모든 디스플레이에서 텍스트가 뒤 떨어진다는 것을 알고 있습니다. 텍스트가 시작되고 탐색이 끝나는 위치를 설정하는 방법이 있는지 궁금합니다. 감사!세로 텍스트 뒤에 배치되는 HTML 텍스트

ul { 
 
\t list-style-type: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t width: 200px; 
 
\t background-color: #d9d9d9; 
 
\t height: 100%; 
 
\t position: fixed; 
 
\t display: inline-block; 
 
} 
 

 
li { 
 
\t text-align: center; 
 
\t border-bottom: 1px solid #555; 
 
} 
 
\t 
 

 
li a { 
 
\t display: block; 
 
\t color: #000; 
 
\t padding: 8px 16px; 
 
\t text-decoration: none; 
 
\t font-family: "Arial" 
 
} 
 

 
.active { 
 
\t background-color: #990000; 
 
\t color: white; 
 
} 
 

 
li a:hover { 
 
\t background-color: #990000 
 
\t color: white; 
 
} 
 

 
#titletext { 
 
\t text-align: center; 
 
\t font-family: "Arial"; 
 
\t font-size: 52; 
 
} 
 

 
#welcome { 
 
\t text-align: center; 
 
\t font-family: "Arial" 
 
} 
 

 
#intro { 
 
\t text-align:center; 
 
\t font-family: "Arial" 
 
}
<html> 
 
\t <head> 
 
\t \t <link rel="stylesheet" type="text/css" href="HOME_PAGE.css"> 
 
\t \t <title>FFXIV RP Database</title> 
 
\t \t <style> 
 
\t \t \t div.head { 
 
\t \t \t \t background-color: #000000; 
 
\t \t \t \t color: white; 
 
\t \t \t \t text-decoration: none; 
 
\t \t \t \t margin: 5px 0 5px 0; 
 
\t \t \t \t padding: 20px; 
 
\t \t \t } 
 
\t \t </style> 
 
\t </head> 
 

 
\t <body> 
 
<!--NAVIGATION BAR--> 
 
\t \t <div class="Navigation"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li id="first"><img src="xiv logo.png" width="200px"></li> 
 
\t \t \t \t <li><a href="1.html" class="active">Home</a></li> 
 
\t \t \t \t <li><a href="2.html">Characters</a></li> 
 
\t \t \t \t <li><a href="3.html">Story</a></li> 
 
\t \t \t \t <li><a href="4.html">Stats</a></li> 
 
\t \t \t \t <li><a href=".html">Contact</a><li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
<!--HEADER--> 
 
\t \t <div class="Head"> 
 
\t \t \t <h1 id="titletext">FFXIV RP Database</h1> 
 
\t \t </div> 
 
<!--BELOW HEAD CONTENT--> 
 
\t \t <div class="Welcome"> 
 
\t \t \t <p> 
 
\t \t \t \t <h2 id="welcome">Welcome to Eorzea!</h2> 
 
\t \t \t \t <div style="text-align:center;"> 
 
\t \t \t \t \t <img src="group.png" width="40%"> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="IntroParagraph" style="text-align:center;" id="Intro"> 
 
\t \t \t \t \t <p><i>"Such a marvel proof not only that the gods exist, but that they love, and that profoundly."</i> 
 
\t \t \t \t \t <br/><b>Orrick Ballard (Explorer and Map-Maker)</b><br/> 
 
\t \t \t \t \t <br/> 
 
\t \t \t \t \t <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 
 
\t \t \t \t \t outlying islands. The realm has known many unique civilizations throughout its long history, and harbors many starkly different ones 
 
\t \t \t \t \t 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 
 
\t \t \t \t \t South, a vast expanse of unforgiving desert harbors few willing to brave its scalding heat.</p> 
 
\t \t \t \t \t <p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the 
 
\t \t \t \t \t very stones of the land rich with veins of the power-infused crystals. </p> 
 
<!--WRITE-UP: "EORZEA"--> 
 
\t \t <div class="Welcome"> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t <h2 id="welcome">City-States of Eorzea</h2> 
 
\t \t \t \t \t <div style="text-align:left;"> 
 
\t \t \t \t \t \t <img src="eorzea.jpg" width="40%"> 
 
\t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t \t <ol type="I"> 
 
\t \t \t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t \t \t <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. 
 
\t \t \t \t \t \t \t \t 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> 
 
\t \t \t \t \t \t \t \t <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. 
 
\t \t \t \t \t \t \t \t 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 
 
\t \t \t \t \t \t \t \t to determine the fate of the city’s citizens. </li> 
 
\t \t \t \t \t \t \t \t <li> 
 
\t \t \t \t </div> 
 
\t \t \t </p> 
 
\t </body> 
 
</html>

답변

0

시작하려면 코드를 고정하고 구조를 조정하는 것이 좋습니다. 누락 된 태그가 많은 것으로 보입니다 (나는이 태그를 수정하려고했습니다). 한 팁은 닫는 div 태그에 주석을 추가하여 각 섹션의 끝 부분을 볼 수 있습니다.

그렇다면 페이지 왼쪽에서 모든 것을 이동하려면 을 .Welcome 클래스에 적용하면됩니다. 200px은 고정 된 너비 인 navigation이므로 너비를 보충하려고합니다. 당신의 Welcome 클래스가 body 내용을 포장하기 때문에, 당신은이 클래스

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

을 "텍스트 탐색 쳐"왜 그 이유는 다음 ul 요소의 위치가 다른 레이어로 이동 문서 (에서 분리하게하고 임의의 공간을 차지하지 않는 fixed입니다 그 페이지). 따라서 텍스트는 모든 페이지 공간을 차지하며 그 중 일부는 ul 뒤에 있습니다. 당신이 좋은 이유 fixedul을해야 할 수도 있습니다으로

, 아래의 코드는 하나의 CSS 규칙을 추가 - ul 요소 표시를위한 공간 나뭇잎 텍스트의 왼쪽 패딩, 정의

.Head, .Welcome { 
    padding-left: 200px; 
} 

ul { 
 
\t list-style-type: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t width: 200px; 
 
\t background-color: #d9d9d9; 
 
\t height: 100%; 
 
\t position: fixed; 
 
\t display: inline-block; 
 
} 
 

 
li { 
 
\t text-align: center; 
 
\t border-bottom: 1px solid #555; 
 
} 
 
\t 
 

 
li a { 
 
\t display: block; 
 
\t color: #000; 
 
\t padding: 8px 16px; 
 
\t text-decoration: none; 
 
\t font-family: "Arial" 
 
} 
 

 
.active { 
 
\t background-color: #990000; 
 
\t color: white; 
 
} 
 

 
li a:hover { 
 
\t background-color: #990000 
 
\t color: white; 
 
} 
 

 
#titletext { 
 
\t text-align: center; 
 
\t font-family: "Arial"; 
 
\t font-size: 52; 
 
} 
 

 
#welcome { 
 
\t text-align: center; 
 
\t font-family: "Arial" 
 
} 
 

 
#intro { 
 
\t text-align:center; 
 
\t font-family: "Arial" 
 
} 
 

 
.Head, .Welcome { 
 
    padding-left: 200px; 
 
}
<html> 
 
\t <head> 
 
\t \t <link rel="stylesheet" type="text/css" href="HOME_PAGE.css"> 
 
\t \t <title>FFXIV RP Database</title> 
 
\t \t <style> 
 
\t \t \t div.head { 
 
\t \t \t \t background-color: #000000; 
 
\t \t \t \t color: white; 
 
\t \t \t \t text-decoration: none; 
 
\t \t \t \t margin: 5px 0 5px 0; 
 
\t \t \t \t padding: 20px; 
 
\t \t \t } 
 
\t \t </style> 
 
\t </head> 
 

 
\t <body> 
 
<!--NAVIGATION BAR--> 
 
\t \t <div class="Navigation"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li id="first"><img src="xiv logo.png" width="200px"></li> 
 
\t \t \t \t <li><a href="1.html" class="active">Home</a></li> 
 
\t \t \t \t <li><a href="2.html">Characters</a></li> 
 
\t \t \t \t <li><a href="3.html">Story</a></li> 
 
\t \t \t \t <li><a href="4.html">Stats</a></li> 
 
\t \t \t \t <li><a href=".html">Contact</a><li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
<!--HEADER--> 
 
\t \t <div class="Head"> 
 
\t \t \t <h1 id="titletext">FFXIV RP Database</h1> 
 
\t \t </div> 
 
<!--BELOW HEAD CONTENT--> 
 
\t \t <div class="Welcome"> 
 
\t \t \t <p> 
 
\t \t \t \t <h2 id="welcome">Welcome to Eorzea!</h2> 
 
\t \t \t \t <div style="text-align:center;"> 
 
\t \t \t \t \t <img src="group.png" width="40%"> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="IntroParagraph" style="text-align:center;" id="Intro"> 
 
\t \t \t \t \t <p><i>"Such a marvel proof not only that the gods exist, but that they love, and that profoundly."</i> 
 
\t \t \t \t \t <br/><b>Orrick Ballard (Explorer and Map-Maker)</b><br/> 
 
\t \t \t \t \t <br/> 
 
\t \t \t \t \t <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 
 
\t \t \t \t \t outlying islands. The realm has known many unique civilizations throughout its long history, and harbors many starkly different ones 
 
\t \t \t \t \t 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 
 
\t \t \t \t \t South, a vast expanse of unforgiving desert harbors few willing to brave its scalding heat.</p> 
 
\t \t \t \t \t <p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the 
 
\t \t \t \t \t very stones of the land rich with veins of the power-infused crystals. </p> 
 
<!--WRITE-UP: "EORZEA"--> 
 
\t \t <div class="Welcome"> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t <h2 id="welcome">City-States of Eorzea</h2> 
 
\t \t \t \t \t <div style="text-align:left;"> 
 
\t \t \t \t \t \t <img src="eorzea.jpg" width="40%"> 
 
\t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t \t <ol type="I"> 
 
\t \t \t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t \t \t <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. 
 
\t \t \t \t \t \t \t \t 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> 
 
\t \t \t \t \t \t \t \t <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. 
 
\t \t \t \t \t \t \t \t 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 
 
\t \t \t \t \t \t \t \t to determine the fate of the city’s citizens. </li> 
 
\t \t \t \t \t \t \t \t <li> 
 
\t \t \t \t </div> 
 
\t \t \t </p> 
 
\t </body> 
 
</html>