CSS Position проблем

[otmetky]

Здравейте.Имам проблем с позиционирането на Div-ове .Значи като височина и ширина няма проблем както и за маргин и падинг.Проблема е там ,че като затворя един DIV в друг и му дам position:absolute той не се позиционира спрямо него а по кординатата X/Y .И другото нещо е защо текста в даден див излиза от него ???На снимката ще Ви стане по-ясно.

http://host7.hit.bg/65.PNG

 

[emagi]

Какво означава:

postition:absolute;

Ако един DIV е вложен , и ако е "самостоятелен" според теб ще има ли разлика?!?!?Еми естествено!!!В единия случай,когато имаш следния случай:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="border:solid 1px black; width:500px; margin:0 auto; height:600px;">
<div style="position:absolute; width:300px; height:400px; border:solid 1px red; margin-left:50px; margin-top:50px;">
</div>
</div>
</body>
</html>

Така, сега чрез margin-top и margin-left се подравнява спрямо горната и и лявата страна на "главния" div ,в който ВТОРИЯ e вложен.
АКО имаш следния случай:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="border:solid 1px black; width:500px; margin:0 auto; height:600px;">
</div>
<div style="position:absolute; width:300px; height:400px; border:solid 1px red; margin-left:50px; margin-top:50px;">
</div>
</body>
</html>

Там нещата стоят различно.Тук вече margin-left и margin-top подравняват DIV спрямо горната и лявата страна на body-то.
Относно текста, ако пишеш както си му е реда, ползваш интеревал между думите, няма да е така.Сега пишеш нещо от рода:

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

,което е "нереално".Такаво животно нема.Пробвай да напишеш нещо от рода:

asjkgh alkj askjg vs;kjlg vsdfkl;jg vsdfk;jg vsdkj vsdlkgj vskhg vslkgj svdf

Случаят ще е съвсем различен.Но по принцип за това има едно свойство на CSS,което се нарича:

overflow

То се ползваш именно за това.КОгато съдържанието на DIV "препълни" самия DIV,то това което излиза извън него, ако ползваш:

overflow:hidden;

то ще бъде скрито.Потърси повече инфо в Google за overflow в нета!
Виж разликата:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="border:solid 1px black; width:500px; margin:0 auto; height:600px;">
<div style="position:absolute; width:300px; height:400px; border:solid 1px red; margin-left:50px; margin-top:50px; overflow:hidden">сцфффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффф
</div>
</div>
</body>
</html>

И тук без overflow:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="border:solid 1px black; width:500px; margin:0 auto; height:600px;">
<div style="position:absolute; width:300px; height:400px; border:solid 1px red; margin-left:50px; margin-top:50px;">сцфффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффффф
</div>
</div>
</body>
</html>

Много обяснения стахана май,а.Дано си ме разбрал поне малко!

 

[otmetky]

Благодаря ти,това за текста стана точно така както си обяснил,но за позиционирането пак не става .Като поставя единия ДИВ в Другия и тоя втория пак се позиционора спрямо X Y а не в този в които е затворен,което си е странно. (нямах интернет за това закъснях толко с отговора)

 

[otmetky]

Не Ви препоръчвам да позиционирате един DIV спрямо друг.Това противоречи на правилата на W3.org и при Валидиране на страницата дава грешка.