안녕하세요, 제 홈페이지에 http://www.adventurelink.com/Gallery/Destination.com 과 같은 두 번째 탐색 모음을 만들려고합니다 .
첫 번째 (상단 탐색 모음 및 텍스트)가 제자리에 있지만 두 번째 텍스트 (링크)는 그 아래에만 있으며 "id"이름을 변경하는 코드를 복사하여 붙여 넣었을 때 왜 그런지 모르겠습니다. 지금은 실제 콘텐츠를 추가하기 전에 레이아웃을 설정하는 중이지만 먼저 정렬해야합니다. 어떤 도움이라도 대단히 감사하겠습니다.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<link href="file:///C|/Users/Deniz/Desktop/Website/css/2nd.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!--TOP NAVIGATION BAR AND LOGO-->
<div id="topnavbar">
<div id="logo"></div>
<nav id="topnavlinks">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="#.html">Profile</a></li>
<li><a href="signup.html">Sign Up</a></li>
<li><a href="login.html">Login</a></li>
</ul>
</nav>
</div>
<!--SPACE FOR CHANGING PICTURES-->
<div id="picspace"></div>
<!--BOTTOM NAVIGATION BAR-->
<div id="botnavbar"></div>
<nav id="botnavlinks">
<ul>
<li><a href="destinations.html">Destinations</a></li>
<li><a href="#.html">Activities</a></li>
<li><a href="#.html">Things to do</a></li>
<li><a href="#.html">Accomodation</a></li>
<li><a href="#.html">Transport</a></li>
</ul>
</nav>
<!--CONTENT---->
<div id="content"></div>
<!--FOOTER-->
<div id="footer"></div>
</body>
</html>
CSS :
* {
margin:0px;
}
#topnavbar{
height:50px;
margin:0 auto;
background: -webkit-linear-gradient(#e78869, #ad4e2f); /* For Safari */
background: -o-linear-gradient(#e78869, #ad4e2f); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#e78869, #ad4e2f); /* For Firefox 3.6 to 15 */
background: linear-gradient(#e78869, #ad4e2f); /* Standard syntax (must be last) */
}
#topnavlinks{
width:500px;
float:right;
margin: 0 auto;
}
#topnavlinks ul{
margin: 0 auto;
list-style:none;
height:35px;
}
#topnavlinks li{
margin: 0 auto;
height:35px;
float:left;
}
#topnavlinks li a:link, a:visited{
display:block;
color:#fff;
padding:10px;
text-decoration:none;
}
#topnavlinks li a:hover{
background-color:#6880af;
}
#logo{
}
#picspace{
height:400px;
background-color:grey;
}
#botnavbar{
height:50px;
background: -webkit-linear-gradient(#6880af, #314a79); /* For Safari */
background: -o-linear-gradient(#6880af, #314a79); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#6880af, #314a79); /* For Firefox 3.6 to 15 */
background: linear-gradient(#6880af, #314a79); /* Standard syntax (must be last) */
}
#botnavlinks{
width:500px;
float:right;
margin: 0 auto;
}
#botnavlinks ul{
margin: 0 auto;
list-style:none;
height:35px;
}
#botnavlinks li{
margin: 0 auto;
height:35px;
float:left;
}
#botnavlinks li a:link, a:visited{
display:block;
color:black;
padding:10px;
text-decoration:none;
}
#botnavlinks li a:hover{
background-color:#e78869;
}
#content{
height:500px;
background-color:grey;
}
#footer{
}
여전히 더 많은 스타일링이 필요하지만 그 이유 botnavbar는 링크를 넣기 전에 div를 닫았 기 때문입니다 .
<!--BOTTOM NAVIGATION BAR-->
<div id="botnavbar"></div> <!-- here, this shouldn't be closed yet -->
<nav id="botnavlinks">
<ul>
<li><a href="destinations.html">Destinations</a></li>
<li><a href="#.html">Activities</a></li>
<li><a href="#.html">Things to do</a></li>
<li><a href="#.html">Accomodation</a></li>
<li><a href="#.html">Transport</a></li>
</ul>
</nav>
"botnavbar"를 만들고 즉시 해당 div를 닫았으므로 링크가 해당 바 안에 있지 않습니다. </div>아래 로 이동하십시오 .
<!--BOTTOM NAVIGATION BAR-->
<div id="botnavbar">
<nav id="botnavlinks">
<ul>
<li><a href="destinations.html">Destinations</a></li>
<li><a href="#.html">Activities</a></li>
<li><a href="#.html">Things to do</a></li>
<li><a href="#.html">Accomodation</a></li>
<li><a href="#.html">Transport</a></li>
</ul>
</nav>
</div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다