Не получается блочная верстка...

Тема в разделе "Веб-разработка", создана пользователем Swetlana, 4 янв 2013.

Статус темы:
Закрыта.
  1. Swetlana

    Swetlana На форуме с: 28 дек 2012 Сообщения: 38

    Подскажите пожалуйста, в чем ошибка: у меня почему-то левая колонка ушла вправо, а правая под ней... И как правильно прописать, чтобы основной контейнер находился как рамочка в центре, как у меня на сайте dwoiniashki.ru? У меня контейнер расползается на всю страницу... Понимаю, что для знающих все это - детские вопросы, но я никак не могу разобраться.. Вот мой Css:
    И страничка в html:
  2. Ami

    Ami Модератор На форуме с: 28 ноя 2011 Сообщения: 259 Команда форума

    Swetlana, так?
    HTML
    CSS

    В css пробел был # container.
    Меньше блоки делайте, например, шапка, тело, футер, потом эти блоки ещё на более мелкие разбиваются, если надо, а то прям весь сайт :a1: И если меню картинками делаете, то лучше не через <img> изображения вставлять, а через background.
  3. Swetlana

    Swetlana На форуме с: 28 дек 2012 Сообщения: 38

    Что-то все равно не идет. Если построить css так, как подсказываете, а html оставить моим, то получается что-то похожее, но пропадает задний фон и куда-то вправо съезжают картинки (не понимаю, почему), а если и css и html поставить, как подсказываете, то совсем что-то не то... - все съезжает влево...

    Попробую еще раз поменять - разбить по блокам шапка-тело-футер. Посмотрим, что получится:a13:
  4. Ami

    Ami Модератор На форуме с: 28 ноя 2011 Сообщения: 259 Команда форума

    Swetlana, сори моя ошибка. Поменяйте название файла css, я указал sty.css, а у вас style1.css (подправил в коде html)
  5. Swetlana

    Swetlana На форуме с: 28 дек 2012 Сообщения: 38

    тогда получается вот так: dwoiniashki.ru/experim.html - задний фон куда-то исчезает. Ширину контейнера немного подправила (хочу, чтобы дизайн остался прежним).

    Плюс не могу понять - ширина для шапки, навигации и контейнера задала одинаковую, но шапка с навигацией как-то плавает. Может их имеет смысл объединить в один блок?
  6. leshii

    leshii Модератор На форуме с: 4 сен 2011 Сообщения: 2.539 Команда форума

    В css исправьте
    background-image:url('skazka.jpg');
    на
    background-image:url('images/skazka.jpg');
    1 человеку нравится это.
  7. Ami

    Ami Модератор На форуме с: 28 ноя 2011 Сообщения: 259 Команда форума

    А вы разве не так хотели? Три контейнера, все же норм

    Просто укажите padding:0px;
    1 человеку нравится это.
  8. Swetlana

    Swetlana На форуме с: 28 дек 2012 Сообщения: 38

    три контейнера - да, только фон сзади пропал, а про padding что-то и в самом деле не учла:a23:

    ---------- Сообщение добавлено в 19:10 ---------- Предыдущее сообщение размещено в 18:02 ----------

    дошло....:a6: в css путь к картинке не исправила... доработаю страничку - приду хвалиться (или снова за помощью:a23:)

    ---------- Сообщение добавлено 08.01.2013 в 15:53 ---------- Предыдущее сообщение размещено 05.01.2013 в 19:10 ----------

    в общем, получилось как-то вот так: dwoiniashki.ru/experim.html

    ---------- Сообщение добавлено в 17:19 ---------- Предыдущее сообщение размещено в 15:53 ----------

    Вот только при введении текста в средний блок оказывается, что блоки выстраиваются лесенкой... почему?:a12:
  9. Ami

    Ami Модератор На форуме с: 28 ноя 2011 Сообщения: 259 Команда форума

    Swetlana, задайте ширину контейнера и исправьте margin (слишком большой отступ)
  10. Swetlana

    Swetlana На форуме с: 28 дек 2012 Сообщения: 38

    Боюсь, дело тут не в ширине контейнера и отступе... Даже при применении чистого (без моих доделок) вашего примера css и html вставляешь текст и получаешь лесенку... И чего я уже только не пробовала: и float убирала. и ширину меняла - не помогает. Места справа предостаточно для того чтобы влез блок шириной 220пикс, но он не входит. А ширина у меня вроде как везде прописана:
  11. Ami

    Ami Модератор На форуме с: 28 ноя 2011 Сообщения: 259 Команда форума

    Swetlana, ну вы указали только размер контейнера, а отступ по бокам остался 250px. Блок просто не влезает, поэтому и смещается вниз.
    Вот так сделайте и все будет нормально.
    1 человеку нравится это.
  12. Swetlana

    Swetlana На форуме с: 28 дек 2012 Сообщения: 38

    оставляю html тот же, css меняю ширину и отступы:
    Результат - лесенка: dwoiniashki.ru/experim.html

    ---------- Сообщение добавлено в 11:46 ---------- Предыдущее сообщение размещено в 11:41 ----------

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

    ---------- Сообщение добавлено в 12:41 ---------- Предыдущее сообщение размещено в 11:46 ----------

    Я у #content не прописала float... понятно. Теперь все получилось, спасибо. Честно говоря, у меня почему-то после создания своей первой странички при помощи блочной верстки осталось неприятное ощущение, что вся эта "конструкция" не очень стабильная... Но это, наверное, после табличной верстки так кажется? Там-то все понятно и просто: какую ширину проставил, такая и будет, сколько столбцов и строк нарисовал, так и останется. Хотя... вспомнишь первую страничку с табличной версткой - тоже косяки первое время всплывали:a23:

    Ну теперь можно заняться переделыванием сайта и его внутренней оптимизацией, а за изучение php и браться страшновато теперь:a18:
  13. Ami

    Ami Модератор На форуме с: 28 ноя 2011 Сообщения: 259 Команда форума

    Swetlana, у вас был изначально верный css, к которому нужно было добавить width:550px; margin:5px; не нужно было убирать float. Сейчас в css дублируется #content и #right, а также #left, #footer, добавлять нужно было вместо старого или просто в старый код вписать нужные строки.

    Исправленный css
  14. Swetlana

    Swetlana На форуме с: 28 дек 2012 Сообщения: 38

    я столько раз уже переделывала css, что давно запуталась, который из них был изначальным:a23: Поэтому при переделывании ориентируюсь на необходимые изменения, порой упуская свои сделанные во время переписывания стиля ошибки. Вот и получилось: одно исправляю, второе тут же порчу :a9:

    ---------- Сообщение добавлено в 13:04 ---------- Предыдущее сообщение размещено в 13:01 ----------

    тем более что чего только я ни перепробовала, чтобы выровнять блоки: изменение ширины, убирала и возвращала float, пробовала уже прописать position для блоков и пр:a18:

    ---------- Сообщение добавлено в 13:05 ---------- Предыдущее сообщение размещено в 13:04 ----------

    в общем, перегрузка мозга изобилием вариантов решения проблемы, а все оказалось просто (как всегда)
Статус темы:
Закрыта.