Перейти к содержимому

Сервис обмена электронных валют


Как правильно разбить макет на блоки для div верстки

#1 Hotrey

Hotrey
  • Пользователь
  • 17 сообщений
  • Репутация: 1
0

Отправлено 24 Октябрь 2013 - 15:59

Здравствуйте, помогите с версткой шаблона.
Интересует сама структура, т.е как правильно разбить его на блоки

Прикрепленные изображения

  • макет.jpg

 

 

  • 0

#2 Игорян

Игорян
  • Пользователь
  • 296 сообщений
  • Репутация: 10

Отправлено 24 Октябрь 2013 - 16:14

Может чем-то поможет вам данный сервис http://csstemplater.com :)
  • 0

#3 Hotrey

Hotrey
    Topic Starter
  • Пользователь
  • 17 сообщений
  • Репутация: 1

Отправлено 24 Октябрь 2013 - 17:24

не помогает) мне нужно именно для конкретной ситуации, представленной в картинке
  • 0

#4 alex159

alex159
  • Пользователь
  • 492 сообщений
  • Репутация: 32

Отправлено 24 Октябрь 2013 - 19:00

не помогает) мне нужно именно для конкретной ситуации, представленной в картинке

Фото: http://i.imgur.com/ZdtCu47.png

Структура состоит с 2-х частей.

Левая часть (красным) {
--Блок #1 (синий цвет)
--Блок #2 (синий цвет)
}

Правая часть (красным цветом) {

- Шапка (синий) {
- - Лого (черным)
- - Навигация черным)
-- Лого (черным)
}

- Навигация (голубой цвет)
- Текст (голубой цвет)

}
  • 0

#5 Hotrey

Hotrey
    Topic Starter
  • Пользователь
  • 17 сообщений
  • Репутация: 1

Отправлено 24 Октябрь 2013 - 19:22

Я так и предполагал, что так)
Меня только смущает один момент, - Навигация (голубой цвет) растягивается на оба блока (левый и правый) и кусочек ее выглядывает из-за левой части, вот как это сделать?)
вопрос может быть глупый, но я пока только начинаю верстать шаблоны и не все получается
  • 0

#6 alex159

alex159
  • Пользователь
  • 492 сообщений
  • Репутация: 32

Отправлено 24 Октябрь 2013 - 19:47

Можно html код? Или хотя бы <div> структуру.
  • 0

#7 Hotrey

Hotrey
    Topic Starter
  • Пользователь
  • 17 сообщений
  • Репутация: 1

Отправлено 24 Октябрь 2013 - 20:19

да в том и дело что есть только psd макет, который нужно сверстать. И я никак не могу разобраться с этим моментом
  • 0

#8 alex159

alex159
  • Пользователь
  • 492 сообщений
  • Репутация: 32

Отправлено 24 Октябрь 2013 - 20:35

Hotrey, Навигация должна быть на весь экран? (левый и правый блок)
Начните уже хотя бы с чего то. Будем дальше смотреть
  • 0

#9 Hotrey

Hotrey
    Topic Starter
  • Пользователь
  • 17 сообщений
  • Репутация: 1

Отправлено 24 Октябрь 2013 - 22:14

Hotrey, Навигация должна быть на весь экран? (левый и правый блок)
Начните уже хотя бы с чего то. Будем дальше смотреть


Ну вот то, что у меня пока получается:

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
	<meta charset="windows-1251"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
<title>Неназванный 1</title>
</head>
<body>
<div id="wrapper">
	<div id="left">
		<div class="logo"></div>
		<div class="forma_s"></div>
	</div>
	<div id="right">
		<div id="header"></div>
		<div id="navigation"></div>
		<div id="content"></div>
	</div>
</div>
</body>
</html>

CSS

body {
	width: 100%;
	height: 100%;
	background-image: url(..//images/bodyBg.png);
	background-repeat: repeat-x;
}
#wrapper {
	margin: 0 auto;
	width: 1280px;
	height: 1000px;
	outline: 1px solid #000;
}
/*начало левого блока*/
#left {
	float: left;
	width: 449px;
	height: 1000px;
	margin-left: 12px;
	outline: 1px solid #000;
}
	/*начало блока с логотипом*/
	.logo {
		width: 443px;
		height: 424px;
		border-radius: 10px;
		border: 3px solid #fdfcfc;
		box-shadow: 0 0 16px;
		position: relative;
		background-color: #fff;
		z-index: 5;
	}
  
	/*начало блока с обратной формой связи*/
  
	.forma_s {
		width: 396px;
		height: 527px;
		left: 23px;
		border-right: 1px solid #8eb2f3;
		box-shadow: 2px 3px 8px;
		background-image: url(..//images/formBg.png);
		background-repeat: repeat-x;
		position: relative;
		z-index: 1;	
	}
/*конец левого блока*/
/*начало правого блока*/
#right {
	float: left;
	width: 792px;
	height: 1000px;
	margin-right: 20px;
	margin-left: 7px;
	outline: 1px solid #000;
	position: relative;
}
/*начало блока хедер*/
#header {
	width: 792px;
	height: 254px;
	background-color: #fff;
	position: relative;
}
/*конец блока хедер*/
/*начало строки навигации*/
#navigation {
	width: 1280px;
	height: 89px;
	position: absolute;
	outline: 0px solid #cccccc;
	left: -468px;
	background-image: url(..//images/navBg.png);
	background-repeat: repeat-x;
}
/*конец строки навигации*/
/*конец правого блока*/

На аутлайны не обращайте внимания, мне с ними удобнее.
Вроде бы получается сделать то, что задумано макетом. Но у меня такое ощущение, что я как-то не до конца разобрался с position.
Профессионалы, прошу, поправляйте если что-то не так
  • 0

#10 alex159

alex159
  • Пользователь
  • 492 сообщений
  • Репутация: 32

Отправлено 25 Октябрь 2013 - 15:06

Уберите у тега body.
width: 100%; - этот параметр. И за него появляется скрол в сторону.
Изображение
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru