Помощник
|
Как правильно разбить макет на блоки для div верстки |
Hotrey
|
Сообщение
#1
|
||
|
|
||
|
|||
Игорян_mw |
24.10.2013, 17:14;
Ответить: Игорян_mw
Сообщение
#2
|
|
Может чем-то поможет вам данный сервис http://csstemplater.com
|
|
|
Hotrey
|
Сообщение
#3
|
|
не помогает) мне нужно именно для конкретной ситуации, представленной в картинке
|
|
|
alex159 |
24.10.2013, 20:00;
Ответить: alex159
Сообщение
#4
|
|
не помогает) мне нужно именно для конкретной ситуации, представленной в картинке Фото: http://i.imgur.com/ZdtCu47.png Структура состоит с 2-х частей. Левая часть (красным) { --Блок #1 (синий цвет) --Блок #2 (синий цвет) } Правая часть (красным цветом) { - Шапка (синий) { - - Лого (черным) - - Навигация черным) -- Лого (черным) } - Навигация (голубой цвет) - Текст (голубой цвет) } |
|
|
Hotrey
|
Сообщение
#5
|
|
Я так и предполагал, что так)
Меня только смущает один момент, - Навигация (голубой цвет) растягивается на оба блока (левый и правый) и кусочек ее выглядывает из-за левой части, вот как это сделать?) вопрос может быть глупый, но я пока только начинаю верстать шаблоны и не все получается |
|
|
alex159 |
24.10.2013, 20:47;
Ответить: alex159
Сообщение
#6
|
|
Можно html код? Или хотя бы <div> структуру.
|
|
|
Hotrey
|
Сообщение
#7
|
|
да в том и дело что есть только psd макет, который нужно сверстать. И я никак не могу разобраться с этим моментом
|
|
|
alex159 |
24.10.2013, 21:35;
Ответить: alex159
Сообщение
#8
|
|
[member=Hotrey], Навигация должна быть на весь экран? (левый и правый блок)
Начните уже хотя бы с чего то. Будем дальше смотреть |
|
|
Hotrey
|
Сообщение
#9
|
|
[member=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. Профессионалы, прошу, поправляйте если что-то не так |
|
|
alex159 |
25.10.2013, 16:06;
Ответить: alex159
Сообщение
#10
|
|
Уберите у тега body.
width: 100%; - этот параметр. И за него появляется скрол в сторону. [img]http://img15.imageshack.us/img15/9649/wo0s.png[/img] |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Rebex.io – Ваша инновационная платформа для обмена криптовалюты! | 3 | Rebex | 854 | Сегодня, 20:50 автор: Rebex |
|
Посоветуйте массажер для спины и шеи | 10 | Boymaster | 887 | Сегодня, 18:02 автор: Boymaster |
|
Как в пушсетках покупают по 100-200 тысяч кликов за день? | 2 | Boymaster | 661 | Сегодня, 17:52 автор: Boymaster |
|
Обучение Email Рассылкам + Софт Для Автоматизации (100к в сутки с сервера) | 10 | zennoboss | 4652 | Сегодня, 5:20 автор: Skyworker |
|
Как вы отдыхаете от работы за компом | 151 | adw-kupon.ru | 19835 | Вчера, 13:52 автор: Vmir |
Текстовая версия | Сейчас: 24.4.2024, 21:17 |