X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Добавить ответ в эту тему
> Помогите новичку,куча непонимания. Адаптивная верстка
Navin
Navin
Topic Starter сообщение 27.4.2014, 19:03; Ответить: Navin
Сообщение #1


Только начал заниматься этим всем,хочу переделать шаблон скаченный.
Сделал из него резиновый.
Но теперь столкнулся с огромной кучей непонимания,опыта совсем нехватает.Запутался.

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]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Wins
Wins
сообщение 28.4.2014, 3:00; Ответить: Wins
Сообщение #2


(Navin @ 27.4.2014, 22:03) *
Только начал заниматься этим всем

Вам сначала нужно выучить нормально css, html, чтоб в этом разбираться, и хотя бы знать основы на хорошем уровне, потренироваться на фиксированной верстке, чтоб понять что куда и как, а потом уже браться за резиновую/адаптивную.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
zeurminall
zeurminall
сообщение 1.5.2014, 14:02; Ответить: zeurminall
Сообщение #3


По поводу картинок понял. Задайте для картинок общий div контейнер, указав ему в % ширину и отступы (padding) справа и слева, укажите ему класс, например "cont-1". У вас 4 картинки в этом блоке. Создайте класс для картинок типа: .cont_1 img {width:25%;}. Таким образом, Вы зададите условие для каждой картинки в этом блоке, что она всегда будет равна 25% ширины от этого блока, вне зависимости от ширины экрана.

По красной линии вообще не понял.

По поводу прижатого футера, читайте в интернете, это в двух словах не описать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Добавить ответ в эту тему
Быстрый ответ
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВерстка/Натяжка/Оптимизация/Увеличение функционала шаблонов на WP
Разработка на профессиональном уровне
144 Gerga 91645 11.3.2024, 19:59
автор: anchous
Открытая тема (нет новых ответов) Помогите вспомнить рекламного бота Телеграм для обмена рекламой
0 Mixatraider 692 21.2.2024, 23:42
автор: Mixatraider
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыКачественный современный дизайн сайтов, логотипов, печатной продукции. Верстка.
26 zaiko 17160 30.1.2024, 18:10
автор: zaiko
Открытая тема (нет новых ответов) Верстка шаблона Битрикс
0 bat 1362 26.9.2023, 6:22
автор: bat
Открытая тема (нет новых ответов) Верстка электронных писем бесплатно
0 Gidemopassan 1499 23.6.2023, 10:12
автор: Gidemopassan


 



RSS Текстовая версия Сейчас: 28.3.2024, 16:12
Дизайн