-4
По какой-то причине мой навигатор и нижний колонтитул перепутаны. Я не хочу, чтобы пользователю приходилось прокручивать вниз, я хочу, чтобы все было на одной странице. По какой-то причине нижний колонтитул и изображение закручиваются. Самая большая проблема заключается в том, что мой основной контент не идет в середине страницы, а скорее за панель навигации.Что происходит с моей навигационной панелью и нижним колонтитулом
Вот и CSS, и HTML, и мой сайт. Вы, ребята, видите какие-то проблемы?
@import 'https://fonts.googleapis.com/css?family=Raleway';
html,
body {
padding: 0;
margin: 0;
height: 100%;
font-family: 'Raleway', sans-serif;
}
#page {
min-height: 100%;
position: relative;
height: 100%;
}
#main {
width: 1300px;
margin-left: auto;
margin-right: auto;
min-height: 90%;
height: auto;
height: 89%;
margin: 0 auto -50px;
vertical-align: bottom;
}
#test {
height: 300px;
width: 300px;
border-top: 10px solid green;
}
header {
background-color: white;
min-height: 100px;
width: 100%;
position: relative;
text-align: center;
}
header img {
display: inline;
text-align: center;
top: 5px;
}
header h2,
a,
a:visited,
a:hover,
a:active {
color: #FFFFFF;
text-decoration: none;
}
nav {
position: absolute;
top: 105px;
left: 0;
right: 0;
bottom: 0;
background-color: #f15a24;
min-width: 800px;
text-align: left;
text-indent: 15%;
height: 20px;
padding: 10px 20px;
border-bottom: 3px solid #293f6f;
}
#footer {
position: fixed;
width: 100%;
bottom: 0;
height: 35px;
background-color: #293f6f;
}
.mycontainer .content {
overflow: hidden;
padding: 10px;
font-size: 15px;
width: 300px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid #293f6f;
color: #3385FF;
width: 30px;
}
.mycontainer .title {
height: 30px;
line-height: 30px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #293f6f;
font-size: 18px;
font-weight: bold;
font-family: verdana;
display: block;
color: white;
width: 30px;
display: block;
padding: 10px;
border: 1px solid gray;
border-bottom: none;
}
nav a {
font-size: 14px;
margin: 10px 0;
height: 20px;
padding: 12px 25px;
color: white;
text-decoration: none;
}
nav a:hover {
background-color: #293f6f;
}
.active {
background-color: #293f6f;
}<html>
<head>
<title>Ry Can Fix It!</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/favicons/manifest.json">
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/favicons/favicon.ico">
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div id="page">
<header>
<div>
<a href="/">
<img width='15%' style='margin-top: 5px;' src="Logo.png" border=0>
</a>
</div>
<nav>
<a href="index.html" class='active'>Home</a>
<a href="#">FAQ's</a>
</nav>
</header>
<div id="main">
<div class="mycontainer">
<div class="title">Hey!</div>
<div class="content">Why?</div>
</div>
</div>
<div id="footer">
<center>
<img width='10%' src='footerLogo.png'>And why is this logo not moving up?</center>
</div>
</div>
</body>
</html>
это вопрос или приглашение для отладки партнера? – Benja