Форум Сайтостроение Веб-строительство

Как растянуть блок в зависимости от контента?

12
R
На сайте с 03.08.2012
Offline
131
revered
866

Структура html примерно следующая:

<div id="block" style="width:1080px;">

<div id="block2" style="margin:0 auto;">

<div id="block3">горизонтальный текст...</div>

</div>

</div>

Хочу сделать чтобы текст в block3 был по середине страницы... но получается block2 принимает ширину block1 (1080px) и в итоге текст остается слева... Да можно для block2 прописать допустим width:200px; и будет по центру, но я не могу так пописывать, ведь я не знаю ширину контента в block3, там контент динамический...

Подскажите, как сделать?

R
На сайте с 18.12.2009
Offline
92
rerighter
#1 

#block3 {
    text-align: center;
}

Может Вам нужно что-то другое, но из того, что Вы написали, решение такое.

R
На сайте с 03.08.2012
Offline
131
revered
#2

Не не прокатит, сейчас чтобы вы поняли что мне нужно покажу точный html код с сайта, и скрин... 

 <div id="content">

               <div class="navigation">

                	<div class="div_previous"><a href="#" class="previous"></a></div>

                    <div class="nav_center">

                        <a href="#">1</a>

                        <a href="#">2</a>

                        <a href="#" class="activ">3</a>

                        <a href="#">4</a>

                        <a href="#">5</a>

                        <a href="#">6</a>

                        <a href="#">7</a>

                        <a href="#" class="border_no">8</a>

                    </div>

                    <div class="div_next"><a href="#" class="next"></a></div>

                </div>

</div>

Мне нужно чтобы навигация было по центру блока сонтент...

png 123.png
Jor
На сайте с 23.06.2012
Offline
42
Jor
#3

Возможно, такой вариант вас устроит:


#navigation {
max-width: 650px;
margin: 0 auto;
}
R
На сайте с 18.12.2009
Offline
92
rerighter
#4

Может лучше min-width? Можно даже min-width: 1px;

И тогда все по центру будет, а блок просто растянется в зависимости от содержания.

Зачем ему 650px, если в блоке с "пагинацией" будет < 1 2 > и все.

...

Хотя может Вы и правы.

Небольшой вопрос по html-верстке. Тянущиеся элементы дизайна Ширина колонки не меньше
R
На сайте с 03.08.2012
Offline
131
revered
#5

Не помогло:(

Вот ccs код целиком:

.navigation {
margin:0 auto;
margin-top:40px;
height:42px;
min-width:1px;
}
.div_previous {
background:url(images/bg_navigation_1.png) no-repeat;
width:40px;
height:36px;
float:left;
}
.div_next {
background:url(images/bg_navigation_3.png) no-repeat;
width:40px;
height:36px;
float:left;
}
.navigation a {
display:inline-block;
font-size:14px;
color:#f45100;
border-right:1px solid #cfc8bc;
float: left;
padding: 6px 8px;
margin-top: 6px;
text-decoration:none;
}
.navigation a:hover, .navigation a.activ {
background-color:#aac32e;
}
.navigation a.previous {
width:35px;
height:28px;
background:url(images/navigation_1.png) no-repeat center;
margin: 6.5px 0 0 6px;
padding: 0;
}
.navigation a.previous:hover {
background:url(images/navigation_1_hover.png) no-repeat center;
}
.navigation a.next {
width:35px;
height:28px;
background:url(images/navigation_2.png) no-repeat center;
border:none;
float:right;
padding:0;
margin: 6.5px 6px 0px 0px;
border-left:1px solid #cfc8bc;
}
.navigation a.next:hover {
background:url(images/navigation_2_hover.png) no-repeat center;
}
.nav_center {
float: left;
background:url(images/bg_navigation_2.png) repeat-x;
}
Jor
На сайте с 23.06.2012
Offline
42
Jor
#6
rerighter:
Может лучше min-width? Можно даже min-width: 1px;
И тогда все по центру будет, а блок просто растянется в зависимости от содержания.
Зачем ему 650px, если в блоке с "пагинацией" будет < 1 2 > и все.

Указав один лишь min-width (без width/max-width), блок будет тянуться на ширину родительского, в этом случае margin не поможет.

R
На сайте с 03.08.2012
Offline
131
revered
#7

пробовал указывать и min и max нечего не получается... если указать max-width:500px; допустим, то просто блок становиться 500 и в итоге не по центру выравнивается...

Jor
На сайте с 23.06.2012
Offline
42
Jor
#8
revered:
пробовал указывать и min и max нечего не получается... если указать max-width:500px; допустим, то просто блок становиться 500 и в итоге не по центру выравнивается...

Сайт посмотреть нельзя?

Может у Вас для div#content указан float: left ?

R
На сайте с 03.08.2012
Offline
131
revered
#9

сайт не получиться посмотреть, на данвере:( Да для content указан float:left;

Jor
На сайте с 23.06.2012
Offline
42
Jor
#10
revered:
сайт не получиться посмотреть, на данвере:( Да для content указан float:left;
div#content {
width: 100%;
float: left;
}

div.navigation {
max-width: 650px;
margin: 0 auto;
}

Как-то так, измените/добавьте.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий