0
포럼에서 처음입니다. 나는 webdesign의 초보자이며 정답을 찾을 수없는 문제가 발생했습니다. 지금까지 여러 사이트에서 내 대답을 검색했지만 내 문제와 가장 가까운 것은이 문제였습니다.원치 않는 탐색 스택 브라우저 크기 조정
Horizontal to vertical menu, on browser window resize.
내 문제는 다음과 같습니다. 브라우저 창 크기를 작은 크기로 조정하면 내 nav ul 목록이 스택됩니다. 모든 데스크톱 화면을 가로로 유지할 수 있어야합니다. 예를 들어 APPLE의 페이지가 저장됩니다. 나는 내가 뭘 잘못하고 있는지 전혀 모른다.
아래 코드는 .... 잘하면 누군가 나를 도울 수 있으며 내 오류를 걸러 낼 수 있습니다.
HTML
<div id="navcontainer">
<div id="navlist">
<ul>
<li id="active"><a href="home.html" target="_self" id="current">Home</a></li>
<li><a href="about.html" target="_self">About</a></li>
<li><a href="services.html" target="_self">Services</a></li>
<li><a href="gallery.html" target="_self">Gallery</a></li>
<li><a href="contact.html" target="_self">Contact</a></li>
</ul>
</div>
CSS
body {
margin: 200px 0px 10px 0px;
padding: 0px;
text-align: center;
background-image:url(../images/bg.jpg);
background-repeat: repeat;}
/***** HEADER *****/
#header {
width: 900px;
text-align: center;
font-family: Raleway;
font-size: 30px;
font-weight: bolder;
font-variant: normal;
color: rgba(51,51,51,1);
position: absolute;
display: block;
top: 0px;}
/***** NAVIGATION *****/
#navcontainer {
position: relative;
background-image: url(../images/navbar.png);
background-repeat: repeat-x;
height: 37px;
-o-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-moz-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-webkit-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-ms-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
font-family: Raleway;
display: block;
width: 100%; }
#navlist {
float:left;
position:relative;
left:50%;
padding-top: 1.5px;}
#navlist ul {
float:left; /* IE6 needs this */
position:relative;
left:-50%;
list-style:none;
margin: 0 auto;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 100%;
font-style: normal;
font-weight: bolder;
font-variant: normal;
text-decoration: none;
padding: 0px; }
#navlist li {
float:left;
display: inline;
padding-top: 6.8px;
padding-right: 25px;
padding-bottom: 6.8px;
padding-left: 25px;}
#navlist li a {
text-decoration: none;
color: #424242;
padding-top: 6.8px;
padding-right: 19px;
padding-bottom: 6.8px;
padding-left: 19px;}
#navlist li a:hover {
background-image: url(../images/navbar3.png);
background-repeat: no-repeat;
background-position: bottom;
padding-right: 19px;
paddin-left: 19px;}
#navlist li a:active {
background-image: url(../images/navbar1.png);
background-repeat: no-repeat;
background-position: bottom;
border-width: 1px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: none;
border-left-style: inset;
border-top-color: rgba(102,102,102,1);
border-right-color: rgba(153,153,153,1);
border-left-color: rgba(153,153,153,1); }
#navlist li a:visited {
text-decoration: none;
color: #424242;
padding-top: 6.8px;
padding-right: 0px;
padding-bottom: 6.8px;
padding-left: 0px;}
#navlist li a:focus {
background-image: url(../images/navbar1.png);
background-repeat: no-repeat;
background-position: bottom;
padding-right: 19px;
padding-left: 19px;
border-width: 1px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: none;
border-left-style: inset;
border-top-color: rgba(102,102,102,1);
border-right-color: rgba(153,153,153,1);
border-left-color: rgba(153,153,153,1);
text-shadow: 1px 1px #FFF, -0.3px -0.3px #000;}