Как получить 2 боковых панели на одной странице?

html css sidebar

29 просмотра

1 ответ

Для моего сайта я хочу использовать 2 панели навигации; горизонтальный в самом верху, а другой под первым, вертикальный в этот раз, и слева от моего текстового содержимого, так что текст оборачивается вокруг него. Как бы я этого достиг?

Когда я копирую и вставляю коды CSS с таких сайтов, как w3schools.com, оба кода будут переполнены. Прямо сейчас это либо одна панель навигации, либо две очень странно выглядящие.

Вторая боковая панель должна выглядеть аналогично гиперссылке в Википедии.

Вот код Извините, если это слишком долго.

ul {
width: 100%;
position: fixed;
border: none;
font-size: 20;
font-family: "candara",cambria, sans-serif;
list-style-type: none;
margin-top: -10px;
margin-left: -8px;
margin-right: -8px;
padding: 1px;
overflow: hidden;
background-color: #333;
}

li {
text-align: centre;
border-bottom: none;
}

li:last-child {
border-bottom: none;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}    

li a:hover, .dropdown:hover .dropbtn {
color: black;
background-color: #F5F5F5;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

.active {
background-color: #4682B4;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
}

div.one {
background-color:white;
border-style: solid;
border-color:#F5F5F5;
border-width: 1px;
margin-left: 20px;
margin-right: 20px;
padding-left: 30px;
padding-right: 30px
}
<html>
<head><title>Introduction to Goldfish</title>
<link rel="icon" href="Images/Goldfish.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="Goldfish.ico" type="image/x-icon"/>
</head>

<body bgcolor="#E6E6FA">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Enter</a>
<div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
    </div>
  </li>
</ul>

<div>
<hr style="height:40pt; visibility:hidden;"/>
<div class="one">
<hr style="height:5pt; visibility:hidden;"/>
<center><img src="Assignment/Aquarium.jpg"</center>
<hr style="height:20pt; visibility:hidden;"/>
<h1 style="text-align:left;"><div style="font-family:candara;">Your First         Goldfish</div></h1>
<div style="font-family:candara;"><p style="text-align:left;"><font     size="4">Congratulations on your first goldfish! Oh dear, I sound like a     grandmother congratulating her daughter on her first child, don't I? Anyway,     keeping goldfish as pets is a rewarding, calming and educational experience of     people of all ages.
<br>
<br>
Millions of fish are bought each year and it's easy to see why.
<br>
<br>
Goldfish are delightful creatures to watch, bumping against each other to chase after another morsel of food, following you as you walk around, and zooming around the tank.
Additionally, there are so many varieties to choose from, all in different shapes, sizes and colours.
<br>
<br>
Hopefully that got your attention. Now, let me tell you more about these delightful goldies you've bought. Let's just say that it requires more work than just dropping a few flakes into their small glass bowl and changing their tank water once every few months.
</font></p></style>
</div>
</div>

</body>

</html>

Автор: alex Источник Размещён: 08.11.2019 11:18

Ответы (1)


0 плюса

Я думаю, вам нужно добавить <ul> <li> </ li> </ ul>в раскрывающемся списке:

В вашем HTML:

<div class="dropdown-content">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>

 </div>

Выполнить в фрагменте кода:

ul {
width: 100%;
position: fixed;
border: none;
font-size: 20;
font-family: "candara",cambria, sans-serif;
list-style-type: none;
margin-top: -10px;
margin-left: -8px;
margin-right: -8px;
padding: 1px;
overflow: hidden;
background-color: #333;
}

li {
text-align: centre;
border-bottom: none;
}

li:last-child {
border-bottom: none;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}    

li a:hover, .dropdown:hover .dropbtn {
color: black;
background-color: #F5F5F5;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

.active {
background-color: #4682B4;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
}

div.one {
background-color:white;
border-style: solid;
border-color:#F5F5F5;
border-width: 1px;
margin-left: 20px;
margin-right: 20px;
padding-left: 30px;
padding-right: 30px
}
<ul>
 <li><a class="active" href="#home">Home</a></li>
 <li class="dropdown">
   <a href="#" class="dropbtn">Enter</a>
    <div class="dropdown-content">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
    </li>
    </div>
    
<li class="dropdown">
   <a href="#" class="dropbtn">Dropdown</a>
   <div class="dropdown-content">
    <ul>
      <li><a href="#">Link 1</a></li>
     <li> <a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  
    </div>
  </li>
<div>

<hr style="height:40pt; visibility:hidden;"/>
<div class="one">
<hr style="height:5pt; visibility:hidden;"/>
<center><img src="Assignment/Aquarium.jpg"></center>
<hr style="height:20pt; visibility:hidden;"/>
<h1 style="text-align:left;"><div style="font-family:candara;">Your First         Goldfish</div></h1>
<div style="font-family:candara;"><p style="text-align:left;"><font     size="4">Congratulations on your first goldfish! Oh dear, I sound like a     grandmother congratulating her daughter on her first child, don't I? Anyway,     keeping goldfish as pets is a rewarding, calming and educational experience of     people of all ages.
<br>
<br>
Millions of fish are bought each year and it's easy to see why.
<br>
<br>
Goldfish are delightful creatures to watch, bumping against each other to chase after another morsel of food, following you as you walk around, and zooming around the tank.
Additionally, there are so many varieties to choose from, all in different shapes, sizes and colours.
<br>
<br>
Hopefully that got your attention. Now, let me tell you more about these delightful goldies you've bought. Let's just say that it requires more work than just dropping a few flakes into their small glass bowl and changing their tank water once every few months.
</font></p>
</div>

надеюсь, это как вы хотите

Автор: riyadi Размещён: 20.08.2016 02:22
Вопросы из категории :
32x32