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

HTML+CSS+JavaScript

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

 

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

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

тема: Непонятная ситуация со слоями
 
 автор: Владимир55   (26.05.2017 в 21:27)   письмо автору
3.8 Кб
 
 

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

Насколько я понимаю, для этого нужно использовать слои. В итоге получаем такой код:
        <td style="text-align:center; margin:5px;">
    <div style="background-color:#F96; width:10%; z-index: 1; position:absolute;"> </div>
    <div style="text-align:center; z-index: 2; position:absolute;">75</div>
            </td>



Но почему-то число не центрируется и вся эта конструкция проваливается вниз (скриншот).

Инспектором кода ничего выяснить не удалось.

В чем тут может быть дело и как исправить?

  Ответить  
 
 автор: elenaki   (27.05.2017 в 12:58)   письмо автору
 
   для: Владимир55   (26.05.2017 в 21:27)
 


<table style="width: 500px; border: 1px solid #000">
<tr>
<td style="margin:5px;"> 
    <div style="width: 80%; float: left;">75</div> 
    <div style="background-color:#F96; width:10%; float: right; text-aligh: right">sloy 1</div> 
    
 </td>
</tr>
</table>

  Ответить  
 
 автор: Владимир55   (28.05.2017 в 00:13)   письмо автору
3.7 Кб
 
   для: elenaki   (27.05.2017 в 12:58)
 

Результат в скриншоте.

  Ответить  
 
 автор: KPETuH   (31.05.2017 в 14:51)   письмо автору
 
   для: Владимир55   (28.05.2017 в 00:13)
 

<table style="width: 500px; border: 1px solid #000">
<tr>
<td style="margin:5px; text-align: center;"> 
    75
    <div style="background-color:#F96; float: left">sloy 2</div> 
 </td>
</tr>
</table>

  Ответить  
 
 автор: Владимир55   (31.05.2017 в 20:52)   письмо автору
4.2 Кб
 
   для: KPETuH   (31.05.2017 в 14:51)
 

К сожалению, это не срабатывает должным образом (скриншот).

Сработал вот такой код:
<td style="text-align:center; margin:5px; position: relative;">
       <div style="background-color:#F96; width:16%; position: absolute;">&nbsp;</div>
       <div style="position: relative; text-align: center;">15</div>
</td>


Теперь проблема разрешилась, спасибо!

  Ответить  
 
 автор: KPETuH   (05.06.2017 в 10:50)   письмо автору
 
   для: Владимир55   (31.05.2017 в 20:52)
 

Не знаю как вы делали я вижу совсем другую картину

https://jsfiddle.net/exjqv7kc/

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

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