Помощник
|
Css-расстановка дивов |
serj77_hb
|
Сообщение
#1
|
||
|
|
||
|
|||
serj77_hb
|
Сообщение
#2
|
|
неужто никто не знает? уверен, косяк простой, банально из-за незнания какого-элементарного приниципа позиционирования.. сам уже не знаю что придумать..
|
|
|
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
|
Сообщение
#4
|
|
MetSerp, благодарю.. теперь ясно почему правый див прыгает.. Я почему-то считал что абсолютная позиция "приклеивает" див внутри родительского к точным координатам.. спасибо...
Осталось непонятно на счет границы большого дива - что в моем варианте, что в вашем решении если её убрать - то див без абсолютного позиционирования прыгает вверх.. мне никак не понять, как с этим бороться, разве что сделать границу цвета фона или попытаться подогнать отступ в абсолютных дивах так чтобы после обнуления границы родительского дива они все вставали ровно.. Но все-таки хочется нормальное решение узнать.. :rolleyes: мануалы перерыл уже все что мог.. естественно, нигде не написано как граница может влиять на отступ вложенных дивов.. заранее благодарен |
|
|
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: что абсолютная позиция "приклеивает" див внутри родительского к точным координатам.. ну вы то координаты не задали :sarcastic: вы задали отступы, что она и делала а координаты это - кстати учитывая использование абсолютного позиционирования то проще указывать не отступы а именно позицию через top,right,left,bottom
|
|
|
serj77_hb
|
Сообщение
#6
|
|
спасибо большое, разобрался )
так и не понял почему граница влияла на расстановку дива, но запомнил твердо, что нужно избегать лишнего награмождения параметров :rolleyes: |
|
|
MetSerp |
28.10.2010, 16:27;
Ответить: MetSerp
Сообщение
#7
|
|
|
|
|
puttaz |
15.1.2011, 22:11;
Ответить: puttaz
Сообщение
#8
|
|
|
очень хорошо ребятки
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Разработка/доработка сайтов 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 |
Текстовая версия | Сейчас: 20.4.2024, 4:56 |