Новичок в реальной ситуации, нужна помощь!
Здравствуйте, я новичок в html и css, и у меня нет друзей, к которым можно обратиться за помощью, поэтомуЯ решил попробовать и спросить отсюда.Я делаю простой сайт для моего открытого университетского курса, который должен быть закончен через неделю.
a) У меня возникли серьезные проблемы с размещением двух div в нижнем колонтитуле рядом с собой, я следовал руководству MiMo Learn для Code-app по созданию нижнего колонтитула и написал код так же, как и учебниксказал мне сделать это, но дивы просто не идут рядом друг с другом, что бы я ни делал.Таким образом, проблема лежит где-то в нижнем колонтитуле> контейнер> столбец-часть.
б) Моя панель навигации не выглядит хорошо при проверке его с помощью телефона.В веб-браузере для ПК / ноутбука это выглядит красиво, но на мобильном устройстве навигационные ссылки заголовка не остаются в заголовке, как, например, навигационные ссылки идут через границу заголовка к контентной части ... Это действительно сложно объяснить,Мой родной язык тоже не английский, так что ... Например, навигационные ссылки не растягиваются в одном ряду, когда на мобильном устройстве навигационные ссылки идут друг под другом.Строка не уменьшается в целости и сохранности!
Могу ли я поделиться своим кодом, чтобы кто-то умнее его проверил?Я был бы очень благодарен, если бы эта проблема была решена, потому что я очень тороплюсь.
body {
background-color: whitesmoke;
margin: 0;
}
@viewport {
width: auto;
zoom: 1.0;
}
h1, h2, h3, h4, h5 {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
color: #333;
}
h1 {
font-size: 2.25em;
font-variant: small-caps
}
h2 {
font-size: 1.50em;
font-variant: small-caps
}
#header ul {
margin:0;
padding;0;
}
#header li {
list-style-type:none;
float: left;
display: block;
width: 150px;
height: 75px;
text-align: center;
line-height: 73px;
font-family: Tahoma;
}
#header li a {
text-decoration: none;
color: white
}
#header li:Hover {
background-color:#2f2f2f85;
}
.container {
max-width: 1000px;
margin-left: 35px;
}
#content h3 {
max-width: 800px;
margin: 0 auto;
padding: 60px 0;
}
#header {
background-color: #1abc9c;
height: 75px;
}
p {
font-family: Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1.5;
}
a {
color: #1abc9c;
text-decoration: none;
font-weight: 500;
}
a:hover {
color: #F6A623
}
#header a {
color:white;
}
.content {
max-width: 800px;
margin: 0 auto;
padding: 60px 0;
}
#footer h4 {
color: white;
text-transform: uppercase;
letter-spacing: 0.1em;
}
#footer p {
color: white;
}
#footer {
background-color: #2f2f2f;
padding: 50px 0;
}
.column {
min-width: 300px;
display: inline-block;
vertical-align: top;
}
<div id="header">
<div class="container">
<a href="index.html"><img src="logo.png" alt="mylogo" style="float:left;width:70px;height:70px;"></a>
<ul>
<li><a href="link1.html">link 1</a></li>
<li><a href="link2.html">link 2</a></li>
<li><a href="link3.html">link 3</a></li>
<li><a href="link4.html">link 4</a></li>
<li><a href="link5.html">link 5</a></li>
</div>
</div>
<div id="content">
<div class="container">
<h3 class="otsikko">Title</h3>
<div class="teksti">
<p>text</p>
<p>more text</p>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="column">
<h4>Title: Social medias</h4>
<p>
<img src="twitterlogo.png" alt="Twitter" style="width:25px;height:25px;"><a href="socialmedialink1">Twitter</a>
<br/>
<img src="instagramlogo.png" alt="Instagram" style="width:25px;height:25px;"><a href="socialmedialink2">Instagram</a>
<br/>
<img src="linkedinlogo.png" alt="LinkedIn" style="width:25px;height:25px;"><a href="socialmedialink3">LinkedIn</a>
<br/>
<img src="fblogo.png" alt="Facebook" style="width:25px;height:25px;"><a href="socialmedialink4">Facebook</a>
</p>
</div>
<div id="column">
<h4>Title: My Story</h4>
<p>Text: short introduction</p>
</div>
</div>
</div>
А вот как веб-сайт выглядит в моем браузере ПК сейчас (вы можете увидеть здесь проблему А., как делятся на нижний колонтитул (Löydät minut & tarinani(в коде, социальные медиа и моя история) не ходите рядом друг с другом, я также могу прикрепить изображение проблемы Б., если это необходимо.): Мой веб-сайт
Я был бы всегда счастлив, если бы кто-нибудь мог помочь простому человеку, подобному мне.
ПИК НАВИГАЦИОННОЙ БАРЫ НА МОБИЛЬНЫХ УСТРОЙСТВАХ