0
Я не лучший в CSS и не могу понять, что не так. Думаю, это могут быть теги
, которые я использую в своей боковой панели. Я бы хотел, чтобы элемент nav с идентификатором «vert» и элементом div с идентификатором «text-container» был NEXT друг с другом, но, как это происходит, он отправляет мои вещи в «текстовый контейнер» в нижний колонтитул, что недопустимо.Невозможно получить два элемента CSS рядом друг с другом
Я сбив с толку, как их получить рядом друг с другом. Я знаю, что элементы могут быть рядом друг с другом, поскольку он работал в моем навигационном элементе с идентификатором «hor» со всеми элементами a рядом друг с другом без проблем.
Я думаю, что это могут быть теги
, но не знаю, что я могу с этим поделать. Я мог бы просто опустить навигатор, поскольку у меня уже есть это в заголовке, но я просто потратил много времени на navbar, чтобы теперь его убить, и я хотел бы сохранить его.
<html>
<head>
<title> The Resorts </title>
<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>
<style>
h1
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 40px;
}
h2
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 26px;
}
#text-container
{
width: 1045px;
height: 690px; */
zoom: 1;
margin: 0;
display: inline-block
}
#text-container:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility:hidden;
}
#text-container > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
</style>
<div id="content">
<div id="logo">
<img src="./logo.png"></img>
</div>
<div id="container">
<nav id="hor">
<div><a href="home.html"> Home </a> </div>
<div><a href="mountains.html"> The Mountains </a></div>
<div><a href="resorts.html"> The Resorts </a></div>
<div><a href="snowReports.html"> Snow Reports </a></div>
<div><a href="eventsAndActivities.html"> Events & Activities </a></div>
<div><a href="planTrip.html"> Plan A Trip </a></div>
</nav>
<div id="middle">
<nav id="vert">
<a href="home.html"> Home </a> <br/>
<a href="mountains.html"> The Mountains </a><br/>
<a href="resorts.html"> The Resorts </a><br/>
<a href="snowReports.html"> Snow Reports </a><br/>
<a href="eventsAndActivities.html"> Events & Activities </a><br/>
<a href="planTrip.html"> Plan A Trip </a>
</nav>
<div id="text-container">
<h1> The Resorts </h1>
<h2> The West Resort </h2>
<p>
The West Resort has everything from wide-open beginner areas to challenging terrain parks to gladed tree skiing hideaways. It has a young, energetic feel, but there's more to it than just jumps and jibs. West is
home to the Children's Sports Center, the Bullwheel Bar and Grill and the Foggy Goggle where fashion shows, movie premieres and live performances are held on a regular basis.
</p>
<h2> The East Resort </h2>
<p>
The East Resort boasts the longest trails in the region serviced by a single high-speed quad. Its long, groomed, cruising trails make it perfect for carving, but it is also home to the Olympic Bowl, the longest,
steepest bump run in the region. After a quick ascent on the Diamond Peaks Express, you'll find an additional 20 acres of beginner terrain up top. With 1,600 vertical feet of uninterrupted corduroy, the East
Resort offers traditional skiers and snowboarders a true alpine experience without having to journey far from home.
</p>
<h2> The North Resort </h2>
<p>
The North Resort is the perfect family-friendly ski resort with 70 acres of gently rolling terrain and historic, log cabins that are terrific for exploring. It is big enough to offer a true winter experience but small
enough to maintain its historical warmth and charm. Spend the afternoon shushing down the slopes or warm up by the fireplace with a cup of hot chocolate at the North Lodge. It is one of the region’s oldest
base lodges with ties that go back to the Big Pines ski clubs of the 1940s.
</p>
</div>
</div>
</div>
<div id="footercontainer">
<footer>
© 2016
</footer>
</div>
</div>
</body>
</html>
==main.css==
#logo
{
border: 1px dashed purple;
width: 1050;
height: 75;
}
#logo > img
{
width: 1050;
height: 75;
}
#content
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 960px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 500;
}
nav
{
border: 10px solid transparent;
padding: 15px;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 170%;
}
nav#vert
{
width: 220;;
height: 540;
margin: 0;
}
body {
color: #000000;
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
background-color: #422520;
background-image: url(./image8.jpg);
background-repeat:no-repeat;
background-size:cover;
text-align: center;
background-attachment: fixed;
background-position: center;
}
#footerContainer
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 980px;
background-color: #ffffff;
background-repeat: repeat-y;
}
footer
{
border: 10px solid transparent;
padding: 15px;
text-align: left;
margin: 0 auto;
width: 1000px;
background-repeat: repeat-y;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 170%;
}
#container
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 1045px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 690px;
}
nav > a
{
color: #ccccff;
}
nav#hor > div
{
border: 1px solid white;
float: left;
padding: 10px;
}
nav#hor
{
width: 1000px;
height: 50px;
margin: 0;
}
nav#hor > div > a
{
color: #ccccff;
}
nav#hor>div:hover
{
background-color: #01ff02;
}
Вы должны использовать flexbox. – SLaks
Не уверен, что это. – MongooseLover
Может закончиться с использованием li и ul. Это может сделать то, что я хотел, и устранить необходимость в тегах br. – MongooseLover