Вопрос по CSS позиционированию

Тема в разделе "Веб-дизайн", создана пользователем Veanissepil, 29 авг 2008.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Veanissepil

    Veanissepil Прохожие

    всем привет.

    делаю свой первый сайт полностью на дивах. С таблицами проблем нет, но хочется научиться..

    Сначало всё получилось. Если на странице нет бокового скрола, то смотриться всё так как задумывалось, но вот если боковой скрол появляется, то возникает проблема.

    В подвале сайта, разными дивами зафиксировал два элемента: с лева и с права. Вот таким вот макаром:

    #kust {
    width:203px;
    height:391px;
    position: absolute;
    right:0px;
    background:url(images/foot_kust.png) right no-repeat;
    bottom:0px;
    }

    #fut {
    width:45%;
    bottom:10px;
    position:absolute;
    padding:0px;
    margin:0px;
    left:1%;
    text-align:left;
    font-family:"Times New Roman", Times, serif;
    font-size:14px;
    color:#CCCCCC;
    }

    Элементы стоят чётко по нижним углам, но если появляется боковой скрол, то элементы не смещаются, а остаются на месте т.е. основной текст уходит в низ, а эти два элимента нет.
    Я понимаю что полный ламер и скорец всего гдето допустил грубую ошибку, вот только где?

    ****************

    И второй момент:
    По центру на сайте будет два блока (дива). Один находится над другим. Назовём их верхний и нижний

    Так вот, при изменении размера браузера, происходит заплывание верхнего дива под нижний.

    Вопрос: Как сделать, что бы он не заплывал под нижний, а просто смещал нижний блок в низ?

    Спасибо за ответы, если таковые будут :)
     
  2. kirf

    kirf Создатель

    Регистр.:
    13 авг 2008
    Сообщения:
    23
    Симпатии:
    7
    Это же принципиальное различие таблиц и слоев. В таблице элементы "толкают" друг друга, а дивы - слои, они для того и придуманы, чтобы накладываться один на другой. Можно разве что посоветовать использовать index-z, чтобы виден всегда был тот слой, который важнее.

    Впрочем, еще можно попробовать таблицу поставить в див, и поиграться с ее шириной, чтобы избежать скроллинга и наездов.
     
  3. sulacco

    sulacco Постоялец

    Регистр.:
    17 мар 2008
    Сообщения:
    90
    Симпатии:
    45
    Слоями верстать намного сложнее чем таблицами, если есть желание разобраться - скачай с Нулледа 1-2 ТМ шаблона сделаных дивами и CSS - и разбирайся и препарируй, очень познавательно.

    Если в какомто месте совсем уж не понятно "почему так" то гуугл в помощь.
     
  4. Veanissepil

    Veanissepil Прохожие

    В том что блочная вёрстка принципиально отличается от табличной я в курсе.
    И про гугл то же слышал. но

    если нечего написать, то лучше промолчать ибо два поста, а по делу ничего.. лиш размытые советы.

    Практичесие рекомендации господа, практические. Шаблонов монстровских я уже насмотрелся, и гугл обчитался уже. но понимание пока не приходит ;)

    Скажите где я конкретно ошибся в приведённом мною коде, который в первом посте?
     
  5. dee_motard

    dee_motard

    Регистр.:
    26 июл 2008
    Сообщения:
    247
    Симпатии:
    76
    откажись от positon:absolute для начала

    дальше копай атрибут clear:both, думаю многое прояснится.
    Для первой задачи тебе просто нужно сделать нижний див с этим атрибутом, в котором уже размещать элементы которые должны уезжать вниз.
    Во втором - тоже самое.
     
  6. AgpeHaJIuH

    AgpeHaJIuH Постоялец

    Регистр.:
    7 июл 2008
    Сообщения:
    67
    Симпатии:
    19
    У тебя в одном контейнере размеры и отступы задаются в пикселях, а в другом-в процентах.
    Могу предположить что дизайн едет именно из-за этого, в css нужно определиться либо на проценты, либо на четкий размер в пикселях.
    Начет position:absolut поддерживаю
     
  7. Veanissepil

    Veanissepil Прохожие

    с позицией абсолют понял...

    но.. по первой проблеме.

    из-за позиции абсалют они никуда не уезжали потому что отступ был от окна браузера и див просто оставался на месте..

    теперь убрал позишн абсалют и див уехал в верх, хотя в html шаблоне див последний, как его к низу присобачить? :)
     
  8. Moones

    Moones Писатель

    Регистр.:
    21 фев 2008
    Сообщения:
    5
    Симпатии:
    0
    Да, clear:both, clear:all, clear:right и clear:left; поиграй именно с этими атрибутами. Также пробуй position:relative;

    А вообще скинь код на форум.
     
  9. Юрец

    Юрец

    Регистр.:
    20 авг 2006
    Сообщения:
    152
    Симпатии:
    21
    Вот тебе учебник
    http://www.cssplay.co.uk/

    Лучшее и искать нечего.
     
  10. Veanissepil

    Veanissepil Прохожие

    спасибо конечно, но уже читаю

    http://www.htmlbook.ru/css/

    только книги книгами, но нужно практическое решение... а точнее указание на ошибки...

    в принципе пробелму решил...
    и естественно наталкнулся на другую.. в дриме всё ок... а вот в браузерах не совсем...
    но это мелочи.. разберусь.. всем спасибо за участие
     
Статус темы:
Закрыта.