• Страница 1 из 1
  • 1
Модератор форума: Yuri_G  
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Пример HTML верстки на div-ах (нужна помощь с написанием дизайна)
Пример HTML верстки на div-ах
Aristotel
Сообщений: 5
Репутация: 5

Сообщение # 1 | 09:54:38 10 Июн 2016
Всем доброго времени суток!
Обращаюсь к вам за помощью, 5 лет не брался за верстку дизайна, а тут понадобилось. Вообщем, у кого есть на приложенный макет, HTML и CSS код, верстка на дивах? поделитесь пожалуйста, заранее спасибо
Прикрепления: 6962273.jpg (54.0 Kb)
Сообщение отредактировал webanet - Пятница, 10 Июн 2016, 17:40:20
Rostislav
Сообщений: 2396
Репутация: 591

Сообщение # 2 | 11:48:51 10 Июн 2016
Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>$SITE_NAME$</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#header {height:200px;}
#left {float:left;width:200px;}
#right {float:right;width:200px;}
#center {margin:0 200px 0 200px;}
#spacer {height:100px;}
#footer {height:100px;margin-top:-100px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
    <div id='header'>
    <!-- Содержимое хэдэра -->
    </div>
    <div id='container'>
  <div id='left'>
  <!-- Содержимое левой колонки -->
  </div>
  <div id='right'>
  <!-- Содержимое правой колонки -->
  </div>
  <div id='center'>
  <!-- Содержимое центральной колонки -->
  </div>
    </div>
    <div class='clear'></div>
    <div id='spacer'></div>
</div>
<div id='footer'>
<!-- Содержимое футера -->
</div>
</body>
</html>
Эрудитов.Нет
Aristotel
Сообщений: 5
Репутация: 5

Сообщение # 3 | 13:10:28 10 Июн 2016
спасибо
Aristotel
Сообщений: 5
Репутация: 5

Сообщение # 4 | 15:13:41 16 Сен 2016
Всем доброго времени суток, столкнулся снова с проблемой. на скрине видно, что не так???? подскажите пожалуйста
Вот код моего творения
Код
<!DOCTYPE html>
<html>
<head>
<!-- включение тегов HTML5 для IE -->
  <!--[if lt IE 9]>
   <script>
    var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(',' <img src="/.s/sm/1/wink.gif" border="0" align="absmiddle" alt="wink" /> ;
    for (var i = 0; i < e.length; i++) {
      document.createElement(e[i]);
    }
   </script>
  <![endif]-->
<!-- /включение тегов HTML5 для IE/ -->
<title>$SITE_NAME$</title>
<style type="text/css">
* {
margin: 0;
padding: 0;}

html {
height: 100%;}
body {
font-family: Segoe UI, sans-serif;
font-size: 12px;
color:#dedede;
background:url(../images/fon.png) #21242a;}

html, body {margin:0;height:100%;}

#wrapper {height:auto !important;height:100%;min-height:100%;width:1020px;
background: #21242a;
border-radius: 10px;
border: 1px solid #373B45;
box-shadow: inset 0px 1px 4px 1px #1D1D1D;
margin: 10px auto;}

#header {height:200px;}

#left {float:left;width:200px;}

#right {float:right;width:200px;}

#center {margin:0 200px 0 200px;}

#spacer {height:100px;}

#footer {height:100px;margin-top:-100px;}

.clear {clear:both;}

</style>
</head>
<body>
<div id='wrapper'>
   <header>
    <div id='header'>ывпаывап
    <!-- Содержимое хэдэра -->
    </div>
   </header>
    <div id='container'>
  <div id='left'>ывпывапывп
  <!-- Содержимое левой колонки -->
  </div>
  <div id='right'>ывапывпывп
  <!-- Содержимое правой колонки -->
  </div>
  <div id='center'>ыпывапывапывп
  <!-- Содержимое центральной колонки -->
  </div>
    </div>
    <div class='clear'></div>
    <div id='spacer'></div>
</div>
   <footer>
<div id='footer'>ывпаывпа
<!-- Содержимое футера -->
</div>
</footer>
</body>
</html>


Добавлено (16 Сен 2016, 15:13:41)
---------------------------------------------
footer не во wrapper был, переделал, теперь footer отоброжаеться под левой колонкой в чем дело?
Прикрепления: 5474426.jpg (22.6 Kb) · 7505455.jpg (23.3 Kb)
Сообщение отредактировал Aristotel - Пятница, 16 Сен 2016, 15:25:16
Sonor
Сообщений: 251
Репутация: 525

Сообщение # 5 | 21:12:43 16 Сен 2016
Пропишите блокам разные цвета и будете видеть изменения, пример:
Код
footer {
background : #777;
text-align : center;
}

Добавьте display:block
Код
footer, header {
display : block;
}

код можно сократить:
Код
<header>
Содержимое хэдэра
</header>

<footer>
Содержимое футера
</footer>

Без <div class='clear'></div> (clear:both) можно обойтись, добавив непосредственной обёртке свойство overflow:hidden
Код
#container {
overflow: hidden;
}
as near as far
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Пример HTML верстки на div-ах (нужна помощь с написанием дизайна)
  • Страница 1 из 1
  • 1
Поиск: