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

[verfaa]

Всем привет.
Есть блок див. Каким образом можно заключить текст в верхнюю рамку этого div-а?

 

[bork75]

Способа два:
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>

 

[SuperMega_info]

То ли ТС спрашивал? "Верхняя рамка дива", что это? Не вполне понятен смысл сказанного. Если bork75 угадал с пониманием вопроса ТС, буду рад.

 

[verfaa]

Может я не совсем понятно выразился, но вариант bork75 у меня работает не так как хотелось бы.
Вот смотрите:

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

 

[bork75]

Если я правильно понял, нужно так сделать

Вариант 1:

<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:

<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>

Можно так:

<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>

 

[mdss]

а еще можно заместо родительского слоя использовать fieldset, но это напрочь убивает семантику и всю логику
Для просмотра ссылки Войди или Зарегистрируйся