0
У меня есть простой сайт, но есть две проблемы. Я сделал все с процентами, потому что сайт может подняться на высокий уровень tv, и я хочу, чтобы они хорошо масштабировались. Масштабирование работает с изображениями, но идентификатор также напоминает масштабирование фона и текста навигатора, чтобы он не выглядел маленьким.Как масштабировать навигационную панель при изменении размера
Вторая проблема заключается в том, что нижнее изображение закрывает навигационную панель и не течет под элементом навигационной панели. Id точно так же, как эта функция, потому что она хорошо масштабируется для смартфонов.
Вот HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="headish.css">
<title>New Site</title>
</head>
<body>
<div id="container">
<div id="tophead">
<img src="images/logo.png" alt="logo" />
<ul>
<li><a href="#" title="About Us">About Us</a></li>
<li><a href="#" title="Biographies">Biographies</a></li>
<li><a href="#" title="Services">Services</a></li>
<li><a href="#" title="Careers">Careers</a></li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
</div>
<div id="maincont">
<img src="images/second.png" alt="image">
</div>
</div>
</div>
</body>
</html>
Вот CSS:
html, body, #container {
height: 100%;
width: 100%;
margin: 0;
position: relative;
}
#tophead {
height: 20%;
width: 80%;
margin: auto;
text-align: center;
}
#tophead img {
height: 100%;
width: auto%;
}
#tophead ul {
list-style: none;
display: inline-block;
font-size: 0;
}
#tophead li {
display: inline-block;
}
#tophead a {
background: #2dbaf0;
color: #fff;
display: block;
font-size: 16px;
font-family: "arial";
font-weight: bold;
padding: 0 20px;
line-height: 38px;
text-transform: uppercase;
text-decoration: none;
}
#tophead a:hover {
background: #f8a52b;
color: #fff;
-webkit-transition-property: background;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: linear;
}
#tophead li:first-child a {
border-left: none;
border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
border-right: none;
border-radius: 0 5px 5px 0;
}
#maincont {
padding-left: 10%;
}
#maincont img{
border-radius: 7%;
width: 30%;
}
Я не получил ответ от вашего имени пользователя, но если вы имеете в виду сообщение Аллана Крабтри, оно не имеет. Я очень ценю любую помощь, но когда я изменяю размер окна (в chrome и firefox), #maincontent img все еще перекрывает меню навигационной панели. Любые идеи моего друга в Интернете? – user2093601