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



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

#1 Hotrey
Hotrey
  • Неактивные
  • 17 сообщений
  • Репутация: 1
0

Обновлено 25 октября 2013 - 16:17  Отправлено 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
  • Пользователь
  • 495 сообщений
  • Репутация: 35

Отправлено 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
  • Пользователь
  • 495 сообщений
  • Репутация: 35

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

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

#7 Hotrey
Hotrey
    Topic Starter
  • Неактивные
  • 17 сообщений
  • Репутация: 1

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

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

#8 alex159
alex159
  • Пользователь
  • 495 сообщений
  • Репутация: 35

Отправлено 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
  • Пользователь
  • 495 сообщений
  • Репутация: 35

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

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

#11 Hotrey
Hotrey
    Topic Starter
  • Неактивные
  • 17 сообщений
  • Репутация: 1

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

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


Хорошо, а в остальном нормально, с position нигде не ошибся?
  • 0

#12 alex159
alex159
  • Пользователь
  • 495 сообщений
  • Репутация: 35

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

Hotrey, вроде бы все нормально
  • 0

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


Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
Megoydagi Megoydagi 1-й за Август
Очков активности: 30 4 темы, 8 сообщений, 1 балл репутации
Сайт: bank.net.ru
ТОП самых активных за этот месяц
  • Фотография Vmir
    #1

    Vmir
    Очков активности: 22.5 3 темы, 6 сообщений, 1 балл репутации

  • Фотография BLIK
    #2

    BLIK
    Очков активности: 18 Вне конкурса за определение пользователя месяца

  • Фотография kuztoday
    #3

    kuztoday
    Очков активности: 10.5 1 тема, 4 сообщения, 1 балл репутации

  • Фотография SergiuS85
    #4

    SergiuS85
    Очков активности: 10.5 2 темы, 1 сообщение, 1 балл репутации

  • Фотография kolver
    #5

    kolver
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Фотография mkreine
    #6

    mkreine (analiz-krovi.net)
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Фотография Megoydagi
    #7

    Megoydagi (bank.net.ru)
    Очков активности: 9 Вне конкурса за определение пользователя месяца

  • Фотография Totti
    #8

    Totti
    Очков активности: 7.5 0 тем, 5 сообщений, 1 балл репутации

  • Фотография wp01
    #9

    wp01
    Очков активности: 6 0 тем, 4 сообщения, 1 балл репутации

  • Фотография r0mZet
    #10

    r0mZet (rz-style.ru)
    Очков активности: 6 1 тема, 1 сообщение, 1 балл репутации

  • Показать весь ТОП 10

Поддержите форум! =)
Топ 5 участников по репутации

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