Обтекание в CSS

tonik_spb · December 2, 2008

Нароод такая проблема есть html документ:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.menu_2{
	border: 1px solid black;
	width:542px;
	  height:100%;
}


.menu_2 P{
	margin:0px;
	border: 1px solid black;
	font-size:12px;
	width:400px;
}

.menu_2polosa{
	border:1px solid black;
	width:13px;
	height:100%;
}
</style>
</head>

<body>

<div class="menu_2">
  <p>hello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hello</p>
	   <div class="menu_2polosa">

	</div>
</div>


</body>
</html>

как сделать так чтобы "menu_2polosa" была выровнина по правому краю "menu_2" и также имела высоту 100% тоесть такой же как и высота в "menu_2 P"

если выставить обтекание для "menu_2" и "menu_2 P" по левому краю а для "menu_2polosa" по правому получим как раз что нам нужно но увы height для последнего не возьмет height родителя.

и сразу же 2 вопрос =))

допустим у нас получилось сдлеать все то что написанно выше тогда "menu_2polosa" имеет такуэже высоту как и текст. Как теперь в "menu_2polosa" вставить 2 картинки одна на самом верху другая в самом низу, а по середине фон который как бы растягивает всю эту картинку =)

Заранее спасибо =)

Edited December 2, 2008 by tonik_spb

klierik · December 2, 2008

макет в студию, пожалуйста

Scrum · December 2, 2008

пока нету макета попробую на вскидку.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
.menu_2{
	border: 1px solid black;
	width:542px;
	position: relative;
	background: url() repeat-y right;  // repeat right image
}
.menu_2 P{
	border: 1px solid black;
	font-size:12px;
	width:400px;
	margin: 0;
}
.bg_top, .bg_bottom {
  position: absolute;
  right: 0;
  width: 80px;
  height: 10px;
  font-size: 0;
}
.bg_top {
  top: 0;
  background: url(); //top image
}
.bg_bottom {
  bottom: 0;
	background: url(); //bottom image
}


  /*]]>*/
  </style>
</head>

<body>
<div class="menu_2">
  <div class="bg_top"></div>
  <div class="bg_bottom"></div>
  <p>hello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hello</p>

</div>
</body>

</html>

tonik_spb · December 2, 2008

надеюсь достаточно понятно нарисовал =)

Edited December 2, 2008 by tonik_spb

tonik_spb · December 2, 2008

В общем нужно сделать то же самое как вот это :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<LINK href="./style.css" type=text/css rel=stylesheet>
</head>

<body>
<table width="450" border=1>
<tr><td width="300" valign="top">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </td>
	 <td valign="top" height="100%">
	 	<table border=1 height=100%>
	 	 <tr><td height="20">1</td></tr>
		   <tr><td height="100%">PITER</td></tr>
		 <tr><td height="20">2</td></tr>

	 	 </table>
	 </td>
</tr>
</table>
</body>
</html>

Кстати (PITER) будет растягиваться только в FireFox в остальных только если убрать <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

ну раз уж я сюда уже написал и такую штуку в таблицах очень интересно как реализовать Кроссбраузерность в таблицах со строгим стилем тоесть с <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Edited December 2, 2008 by tonik_spb

Scrum · December 2, 2008

чем мой вариант не вариант ?

tonik_spb · December 2, 2008

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

идея просто как 2 копейки рамка из 3 рисунков 1 (верхний угол) 2 (середина которая повторяется только по y) и 3 (опять уголок)

Scrum · December 2, 2008

внимательнее смотрите

.menu_2{
...
	background: url() repeat-y right;  // repeat right image
}

tonik_spb · December 2, 2008

внимательнее смотрите
.menu_2{
...
	background: url() repeat-y right;  // repeat right image
}

Извините за невнимательность =((

Интересно а если мы будем не картинку повторять по y а нужно будет определенным цветом залить

если использовать предыдущий html (в селектор menu_2 добавить background:COLOR) vs зальем все поле, а надо только поле по правой стороне + с высотой как menu_2 и шириной как у bg_top и bg_bottom

раз уж тут написал вопрос и про таблицы не могли бы вы и на него ответить. Просто интересно как это делается при DOCTYPE strict &

Edited December 2, 2008 by tonik_spb

tonik_spb · December 3, 2008

пока нету макета попробую на вскидку.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
.menu_2{
	border: 1px solid black;
	width:542px;
	position: relative;
	background: url() repeat-y right;  // repeat right image
}
.menu_2 P{
	border: 1px solid black;
	font-size:12px;
	width:400px;
	margin: 0;
}
.bg_top, .bg_bottom {
  position: absolute;
  right: 0;
  width: 80px;
  height: 10px;
  font-size: 0;
}
.bg_top {
  top: 0;
  background: url(); //top image
}
.bg_bottom {
  bottom: 0;
	background: url(); //bottom image
}


  /*]]>*/
  </style>
</head>

<body>
<div class="menu_2">
  <div class="bg_top"></div>
  <div class="bg_bottom"></div>
  <p>hello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hello</p>

</div>
</body>

</html>

Этот вариант конечно хорош но только если у нас минимально текста (высота menu2 min) а высота .bg_top, .bg_bottom например 30 px получится так что у нас картинка вылезает =(( конечно можно использовать для menu2 min-height; но он в IE 6 НЕ РАБОТАЕТ =((( А фикс что то мне не придумать =(( Помогите найти выход из такой ситуации.

Заранее спасибо

Edited December 3, 2008 by tonik_spb

tonik_spb · December 3, 2008

народ очень надо вся надежда на вас =((

Scrum · December 4, 2008

толком объясните чего надо, если толком не получается попробуйте на пальцах, на картинках итд.

SelenIT · December 4, 2008

Как вариант: повторяемый фон меню назначить body (background-position: 100% 0; background-repeat: repeat-y;), нижнюю картинку задать неповторяемым фоном для общего контейнера меню и контента (background-position: 100% 100%, а верхнюю картинку - для самого блока меню, тоже неповторяемым фоном.

Edited December 4, 2008 by SelenIT

tonik_spb · December 4, 2008

хм..... тоже вариант притом даже наверно лучше чем предудущий (просто не попробовал еще сверстать но идея хорошая)

Но она тоже не подойдет потому как: Допустим текста одна строчка "hello" следовательно вся высота будет = размеру шрифта в строчке "hello"

а верхняя и нижняя картинки дают в сумме уже 350 px тоесть надо чтобы начальная высота diva в любом случае была не меньше 350 px;

SelenIT · December 4, 2008

Для этого есть свойство min-height. А для непонимающего его IE6 — _height или с полдесятка других хаков на выбор...

tonik_spb · December 4, 2008

вот как раз и был вопрос про min-htight =))

Но допустим мы через хак (_height: 350px;) написали, и что в результате получили желаемые 350 px? но в результате потеряли резиновость divA =(( Если много текста будет вылезать за пределы div

rash · December 4, 2008

_height: 350px;

С подчеркиванием это поймет только IE, а в нем свойство height работает неправильно, и ведет себя так, как должно себя вести свойство min-height. То есть такая запись ничего не поломает и не разрушит.

tonik_spb · December 4, 2008

ооо =)) спасиб =))

Всем БОЛЬШОЕ спасибо за оказанную помощь =))

Edited December 4, 2008 by tonik_spb

Sign In

Обтекание в CSS

Question

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information