Создание начального макета

Livandey · June 21, 2011

Нужно создать вот такой вот макет

что бы было без разделения (линий) между частями.

Когда я делаю больше двух колонок, то у меня начинается белебера из-за недостатка опыта. Может быть есть тема в которой рассказывается по создание колонок.

Работаю в Adobe Dreamweaver CS5

заранее благодарна всем.

ShumNo · June 21, 2011

Быть может если бы вы указали хотя бы примерно в чем состоит "белеберда" то ответы были бы более конструктивными

Для формирования структуры страницы можно воспользоваться готовыми макетами или сервисами по генерации их

Livandey · June 21, 2011

не понимаю как сделать два разных изображения по бокам от колонок и от логотипа, которые бы закрывались при уменьшении окна браузера.

Анна · June 21, 2011

Не знаю это вам нужно или нет: http://htmlbook.ru/faq/kak-dobavit-dva-fonovykh-izobrazheniya-k-odnomu-elementu

Livandey · June 25, 2011

с созданием макета я разобралась.

не работает максимальная ширина, в info, и я не понимаю почему. Объясните пожалуйста кто сможет.

Буду рада конструктивной критике.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<style type="text/css">
<!--
body {
	color: #FFF; /* цвет текста */
	background-color: #FFF; /* цвет фона */
	margin: 0 auto; /* выравниваем макет по центру */
}
#container {
	min-width: 960px; /* минимальная ширина макета */
	max-width: 1310px; /* максимальная ширина макета */
	margin: 0 auto; /* выравниваем макет по центру */
	height: 800px; /* высота */
	background-color: #069; /* цвет фона */
	z-index: 3; /* позиция */
   }
#logotip {
	min-width: 960px; /* минимальная Ширина макета */
	max-width: 1307px; /* максимальная Ширина макета */
	height: 260px; /* высота */
	background-color: #FFF; /* цвет фона */
	z-index: 1; /* позиция */
	margin: 0 auto; /* выравниваем макет по центру */
	background-image: url(images/1.jpg); /* изображение */
	background-position: center top; /* положение изображения */
}
#menu {
	margin: 0 auto; /* выравниваем макет по центру */
	width: 960px; /* ширина макета */
	height: 89px; /* высота */
	background-color: #69F; /* цвет фона */
	z-index: 1; /* позиция */
}
#kontent {
	margin: 0 auto; /* выравниваем макет по центру */
	min-width: 960px; /* минимальная ширина макета */
	max-width: 1200px; /* максимальная ширина макета */
	height: 500px; /* высота */
	z-index: 2; /* позиция */
	background-color: #9C6; /* цвет фона */

}
#niz {
	margin: 0 auto; /* выравниваем макет по центру */
	width: 300px; /* ширина макета */
	height: 30px; /* высота */
	z-index: 1; /* позиция */
	background-color: #FFF; /* цвет фона */
	color: #000; /* цвет текста */
}
#foto {
	width: 400px; /* ширина макета */
	height: 300px; /* высота */
	z-index: 1; /* позиция */
	background-color: #FF3; /* цвет фона */
	float: right; /* выравнивание справа */
	margin-top: 30px; /* отступ сверху */
	margin-right: 30px; /* отступ справа */
	margin-bottom: 30px; /* отступ снизу */
	margin-left: 15px; /* отступ слева */
}
#info {
	width: 450; /* ширина макета */
	min-width: 450px; /* минимальная ширина макета */
	max-width: 550px; /* максимальная ширина макета */
	height: 300px; /* высота */
	z-index: 1; /* позиция */
	background-color: #FC0;
	float: left; /* выравнивание слева */
	margin-top: 30px; /* отступ сверху */
	margin-right: 15px; /* отступ справа */
	margin-bottom: 30px; /* отступ снизу */
	margin-left: 30px; /* отступ слева */
}
</style>
</head>

<body>
<div id="container">
  <div id="logotip"></div>
  <div id="kontent">
     <div id="menu"></div>
     <div id="foto"></div>
     <div id="info"></div>
  </div>
  <div id="niz">
  <div align="center">© 2011</div>
</div>
</div>
</body>
</html>

Edited June 25, 2011 by Livandey

sigma77 · June 25, 2011

Livandey,

Добавь в info контента тогда заработает. Дело в том что плавающие блоки принимают ширину вложенного в них контента или явно заданную ширину. Поэтому, чтобы сработал max-width блок надо наполнить контентом.

п.с. Ну и не забудь сверху кусок комментария удалить

Livandey · June 25, 2011

sigma77, с добавлением контента работает. Благодарю =)

А какой коментарий надо удалить?

Edited June 25, 2011 by Livandey

sigma77 · June 25, 2011

А какой коментарий надо удалить?

Вот отсюда:

<!--

body {

Livandey · June 25, 2011

sigma77, благодарю =)

у меня новое непонимание получилось.. я вставила туда контент, но блок занял максимальную ширину и в случае если недостаточно места в окне, то он просто перепрыгивает ниже, а не уменьшается.

sigma77 · June 25, 2011

Livandey,

Не совсем понятно, что имеется ввиду. Можешь показать скриншот?

Livandey · June 25, 2011

sigma77,

Livandey · June 25, 2011

Блок под названием info "перепрыгивает" вниз, при уменьшении окна браузера, а мне нужно что бы он уменьшался и текст, который в нем, переносился на новую строку, при необходимости, в зависимости от размера окна браузера.

код:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>cайт</title>
<style type="text/css">
body {
	color: #FFF; /* цвет текста */
	background-color: #FFF; /* цвет фона */
	margin: 0 auto; /* выравниваем макет по центру */
}
#container {
	min-width: 960px; /* минимальная ширина макета */
	max-width: 1310px; /* максимальная ширина макета */
	margin: 0 auto; /* выравниваем макет по центру */
	height: 800px; /* высота */
	background-color: #069; /* цвет фона */
	z-index: 3; /* позиция */
   }
#logotip {
	min-width: 960px; /* минимальная Ширина макета */
	max-width: 1307px; /* максимальная Ширина макета */
	height: 260px; /* высота */
	background-color: #FFF; /* цвет фона */
	z-index: 1; /* позиция */
	margin: 0 auto; /* выравниваем макет по центру */
	background-image: url(images/1.jpg); /* изображение */
	background-position: center top; /* положение изображения */
}
#menu {
	margin: 0 auto; /* выравниваем макет по центру */
	width: 960px; /* ширина макета */
	height: 89px; /* высота */
	background-color: #69F; /* цвет фона */
	z-index: 1; /* позиция */
}
#kontent {
	margin: 0 auto; /* выравниваем макет по центру */
	min-width: 960px; /* минимальная ширина макета */
	max-width: 1200px; /* максимальная ширина макета */
	height: 500px; /* высота */
	z-index: 2; /* позиция */
	background-color: #9C6; /* цвет фона */

}
#niz {
	margin: 0 auto; /* выравниваем макет по центру */
	width: 300px; /* ширина макета */
	height: 30px; /* высота */
	z-index: 1; /* позиция */
	background-color: #FFF; /* цвет фона */
	color: #000; /* цвет текста */
}
#foto {
	width: 400px; /* ширина макета */
	height: 300px; /* высота */
	z-index: 1; /* позиция */
	background-color: #FF3; /* цвет фона */
	float: right; /* выравнивание справа */
	margin-top: 30px; /* отступ сверху */
	margin-right: 30px; /* отступ справа */
	margin-bottom: 30px; /* отступ снизу */
	margin-left: 15px; /* отступ слева */
}
#info {
	min-width: 450px; /* минимальная ширина макета */
	max-width: 700px; /* максимальная ширина макета */
	height: 300px; /* высота */
	z-index: 1; /* позиция */
	background-color: #FC0;
	float: left; /* выравнивание слева */
	margin-top: 30px; /* отступ сверху */
	margin-right: 15px; /* отступ справа */
	margin-bottom: 30px; /* отступ снизу */
	margin-left: 30px; /* отступ слева */
	color: #000;
}
</style>
</head>

<body>
<div id="container">
  <div id="logotip"></div>
  <div id="kontent">
     <div id="menu"></div>
     <div id="foto"></div>
     <div id="info"> 
       <p>Главная страница</p>
       этот блок растянется до нужных размеров под вставленную в него информацию и станет нормальный ширины даже при большом формате монитора.
     </div>
  </div>
  <div id="niz">
  <div align="center">© 2011</div>
</div>
</div>
</body>
</html>

sigma77 · June 26, 2011


#info {
    background-color: #FFCC00;
    color: #000000;
    height: 300px;
    margin: 30px 460px 30px 30px;

Плюс не забудь очистить поток.

Livandey · June 26, 2011

sigma77, благодарю, все получилось. Почитить поток - это удалить все лишнее в #info?

Edited June 26, 2011 by Livandey

sigma77 · June 26, 2011

Почитить поток - это удалить все лишнее в #info?

Нет. В css есть такое понятие как "поток". Почитать про него можно здесь - http://htmlbook.ru/blog/ponyatie-potoka

Когда какому-либо элементу задается свойство float из нормального потока он выбывает, но тем не менее оказывает влияние на существующие элементы. Для того чтобы предотвратить дальнейшее обтекание уже не нужными элементами используют т.н. очистку потока. Для этого существует несколько способов.

1. clear: both;

2. Основанный на первом, но считающийся более продвинутым и универсальным clearfix - http://www.xiper.net/collect/html-and-css-tricks/css-tricks/clearfix.html

3. overflow: hidden

4. diplay: inline-block

5. Задание родителю float с последующей его очисткой в самом конце.

Livandey · July 1, 2011

sigma77, благодарю, с этим я разобралась, по ссылкам почитала все.

Теперь другая "заморочка" нужно блоку присвоить рамку из изображений. Так что бы на углах были одни изображения, а по горизонтали или вертикали (для блоков с не фиксированной шириной), повторялись другие.

подскажите пожалуйста как воплотить, пока что не нашла уроков на эту тему в нете. Только отдельно, как повторять одно изображение.

Edited July 1, 2011 by Livandey

Int · July 1, 2011

8 блоков вокруг?

Livandey · July 1, 2011

Int, одному блоку нужно по бокам (3 с одной стороны и 3 с другой) а другому блоку линию внизу (3 блока получается).

Int · July 1, 2011

Ну вперёд.

Livandey · July 1, 2011

Int, у меня не получается так их расположить. Можно подсказку зала?

Int · July 2, 2011

Да делай на таблицах, не мучайся.

Livandey · July 2, 2011

хотелось бы на блоках....

как сделать что бы #izo2ln отображался внизу?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>сайт</title>
<style type="text/css">
body {
	color: #FFF; /* цвет текста */
	background-color: #FFF; /* цвет фона */
	margin: 0 auto; /* выравниваем макет по центру */
}
#container {
	min-width: 950px; /* минимальная ширина макета */
	max-width: 1310px; /* максимальная ширина макета */
	margin: 0 auto; /* выравниваем макет по центру */
	height: 800px; /* высота */
	background-color: #069; /* цвет фона */
	z-index: 3; /* позиция */
   }
#logotip {
	min-width: 950px; /* минимальная Ширина макета */
	max-width: 1307px; /* максимальная Ширина макета */
	height: 260px; /* высота */
	background-color: #FFF; /* цвет фона */
	z-index: 1; /* позиция */
	margin: 0 auto; /* выравниваем макет по центру */
	background-image: url(comnex/images/1.jpg); /* изображение */
	background-position: center top; /* положение изображения */
}
#menu {
	margin: 0 auto; /* выравниваем макет по центру */
	width: 925px; /* ширина макета */
	height: 89px; /* высота */
	background-color: #69F; /* цвет фона */
	z-index: 1; /* позиция */
}
#kontent {
	margin: 0 auto; /* выравниваем макет по центру */
	min-width: 950px; /* минимальная ширина макета */
	max-width: 1200px; /* максимальная ширина макета */
	height: 500px; /* высота */
	z-index: 2; /* позиция */
	background-color: #9C6; /* цвет фона */

}
#niz {
	margin: 0 auto; /* выравниваем макет по центру */
	width: 300px; /* ширина макета */
	height: 30px; /* высота */
	z-index: 1; /* позиция */
	background-color: #FFF; /* цвет фона */
	color: #000; /* цвет текста */
}
#foto {
	width: 400px; /* ширина макета */
	height: 300px; /* высота */
	z-index: 1; /* позиция */
	background-color: #FF3; /* цвет фона */
	float: right; /* выравнивание справа */
	clear: both;
	margin-top: 30px; /* отступ сверху */
	margin-right: 30px; /* отступ справа */
	margin-bottom: 30px; /* отступ снизу */
	margin-left: 15px; /* отступ слева */
}
#info {
    background-color: #FFCC00;
    color: #000000;
    height: 300px;
    margin: 30px 460px 30px 30px;
}
#izo1lv {
	position:absolute;
	width:11px;
	height:19px;
	z-index:1;
	background-color: #FFF;
	background-image: url(comnex/images/4.jpg);
}
#izo2ln {
	width:11px;
	height:19px;
	z-index:1;
	background-color: #C03;
	float: left;
	vertical-align: baseline;
}
</style>
</head>

<body>


<div id="container">
  <div id="logotip"></div>
  <div id="kontent">
    <div id="izo1lv"></div>
    <div id="izo2ln"></div>
    <div id="menu"></div>
   <div id="foto"></div>
     <div id="info"> 
       <p>Главная страница</p>
       этот блок растянется до нужных размеров под вставленную в него информацию и станет нормальный ширины даже при большом формате монитора.
     </div>
  </div>
  <div id="niz">
  <div align="center">© 2011</div>
</div>
</div>
</body>
</html>

Livandey · July 14, 2011

решила попробовать таблицу...

как сделать что бы изображение 5 повторялось по вертикали... и что бы у таблицы между столбцами не было отступов?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>cайт</title>
<style type="text/css">
body {
	color: #FFF; /* цвет текста */
	background-color: #FFF; /* цвет фона */
	margin: 0 auto; /* выравниваем макет по центру */
}
#container {
	min-width: 950px; /* минимальная ширина макета */
	max-width: 1310px; /* максимальная ширина макета */
	margin: 0 auto; /* выравниваем макет по центру */
	height: 800px; /* высота */
	background-color: #069; /* цвет фона */
	z-index: 3; /* позиция */
   }
#logotip {
	min-width: 950px; /* минимальная Ширина макета */
	max-width: 1307px; /* максимальная Ширина макета */
	height: 260px; /* высота */
	background-color: #FFF; /* цвет фона */
	z-index: 1; /* позиция */
	margin: 0 auto; /* выравниваем макет по центру */
	background-image: url(comnex/images/1.jpg); /* изображение */
	background-position: center top; /* положение изображения */
}
#menu {
	margin: 0 auto; /* выравниваем макет по центру */
	width: 925px; /* ширина макета */
	height: 89px; /* высота */
	background-color: #69F; /* цвет фона */
	z-index: 1; /* позиция */
}
#kontent {
	margin: 0 auto; /* выравниваем макет по центру */
	min-width: 950px; /* минимальная ширина макета */
	max-width: 1200px; /* максимальная ширина макета */
	height: 500px; /* высота */
	z-index: 2; /* позиция */
	background-color: #9C6; /* цвет фона */
}
#niz {
	margin: 0 auto; /* выравниваем макет по центру */
	width: 300px; /* ширина макета */
	height: 30px; /* высота */
	z-index: 1; /* позиция */
	background-color: #FFF; /* цвет фона */
	color: #000; /* цвет текста */
}
#foto {
	width: 400px; /* ширина макета */
	height: 300px; /* высота */
	z-index: 1; /* позиция */
	background-color: #FF3; /* цвет фона */
	float: right; /* выравнивание справа */
	clear: both;
	margin-top: 30px; /* отступ сверху */
	margin-right: 30px; /* отступ справа */
	margin-bottom: 30px; /* отступ снизу */
	margin-left: 15px; /* отступ слева */
}
#info {
    background-color: #FFCC00;
    color: #000000;
    height: 300px;
    margin: 30px 460px 30px 30px;
}
</style>
</head>

<body>

<div id="container">
  <div id="logotip"></div>
  <div id="kontent">
    <div align="center">
      <table>
        <tr>
          <td><img src="comnex/images/4.jpg" width="11" height="19"></td>
          <td> </td>
          <td><img src="comnex/images/из/7.jpg" width="11" height="19"></td>
        </tr>
        <tr>
          <td><img src="comnex/images/из/5.jpg" width="11" height="10"></td>
          <td><div id="menu"></div>
          <div id="foto"></div>
     <div id="info"> 
       <p>Главная страница</p>
       этот блок растянется до нужных размеров под вставленную в него информацию и станет нормальный ширины даже при большом формате монитора.
     </div></td>
          <td> </td>
        </tr>
        <tr>
          <td><img src="comnex/images/из/6.jpg" width="11" height="18"></td>
          <td> </td>
          <td><img src="comnex/images/из/8.jpg" width="11" height="18"></td>
        </tr>
      </table>
    </div>
  </div>
  <div id="niz">
  <div align="center">© 2011</div>
</div>
</div>
</body>
</html>

Edited July 14, 2011 by Livandey

Softlink · July 14, 2011

Лень читать всю ветку.

1) сделать изображение бэграундом и повторять его по y

background:url(5.jpg)repeat-y;

2) обнулить отступы либо в теге таблицы, либо в ксс

<table cellspacing="0">

border-spacing:0;

последнее не работает в ИЕ 6-7

Edited July 14, 2011 by Softlink

Livandey · July 14, 2011

Softlink, благодарю за подсказку, но будьте добры, подскажите еще.. как мне сюда:

<td><img src="comnex/images/из/5.jpg" width="11" height="10"></td>

вставить это:

background:url(5.jpg)repeat-y;

Softlink · July 14, 2011

.fon{
background:url(5.jpg) repeat-y;
}

<td class="fon">&nbps;</td>

а вообще советую почитать учебник, там написано как такие вещи делать.

Sign In

Создание начального макета

Question

Link to comment

Share on other sites

33 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information