28.10.2016 13:43:06 Ошибка верстки Сообщение #1
Dizel
Новичок
Дата регистрации:
28.10.2016 13:27:54
Сообщений: 2
Приветствую!
Только начинаю изучать верстку.
Столкнулся с вопросами, на которые не могу найти ответа.
Страница имеет такой вид
http://5cm.ru/view/i7/xUHb.png
HTML код
<html>
<head>
<title>CSS Стили</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style>
@import url("mystyle2.css"
;
</style>
</head>
<body>
<div id="Header">
Заголовок
</div>
<div id="Polotno">
<div id="FirstBar">
Первое меню
</div>
<div id="Center">
Центральный текст <br> <br>
</div>
<div id="SecondBar">
Второе меню
</div>
</div>
<div id="Footer">
Подвал
</div>
</body>
</html>
CSS код
#Header {
color: red;
background:#eeeeee;
height: 200px;
/* width: 980px; */
margin: 0 auto;
}
#Polotno {
background: black;
}
#FirstBar {
color: green;
background:#ddd;
height: 450px;
width: 20% ;
float: left;
}
#Center {
color: green;
background:#white;
height: 900px;
width: 80%;
float: left;
clear:right;
}
#SecondBar {
padding: 0;
position: absolute;
top: 658px;
color: green;
background: red;
height: 450px;
width: 20%;
}
#Footer {
color: black;
clear: both;
background:#eeeeee;
height: 200px;
margin: 0 auto;
}
Вопросы.
1. Почему мне приходиться подгонять блок #SecondBar указывая
top: 658px; По моим рачетам должно быть 650px (верхнее меню 200 + левое меню 450). Откуда взялись эти 8 пикселей?
Если не сделать эти 8 пикселей, меню номер 2 заходит на меню 1. Или снизу выходит полоса, недостающая до Подвала.
2. Почему Второе меню не равно по ширине первому меню. Я вижу вот такую картинку:
http://5cm.ru/view/i7/eaKw.png
Видно что красная область второго меню почему то на несколько пикселей заходит на область центрального текста.
Что я делаю не так?
Только начинаю изучать верстку.
Столкнулся с вопросами, на которые не могу найти ответа.
Страница имеет такой вид
http://5cm.ru/view/i7/xUHb.png
HTML код
<html>
<head>
<title>CSS Стили</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style>
@import url("mystyle2.css"
;
</style>
</head>
<body>
<div id="Header">
Заголовок
</div>
<div id="Polotno">
<div id="FirstBar">
Первое меню
</div>
<div id="Center">
Центральный текст <br> <br>
</div>
<div id="SecondBar">
Второе меню
</div>
</div>
<div id="Footer">
Подвал
</div>
</body>
</html>
CSS код
#Header {
color: red;
background:#eeeeee;
height: 200px;
/* width: 980px; */
margin: 0 auto;
}
#Polotno {
background: black;
}
#FirstBar {
color: green;
background:#ddd;
height: 450px;
width: 20% ;
float: left;
}
#Center {
color: green;
background:#white;
height: 900px;
width: 80%;
float: left;
clear:right;
}
#SecondBar {
padding: 0;
position: absolute;
top: 658px;
color: green;
background: red;
height: 450px;
width: 20%;
}
#Footer {
color: black;
clear: both;
background:#eeeeee;
height: 200px;
margin: 0 auto;
}
Вопросы.
1. Почему мне приходиться подгонять блок #SecondBar указывая
top: 658px; По моим рачетам должно быть 650px (верхнее меню 200 + левое меню 450). Откуда взялись эти 8 пикселей?
Если не сделать эти 8 пикселей, меню номер 2 заходит на меню 1. Или снизу выходит полоса, недостающая до Подвала.
2. Почему Второе меню не равно по ширине первому меню. Я вижу вот такую картинку:
http://5cm.ru/view/i7/eaKw.png
Видно что красная область второго меню почему то на несколько пикселей заходит на область центрального текста.
Что я делаю не так?
