Как остановить перенос меню CSS/HTML при разных разрешениях?

Question

Как остановить перенос меню CSS/HTML при разных разрешениях?

Я новичок в CSS, но много лет играл с другими языками. Я успешно добавил панель навигации на свой веб-сайт, но при просмотре в меньшем окне или в более низком разрешении панель переносится сама собой. Я потратил довольно много часов, просматривая Интернет, и пытался изменить код так, чтобы это помогло другим людям, но пока не нашел решения. В идеале, я хочу, чтобы он изменял размер при изменении разрешения или размера окна, но если это слишком сложно или не может быть сделано, просто заблокируйте размер, чтобы пользователь мог прокручивать изображение, также было бы в порядке.

Я загрузил копию html и CSS в JSFiddle (я уверен, что это будет спагетти-код для опытных программистов, как я узнал по ходу дела).

Я вставил случайное изображение Youtube, где будет отображаться реальное изображение (хотя и того же размера), весь текст случайный, но расположение панели такое же, как и меньшие кнопки с логотипом справа, которые все ссылаются на Facebook.

Любая помощь будет оценена. Если вам нужна дополнительная информация, я буду проверять это регулярно и предоставлю как можно больше информации!

Еще раз спасибо за любую возможную помощь.

Код CSS это:

/* ----- CSS Nav Menu Styling ----- */
#cssnav { 
border: 0px;
margin: 0px;
padding: 0px;
width: auto;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
margin-top: 0px;

}

#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 40px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
white-space: nowrap;

}

#cssnav li {
float: none; /* none = centre */
display: inline-block;
margin-top: 20px;
padding: 0px;
white-space: nowrap;
}

#cssnav li a {
background: white repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
text-align: center;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;

}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}

#cssnav ul ul a { 
color: $(tabs.text.color); /* Template Designer - Change Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}

#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 160px; /* Change Width Of DropDown Menu */
z-index:9999;
}

#cssnav li:hover ul {
display: block;
}

#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}

#cssnav li:hover li a {
background: #FFFFFF; /* Template Designer - Change Background of Link on Hover */
}

#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}



.navleft {float:left} .navright {float:right;} .tabs-inner .widget ul {margin-right: 0px; margin-left: 0px;}

body .navbar { height: 0px; }


/*change background colour here to modify a lot of navbar*/
.tabs-inner .widget ul, .tabs-inner .widget li a, .tabs-inner .section:first-child ul { background: white; border: 0px;}
#navigationbar {width: 100%; height: 96px; background: white repeat-x scroll 0 -800px; _background-image: none; position: fixed; top: 0px; left: 150px; z-index: 999; width:75%;}

HTML-код выглядит следующим образом:

<div id="navigationbar">

<ul id="cssnav" class="navleft">

<img src="http://alpineskin.com/wp-content/uploads/2011/10/youtube-logo-small.jpg" height="80" width="300" />

</ul>

<ul id="cssnav" class="navright">

<li class="active"><a href='http://www.google.com'>Home</a></li>
<li class="sub"><a href='LINK'>About</a>
<ul>
<li><a href='http://www.google.com'>pmf dpfkf</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>pkf dpfdkf</a></li>
</ul>
</li>
<li class="sub"><a href='LINK'>Extras</a>
<ul>
<li><a href='http://www.google.com'>pdfkdf</a></li>
<li><a href='http://www.google.com'>pdfdfp fopdff fdopkf</a></li>
<li><a href='http://www.google.com'>pokef ofkdpf fopk</a></li>
<li><a href='http://www.google.com'>pokdsf</a></li>
</ul>
</li>
<li class="sub"><a href='LINK'>pkedpf</a>
<ul>
<li><a href='http://www.google.com'>poksfd</a></li>
<li><a href='http://www.google.comhttp://www.google.com'>pkp</a></li>
<li><a href='http://www.google.com'>pkdpdfk</a></li>
<li><a href='http://www.google.com'>pip</a></li>
<li><a href='http://www.google.com'>ppjpp</a></li>
<li><a href='http://www.google.com'>perwp</a></li>
<li><a href='http://www.google.com'>ipfjipfipj</a></li>
</ul>
</li>
<li class="sub"><a href='LINK'>pffp</a>
<ul>
<li><a href='http://www.google.com'>pdjfdspfjd</a></li>
<li><a href='http://www.google.com'>pdfdpfjd</a></li>
<li><a href='http://www.google.com'>opsdfdfopdf</a></li>
<li><a href='http://www.google.com'>psdofdsfpfsdp</a></li>
</ul>
</li>
<li class="last"><a href='http://www.google.com'>dsopdfop</a>
</li>



<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<!-- ADD MORE ICONS HERE -->



</ul></div>

1

html css navigation navbar wrapping

Источник

user4441721 12 янв '15 в 07:54

2 ответа

Решение

First if all correction to your HTML. You have used 'cssnav' as id multiple times so please try to implement the functionality without same id. 

To be specific to your requirement, add min-width to menu element and adjust the position through media query to the menu element. I have added sample position to your code in link http://jsfiddle.net/tyebufov/.

Like this you can position the menu element in various resolutions as per your requirement.

1

Источник

user3522427 12 янв '15 в 08:22

Другие вопросы по тегам html css navigation navbar wrapping

user4118466 12 янв '15 в 08:11 2015-01-12 08:11 · Accepted Answer · 2015-01-12 08:11

Вы можете добавить медиа-запрос к CSS. Ваш был немного длинным, чтобы пройти, так что я только что сделал быстрый пример изменения фона. Вы можете изменить все, что вам нравится в запросе. Измените размер до 400px, и фон li изменится. Добавил min-width к панели навигации как хорошо, чтобы остановить это

#navigationbar ul li{list-style-type:none;display:inline-block;}
#navigationbar ul li ul{display:none;}
#navigationbar ul li:hover ul{display:block;position:absolute;}
#navigationbar ul li:hover ul li{display:block;}
@media screen and (max-width: 400px) {
    ul li{
        background-color: lightblue;
    }
  #navigationbar ul{min-width:700px;}
}

<div id="navigationbar">

<ul id="cssnav" class="navleft">

<img src="http://alpineskin.com/wp-content/uploads/2011/10/youtube-logo-small.jpg" height="80" width="300" />

</ul>

<ul id="cssnav" class="navright">

<li class="active"><a href='http://www.google.com'>Home</a></li>
<li class="sub"><a href='LINK'>About</a>
<ul>
<li><a href='http://www.google.com'>pmf dpfkf</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>pkf dpfdkf</a></li>
</ul>
</li>
<li class="sub"><a href='LINK'>Extras</a>
<ul>
<li><a href='http://www.google.com'>pdfkdf</a></li>
<li><a href='http://www.google.com'>pdfdfp fopdff fdopkf</a></li>
<li><a href='http://www.google.com'>pokef ofkdpf fopk</a></li>
<li><a href='http://www.google.com'>pokdsf</a></li>
</ul>
</li>
<li class="sub"><a href='LINK'>pkedpf</a>
<ul>
<li><a href='http://www.google.com'>poksfd</a></li>
<li><a href='http://www.google.comhttp://www.google.com'>pkp</a></li>
<li><a href='http://www.google.com'>pkdpdfk</a></li>
<li><a href='http://www.google.com'>pip</a></li>
<li><a href='http://www.google.com'>ppjpp</a></li>
<li><a href='http://www.google.com'>perwp</a></li>
<li><a href='http://www.google.com'>ipfjipfipj</a></li>
</ul>
</li>
<li class="sub"><a href='LINK'>pffp</a>
<ul>
<li><a href='http://www.google.com'>pdjfdspfjd</a></li>
<li><a href='http://www.google.com'>pdfdpfjd</a></li>
<li><a href='http://www.google.com'>opsdfdfopdf</a></li>
<li><a href='http://www.google.com'>psdofdsfpfsdp</a></li>
</ul>
</li>
<li class="last"><a href='http://www.google.com'>dsopdfop</a>
</li>



<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<!-- ADD MORE ICONS HERE -->



</ul></div>