Макет для сайта

angelShlesser · April 9, 2011

Как сделать вот такой дизайн.

Вот такого плана.

Быколай · April 9, 2011

Как сделать вот такой дизайн.
Вот такого плана.

что пробовали и почему не получилось?

Edited April 9, 2011 by Быколай

swetlana · April 9, 2011

варианты: отрицательный маргин, абсолютное или относительное позиционирование.

Смотрите по ситуации, какой вам больше подойдёт.

angelShlesser · April 9, 2011

Я не понял как это реализовать.

<div>

или через <table>

А картинку как я понял, через стили css сделать?

Быколай · April 9, 2011

Я не понял как это реализовать.
<div>
или через <table>
А картинку как я понял, через стили css сделать?

это два дива. position на htmlbоok.ru позволяет сместить один блок чтобы он "наезжал" на другой. скруглённые уголки для большого блока - есть в css 3 border-radius на htmlbоok.ru , или другие рецепты http://htmlbook.ru/faq/theme/skruglennye-ugolki

мне казалось что на htmlbook был рецепт раскрывающий именно тему смещённых слоёв, но чего-то не смог найти.

angelShlesser · April 9, 2011

.layer1 {
	position: absolute;
}
.layer2 {
	display: table;
	color: #22222;
	margin: 15px;
	padding: 10px;
	background-color: #FF6;
	border: 1px solid #F00;
	line-height: normal;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}

body {
	background-color: #00C;
}

<div class="layer1"><img src="http://htmlbook.ru/themes/hb/images/content.png" />
<div class="layer2">
  Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
</div>
</div>

Вот как сделал.. картинку как сместить на второй элемент так и не понял.

Быколай · April 9, 2011

top на htmlbоok.ru left на htmlbоok.ru

angelShlesser · April 9, 2011

<style type="text/css">
.layer1 {
	position: absolute;
	top: 10px;
	left: 10px;
}
.layer2 {
	display: table;
	color: #22222;
	margin: 15px;
	padding: 10px;
	background-color: #FF6;
	border: 1px solid #F00;
	line-height: normal;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}

body {
	background-color: #00C;
}
</style>
</head>

<body>
<div class="layer2">
Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
<div class="layer1">
<img src="http://htmlbook.ru/themes/hb/images/content.png" />
</div>
</div>
</body>

Всё получилось. Есть замечания?

Быколай · April 9, 2011

поздравляю. layer1 после layer2

swetlana · April 9, 2011

а ещё лучше — внутри.

И родителю position: relative

angelShlesser · April 9, 2011

Блин. А как теперь сделать это в контексте.

<!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>Байки из склепа</title>
  <style type="text/css">
   body {
    font: 11pt Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
    margin: 0; /* Отступы на странице */
   }
   h1 {
    font-size: 36px; /* Размер шрифта */
    margin: 0; /* Убираем отступы */
    color: #fc6; /* Цвет текста */
   }
   h2 {
    margin-top: 0; /* Убираем отступ сверху */
   }
   #header { /* Верхний блок */
    background: #0080c0; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
   #sidebar { /* Левая колонка */
    float: left; /* Обтекание справа */
    border: 1px solid #333; /* Параметры рамки вокруг */
    width: 20%; /* Ширина колонки */
    padding: 5px; /* Поля вокруг текста */
    margin: 10px 10px 20px 5px; /* Значения отступов */
   }
   #content { /* Правая колонка */
    margin: 10px 5px 20px 25%; /* Значения отступов */
    padding: 5px; /* Поля вокруг текста */
    border: 1px solid #333; /* Параметры рамки */
   }
   #footer { /* Нижний блок */
    background: #333; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
    color: #fff; /* Цвет текста */
    clear: left; /* Отменяем действие float */
   }

.layer1 {
	position: !important;
	top: 10px;
	left: 10px;
}
.layer2 {
	display: table;
	color: #22222;
	margin: 15px;
	padding: 10px;
	background-color: #FF6;
	border: 1px solid #F00;
	line-height: normal;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}
</style>
</head>

<body>
  <div id="header"><h1>Байки из склепа</h1></div>
  <div id="sidebar">
    <p><a href="b_all.html">Все байки</a></p>
    <p><a href="b_author.html">Байки по автору</a></p>
    <p><a href="b_theme.html">Байки по теме</a></p>
    <p><a href="b_popular.html">Популярные байки</a></p>
    <p><a href="b_last.html">Последние байки</a></p>
  </div>
  <div id="content">
    <h2>Алтарь демона </h2>
    <p>Утром, при ярком солнечном свете, всё выглядело совсем не так и мрачно, как 
       планировалось, а даже наоборот. От свечей остались одни потёки, «кровь» 
       смотрелась как краска, а перья почти целиком разлетелись от ветра. Хорошо 
       сохранились только рисунки мелом, но и они были скорее прикольные, чем злые и загадочные. 
       Дети с неподдельным интересом разглядывали изображения, но без тени тех чувств, которые 
       испытали взрослые ночью при луне.</p>
    <p>Тем не менее, оказался один человек, на которого работа произвела большое 
       впечатление, — сторож лагеря. Днём он подошёл к автору «алтаря».</p>
    <p>— Ваша работа? - начал сторож, кивая в сторону площади.<br />
       — А что такое? <br />
       — Ну, как же... Тут кровь..., перья птицы мёртвой..., знаки какие-то страшные нарисованы..., 
       а у вас всё же дети маленькие, они испугаться могут...</p>
       <div class="layer1">
<img src="http://htmlbook.ru/themes/hb/images/content.png" />
       <div class="layer2">
Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
</div>
</div>

<div class="layer1">
<img src="http://htmlbook.ru/themes/hb/images/content.png" />
<div class="layer2">
[img=http://storage2.static.itmages.ru/i/11/0409/h_1302363599_60365904b1.png]
Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
</div>
</div>

  </div>
  <div id="footer">© Влад Мержевич</div>
 </body>
</html>

Edited April 9, 2011 by angelShlesser

angelShlesser · April 9, 2011

Как уже писали position: relative

Использовал, только теперь картинка не налазит на рамку.

Ясно, только минусами закидают. Ладно спс что сразу не удалили.

Serlutin · April 9, 2011

Я бы сделал так.

<div class="layer1"></div>
<div class="layer2"> .... </div>

На .layer1 мы фоном вешаем картинку и делаем его relative, а .layer2 смещаем вверх отрицательным margin.

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

angelShlesser · April 9, 2011

Serlutin Спасибо твой совет помог. Всё получилось.

Sign In

Макет для сайта

Question

Link to comment

Share on other sites

13 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

Join the conversation

Обсуждения

Important Information