X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Как правильно разбить макет на блоки для div верстки
Hotrey
Hotrey
Topic Starter сообщение 24.10.2013, 16:59; Ответить: Hotrey
Сообщение #1


Здравствуйте, помогите с версткой шаблона.
Интересует сама структура, т.е как правильно разбить его на блоки
Эскизы прикрепленных изображений
Прикрепленное изображение
 
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Игорян_mw
Игорян_mw
сообщение 24.10.2013, 17:14; Ответить: Игорян_mw
Сообщение #2


Может чем-то поможет вам данный сервис http://csstemplater.com :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Hotrey
Hotrey
Topic Starter сообщение 24.10.2013, 18:24; Ответить: Hotrey
Сообщение #3


не помогает) мне нужно именно для конкретной ситуации, представленной в картинке
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alex159
alex159
сообщение 24.10.2013, 20:00; Ответить: alex159
Сообщение #4


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

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

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

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

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

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

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

}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Hotrey
Hotrey
Topic Starter сообщение 24.10.2013, 20:22; Ответить: Hotrey
Сообщение #5


Я так и предполагал, что так)
Меня только смущает один момент, - Навигация (голубой цвет) растягивается на оба блока (левый и правый) и кусочек ее выглядывает из-за левой части, вот как это сделать?)
вопрос может быть глупый, но я пока только начинаю верстать шаблоны и не все получается
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alex159
alex159
сообщение 24.10.2013, 20:47; Ответить: alex159
Сообщение #6


Можно html код? Или хотя бы <div> структуру.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Hotrey
Hotrey
Topic Starter сообщение 24.10.2013, 21:19; Ответить: Hotrey
Сообщение #7


да в том и дело что есть только psd макет, который нужно сверстать. И я никак не могу разобраться с этим моментом
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alex159
alex159
сообщение 24.10.2013, 21:35; Ответить: alex159
Сообщение #8


[member=Hotrey], Навигация должна быть на весь экран? (левый и правый блок)
Начните уже хотя бы с чего то. Будем дальше смотреть
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Hotrey
Hotrey
Topic Starter сообщение 24.10.2013, 23:14; Ответить: 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
alex159
сообщение 25.10.2013, 16:06; Ответить: alex159
Сообщение #10


Уберите у тега body.
width: 100%; - этот параметр. И за него появляется скрол в сторону.
[img]http://img15.imageshack.us/img15/9649/wo0s.png[/img]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Партнерская программа для Эзотерики, Магии, Таро
партнерка для эзотерики
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


 



RSS Текстовая версия Сейчас: 29.3.2024, 12:36
Дизайн