Как заключить текст в верхнюю рамку div-а?

Тема в разделе "Верстка", создана пользователем verfaa, 3 мар 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    371
    Симпатии:
    41
    Всем привет.
    Есть блок див. Каким образом можно заключить текст в верхнюю рамку этого div-а?
     
  2. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    Способа два:
    1. CSS
    - абсолютное позиционирование , относительного всего документа
    - абсолютное позиционирование , относительного родительского тега (это если див с текстом находится внутри этого дива)

    2. Через JS

    CSS:

    Здесь много текста
    <div style="position:absolute; top:0; left:0;> Здесь текст, который нужно с позиционировать относительно всего документа </div>

    ----------------------------------------------------------
    Здесь много текста
    <div style="position:relative;">
    Здесь много текста
    <div style="position:absolute; top:0; left:0;> Здесь текст, который нужно с позиционировать относительно родителя </div>
    <div>
     
  3. SuperMega_info

    SuperMega_info Создатель

    Регистр.:
    22 сен 2011
    Сообщения:
    43
    Симпатии:
    18
    То ли ТС спрашивал? "Верхняя рамка дива", что это? Не вполне понятен смысл сказанного. Если bork75 угадал с пониманием вопроса ТС, буду рад.
     
  4. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    371
    Симпатии:
    41
    Может я не совсем понятно выразился, но вариант bork75 у меня работает не так как хотелось бы.
    Вот смотрите:

    [​IMG]

    Можно заключить "TUT Zagolovok" в верхнюю рамку дива, как на картинке? И чтобы кроссбраузерно было. Всем спасибо за ответы ;)
     
  5. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    Если я правильно понял, нужно так сделать
    [​IMG]

    Вариант 1:
    HTML:
    
    <style type="text/css">
    .block {border:1px solid black; width:200px; height:100px; position:relative; margin-top:40px;}
    .block h1 {margin:-20px auto; width:154px; background-color :#fff;}
    </style>
     
    <div class="block">
    <h1>Заголовок</h1>
    </div>
     
    
    Вариант 2:
    HTML:
    
    <style type="text/css">
    .block {border:1px solid black; width:200px; height:100px; position:relative; margin-top:40px;}
    .block h1 {position:absolute; top:-40px; left:20px; width :154px; background-color :#fff;}
    </style>
     
    <div class="block">
    <h1>Заголовок</h1>
    </div>
     
    
    Можно так:

    [​IMG]
    HTML:
    
    <style type="text/css">
    .block {border:1px solid black; width:200px; height:100px; position:relative; margin-top:40px;
    border-radius: 10px;}
    .block h1 {position:absolute; top:-40px; left:20px; width :154px; background-color :#fff;}
    </style>
     
    <div class="block">
    <h1>Заголовок</h1>
    </div>
     
    
     
    verfaa нравится это.
  6. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    а еще можно заместо родительского слоя использовать fieldset, но это напрочь убивает семантику и всю логику :crazy:
    http://htmlbook.ru/html/fieldset
     
    verfaa нравится это.