Только начал заниматься этим всем,хочу переделать шаблон скаченный.
Сделал из него резиновый.
Но теперь столкнулся с огромной кучей непонимания,опыта совсем нехватает.Запутался.
1)Необходимо чтобы картинки-ссылки располагались всегда в центре страницы и при изменении размера окна
2)точно также и картинка вверху
3)необходимо чтобы меню не выходило крайней правой стороной за красную черту
4)футер всегда прижат к нижней части
Скурил все форумы,перепробовал все что мог понять,теперь прошу помощи.
[attachment=40249:сайт1.jpg]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ООО «ГенСтройСервис» </title>
<link href="stylesheet/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div class="header">
<div class="topmenu">
<ul>
<li><a href="aboutus.html">О компании</a></li>
<li><a href="projects.html">Услуги компании</a></li>
<li><a href="services.html">Аренда</a></li>
<li><a href="support.html">Вакансии</a></li>
<li><a href="privacy.html">Партнеры</a></li>
<li style="border:none;"><a href="contact.html">Контакты</a></li>
</ul>
</div>
</div>
<div class="banner">
<img class="content_img" src="images/bannerlogo.jpg" usemap="#logo">
<map id="logo" name="logo"><area shape="rect" alt="" title="" coords="23,19,523,126" href="index.html" target="_self" />
</div>
<div class="clear"></div>
<div class="clear"></div>
</div>
<div class="workzone">
<div id="sidebar">
<ul id="menu">
<li><a href="aboutus.html"><span>О компании</span></a></li>
<li><a href="projects.html"><span>Услуги компании</span></a></li>
<li><a href="services.html"><span>Аренда</span></a></li>
<li><a href="support.html"><span>Вакансии</span></a></li>
<li><a href="privacy.html"><span>Партнеры</span></a></li>
<li><a href="contact.html"><span>Контакты</span></a></li>
</ul>
</div>
<div id="content">
<h1>ООО «ГенСтройСервис»</h1>
Общество с ограниченной ответственностью «ГенСтройСервис» организовано в апреле 2007 года. Основной профиль нашей кампании – строительство наружных объектов/сетей теплоснабжения, водоснабжения и канализации. В период с 2007 по 2014 гг. ООО «ГенСтройСервис» участвовало во многих крупных и значимых строительных проектах Северо-Западного региона РФ, в частности в 2014 году подходит к завершению 3-х летний период комплекса работ по устройству внутриплощадочных инженерных сетей теплоснабжения, канализации и водоснабжения объекта: «Следственный изолятор на 4000 мест в Санкт-Петербурге» - «Кресты».
<br />
<br />
ООО «ГенСтройСервис» располагает штатом квалифицированных сотрудников, парком спецтехники и оборудования, которые позволяют решать любые по сложности производственные задачи.
</div>
</div>
<div class="clear"></div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="footer" id="footer">
<div class="footerinside">
<div class="footerlink">
</div>
</div>
</div>
<div class="clear"></div>
</body>
</html>
[CSS]/* CSS Document */
html,body { height: 100%;
max-height: 1280px;
margin:0; padding: 0;
height: auto !important;
min-height:100%;
height: 100%;
}
#footer_space {
height: 25px;
clear: both;
}
body {
font:11px Arial, Helvetica, sans-serif;
color:#535353;
background:#FFFDE4 url(../images/bg.jpg) left top repeat-x;
margin:0px;
padding:0px;
}
#container {
width:80%;
margin:0px auto;
text-align:justify;
}
.banner {
position:center; /* Положение слоя от левого края */
display:inline-block;
width: 100%;
height: 100%;
vertical-align: middle;
}
.header {
height:32px;
background:#1B1B1B;
text-align:right;
}
.workzone {
padding:28px 0px 0px 0px;
}
#sidebar {
float:left;
margin-left: 22%;
border: 0px solid #333; /* Параметры рамки вокруг */
margin-right: 20px;
margin-bottom:45px;
width: 200px; /* Ширина слоя */
padding: 0 0 0 25px; /* Поля вокруг текста */
}
#content {
font-size: 20px;
text-align:justify;
background: #eee 100%; /* фон контента */
margin-right: 22%;
padding: 20px ; /* поле слева */
}
.latestprojectzone {
padding:20px 0px 0px 0px;
margin: 20px 0px 0px 0px;
}
.projectgallery {
border-bottom:1px solid #CCCAB6;
padding-bottom:20px;
color: #000000;
}
.project-img
{
width:50px;
height:50px;
margin-left:10px;
margin-right:10px;
float:left;
display:block;
}
.clear {
clear:both;
margin:0px;
padding:0px;
}
.footer {
background:url(../images/footer.jpg) left bottom repeat-x;
height: 25px;
clear: both;
margin-top: -25px;
}
/* Menu Styles Start Here */
a {
color:#000000;
text-decoration:underline;
}
a:hover {
text-decoration:none;
}
.topmenu {
padding:7px 0px 0px 0px;
}
.topmenu ul {
margin:0px;
padding:0px
}
.topmenu li {
display:inline;
border-right:1px solid #ffffff;
padding:0px 10px 0px 10px;
}
.topmenu li a{
font:bold 11px Tahoma, Arial, Helvetica, sans-serif;
color:#ffffff;
text-decoration:none;
}
.topmenu li a:hover {
color:#cccccc;
}
.footerlink {
}
.footerlink ul {
margin:0px;
padding:0px;
}
.footerlink li {
display:inline;
border-right:1px solid #ffffff;
padding:0px 10px 0px 10px;
}
.footerlink li a{
color:#ffffff;
font-weight:bold;
text-decoration:none;
}
.footerlink li a:hover {
color:#cccccc;
}
ul#menu {list-style-type:none; margin:0; padding:0;}
ul#menu li a{
color:#909090; /* цвет букв в обычном состоянии */
background: url(images/vert_menu.png) no-repeat 0 0; /* путь к изображению */
text-decoration:none;
width: 200px;
height: 55px;
display:block;
border:none;
text-shadow: #ddd 2px 2px 0; /* цвет тени у букв в обычном состоянии */
}
ul#menu li a:hover{
background-position: 50% 100%;
width: 200px;
height: 55px;
display:block;
color:#fff; /* цвет букв в активном состоянии */
text-shadow: #1185EE 2px 2px 0; /* цвет тени у букв в активном состоянии */
}
ul#menu li a span{
font-family:sans-serif; /* Шрифт букв */
font-size:18px; /* размер букв */
padding:17px 0 0 20px;
display:block;
}
/* Menu Styles End Here */
/* Text Styles Start Here */
h1 {
font:26px Georgia, Arial, Helvetica, sans-serif;
color:#000000;
padding:0px;
margin:0px 0px 20px 5px;
}[/CSS]