Название веб-сайта в адаптивной навигационной панели

reapcupz

Можно ли разместить название веб-сайта в середине адаптивной верхней навигации, как это сделать?

с кодом, скорректированным для перемещения пунктов меню вправо?

 <!DOCTYPE html>


<html>


<head>


<style>


body {margin:0;}


ul.topnav {


list-style-type: none;


margin: 0;


padding: 0;


overflow: hidden;


background-color: #333;


}


ul.topnav li {float: right;}


ul.topnav li a {


display: inline-block;


color: #f2f2f2;


text-align: center;


padding: 14px 16px;


text-decoration: none;


transition: 0.3s;


font-size: 17px;


}


ul.topnav li a:hover {background-color: #111;}


ul.topnav li.icon {display: none;}


[USER=124521]@media[/USER] screen and (max-width:680px) {


ul.topnav li:not:)first-child) {display: none;}


ul.topnav li.icon {


float: right;


display: inline-block;


}


}


[USER=124521]@media[/USER] screen and (max-width:680px) {


ul.topnav.responsive {position: relative;}


ul.topnav.responsive li.icon {


position: absolute;


right: 0;


top: 0;


}


ul.topnav.responsive li {


float: none;


display: inline;


}


ul.topnav.responsive li a {


display: block;


text-align: left;


}


}


</style>


</head>


<body>


<ul class="topnav">


<li><a class="active" href="#home">Home</a></li>


<li><a href="#news">News</a></li>


<li><a href="#contact">Contact</a></li>


<li><a href="#about">About</a></li>


<li class="icon">


<a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>


</li>


</ul>


<div style="padding-left:16px">


<h2>Responsive Topnav Example</h2>


<p>Resize the browser window to see how it works.</p>


</div>


<script>


function myFunction() {


document.getElementsByClassName("topnav")[0].classList.toggle("responsive");


}


</script>


</body>


</html>

Код (разметка):

stilus1

Эй, что я знаю.

У вас нет, по крайней мере, в уме, таланта кодирования.

Это не моя работа, я взял это дословно с сайта W3Schools и изменил только "float слева направо".

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

Но почему бы вам не показать миру, насколько вы хороши, и не опубликовать более отзывчивую навигационную панель.

Возможно, вы также захотите объяснить хорошим ребятам из Digitalpoint, какой смысл был в вашем ответе, кроме того, чтобы показать, что вы Величайший.

onetwomeoryou

Хм, как можно использовать H2 без h1, чтобы он обозначал начало подраздела? Тем более, если это ваш логотип/заголовок, почему, черт возьми, он должен быть в списке?

Ваша разметка такая тарабарщина, что я бы даже не стал пытаться сделать то, что вы просите, не выбросив эту ерунду в мусор и не начав все сначала.

Конечно, для скрипттардери это вдвойне просто, чтобы показать/скрыть меню.

evgeniybel

@goldberry — в этом случае вы можете послушать — когда дело доходит до исправления HTML/CSS, @deathshadow, вероятно, лучший или, по крайней мере, один из трех лучших на этом форуме — и, вероятно, на многих других( ?). Он может показаться высокомерным и резким, но это не делает его неправым.

Вы говорите, что дословно взяли что-то из w3schools, и это все говорит, на самом деле - выбросьте это, начните заново.

Ничего из того, что они предоставляют, не стоит использовать.

evgeniybel

У меня не было много времени, поэтому я не смог внимательно изучить то, что подробно описала Deathshadow в своем посте.

Я посмотрел на его конечный продукт, и он идеален.

Зайдя на его сайт и увидев, что он сделал для других людей, чтобы помочь им, я был очень впечатлен и немного смущен моей чрезмерной реакцией на его первоначальный пост.

canismajoris

Попробуй это

 <!DOCTYPE html>


<html>


<head>


<style>


body {margin:0;}


ul.topnav {


list-style-type: none;


margin: 0;


padding: 0;


text-align:center;


overflow: hidden;


background-color: #333;


}


ul.topnav li {


float: right;


padding:10px 0px;


}


ul.topnav li a {


color: #f2f2f2;


text-align: center;


padding: 14px 16px;


text-decoration: none;


transition: 0.3s;


font-size: 17px;


}


ul.topnav li a:hover {background-color: #111;}


ul.topnav li.icon {display: none;}


@media screen and (min-width:240px){


ul.topnav li:last-child{


float:none;


position:relative;


left:0;


right:0;


}


}


@media screen and (min-width:760px){


ul.topnav li:last-child{


position:absolute;


}


}


[USER=124521]@media[/USER] screen and (max-width:680px) {


ul.topnav li:not:)first-child) {display: none;}


ul.topnav li.icon {


float: right;


display: inline-block;


}


}


[USER=124521]@media[/USER] screen and (max-width:680px) {


ul.topnav.responsive {position: relative;}


ul.topnav.responsive li.icon {


position: absolute;


right: 0;


top: 0;


}


ul.topnav.responsive li {


float: none;


display: inline;


}


ul.topnav.responsive li a {


display: block;


text-align: left;


}


}


</style>


</head>


<body>


<ul class="topnav">


<li><a class="active" href="#home">Home</a></li>


<li><a href="#news">News</a></li>


<li><a href="#contact">Contact</a></li>


<li><a href="#about">About</a></li>


<li class="icon">


<a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>


</li>


<li>Responsive Topnav Example</li>


</ul>


<div style="padding-left:16px">


<h2>Responsive Topnav Example</h2>


<p>Resize the browser window to see how it works.</p>


</div>


<script>


function myFunction() {


document.getElementsByClassName("topnav")[0].classList.toggle("responsive");


}


</script>


</body>


</html>

Код (разметка):

Omlette

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

Извините, вы можете защищать его сколько хотите, но я и некоторые, кто написал мне в личку после моего ответа, не питают к нему никакого уважения.

Для таких новичков, как я, w3schools предоставляет понятные объяснения и примеры. В любом случае, я вряд ли буду обращаться за помощью на этот форум в будущем, если модераторы будут терпеть его ненужные ответы.

nivyu

Прежде всего, я хотел бы поблагодарить вас за подробную информацию и опыт обучения, на предоставление которого вы потратили много времени.

Мне понадобится некоторое время, чтобы изучить ваш подробный пост.

Прошу прощения за выбор слов в предыдущих постах, они были совершенно ненужны.

То, как вы ответили, безусловно, подтверждает поддержку ваших навыков, оказанную POPSICLE.

и ты заслужил мое уважение тем, как ты сейчас с этим справился.

eShopScript

Если у вас тонкая кожа, я предлагаю найти себе другое занятие.

Что касается w3schools, я советую вам избегать их использования в качестве справочных материалов, поскольку они дают плохие советы и обычно не одобряются теми, кто действительно что-то знает.

Если вы уважаете кого-то, если он хорошо относится к вам, то вам действительно предстоит суровая проверка реальности.

Мы здесь добровольно и ДЕЙСТВИТЕЛЬНО предоставляем рекомендации и советы, но нам не обязательно вести себя вежливо, особенно если человек, получающий совет, не принимает его близко к сердцу.

Если вы действительно хотите учиться, вы можете многому научиться на этом форуме, и понимание того, что ваш код — мусор, является первым шагом.

Не расстраивайтесь, обычно так бывает, когда вы только начинаете.

@deathshadow указал на некоторые явные проблемы, я мог бы указать на еще несколько, но поскольку вы не предоставили ссылку или даже изображение того, как вы хотите, чтобы это выглядело, вы не предоставили много полезной информации.

Быстрое переписывание, вероятно, было бы довольно простым и обеспечило бы значительные улучшения.

Похожие темы	Дата
InspireMe.ru - вдохновение для творческих людей	19.10.2024, 18:10
Как расставить мебель в картинке дизайна?	19.10.2024, 18:10
Переключатель CSS без JavaScript не работает на Android 4.0.3	19.10.2024, 18:10
пожалуйста оцените html дизайн/верстку нескольких страниц в админке	19.10.2024, 18:10
Киносайт WP — некоторые фильмы идут хорошо, а некоторые не идут. НУЖНЫ НЕСКОЛЬКО ПРЕДЛОЖЕНИЙ	19.10.2024, 18:10
Структура URL-адреса	19.10.2024, 18:10
Какая CMS мне подойдет?	19.10.2024, 18:10
Доступный CSS – что вы думаете?	19.10.2024, 18:10
Нужен совет по веб-разработке	19.10.2024, 18:10
Как сделать эти элементы div всегда липкими	19.10.2024, 18:10

Название веб-сайта в адаптивной навигационной панели

reapcupz

stilus1

onetwomeoryou

evgeniybel

evgeniybel

canismajoris

Omlette

nivyu

eShopScript

I AM

Интересно