Про вложенные DIV и width

Northwood · January 28, 2008

Прошу помочь, вроде искал но что-то безупешно. Проблема такая:

есть 4 блока, один родитель, три остальных ? дети.

CSS:

.navnotselected {
width: auto;
height: 51px;
float:left;
}

.navtext {
 text-align: center;
 width: auto;
 margin-top: 5px;
 margin-left: 17px;
 margin-right: 17px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 color: #333333;
 text-decoration:none;
}

}
.navnotselectedbar1 {
width: 100%;
margin-top:1px;
height:2px;
background: #dcf1ff;

}

.navnotselectedbar2 {
width: 100%;
height:4px;
background: #dcf1ff;
width:100%;

}

и HTML

<div class="navnotselected">

<div class="navtext">Text</div>
<div class="navnotselectedbar1" ></div>
<div class="navnotselectedbar2" ></div>

</div>

Так вот. Нижние два блока navnotselectedbar1 и 2 в firefox и Opera нормально растягиваются по ширине родительского div (navnotselected). В IE ? Никак. Только при добавлении в них чего-то они растягиваются, а так видимо 0.

И самое главное, что если

.navnotselected {
width: auto;

auto сменить на абсолютное, например 100px, то сразу все работает..

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

klierik · January 28, 2008

начнем как обычно

какой доктайп?

Northwood · January 28, 2008

сорри забыл,

quot;-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Northwood · January 29, 2008

очень жду и надеюсь на ответ.. неудается найти решение, помогите плз

Vlad · January 30, 2008

В IE7 подозреваю вид будет другим, чем в IE6. Посмотри страницу в этих браузерах, если вид различается, то с подобным сталкивался и решение найдем.

Northwood · January 30, 2008

да, действительно, поставил два IE, в седьмом было еще терпимо, просто не тянулись два этих слоя внутренних, но родитель был по ширине текста. А вот в IE6 родительский слой вместе с содержимом полностю расползся до конца браузера вместе с детьми :/

nvgudz · February 3, 2008

Если поиграться с экспрешном, то можно достичь желаемого, но с моей точки зрения экспрешн - не панацея и имеет много недостатков, поэтому лучше им не злоупотреблять. В данном случае введен еще один элемент span, т.к. margin-left: 17px b margin-right: 17px у navtext при эскпрешне ширины "вешает" ИЕ .

Все одним кодом:

<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
<!--
.navnotselected {
float:left;
width: auto;
height: 51px;
}
.navtext {
font:14px Verdana, Arial, Helvetica, sans-serif;
color: #333333;
margin-top: 5px;
text-align: center;
width: expression(parseInt(this.parentNode.offsetWidth) + 'px');
}
.navtext span{
display: block;
margin: 0 17px;
}
.navnotselectedbar1 {
background: #dcf1ff;
font-size:1px;
height:expression(this.scrollHeight < 2? "2px" : "auto" );
min-height: 2px;
margin-top:1px;
overflow: hidden;
width: expression(parseInt(this.parentNode.offsetWidth) + 'px');
}

.navnotselectedbar2 {
background: #ff0000; /* изменен цвет для наглядности */
font-size:1px;
height:expression(this.scrollHeight < 4? "4px" : "auto" );
min-height: 4px;
overflow: hidden;
width: expression(parseInt(this.parentNode.offsetWidth) + 'px');
}
-->
</style>
</head>
<body>
<div class="navnotselected">
   <div class="navtext">
	  <span>Text</span>
   </div>
   <div class="navnotselectedbar1"></div>
   <div class="navnotselectedbar2"></div>
</div>

</body>
</html>

Есть более простые способы создания такого вида...

Northwood · February 4, 2008

спасибо, это был один из потенциальных вариантов, но хотелось решить проблему нативно, если можно так выразиться.

Есть более простые способы создания такого вида...

именно так я и поступил. Див, в котором написан текст, я окутал в еще два дива, которым присвоил нижние границы 2px одному и 4px другому. Все нормально во всех браузерах.

Sign In

Про вложенные DIV и width

Question

Northwood

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Northwood

Link to comment

Share on other sites

Northwood

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Northwood

Link to comment

Share on other sites

nvgudz

Link to comment

Share on other sites

Northwood

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information