Как сложить мою навигационную панель по вертикали

ProgramBox

Как сложить мою навигационную панель по вертикали

Post author:admin
Запись опубликована:19 февраля, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

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

Итак, по сути, я хочу, чтобы панель навигации располагалась вертикально, а все, что начинается в другом разделе (он же раздел «Последние обновления»), попадало в один столбец. Приведенный ниже код — это то, что я уже сделал с html и css.

 body{background:#000;font:normal small "Trebuchet MS", Arial, Helvetica, sans-serif;margin:20px 0;padding:0;}
h1,h2,h3{color:#B13413;}
h2{font-size:1.6em;}
h3{font-size:1em;margin:0;}
p,ul,ol,blockquote{margin-top:0;}
a:link{border-bottom:1px dotted #CCC;text-decoration:none;color:#3284B5;}
#header{width:700px;height:200px;background:url(../img/img1.jpg) no-repeat;margin:0 auto;}
#header *{border:none;text-decoration:none;font-weight:400;color:#FFF;margin:0;}
#header h1{float:left;font-size:3em;padding:140px 0 0 20px;}
#menu{width:700px;height:41px;background:#37AEF2 url(../img/img2.gif);margin:0 auto;}
#menu ul{list-style:none;margin:0;padding:0;}
#menu li{display:inline;}
#menu a{display:block;float:left;height:32px;text-decoration:none;color:#FFF;padding:9px 20px 0;}
#menu a:hover,#menu .active a{background:url(../img/img3.gif);color:#FFF; }
#content{width:700px;background:url(../img/img4.gif);margin:0 auto;}
#colAd{float:left;width:120px;padding:10px;}
#colContent{float:left;width:360px;padding:20px 10px 0;  }
#colSidebar{float:left;width:160px;padding:20px 10px 0;}
#footer{width:700px;background:url(../img/img6.gif) repeat-x;font-size:smaller;margin:0 auto;padding:10px 0;}
#footer *{color:#666;}
a:hover,img{border:none;}
table th, td{
	border: 1px solid white;
}

 <!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Sploosh - You can splash in sploosh!</title>
<link rel="stylesheet" href="cssmobile/main.css" > 
<link rel="stylesheet" href="cssmobile/responsive.css">
</head>
<body>
<div id="header">
	<h1><a href="index.html">Splöösh - Mobile</a></h1>
	 
</div>
<div id="menu">
	<ul>
		<li class="active"><a href="index.html" accesskey="1" title="">Homepage</a></li>
		<li><a href="index.html" accesskey="2" title="">splöösh Desktop</a></li>
		<li><a href="index.html" accesskey="3" title="">My Photos</a></li>
		<li><a href="index.html" accesskey="4" title="">My Bookmarks</a></li>
		<li><a href="index.html" accesskey="5" title="">Contact Me</a></li>
	</ul>
</div>
<div style="clear: both;"></div>
<div id="content">
	<div id="colAd"> <a href="#"><img src="img/ad_120x600.jpg" alt="" width="120" height="600" /></a> </div>
	<div id="colContent">
		<h2> Splöösh!</h2>
		<p><em><strong>Splöösh</strong></em> onec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. </p>
		<h2>Viewport dimensions:</h2>
		<table style="width:100%">
					<tr>
						<td> </td>
						<td><b> Width </b></td>
						<td> <b>Height</b> </td>
					</tr>
					<tr>
						<td> <b>Page</b> </td>
						<td> <script type = "text/javascript">
							var width = document.documentElement.clientWidth;
							document.write(width); 
							</script></td>
						<td><script type = "text/javascript">
							var height = document.documentElement.clientHeight;
							document.write(height); 
							</script> </td>
					
					</tr>
					<tr>
						<td><b> Screen</b> </td>
						<td> <script type = "text/javascript">
							var width = window.screen.width;
							document.write(width); 
							</script></td>
						<td> <script type = "text/javascript">
							var height = window.screen.height;
							document.write(height); 
							</script></td>
					</tr>
					<tr>
						<td> <b>ViewPort</b> </td>
						<td><script type = "text/javascript">
							var width = window.innerWidth;
							document.write(width); 
							</script></td>
		
						<td> <script type = "text/javascript">
							var height = window.innerHeight;
							document.write(height); </script></td>
					</tr>
					</table>
        <p id="desc"></p> 
        <p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa:</p>
		<ol>
			<li><a href="#">Suspendisse quis gravida massa felis</a></li>
			<li><a href="#">Vivamus sagittis bibendum erat</a></li>
			<li><a href="#">Nullam et orci in erat viverra ornare</a></li>
			<li><a href="#">Suspendisse quis gravida massa felis</a></li>
			<li><a href="#">Curabitur malesuada turpis nec ante</a></li>
		</ol>
		<h3>Lorem Ipsum Dolore </h3>
		<p>Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada turpis nec.</p>
		<p><a href="#">Pellentesque sed vestibulum blanditamp;#8230;</a></p>
	</div>
	
    <div id="colSidebar">
		<h2>Recent Updates</h2>
		<h3>Etiam suscipit et</h3>
		<p>Rhoncus ac, lacinia, nisl. Aliquam gravida massa eu arcu. <a href="#">Moreamp;#8230;</a></p>
		<h3>Nunc pellentesque</h3>
		<p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in. <a href="#">Moreamp;#8230;</a></p>
		<h3>Suspendis potenti</h3>
		<p>Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. <a href="#">Moreamp;#8230;</a></p>
		<p><a href="#"><img src="img/img5.jpg" alt="" width="160" height="120" /></a></p>
	</div>
	<div style="clear: both;"></div>
</div>
<div id="footer">
	<p>Copyright splöösh.com Contact Legal Info Site Map Email</p>
</div>
</body>
</html>

1. Попробуйте применить width: 100%; и text-align: center; на вашем li

2. Я пытался изменить его на это, но по какой-то странной причине ничего не меняется.

3. Ваш рабочий код приведен ниже, запустите фрагмент и перейдите в полноэкранный режим, перетащите браузер, чтобы изменить 600px размер, и убедитесь, что это то, что вы ищете.

Ответ №1:

Просто добавьте display : block на свой li и удалите float : left на своем <a>

Ответ №2:

1) Удалить float: left; при <a>

2) добавить display: block; #menu

3) обновите высоту до height: auto; вкл. #menu

1. Спасибо, это сработало для панели навигации, но заголовок h1 застрял в середине панели навигации. Я попытался сделать ее display: block, но это не сработало.

2. куда вы хотите поместить H1?

3. над панелью навигации, как на картинке, которую я показал выше. Это на изображении заголовка и над навигационной панелью.

4. просто установите высоту в 100 пикселей, как вы хотите, и удалите отступ: 140 пикселей из h1.

5. Взгляните: https://fiddle.jshell.net/gf4z5tyf /

Ответ №3:

Используйте @media свойство, чтобы сначала определить размер экрана, при котором вы хотите, чтобы произошли изменения. Затем настройте свой <li> <a> и другие divs на соответствующий стиль. В приведенном ниже коде обязательно запустите просмотр в полноэкранном режиме и отрегулируйте ширину браузера по горизонтали, перетаскивая, чтобы увидеть изменения. Я продолжу уточнять.

 body{background:#000;font:normal small "Trebuchet MS", Arial, Helvetica, sans-serif;margin:20px 0;padding:0;}
h1,h2,h3{color:#B13413;}
h2{font-size:1.6em;}
h3{font-size:1em;margin:0;}
p,ul,ol,blockquote{margin-top:0;}
a:link{border-bottom:1px dotted #CCC;text-decoration:none;color:#3284B5;}
#header{width:700px;height:200px;background:url(../img/img1.jpg) no-repeat;margin:0 auto;}
#header *{border:none;text-decoration:none;font-weight:400;color:#FFF;margin:0;}
#header h1{float:left;font-size:3em;padding:140px 0 0 20px;}
#menu{width:700px;height:41px;background:#37AEF2 url(../img/img2.gif);margin:0 auto;}
#menu ul{list-style:none;margin:0;padding:0;}
#menu li{display:inline;}
#menu a{display:block;float:left;height:32px;text-decoration:none;color:#FFF;padding:9px 20px 0;}
#menu a:hover,#menu .active a{background:url(../img/img3.gif);color:#FFF; }
#content{width:700px;background:url(../img/img4.gif);margin:0 auto;}
#colAd{float:left;width:120px;padding:10px;}
#colContent{float:left;width:360px;padding:20px 10px 0;  }
#colSidebar{float:left;width:160px;padding:20px 10px 0;}
#footer{width:700px;background:url(../img/img6.gif) repeat-x;font-size:smaller;margin:0 auto;padding:10px 0;}
#footer *{color:#666;}
a:hover,img{border:none;}
table th, td{
	border: 1px solid white;
}

@media screen and (max-width: 600px){
  #menu li{
    display: block;
  }
  #menu a {
    float: none;
    
  }
  #content {
    clear: both;
  }
  #menu {
      height: 100%;
  }
}

 <!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Sploosh - You can splash in sploosh!</title>
<link rel="stylesheet" href="cssmobile/main.css" > 
<link rel="stylesheet" href="cssmobile/responsive.css">
</head>
<body>
<div id="header">
	<h1><a href="index.html">Splöösh - Mobile</a></h1>
	 
</div>
<div id="menu">
	<ul>
		<li class="active"><a href="index.html" accesskey="1" title="">Homepage</a></li>
		<li><a href="index.html" accesskey="2" title="">splöösh Desktop</a></li>
		<li><a href="index.html" accesskey="3" title="">My Photos</a></li>
		<li><a href="index.html" accesskey="4" title="">My Bookmarks</a></li>
		<li><a href="index.html" accesskey="5" title="">Contact Me</a></li>
	</ul>
</div>
<div style="clear: both;"></div>
<div id="content">
	<div id="colAd"> <a href="#"><img src="img/ad_120x600.jpg" alt="" width="120" height="600" /></a> </div>
	<div id="colContent">
		<h2> Splöösh!</h2>
		<p><em><strong>Splöösh</strong></em> onec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. </p>
		<h2>Viewport dimensions:</h2>
		<table style="width:100%">
					<tr>
						<td> </td>
						<td><b> Width </b></td>
						<td> <b>Height</b> </td>
					</tr>
					<tr>
						<td> <b>Page</b> </td>
						<td> <script type = "text/javascript">
							var width = document.documentElement.clientWidth;
							document.write(width); 
							</script></td>
						<td><script type = "text/javascript">
							var height = document.documentElement.clientHeight;
							document.write(height); 
							</script> </td>
					
					</tr>
					<tr>
						<td><b> Screen</b> </td>
						<td> <script type = "text/javascript">
							var width = window.screen.width;
							document.write(width); 
							</script></td>
						<td> <script type = "text/javascript">
							var height = window.screen.height;
							document.write(height); 
							</script></td>
					</tr>
					<tr>
						<td> <b>ViewPort</b> </td>
						<td><script type = "text/javascript">
							var width = window.innerWidth;
							document.write(width); 
							</script></td>
		
						<td> <script type = "text/javascript">
							var height = window.innerHeight;
							document.write(height); </script></td>
					</tr>
					</table>
        <p id="desc"></p> 
        <p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa:</p>
		<ol>
			<li><a href="#">Suspendisse quis gravida massa felis</a></li>
			<li><a href="#">Vivamus sagittis bibendum erat</a></li>
			<li><a href="#">Nullam et orci in erat viverra ornare</a></li>
			<li><a href="#">Suspendisse quis gravida massa felis</a></li>
			<li><a href="#">Curabitur malesuada turpis nec ante</a></li>
		</ol>
		<h3>Lorem Ipsum Dolore </h3>
		<p>Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada turpis nec.</p>
		<p><a href="#">Pellentesque sed vestibulum blanditamp;#8230;</a></p>
	</div>
	
    <div id="colSidebar">
		<h2>Recent Updates</h2>
		<h3>Etiam suscipit et</h3>
		<p>Rhoncus ac, lacinia, nisl. Aliquam gravida massa eu arcu. <a href="#">Moreamp;#8230;</a></p>
		<h3>Nunc pellentesque</h3>
		<p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in. <a href="#">Moreamp;#8230;</a></p>
		<h3>Suspendis potenti</h3>
		<p>Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. <a href="#">Moreamp;#8230;</a></p>
		<p><a href="#"><img src="img/img5.jpg" alt="" width="160" height="120" /></a></p>
	</div>
	<div style="clear: both;"></div>
</div>
<div id="footer">
	<p>Copyright splöösh.com Contact Legal Info Site Map Email</p>
</div>
</body>
</html>