body{
margin:0;
background-color:#ffc928;
}
H1{
margin:0;
font-family:Tahoma;
font-size:20pt;
}
H2{
font-size:11pt;
font-family:Tahoma;
margin:0;
}
H3{
font-size:9pt;
font-weight: 60%;
margin:0;
}
#header_bg{
background-image:url('../images/header.jpg');
background-position:center;
background-repeat:no-repeat;
width:100%;
height:477px;
margin:0;
}
#menu{
position:relative;
z-index:1;
left:65%;
top: 60px;
list-style-type:none;
margin:0
}
A.menu_item:link{
font-size:13pt;
color:white;
font-family:Tahoma;
font-weight:60%;
}
A.menu_item:visited{
font-size:13pt;
color:white;
font-family:Tahoma;
font-weight: 60%;
}
A.menu_item:hover{
font-size:13pt;
color:yellow;
font-family:Tahoma;
font-weight: 60%;
}
.list_menu_item{
line-height:20pt;
}
#content{
background-image:url('../images/content_bg.jpg');
background-repeat:repeat-x;
width:100%;
margin:0;
}
#text_content{
margin-left:150px;
margin-right:350px;
min-height:500px;
}
#footer_bg{
background-image:url('../images/bottom.jpg');
margin:0;
background-repeat:repeat-x;
height:279px;
}
#botlle{
background-image:url('../images/bottle.jpg');
background-repeat:no-repeat;
width:486px;
height:279px;
position:relative;
z-index:2;
float:left;
}
#right_bottom{
background-image:url('../images/right_bottom.jpg');
background-repeat:no-repeat;
width:318px;
height:279px;
float:right
}
#vote_panel{
background-image:url('../images/panel.png');
width:240px;
right:110px;
position:absolute;
top:555px;
}
#head_vote_panel{
background-image:url('../images/head_panel_vote.png');
width:240px;
height:90px;
margin:0;
}
#ask{
margin-left:20pt;
font-size:8pt;
font-family:Tahoma;
}
#head_ask{
margin-left:35pt;
font-size:7pt;
}
#vote_submit:link{
margin-left:19pt;
line-height:20pt;
color:#315ca0;
font-size:8pt;
}
#vote_submit:visited{
margin-left:19pt;
line-height:20pt;
color:#315ca0;
font-size:8pt;
}
#vote_submit:hover{
margin-left:19pt;
line-height:20pt;
color:yellow;
font-size:8pt;
}
#news_panel{
background-image:url('../images/npanel.png');
width:240px;
position:absolute;
top:750px;
right:110px;
}
#head_news_panel{
background-image:url('../images/head_panel_news.png');
width:240px;
height:90px;
margin:0;
}
#logo{
font-size:8pt;
position:relative;
top:170px;
font-family:Tahoma;
color:#315ca0;
}
#internet_agent{
position:relative;
top:-15pt;
}
#busines{
position:relative;
top:-15pt;
left:32pt;
font-size:10pt;
font-weight:bolder;
}
#make_sait:link{
position:relative;
top:-10pt;
color:#315ca0;
font-size:8pt;
}
#make_sait:visited{
position:relative;
top:-10pt;
color:#315ca0;
font-size:8pt;
}
#make_sait:hover{
position:relative;
top:-10pt;
color:yellow;
font-size:8pt;
}
#details{
position:absolute;
top:150px;
left:20%;
}
#tel{
color:white;
}
#phone{
color:white;
font-size:15pt;
}
A:link{
color:#315ca0;
font-family:Tahoma;
font-size:10pt;
}
A:visited{
color:#315ca0;
font-family:Tahoma;
font-size:10pt;
}
A:hover{
color:yellow;
font-family:Tahoma;
font-size:10pt;
}
Проблема с полосой прокрутки
Решил попробовать сверстать макет один, но появилась горизонтальная полоса прокрутки. Помогите пожалуйста понять, где я ошибся.
[ATTACH=CONFIG]5285[/ATTACH][ATTACH=CONFIG]5286[/ATTACH]
[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Бир-Трейд</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div id="header_bg">
<ul id="menu">
<li class="list_menu_item"><a class="menu_item" href="#">О компании</a></li>
<li class="list_menu_item"><a class="menu_item" href="#">О сортах пива</a></li>
<li class="list_menu_item"><a class="menu_item" href="#">Оборудование</a></li>
<li class="list_menu_item"><a class="menu_item" href="#">Цены</a></li>
<li class="list_menu_item"><a class="menu_item" href="#">Контакты</a></li>
<li class="list_menu_item"><a class="menu_item" href="#">Сотрудничество</a></li>
</ul>
</div>
<div id="content">
<div id="text_content">
<h1>О сортах пива</h1><br/><br/>
Здесь будет текст о сортах пива. Далее сделует текст для примера. Живое пиво производится путем
сбраживания и созревания без фильтрации, карбонизации, пастеризации и без добавления консервантов,
это позволяет сохранить натуральный живой вкус пива.<br/><br/>
В производстве классического живого пива используются четыре составляющие:<br/><br/>
Солод от ведущих мировых производителей;<br/>
- Отборный хмель;<br/>
- Специально подготовленная вода со сбалансированным минеральным составом, аналог знаменитой
пльзенской воды, благодаря которой получается неповторимый вкус и аромат пива;<br/>
- Пивные дрожжи.<br/><br/>
В каждом литре живого пива присутствует главный пятый компонент:
Душа пивовара!
Потому что производство живого пива это фактически «ручная работа» и каждая варка – это небольшое
произведение искусства.<br/><br/>
Живое пиво варится в одном из самых экологически благополучных районов Жигулей в поселке Волжский.
Для тех, кто готов различать сорта и качество! Для тех, кто любит пиво во всем его многообразии!
Для тех, кто заботится о своем здоровье!
</div>
<div id="panels">
<div id="vote_panel">
<div id="head_vote_panel">
<div id="head_ask">
<h2><br/><img src="images/vote_ico.png"> Голосуем!</h2>
<br/>
<h3>Какое пиво вы предпочитаете?</h3>
</div>
</div>
<div id="ask">
<span class=""><input type="radio" checked name="beer" id="1"> Темное<br/> </span>
<input type="radio" name="beer" id="2"> Светлое<br/>
<input type="radio" name="beer" id="3"> Нефильтрованное<br/>
<input type="radio" name="beer" id="4"> Что такое Пиво?<br/>
<a href="#" id="vote_submit">Проголосовать</a>
</div>
</div>
<div id="news_panel">
<div id="head_news_panel">
<div id="head_ask">
<h2><br/><br/><img src="images/news_ico.png"> Новости</h2>
<br/>
</div>
</div>
<div id="ask">
<table>
<tr>
<td valign="top">12.02.08</td>
<td>
Здесь будет краткий текст
последних новостей. Подробнее
можно посмотреть,перейдя по
ссылке.
</td>
</tr>
<tr>
<td valign="top">02.01.08</td>
<td>
Еще одна новость. 1.
Система управления сайтом
(позволяет редактировать
информацию на сайте и разделять
уровни доступа; добавлять
ключевые слова; добавлять,
убирать, редактировать разделы,
подразделы)<br/><br/>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="details">
<span id="tel">тел.</span> <span id="phone">8 905 3000666</span><br/>
<a href="#" id="details_link">реквизиты</a>
</div>
<div style="clear:both"></div>
<div id="botlle"></div>
<div id="footer_bg">
<div id="right_bottom">
<div id="logo">
<img src="images/logo.png">
<span id="internet_agent">Интернет-агентство</span><br/>
<span id="busines">Бизнес-Дизайн</span><br/>
<a href="#" id="make_sait">разработка сайтов в тольятти</a>
</div>
</div>
</div>
</body>
</html>
[/HTML]
Код CSS файла:
[ATTACH=CONFIG]5285[/ATTACH][ATTACH=CONFIG]5286[/ATTACH]
[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Бир-Трейд</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div id="header_bg">
<ul id="menu">
<li class="list_menu_item"><a class="menu_item" href="#">О компании</a></li>
<li class="list_menu_item"><a class="menu_item" href="#">О сортах пива</a></li>
<li class="list_menu_item"><a class="menu_item" href="#">Оборудование</a></li>
<li class="list_menu_item"><a class="menu_item" href="#">Цены</a></li>
<li class="list_menu_item"><a class="menu_item" href="#">Контакты</a></li>
<li class="list_menu_item"><a class="menu_item" href="#">Сотрудничество</a></li>
</ul>
</div>
<div id="content">
<div id="text_content">
<h1>О сортах пива</h1><br/><br/>
Здесь будет текст о сортах пива. Далее сделует текст для примера. Живое пиво производится путем
сбраживания и созревания без фильтрации, карбонизации, пастеризации и без добавления консервантов,
это позволяет сохранить натуральный живой вкус пива.<br/><br/>
В производстве классического живого пива используются четыре составляющие:<br/><br/>
Солод от ведущих мировых производителей;<br/>
- Отборный хмель;<br/>
- Специально подготовленная вода со сбалансированным минеральным составом, аналог знаменитой
пльзенской воды, благодаря которой получается неповторимый вкус и аромат пива;<br/>
- Пивные дрожжи.<br/><br/>
В каждом литре живого пива присутствует главный пятый компонент:
Душа пивовара!
Потому что производство живого пива это фактически «ручная работа» и каждая варка – это небольшое
произведение искусства.<br/><br/>
Живое пиво варится в одном из самых экологически благополучных районов Жигулей в поселке Волжский.
Для тех, кто готов различать сорта и качество! Для тех, кто любит пиво во всем его многообразии!
Для тех, кто заботится о своем здоровье!
</div>
<div id="panels">
<div id="vote_panel">
<div id="head_vote_panel">
<div id="head_ask">
<h2><br/><img src="images/vote_ico.png"> Голосуем!</h2>
<br/>
<h3>Какое пиво вы предпочитаете?</h3>
</div>
</div>
<div id="ask">
<span class=""><input type="radio" checked name="beer" id="1"> Темное<br/> </span>
<input type="radio" name="beer" id="2"> Светлое<br/>
<input type="radio" name="beer" id="3"> Нефильтрованное<br/>
<input type="radio" name="beer" id="4"> Что такое Пиво?<br/>
<a href="#" id="vote_submit">Проголосовать</a>
</div>
</div>
<div id="news_panel">
<div id="head_news_panel">
<div id="head_ask">
<h2><br/><br/><img src="images/news_ico.png"> Новости</h2>
<br/>
</div>
</div>
<div id="ask">
<table>
<tr>
<td valign="top">12.02.08</td>
<td>
Здесь будет краткий текст
последних новостей. Подробнее
можно посмотреть,перейдя по
ссылке.
</td>
</tr>
<tr>
<td valign="top">02.01.08</td>
<td>
Еще одна новость. 1.
Система управления сайтом
(позволяет редактировать
информацию на сайте и разделять
уровни доступа; добавлять
ключевые слова; добавлять,
убирать, редактировать разделы,
подразделы)<br/><br/>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="details">
<span id="tel">тел.</span> <span id="phone">8 905 3000666</span><br/>
<a href="#" id="details_link">реквизиты</a>
</div>
<div style="clear:both"></div>
<div id="botlle"></div>
<div id="footer_bg">
<div id="right_bottom">
<div id="logo">
<img src="images/logo.png">
<span id="internet_agent">Интернет-агентство</span><br/>
<span id="busines">Бизнес-Дизайн</span><br/>
<a href="#" id="make_sait">разработка сайтов в тольятти</a>
</div>
</div>
</div>
</body>
</html>
[/HTML]
Код CSS файла:
Код:
проверять лениво, но предлагаю добавить:
html {margin:0; padding: 0;}
html {margin:0; padding: 0;}
Спасибо за попытку помочь, но к сожалению не помогло.
Код:
#menu {
left: 65%;
list-style-type: none;
margin: 0;
position: relative;
top: 60px;
z-index: 1;
width: 30%;
}
left: 65%;
list-style-type: none;
margin: 0;
position: relative;
top: 60px;
z-index: 1;
width: 30%;
}
Используйте firebug для поиска ошибок.
спасибо, все получилось.