Не могу растянуть DIV так как надо *(

Ganstaz · November 28, 2007

Попробую объяснить, есть такое меню:

кусок кода:

#styleone{
 position:absolute;
 top:80px;
 left:300px;
 display:inline;
 height:24px;
 width:100%;(500px - если вставить растягивающися контейнер после)
 overflow: hidden;
 font-size:11px;
 font-weight:bold;
 background:transparent url(images/bgOFF.gif) repeat-x top left;
 font-family:Arial,Verdana,Helvitica,sans-serif;
 z-index: 1;}

я покачто сделал (временно) вставил контейнер с фиксированным позиционированием

#toomenu {
 position:fixed;
 top:80px;
 left:800px;
 background:url(images/bgOFF.gif);
 height:24px;
 width:100%;}

, но может скажите другое решение?

Fu-tai · November 28, 2007

Решение чего ты хочешь?

Что-бы меню влево дотягивалось до логотипа или чтобы не появлялся горизонтальный скрол?

И где кусок хтмл-а где размечены шапка и меню, к чему эти стили?

D.S.Denton · November 28, 2007

а зафигом ему ширина 100%, когда она явно меньше? вот лишние 100% вправо и выползают

position:absolute; + width:100%; = как раз такая бяка. исправлять либо что-нибудь одно, либо оба

Ganstaz · November 28, 2007

чтобы не появлялся горизонтальный скрол?
?

именно это, к логотипу то понятно как сделать, но у мя там кривая, которую.долго рожал (жалко ломать)...

<style type="text/css">
@import url("cssstyle.css");
</style>
</head>
<body>
<div id="styleone">
<ul>
<li><a href="" title="О Нас">О Нас</a></li>
<li><a href="" title="Продукция">Продукция</a></li>
<li><a href="" title="Информация">Информация</a></li>
<li><a href="" title="Задать вопрос">Задать вопрос</a></li>
<li><a href="" title="Контакты">Контакты</a></li>
</ul>
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="top">
 <tr>
 <td width="100%" height="83" align="left" valign="top"><img src="images/verh2-1.jpg" width="100%" height="83" align="top"></td>
 <td width="400" height="83" align="left" valign="top"><img src="images/verh3-1.jpg" width="400" height="84"></td>
 </tr>
</table>

Ganstaz · November 28, 2007

а зафигом ему ширина 100%, когда она явно меньше? вот лишние 100% вправо и выползают
position:absolute; + width:100%; = как раз такая бяка. исправлять либо что-нибудь одно, либо оба

так правильно, я и хочу узнать как бяку эту убрать. Таблица то расягивается на сто проценктов так как надо, а контейнер на сто%+длина логотипа. Хочу чтоб на сто процентов, но минус длина логотипа.

Dimitry Wolotko · November 28, 2007

В Проблемы верстки.

Петр · November 29, 2007

за каким фигом вы указываете width = 100% и width = 400, вот вам и выходит.

И это... Уберите у тега width = 100%, так как "Иными словами, width="100%" означает, что рисунок будет растянут на всю ширину веб-страницы" и это написано тут http://www.htmlbook.ru/html/img.html.

Ganstaz · November 29, 2007

Да понятное дело, что такое 100%! И с таблицей у меня проблем нет! Проблемы с меню! Я ж писал в первом посте...Вылазит то не таблица, а меню - это на рисунке в первом посте видно даже.

D.S.Denton · November 29, 2007

попробуй засунуть див с меню в собственно ячейку.

затем обоим ячейкам задаешь нормально ширину - ибо сумма ширин ячеек > ширина таблицы.

ставишь к той ячейке с меню картинку фоном, а не через имж.

блоку меню задаешь позишн=релатив.

если не выйдет, кидай архив с заготовкой в обменник и линк в топик

Ganstaz · November 29, 2007

D.S.Denton:)все супер вышло....решение та простое было, спасибо, что тыкнул носом!

Теперь можно двигаться дальше. Вот код, вродь ниче лишнего?

<style type="text/css">
@import url("cssstyle.css");
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="top">
  <tr>
	<td width="100%" height="83" align="left" valign="top" background="images/verh2-1.jpg"></td>
	<td width="554" align="left" valign="top"><img src="images/verh3-1.jpg" width="400" height="84"></td>
  </tr>
  <tr>
	<td height="24" colspan="2" align="left" valign="top" background="images/bgOFF.gif">
	<div id="styleone">
	  <ul>
		<li><a href="" title="О Нас">О Нас</a></li>
		<li><a href="" title="Продукция">Продукция</a></li>
		<li><a href="" title="Информация">Информация</a></li>
		<li><a href="" title="Задать вопрос">Задать вопрос</a></li>
		<li><a href="" title="Контакты">Контакты</a></li>
	  </ul>
	</div></td>
  </tr>
</table>

кому интерестен результат:

Еще прошу совета, хочу сделать подробное меню слева. Как дальше верстать? Сделать меню контейнером наверное?

спасибо еще раз...

guvatara · November 30, 2007

Можно сразу вопрос? вроде если указать всей таблице 100% ширину и одной из ячеек фиксированую ширину, то другие просто пропорционально поделят оставшуюся ширину (при условии что им не указана ширина). Во всяком случая раньше когда я баловался табличной версткой это была основная фишка для позиционирования и растягивания таблиц на разные расширения.

<table width="100%" border="0" cellpadding="0" cellspacing="0" id="top">
  <tr>
	<td height="83" align="left" valign="top" background="images/verh2-1.jpg"> </td>
	<td width="554" align="left" valign="top"><img src="images/verh3-1.jpg" width="400" height="84"></td>
  </tr>
</table>

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

D.S.Denton · November 30, 2007

я б переделал так

<style type="text/css">
@import url("cssstyle.css");

/* следующие две строки сунуть в файл стилей */
#styleone {text-align:left; height:24px; vertical-align:top; background-image:url('images/bgOFF.gif');}
#styleone div {/* сюда перенести то что было для #styleone раньше */}
</style>
...
 <td id="styleone" colspan="2">
 <div>
 <ul>
 <li><a href="" title="О Нас">О Нас</a></li>
 <li><a href="" title="Продукция">Продукция</a></li>
 <li><a href="" title="Информация">Информация</a></li>
 <li><a href="" title="Задать вопрос">Задать вопрос</a></li>
 <li><a href="" title="Контакты">Контакты</a></li>
 </ul>
 </div>
 </td>

а вот это мне все равно очень не нравится

<table width="100%" border="0" cellpadding="0" cellspacing="0" id="top">
 <tr>
 <td width="100%" height="83" align="left" valign="top" background="images/verh2-1.jpg"></td>
 <td width="554" align="left" valign="top"><img src="images/verh3-1.jpg" width="400" height="84"></td>
 </tr>

коечно стаханов молодца был что больше 100% выдавал, но браузеры все-таки не он

Ganstaz · December 3, 2007

Спасибо guvatara и D.S.Denton...С переносами в стили понятно, сделал, а вот с альтернативу 100% ячейке не нашел...много вариантов испробовал, но никак...Получается вот такая штука и все тут...

HTML.....
<style type="text/css">
@import url("cssstyle.css");
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="top" name="top">
 <tr>
 <td height="70" align="left" valign="top" background="images/verh2-2.jpg"> </td>
 <td width="400" align="left" valign="top"><img src="images/verh3-2.jpg" width="400" height="77"></td>
 </tr>
 <tr>
 <td id="topmenu" colspan="2">
 <div >
 <ul>
 <li><a href="" title="О Нас">О Нас</a></li>
 <li><a href="" title="Продукция" class="style1">Продукция</a></li>
 <li><a href="" title="Информация">Информация</a></li>
 <li><a href="" title="Задать вопрос">Задать вопрос</a></li>
 <li><a href="" title="Контакты">Контакты</a></li>
 </ul>
 </div></td>
 </tr>
</table>...........

CSS........body {background: 
url(images/verh1.jpg)
no-repeat top left;
 margin-top: 0px;
 background-color: #FEFFED;}

#top {position: absolute;
 left:314px; top:0px;} 

#topmenu {text-align:left;height:24px; vertical-align:top; background-image:url('glossyback2.gif');}

#topmenu div{
 position:relative;
 top:0px;
 left:0px;
 display:block;
 height:24px;
 font-size:12px;
 font-weight:bold;.........

Как быть? 100%я ширина ячейки - это плохо очень?...если по другому никак...

guvatara · December 4, 2007

наезд таблицы на логотип допускается? Если да то просто делаете пустую ячейку на эту длину там, если нет то попытайтесь отказаться от позиционирования и привежите ваше меню к определеному месту в структуре сайта. Просто использование абсолютного позиционирвоания отрывает ваше меню от сайта и 100% берутся от размера вашего экрана а не от области где лежит меню. Можно так же отдельно пустить фон под менюшкойю, а сверху спозиционировать меню. Короче выходов много. На кройняк использование дивов и min-width c соответствующим хаком для IE.

Ganstaz · December 4, 2007

наезд таблицы на логотип допускается? Если да то просто делаете пустую ячейку на эту длину там...

Допускается я думаю, вечером попробую, опять же все оказалось просто....спасибо

...если нет то попытайтесь отказаться от позиционирования и привежите ваше меню к определеному месту в структуре сайта. Просто использование абсолютного позиционирвоания отрывает ваше меню от сайта и 100% берутся от размера вашего экрана а не от области где лежит меню.....

Мне нужно, чтобы верхняя желтая полоска (с картинками, у которых есть свой строгий размер) вместе с синей полоской (от меню, которая) растягивались на весь экран пользователя. Я понимаю, что можно просто привязать это все без растягивания, но мне как раз и нужно это все растянуть на весь экран...

... Можно так же отдельно пустить фон под менюшкойю, а сверху спозиционировать меню. Короче выходов много...

Уже подсказывал D.S.Denton...именно так и сделал. Таблица вылазит...)

...На кройняк использование дивов и min-width c соответствующим хаком для IE.

Пока что выбрал для себя единственным способом - добавить пустую ячейку над логотипом. А что такое "min-width c соответствующим хаком"?

Ganstaz · December 15, 2007

Теперь проблема с нижними дивами bottomlogo1 и 2. Задача такая, чтобы при уменьшении окна браузера до некоторого размера справа появлялась полоса прокрутки и дивы bottomlogo1 и 2 были в самом низу, а не на диве maindiv. В развернутом виде вроде все хорошо, но при уменьшении окна получается такая бяка. Как я понял из теории, что вроде так сделать нельзя (со свободными дивами), что мол нужно таким дивам точно указать, на сколько нужно опуститься...

Можно что-то с этим сделать?

...
<div id="maindiv">Content for id "main" Goes Here</div>
<div id="bottomlogo1"></div>
<div id="bottomlogo2"></div>
</body>
</html>

...
#bottomlogo1 {background: url(images/niz3-0.jpg); position: absolute; height:26px; width:100%; bottom:0px; left:0px; }
#bottomlogo2 {background: url(images/niz3-3.jpg); position: absolute; height:82px; width:149px; bottom:0px; right:0px;}

#maindiv {
 position:relative;
 left: 207px;
 top: 107px;
 width: 600px;
 height: 500px;
 border: 1px solid #DDDDDD;

}

Ganstaz · December 17, 2007

Помогите...или я пошел не тем путем?:|

Sign In

Не могу растянуть DIV так как надо *(

Question

Link to comment

Share on other sites

16 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

Join the conversation

Important Information