0
У меня есть проблемы с размещением, пытаясь понять поплавки и как позиционировать элементы. Я очень новичок в css/html. Может кто-нибудь помочь мне понять, как этот макет будет работать. Некоторые проблемы:Проблема с макетами (поплавки/заполнение)
1) Невозможно изменить высоту нижнего колонтитула без разрушения макета, нижний колонтитул, кажется, подталкивается вверх.
2) Когда я проверяю страницу через хром, нижний колонтитул входит в поле «обертка», когда он находится вне его в коде.
3) Добавление отступов к DIV контента также кажется, перерыв компоновки
<!DOCTYPE html>
<html lang="en">
<head>
<title>DCW</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!--NAV BAR -->
<nav>
<ul>
<div class="float-left">
<li><a class="active" href="default.asp">PD</a></li>
<li><a href="news.asp">Projects</a></li>
<li><a href="About.asp">About</a></li>
<li><a href="Contact.asp">Contact</a></li>
</div>
<div class="float-right">
<li><a href="#">Hire Us!</a></li>
</div>
</ul>
</nav>
<!-- HEADER -->
<header>
<div id="title_wrapper">
</div>
</header>
<!-- BODY CONTENT -->
<div id="wrapper">
<div id="content">
<div class="info">
col1
</div>
<div class="info">
col2
</div>
</div>
<!-- SIDEBAR -->
<div id="sidebar">
<div id="sidebar-text">
content 2
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
Footer
</footer>
</body>
CSS:
html, body
{
width: 100%;
height: 100%;
margin:0;
padding: 0;
}
p.thick {
font-weight: bold;
}
h1, p {
padding: 0;
margin: 0;
}
/*Nav */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
nav li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
/* Header */
header #title_text{
font-size: 100px;
font-family: arial;
}
header #title_wrapper{
text-align:center;
position: relative;
top: 200px;
}
header {
background-color: orange;
position: relative;
height:100%;
width: 100%;
color:white;
margin:0;
}
/*Content*/
#wrapper{
min-height: 70%;
height: auto;
height: 70%;
}
#content{
float:left;
width:100%;
height: 100%;
text-align: center;
}
#sidebar{
float: left;
background-color: lightgrey;
height: 75%;
text-align: center;
width: 100%;
}
#sidebar-text{
font: 14px/22px normal helvetica, sans-serif;
padding-top: 30px;
text-decoration: none;
line-height: 200%;
}
.img-circle {
border-radius: 50%;
}
.info{
width: 50%;
float: left;
}
blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
outline-style: double;
outline-color: lightgrey;
}
/* footer */
footer{
background-color: orange;
}
Приветствия
padding-bottom/верх хорошо. он, кажется, ломается, когда я добавляю левую или правую прокладку –
, конечно, ее ширина составляет 100%, если вы добавите к этому больше, у вас будет элемент больше экрана. кроме случаев, когда вы используете 'box-sizing: border-box;' –
теперь обновлены с помощью выбора размера и заполнения полей во всех направлениях; перепроверить пожалуйста. –