Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Выравнивание по вертикали если не указана высота
 
 автор: TetRiska   (15.04.2011 в 00:55)   письмо автору
31.1 Кб
 
 

Всем привет. Не могу придумать как сделать, чтобы цены и корзина становились по вертикали в центре 3-го блока.
1 - макет резина - 3-х блочный, фикс/тянучка/фикс
3 - первых 2 блока заполнены неплохо
Как мне относительно тех 2-х блоков их высот выставить в третьем блоке нужные элементы по вертикали? Прилагаю исходник. Прилагаю картинку как есть и как надо, чтобы было.
Кроссбраузерность ИЕ6-8, Опера с 9.25, ФФ и Хром.
П.С. Фикс. высоту не предлагать.
.box_100proc{
      width:100%;
    display:inline-block;
}
.box_pp_block {
    border-left: 341px solid transparent;
    border-right: 140px solid transparent;
    height: 1%;
}
* html .box_pp_block {
    border-color:white;
    filter: chroma(color=white);
}
.box_pp_block:after{
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
.box_pp_content {
    width: 100%;
    float: left;
    overflow: hidden;
    margin-right: -100%;
    position: relative;
}
.box_pp_content_desc{
    text-align:justify;
    padding:0 5px;
}
.left_pp_content {
    float: left;
    width: 341px;
    margin-left: -341px;
    position: relative;
}
.left_pp_content img{
    float:left;
}
.box_pp_content_info{
    float:left;
    margin-left:10px;
    width:231px;
}
.box_block{
    margin-bottom:10px;
    display:inline-block;
}
.box_block_end{
    display:inline-block;
}
.valume_name{
    width:126px;
    float:left;
}
.valume_name span{
    font-weight:bold;
    color:#777777;
    white-space:nowrap;
}
.valume{
    width:100px;
    float:left;
    margin-left:5px;
}
.right_pp_content {
    float: right;
    margin-right: -140px;
    width: 140px;
    position: relative;    
}
.box_action_price{
    width:106px; 
    text-align:right; 
    float:left;
}
.action_price{
    color:#993300; 
    font-weight:bold; 
    font-size:13px;
    margin-right:5px;
}
.basket{
    background:url(/images/addtobasket.gif) no-repeat; 
    width:32px; 
    height:32px; 
    cursor:pointer; 
    float:right;
}

<div class="box_100proc">
        <div class="box_pp_block">
            <div class="box_pp_content">
                <div class="box_pp_content_desc">text text text text text text text text text text text text text text</div>        
            </div>
            <div class="left_pp_content">
                <img width="100" height="100" border="0" alt="" src="/images/no_photo_100.gif" /> 
                <div class="box_pp_content_info">
                    <div class="box_block">
                        <div class="valume_name"><span>Год выпуска:</span></div>
                        <div class="valume">2002</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Пробег, тыс.км.:</span></div>
                        <div class="valume">100 000</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Моточасы, тыс.час.:</span></div>
                        <div class="valume">450 000</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Налёт, тыс.час.:</span></div>
                        <div class="valume">500 000</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Двигатель, см.куб.:</span></div>
                        <div class="valume">142</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Мощность, л.с.:</span></div>
                        <div class="valume">106</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Вид топлива:</span></div>
                        <div class="valume">Бензин</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Макс. скорость, км/ч:</span></div>
                        <div class="valume">250</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Расход, л./100км.:</span></div>
                        <div class="valume">20</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Объём бака, л.:</span></div>
                        <div class="valume">100</div>
                    </div>
                    <div class="box_block_end">
                        <div class="valume_name"><span>Дата обновления:</span></div>
                        <div class="valume">14.04.11 17:44</div>
                    </div>
                </div>
            </div>
            <div class="right_pp_content">
                <div class="box_action_price">
                    <div class="action_price">1 000 000  грн</div>
                    <div class="action_price">5 000  €</div>
                </div>
                <div title="Добавить в корзину" class="basket"></div>
            </div>
        </div>
    </div>

  Ответить  
 
 автор: dimon   (15.04.2011 в 09:34)   письмо автору
 
   для: TetRiska   (15.04.2011 в 00:55)
 

к сожалению, я не спец в верстке. задача интересная, но она на блоках, и ещё, какие-то непонятные для меня техники с
    border-left: 341px solid transparent; 
    border-right: 140px solid transparent; 

почему вы не хотите попробовать display:table-cell?а потом vertical-align:middle? но для такого типа отображения нужно будет избавляться от некоторых структур, вроде вышеуказанных. Они же у Вас, наверняка, как-то привязаны к общей структуре?

  Ответить  
 
 автор: TetRiska   (15.04.2011 в 10:46)   письмо автору
 
   для: dimon   (15.04.2011 в 09:34)
 

Это один из методов 3-х колоночной резиновой верстки дивами, который кроссбраузерный.
display:table-cell и vertical-align:middle сработают в том случае если есть фикс высота и не сработают для ИЕ6-7 без спец. хака, которому тоже нужна фикс высота

  Ответить  
 
 автор: dimon   (15.04.2011 в 11:42)   письмо автору
 
   для: TetRiska   (15.04.2011 в 10:46)
 

а zoom:1 не сработает? ну, так называемая hasLayout?

  Ответить  
 
 автор: TetRiska   (15.04.2011 в 11:51)   письмо автору
 
   для: dimon   (15.04.2011 в 11:42)
 

а что мы добьемся собственно им?

  Ответить  
 
 автор: dimon   (15.04.2011 в 13:09)   письмо автору
 
   для: TetRiska   (15.04.2011 в 00:55)
 

в общем, пока не знаю, что это у меня получилось, но что-то получилось. попробую просто выложить измененные стили:
.box_100proc{ 
    width:100%; 
    display:inline-block;
    position:relative;

.right_pp_content { 
    position:absolute; 
    top:50%;
    right:140px;
    margin-top:-20px; /*предполагается, что высота изображения все-таки известна: нужно установить значение-ImgHieght/2, так как блок будет имет, вероятно, высоту изображения. без этого, весь блок будет сдвинут немного ниже центра */
    margin-right: -140px; 
    width: 140px; 

скорее всего, в общем дизайне всё-равно не сработает.

  Ответить  
 
 автор: TetRiska   (15.04.2011 в 17:01)   письмо автору
 
   для: dimon   (15.04.2011 в 13:09)
 

решил уже и таблицами и дивами :)

  Ответить  
 
 автор: dimon   (15.04.2011 в 17:14)   письмо автору
 
   для: TetRiska   (15.04.2011 в 17:01)
 

а дивами как? поделитесь :) я ж тоже участвовал :)

  Ответить  
 
 автор: TetRiska   (15.04.2011 в 20:08)   письмо автору
 
   для: dimon   (15.04.2011 в 17:14)
 

<style type='text/css'>
.box_100proc{
      width:100%;
    display:inline-block;
}
.box_pp_block {
    border-left: 341px solid transparent;
    border-right: 140px solid transparent;
    position: relative;
    border 1px solid red;
}
* html .box_pp_block {
    border-color:white;
    filter: chroma(color=white);
}
.box_pp_block:after{
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
.box_pp_content {
    width: 100%;
    float: left;
    overflow: hidden;
    margin-right: -100%;
    position: relative;
}
.box_pp_content_desc{
    text-align:justify;
    padding:0 5px;
}
.left_pp_content {
    float: left;
    width: 341px;
    margin-left: -341px;
    position: relative;
}
.left_pp_content img{
    float:left;
}
.box_pp_content_info{
    float:left;
    margin-left:10px;
    width:231px;
        position: relative;
}
.box_block{
    margin-bottom:10px;
    display:inline-block;
}
.box_block_end{
    display:inline-block;
}
.valume_name{
    width:126px;
    float:left;
}
.valume_name span{
    font-weight:bold;
    color:#777777;
    white-space:nowrap;
}
.valume{
    width:100px;
    float:left;
    margin-left:5px;
}
.right_pp_content {
    width: 140px;
    top: 49%;
    right: 10px;
    margin-right: -140px;
    position: absolute;
}
.box_action_price{
    width:106px; 
    text-align:right; 
    float:left;
    height: 100%;
    
}
.action_price{
    color:#993300; 
    font-weight:bold; 
    font-size:13px;
    margin-right:5px;
}
.basket{
    background:url(/images/addtobasket.gif) no-repeat; 
    width:32px; 
    height:32px; 
    cursor:pointer; 
    float:right;
}
.clearfix:after {
    clear:both;
    content:'.';
    display:block;
    visibility:hidden;
    height:0;
}
.clearfix {
    display:block;
}

* html .clearfix {
    height:1%;
}
*+html .clearfix {
    display:inline-block;
}
</style>

<div class="box_100proc">
    <div style="height: 1%;"> 
        <div class="box_pp_block clearfix">
            <div class="box_pp_content">
                <div class="box_pp_content_desc">text text text text text text text text text text text text text text</div>        
            </div>
            <div class="left_pp_content">
                <img width="100" height="100" border="0" alt="" src="/images/no_photo_100.gif" /> 
                <div class="box_pp_content_info">
                    <div class="box_block">
                        <div class="valume_name"><span>Год выпуска:</span></div>
                        <div class="valume">2002</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Пробег, тыс.км.:</span></div>
                        <div class="valume">100 000</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Моточасы, тыс.час.:</span></div>
                        <div class="valume">450 000</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Налёт, тыс.час.:</span></div>
                        <div class="valume">500 000</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Двигатель, см.куб.:</span></div>
                        <div class="valume">142</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Мощность, л.с.:</span></div>
                        <div class="valume">106</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Вид топлива:</span></div>
                        <div class="valume">Бензин</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Макс. скорость, км/ч:</span></div>
                        <div class="valume">250</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Расход, л./100км.:</span></div>
                        <div class="valume">20</div>
                    </div>
                    <div class="box_block">
                        <div class="valume_name"><span>Объём бака, л.:</span></div>
                        <div class="valume">100</div>
                    </div>
                    <div class="box_block_end">
                        <div class="valume_name"><span>Дата обновления:</span></div>
                        <div class="valume">14.04.11 17:44</div>
                    </div>
                </div>
            </div>
            <div class="right_pp_content">
                <div class="box_action_price">
                    <div class="action_price">1 000 000  грн</div>
                    <div class="action_price">5 000  €</div>
                </div>
                <div title="Добавить в корзину" class="basket"></div>
            </div>
        </div>
    </div>
 </div> 

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования