Непонятки с div ами.

Тема в разделе "Веб-дизайн", создана пользователем sanj, 23 фев 2009.

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

    sanj Постоялец

    Регистр.:
    5 июл 2008
    Сообщения:
    77
    Симпатии:
    34
    Извиняюсь за частичное повторение темы, но если не было причин - повторять бы не стал.
    У меня есть дизайн и мне надо сделать сторой столбез - а ничего толком не получается. Вот собственно сама проблема. Ниже прилагаю файлы

    http://super-promouter.ru/files/blackberry.rar

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

    pslava

    Регистр.:
    16 май 2007
    Сообщения:
    618
    Симпатии:
    122
    Впиши в таблицу с 2 столбцами, конечно получится смешанная верстка, но так быстрее:)
     
  3. sanj

    sanj Постоялец

    Регистр.:
    5 июл 2008
    Сообщения:
    77
    Симпатии:
    34
    Так я уже пробовал и такой вариант - не получается. Тут только надо как то через div верстать.
    Может еще есть какие варианты?
     
  4. JJ bOUN

    JJ bOUN Создатель

    Регистр.:
    24 янв 2009
    Сообщения:
    34
    Симпатии:
    5
    на сколько я понял в этом текстовом поле, которое ты хочешь добавить ширина и высота фиксирована? ли она будет меняться? если фиксированно, то проще всего решить с помощью абсолютного позиционирования.
    HTML:
    <div id="latest-post" class="post" style="position: relative">
    <div style="position:absolute; left: 780px; top:0; width:190px; height: 100px;">Text</div>
    <p class="byline">
    .
    .
    .
    также можно сделать с помощью плавающих элементов, основной колонке назначь float: left; правой float: right; ну и конечно же ширину для каждой колонки.
    кстати, почему ты к каждому элементу применяешь margin: 0 auto;? не проще ли (и чище для css) сделать один элемент который будет равнятся по середине:
    HTML:
    
    #wrapper {
    margin: 0 auto;
    width: ***px;
    }
    
    <div id="wrapper">
    содержимое
    </div>
     
    sanj нравится это.
  5. dralex

    dralex Постоялец

    Регистр.:
    13 июн 2008
    Сообщения:
    77
    Симпатии:
    18
    Вот мой вариант решения, сайт не резиновый и поэтому решение будет только статическим, в моем примере ширина поля для текста = 180 пикселей !
    Как реализовать:
    1. Найти <div id="latest-post" class="post">
    2. Ниже добавить
    <div style="float:right; margin-right:-200px; width:180px; font-size:10px;">
    текст
    </div>
    --------
    сильно не пинайте, я не мастер
     
  6. sanj

    sanj Постоялец

    Регистр.:
    5 июл 2008
    Сообщения:
    77
    Симпатии:
    34
    Хороший вариант. Мне понравился. А как в этом блоке текст выровнять и по ширине и по высоте. Я смог только но ширине - а вот по высоте никак не получается - как тут выровнять по ширине и высоте?
     
  7. JJ bOUN

    JJ bOUN Создатель

    Регистр.:
    24 янв 2009
    Сообщения:
    34
    Симпатии:
    5
    ну вообще, чтобы выровнять по вертикали текст в блочном элементе надо написать такой вот селектор:
    Код:
    div.right {
        display: table-cell;
        vertical-align: middle;
    }
    первое свойство задает поведение элемента, как ячейки таблицы, второе само выравнивание текста по вертикали. Только этот метод не работает в IE<=7. Там надо прибегать к хакам. В общем поищи в гугле по словам "вертикальное выравнивание в div"
    Для выравнивания по горизонтали text-align:center;
     
    sanj нравится это.
  8. sanj

    sanj Постоялец

    Регистр.:
    5 июл 2008
    Сообщения:
    77
    Симпатии:
    34
    Спасибо, что помогли - дело продвинулось отлично. Последний вопрос:
    по вашим советам я сделал блок

    HTML:
    
    <div id="latest-post" class="post" style="position: relative">
    <div style="position:absolute; left: 779px; top:36px; width:190px; height: 360px; background-color: #BBB082;">
      <p>тут всяко разно</p>
      </div>
    
    задача:
    как сделать так, что бы когда я в этом блоке пишу текст при приближении текста к границам блока, текст перемещался на следующую строку (а то у меня сплошной строкой фигачит).
    Заранее благодарю.
     
  9. inFamous

    inFamous Создатель

    Регистр.:
    4 фев 2009
    Сообщения:
    23
    Симпатии:
    4
    не должно такого быть, разве только если элементы текста не разделены пробелами, может быть ты когда проверял просто ввел качу символов неразделенных пробелами?
     
    sanj нравится это.
  10. JJ bOUN

    JJ bOUN Создатель

    Регистр.:
    24 янв 2009
    Сообщения:
    34
    Симпатии:
    5
    вообще-то да, не должно такое получатся, если там нормальный текст, а не одно неразрывное слово.
    или ты имеешь в виду, что текст примыкает к границам блока? в этом случае внутренние отступы ставь.
    ну а если текст вылазит за границы блока то ставь overflow:hidden; для блока с явно заданной шириной.
    опиши подробней проблему, а то непонятно как-то.
     
    sanj нравится это.
Статус темы:
Закрыта.