06.06.2014 18:25:04 Проблемы с центрированием сайта Сообщение #1
Sebastian69
Новичок
Дата регистрации:
20.11.2013 23:06:56
Сообщений: 9
Уважаемые, помогите пожалуйста. Есть следующий CSS-код:
* {
margin: 0;
padding: 0;
border: 0;
}
body {
overflow-x: hidden;
text-align: center;
}
#wrapper{
min-width: 1024px;
margin: 0 auto;
text-align: left;
}
header {
position: absolute;
height: 120px;
width: 100%;
background-image: linear-gradient(red, orange);
}
section {
position: absolute;
top: 120px;
}
При этом при изменении масштаба контент смещается влево, а не остается по центру.
При изменение в #wrapper min-width: 1024px; на width: 1024px; контент при изменении масштаба центрируется, но header перестает полностью заполнять всю страницу и обрубается. При 100% масштабе обрубается справа, при 90% - с обеих сторон, а при 75% - слева.
Если убираю overflow-x: hidden; то просто появляется полоса прокрутки, а header все так же обрезан.
Помогите, пожалуйста, центрировать контент, и сделать, чтобы слои растягивались на всю ширину при любом масштабе и разрешении.
Вот html код страницы, если нужен:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Строительство домов </title>
<link type = "text/css" rel = "stylesheet" href = "style.css">
<meta name = "discription" content = "Строительство домов">
</head>
<body>
<div id = "wrapper">
<header>
<div id = "zastroika" style = "position: absolute; left: 25px; width: 320px; top: 30px; text-align: center">
<span style = "color: white; font-family: Georgia; font-size: 26px; font-weight: bold;">
ZASTROIKA.RU
</span>
</br>
<span style = "color: white; font-family: Georgia; font-size: 16px;">
Строительство домов под ключ
</span>
</div>
<div id = "phone" style = "position: absolute; width: 320px; top: 40px; left: 850px;">
<span style = "color: white; font-family: Arial; font-size: 20px;">
7 (999) 999 99 99
</span>
</div>
</header>
<section>
<img src = "img/house1.jpg" alt = "house1">
</section>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
border: 0;
}
body {
overflow-x: hidden;
text-align: center;
}
#wrapper{
min-width: 1024px;
margin: 0 auto;
text-align: left;
}
header {
position: absolute;
height: 120px;
width: 100%;
background-image: linear-gradient(red, orange);
}
section {
position: absolute;
top: 120px;
}
При этом при изменении масштаба контент смещается влево, а не остается по центру.
При изменение в #wrapper min-width: 1024px; на width: 1024px; контент при изменении масштаба центрируется, но header перестает полностью заполнять всю страницу и обрубается. При 100% масштабе обрубается справа, при 90% - с обеих сторон, а при 75% - слева.
Если убираю overflow-x: hidden; то просто появляется полоса прокрутки, а header все так же обрезан.
Помогите, пожалуйста, центрировать контент, и сделать, чтобы слои растягивались на всю ширину при любом масштабе и разрешении.
Вот html код страницы, если нужен:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Строительство домов </title>
<link type = "text/css" rel = "stylesheet" href = "style.css">
<meta name = "discription" content = "Строительство домов">
</head>
<body>
<div id = "wrapper">
<header>
<div id = "zastroika" style = "position: absolute; left: 25px; width: 320px; top: 30px; text-align: center">
<span style = "color: white; font-family: Georgia; font-size: 26px; font-weight: bold;">
ZASTROIKA.RU
</span>
</br>
<span style = "color: white; font-family: Georgia; font-size: 16px;">
Строительство домов под ключ
</span>
</div>
<div id = "phone" style = "position: absolute; width: 320px; top: 40px; left: 850px;">
<span style = "color: white; font-family: Arial; font-size: 20px;">
7 (999) 999 99 99
</span>
</div>
</header>
<section>
<img src = "img/house1.jpg" alt = "house1">
</section>
</div>
</body>
</html>
