-1
내가 디자인 한 웹 페이지에는 머리글이 있으며 머리글 바로 아래에 몇 개의 하위 메뉴가있는 가로 탐색 메뉴가 있고 본문/내용과 바닥 글이 있습니다. 그러나 탐색 메뉴는 페이지의 본문 섹션 옆에 숨겨져 있으며 하위 메뉴를 선택할 수 없습니다.탐색 메뉴를 웹 페이지의 본문과 겹치게 만드는 방법
<body bgcolor="#CCCCCC">
<div id="top_wrapper">
<div id="ch_name">the website</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<div id="nav">
<div id="navigation" align="center">
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">History</a>
<ul class="hidden">
<li><a href="#">Early History</a></li>
<li><a href="#">From 17<sup>th</sup> Century</a></li>
<li><a href="#">From 21<sup>th</sup> Century</a></li>
</ul>
</li>
<li>
<a href="#">menu 2</a>
<ul class="hidden">
<li><a href="#">drop down 1</a></li>
<li><a href="#">drop down 2</a></li>
<li><a href="#">drop down 3</a></li>
</ul>
</li>
<li>
<a href="#">menu 3</a>
<ul class="hidden">
<li><a href="#">drop down 1</a></li>
<li><a href="#">drop down 2</a></li>
<li><a href="#">drop down 3</a></li>
<li><a href="#">drop down 4</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div id="container">
<div class="verses">
<h1>verses</h1>
</div>
<div class="box">
<div class="sidebar">
<h1>timings</h1>
</div>
<div class="content">
<h1>News</h1>
</div>
</div>
</div>
<div class="clear"></div>
<div id="footer"><p>the footer</p></div>
</body>
을하고 해당 CSS 코드는 다음과 같습니다 :
그래서/*for top div wrapper*/
#top_wrapper{
background: #003;
position: absolute;
top:0;
left:0;
width:100%;
height:100px;
}
#nav{
margin: 0 auto;
text-align: center;
width: 900px;
}
#ch_name{
font:70px Georgia, serif;
color:#ddd;
text-align:center;
}
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #778899;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #778899;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*div box styles */
.Table
{
display: table;
align:center;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
#container {
position:relative;
margin:0 auto;
width:800px;
}
.box{
background-color: #f0f0f0;
height: 500px;
}
.verses{
margin-top:12px;
background-color:#679BB7;
height:20%;
width:100%;
margin-bottom: 12px;
}
.sidebar{
background-color: #bbd2df;
width: 350px;
height: 100%;
float: left;
border-right-style: solid;
border-bottom-style: solid;
border-color: #000;
border-width: 12px;
}
.content{
height: 100%;
float: left;
border-bottom-style: solid;
border-color: #000;
border-width: 12px;
}
#footer {
background:#cccc66;
padding:10px;
text-align:center;
}
.clear {clear:both;}
가 ..... 내가 잘못 여기서 뭐하는하고 다음과 같이
HTML 코드는?
감사합니다.
뭐 잘못하셨습니까? 우선,'
'을 사용하여 수직 간격을 추가하십시오. – MightyPork
줄 바꿈에 사용해야하는 대상은 무엇입니까? 대체 태그 또는 CSS 코드가 있습니까? – Bijoy
아마도 CSS 여백을 사용하십시오. – MightyPork