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



 

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

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

Открыть тему
Тема закрыта
> Css-расстановка дивов
serj77_hb
serj77_hb
Topic Starter сообщение 26.10.2010, 14:03; Ответить: serj77_hb
Сообщение #1


Всем доброго дня!
Возникла такая проблема: макет содержит 4 вертикальных дива по горизонтали, 3 фиксированной высоты, и один динамический. Все они заключены в один общий див, код схематично выглядит примерно так:
<div style="margin: 0px auto; width: 1000px; height: 600px; border: 1px solid black;" id="maindiv">

<div style="position: absolute; margin-top: 12px; margin-left: 10px; width: 200px; height: 100px; border: 1px dashed red;"></div>
<div style="position: absolute; margin-top: 12px; margin-left: 220px; width: 200px; height: 100px; border: 1px dashed red;"></div>
<div style=" margin-top: 12px; margin-left: 430px; width: 200px; height: 100px; border: 1px dashed red;"></div>
<div style="position: absolute; margin-top: 12px; margin-left: 640px; width: 200px; height: 100px; border: 1px dashed red;"></div>


</div>


По какой-то причине они не хотят ровняться по высоте, но что самое странное - если убрать границу у основного дива - то 3й слева блок начинает вылезать вверх..
Прошу указать на ошибку или подсказать в каком направлении стоит копаться..
Единственное пришедшее мне на ум - это делать границу цвета фона ) но это, естественно, очень грязное решение..
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
serj77_hb
serj77_hb
Topic Starter сообщение 26.10.2010, 17:18; Ответить: serj77_hb
Сообщение #2


неужто никто не знает? уверен, косяк простой, банально из-за незнания какого-элементарного приниципа позиционирования.. сам уже не знаю что придумать..
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MetSerp
MetSerp
сообщение 26.10.2010, 17:29; Ответить: MetSerp
Сообщение #3


у вас у крайних слоев абсолютное позиционирование, так что он может выпадать так как вы ему задали, в вашем случае виноват
margin-top: 12px; у последнего слоя, так как перед этим слоем у вас идет слой не абсолютно позиционированый, то отступ берется от него.
<div style="margin: 0px auto; width: 1000px; height: 600px; border: 1px solid black;" id="maindiv">

<div style="position: absolute; margin-top: 12px; margin-left: 10px; width: 200px; height: 100px; border: 1px dashed red;"></div>
<div style="position: absolute; margin-top: 12px; margin-left: 220px; width: 200px; height: 100px; border: 1px dashed red;"></div>
<div style="position: absolute; margin-top: 12px; margin-left: 640px; width: 200px; height: 100px; border: 1px dashed red;"></div>
<div style=" margin-top: 12px; margin-left: 430px; width: 200px; height: 100px; border: 1px dashed red;"></div>


</div>

например работает как надо, я просто выставил все слои с абсолютным позиционированием друг за другом
кстати учитывая использование абсолютного позиционирования то проще указывать не отступы а именно позицию через top,right,left,bottom
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
serj77_hb
serj77_hb
Topic Starter сообщение 26.10.2010, 19:47; Ответить: serj77_hb
Сообщение #4


MetSerp, благодарю.. теперь ясно почему правый див прыгает.. Я почему-то считал что абсолютная позиция "приклеивает" див внутри родительского к точным координатам.. спасибо...
Осталось непонятно на счет границы большого дива - что в моем варианте, что в вашем решении если её убрать - то див без абсолютного позиционирования прыгает вверх..
мне никак не понять, как с этим бороться, разве что сделать границу цвета фона или попытаться подогнать отступ в абсолютных дивах так чтобы после обнуления границы родительского дива они все вставали ровно.. Но все-таки хочется нормальное решение узнать.. :rolleyes: мануалы перерыл уже все что мог.. естественно, нигде не написано как граница может влиять на отступ вложенных дивов.. заранее благодарен
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MetSerp
MetSerp
сообщение 26.10.2010, 20:13; Ответить: MetSerp
Сообщение #5


учитывая что отступ сверху у вас весь одинаковый то можно использовать внутренний отступ вместо кучи margin-top
<div style=" padding-top:12px; width: 1000px; height: 600px;" id="maindiv">

<div style="position: absolute; margin-left: 10px; width: 200px; height: 100px; border: 1px dashed red;"></div>
<div style="position: absolute; margin-left: 220px; width: 200px; height: 100px; border: 1px dashed red;"></div>
<div style="position: absolute; margin-left: 640px; width: 200px; height: 100px; border: 1px dashed red;"></div>
<div style=" margin-left: 430px; width: 200px; height: 100px; border: 1px dashed red;"></div>


</div>

но вообще, я хоть и не верстальщик но все же делал несколько иначе б, как минимум не через атрибут style, а через полноценный стиль:maniac:

(serj77_hb @ 26.10.2010, 22:47) *
что абсолютная позиция "приклеивает" див внутри родительского к точным координатам..

ну вы то координаты не задали :sarcastic: вы задали отступы, что она и делала а координаты это -
(MetSerp @ 26.10.2010, 20:29) *
кстати учитывая использование абсолютного позиционирования то проще указывать не отступы а именно позицию через top,right,left,bottom
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
serj77_hb
serj77_hb
Topic Starter сообщение 28.10.2010, 16:24; Ответить: serj77_hb
Сообщение #6


спасибо большое, разобрался )
так и не понял почему граница влияла на расстановку дива, но запомнил твердо, что нужно избегать лишнего награмождения параметров :rolleyes:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MetSerp
MetSerp
сообщение 28.10.2010, 16:27; Ответить: MetSerp
Сообщение #7


(serj77_hb @ 28.10.2010, 19:24) *
так и не понял почему граница влияла на расстановку дива

я если честно в эту проблему не вдавался, я просто заменил отступы у всех слоев на один внутренний отступ у слоя в который они вложены:rolleyes:
но вероятнее всего он все же не от границы прыгал.:wacko:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
puttaz
puttaz
сообщение 15.1.2011, 22:11; Ответить: puttaz
Сообщение #8


очень хорошо ребятки

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3461 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3401 19.12.2023, 18:55
автор: CULA
Открытая тема (нет новых ответов) Веб-разработка (HTML, CSS)
1 ViktoriaFE 6459 5.5.2021, 5:22
автор: bekett
Открытая тема (нет новых ответов) Разработка адаптивных вебсайтов. HTML/CSS/WordPress(сайты-визитки, лендинги, корпоративные сайты, интернет-магазины).
0 kozak199110 1667 3.3.2021, 12:22
автор: kozak199110
Открытая тема (нет новых ответов) Продам адаптивный шаблон (css/html/js) под cj/tube сайт
2 zaiko 1434 29.12.2020, 23:49
автор: zaiko


 



RSS Текстовая версия Сейчас: 20.4.2024, 4:56
Дизайн