Помощник
|
Как правильно разбить макет на блоки для 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] |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Партнерская программа для Эзотерики, Магии, Таро партнерка для эзотерики |
0 | LiveExpert | 374 | Вчера, 15:13 автор: LiveExpert |
|
Партнерская программа для Эзотерики, Магии, Таро партнерка для эзотерики |
0 | LiveExpert | 343 | Вчера, 15:13 автор: LiveExpert |
|
Azinomoney.com - гемблинг-партнерка с 65%RS для каждого Гарантированный заработок на гемблинг-трафике |
65 | AzinoMoney | 29197 | 27.3.2024, 19:10 автор: AzinoMoney |
|
Делаю полностью уникальный дизайн для сайтов! | 46 | AlexDIZ | 93513 | 26.3.2024, 20:03 автор: AlexDIZ |
|
Большие ставки для кликов в Я.Директ. Как удешевить? | 2 | rownong27 | 1124 | 26.3.2024, 14:13 автор: knezevolk |
Текстовая версия | Сейчас: 29.3.2024, 12:36 |