Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: фон ячеек таблицы [2]

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (2): « 1 [2]   

> Описание: как сделать это эффективно
Поиск в теме | Версия для печати
Bio man
Отправлено: 22 Июля, 2012 - 21:09:50
Post Id


Постоянный участник


Покинул форум
Сообщений всего: 2751
Дата рег-ции: Июль 2010  
Откуда: Даугавпилс, Латвия


Помог: 52 раз(а)
текст может содержать теги, например <br>?
 
 Top
Macka_CMEXA
Отправлено: 22 Июля, 2012 - 21:17:43
Post Id


Гость


Покинул форум
Сообщений всего: 100
Дата рег-ции: Июль 2012  


Помог: 5 раз(а)
Цитата:
текст может содержать теги, например <br>?

почему бы и нет?
 
 Top
Bio man
Отправлено: 22 Июля, 2012 - 21:36:08
Post Id


Постоянный участник


Покинул форум
Сообщений всего: 2751
Дата рег-ции: Июль 2010  
Откуда: Даугавпилс, Латвия


Помог: 52 раз(а)
Macka_CMEXA пишет:
почему бы и нет?
просто правило content не преобразует теги.
Пришлось сделать с блоком, но выровнять по центру все равно не получается.
Можно поиграть с правилом top, что бы выровнять по центру
Спойлер (Отобразить)

(Отредактировано автором: 22 Июля, 2012 - 21:39:25)

 
 Top
vectorserver
Отправлено: 22 Июля, 2012 - 21:48:45
Post Id



Гость


Покинул форум
Сообщений всего: 105
Дата рег-ции: Нояб. 2011  


Помог: 3 раз(а)
Пример: http://ntagil[dot]convex[dot]ru/test_all/table.php

CODE (html):
скопировать код в буфер обмена
  1. <style>
  2. table tr td{
  3.         position:relative;
  4. }
  5. td.cell-bg{
  6.         background:#ccc;
  7.         padding:5px;
  8. }
  9. </style>
  10. <table border="0" cellspacing="2" cellpadding="2" >
  11.     <tbody>
  12.         <tr>
  13.             <td class="cell-bg" align="center" valign="middle">text</td>
  14.             <td class="cell-bg" align="center" valign="middle">text</td>
  15.             <td class="cell-bg" align="center" valign="middle">text</td>
  16.         </tr>
  17.         <tr>
  18.             <td class="cell-bg" align="center" valign="middle">text</td>
  19.             <td class="cell-bg" align="center" valign="middle">text</td>
  20.             <td class="cell-bg" align="center" valign="middle">text</td>
  21.         </tr>
  22.         <tr>
  23.             <td class="cell-bg" align="center" valign="middle">text</td>
  24.             <td class="cell-bg" align="center" valign="middle">text</td>
  25.             <td class="cell-bg" align="center" valign="middle">text</td>
  26.         </tr>
  27.     </tbody>
  28. </table>

(Отредактировано автором: 22 Июля, 2012 - 21:49:23)

 
 Top
Macka_CMEXA
Отправлено: 22 Июля, 2012 - 21:54:46
Post Id


Гость


Покинул форум
Сообщений всего: 100
Дата рег-ции: Июль 2012  


Помог: 5 раз(а)
vectorserver[color=black][/color]
читайте тему полностью, или хотябы сначала ;) Смысл был сделать фон.

Хотя все эти размышления подталкивают меня сделать эмуляцию не фона, а просто позиционировать содержание поверх, абсолютным слоем )
 
 Top
vectorserver
Отправлено: 22 Июля, 2012 - 21:56:26
Post Id



Гость


Покинул форум
Сообщений всего: 105
Дата рег-ции: Нояб. 2011  


Помог: 3 раз(а)
Macka_CMEXA пишет:
Смысл был сделать фон.


Дык задавай каждому td фон да и все, если нужен динамичесуий тогда JS
 
 Top
Macka_CMEXA
Отправлено: 22 Июля, 2012 - 21:57:34
Post Id


Гость


Покинул форум
Сообщений всего: 100
Дата рег-ции: Июль 2012  


Помог: 5 раз(а)
vectorserver пишет:
Дык задавай каждому td фон да и все, если нужен динамичесуий тогда JS

ну расскажи чтоли как:

сделать текстовый!! (НЕ картинка) фон для ячейки таблицы ;) буду благодарен ;)

P.S. динамически будет клеиться через php

(Отредактировано автором: 22 Июля, 2012 - 22:00:02)

 
 Top
Bio man
Отправлено: 22 Июля, 2012 - 22:00:50
Post Id


Постоянный участник


Покинул форум
Сообщений всего: 2751
Дата рег-ции: Июль 2010  
Откуда: Даугавпилс, Латвия


Помог: 52 раз(а)
Macka_CMEXA пишет:
позиционировать содержание поверх, абсолютным слоем
я так и сделал
 
 Top
Macka_CMEXA
Отправлено: 22 Июля, 2012 - 22:00:56
Post Id


Гость


Покинул форум
Сообщений всего: 100
Дата рег-ции: Июль 2012  


Помог: 5 раз(а)
Цитата:
Хотя все эти размышления подталкивают меня сделать эмуляцию не фона, а просто позиционировать содержание поверх, абсолютным слоем )


Огорчение который тоже придется центровать по вертикали ;) lol
(Добавление)
Цитата:
я так и сделал


наоборот ты сделал ;) и всерано не получилось Огорчение )

CODE (htmlphp):
скопировать код в буфер обмена
  1. text
  2. text
  3. text


не вертикально выровнены ;)
(Добавление)
вобщем ответ все же интересен, но от такого подхода для себя отказался..
(Добавление)
выровняю без всякого позиционирования, просто содержимым ячейки, а все содержимое буду накладывать абсолютным позиционированием, со строгими размерами и положением Огорчение

(Отредактировано автором: 22 Июля, 2012 - 22:04:51)

 
 Top
vectorserver
Отправлено: 22 Июля, 2012 - 22:20:38
Post Id



Гость


Покинул форум
Сообщений всего: 105
Дата рег-ции: Нояб. 2011  


Помог: 3 раз(а)
Macka_CMEXA пишет:
ну расскажи чтоли как:

сделать текстовый!! (НЕ картинка) фон для ячейки таблицы ;) буду благодарен ;)


Вот пожалуйста: http://ntagil[dot]convex[dot]ru/test_all/table.php


CODE (html):
скопировать код в буфер обмена
  1. <style>
  2. td,div{
  3.         width:110px;
  4.         height:110px;
  5. }
  6. div.bg{
  7.         position:relative;
  8.         background:#ccc;
  9.         font-size:22px;
  10.         z-index:1;
  11. }
  12. span.text{
  13.         left: 50%;
  14.         top: 60%;
  15.         margin-top: -25px;
  16.         margin-left: -25px;
  17.         position: absolute;
  18.         width: 50px;
  19.         height:50px;
  20.         font-size:28px;
  21.         color:#fff;
  22.         text-align: center;
  23.         z-index:2;
  24. }
  25. </style>
  26. <table border="0" cellspacing="2" cellpadding="2" >
  27.     <tbody>
  28.         <tr>
  29.             <td>
  30.                                 <div class="bg">Background Background Background Background
  31.                                         <span class="text">text</span>
  32.                                 </div>
  33.                         </td>
  34.             <td>
  35.                                 <div class="bg">Background Background Background Background
  36.                                         <span class="text">text</span>
  37.                                 </div>
  38.                         </td>
  39.             <td>
  40.                                 <div class="bg">Background Background Background Background
  41.                                         <span class="text">text</span>
  42.                                 </div>
  43.                         </td>
  44.             <td>
  45.                                 <div class="bg">Background Background Background Background
  46.                                         <span class="text">text</span>
  47.                                 </div>
  48.                         </td>
  49.             <td>
  50.                                 <div class="bg">Background Background Background Background
  51.                                         <span class="text">text</span>
  52.                                 </div>
  53.                         </td>
  54.         </tr>
  55.         <tr>
  56.             <td>
  57.                                 <div class="bg">Background Background Background Background
  58.                                         <span class="text">text</span>
  59.                                 </div>
  60.                         </td>
  61.             <td>
  62.                                 <div class="bg">Background Background Background Background
  63.                                         <span class="text">text</span>
  64.                                 </div>
  65.                         </td>
  66.             <td>
  67.                                 <div class="bg">Background Background Background Background
  68.                                         <span class="text">text</span>
  69.                                 </div>
  70.                         </td>
  71.             <td>
  72.                                 <div class="bg">Background Background Background Background
  73.                                         <span class="text">text</span>
  74.                                 </div>
  75.                         </td>
  76.             <td>
  77.                                 <div class="bg">Background Background Background Background
  78.                                         <span class="text">text</span>
  79.                                 </div>
  80.                         </td>
  81.         </tr>
  82.         <tr>
  83.             <td>
  84.                                 <div class="bg">Background Background Background Background
  85.                                         <span class="text">text</span>
  86.                                 </div>
  87.                         </td>
  88.             <td>
  89.                                 <div class="bg">Background Background Background Background
  90.                                         <span class="text">text</span>
  91.                                 </div>
  92.                         </td>
  93.             <td>
  94.                                 <div class="bg">Background Background Background Background
  95.                                         <span class="text">text</span>
  96.                                 </div>
  97.                         </td>
  98.             <td>
  99.                                 <div class="bg">Background Background Background Background
  100.                                         <span class="text">text</span>
  101.                                 </div>
  102.                         </td>
  103.             <td>
  104.                                 <div class="bg">Background Background Background Background
  105.                                         <span class="text">text</span>
  106.                                 </div>
  107.                         </td>
  108.         </tr>
  109.         <tr>
  110.             <td>
  111.                                 <div class="bg">Background Background Background Background
  112.                                         <span class="text">text</span>
  113.                                 </div>
  114.                         </td>
  115.             <td>
  116.                                 <div class="bg">Background Background Background Background
  117.                                         <span class="text">text</span>
  118.                                 </div>
  119.                         </td>
  120.             <td>
  121.                                 <div class="bg">Background Background Background Background
  122.                                         <span class="text">text</span>
  123.                                 </div>
  124.                         </td>
  125.             <td>
  126.                                 <div class="bg">Background Background Background Background
  127.                                         <span class="text">text</span>
  128.                                 </div>
  129.                         </td>
  130.             <td>
  131.                                 <div class="bg">Background Background Background Background
  132.                                         <span class="text">text</span>
  133.                                 </div>
  134.                         </td>
  135.         </tr>
  136.     </tbody>
  137. </table>
 
 Top
Macka_CMEXA
Отправлено: 22 Июля, 2012 - 22:21:37
Post Id


Гость


Покинул форум
Сообщений всего: 100
Дата рег-ции: Июль 2012  


Помог: 5 раз(а)
как я понял выровнять по вертикали текст в абсолютно позиционированном слое невозможно (
(Добавление)
vectorserver убери парочку "Background" слов у себя и поймешь что не так ;)

(Отредактировано автором: 22 Июля, 2012 - 22:24:06)

 
 Top
vectorserver
Отправлено: 22 Июля, 2012 - 22:24:10
Post Id



Гость


Покинул форум
Сообщений всего: 105
Дата рег-ции: Нояб. 2011  


Помог: 3 раз(а)
Macka_CMEXA пишет:
как я понял выровнять по вертикали текст в абсолютно позиционированном слое невозможно (


margin-top = отлкиваемся от родительского блока
padding-top = отлкиваемся внутри блока
 
 Top
Macka_CMEXA
Отправлено: 22 Июля, 2012 - 22:27:10
Post Id


Гость


Покинул форум
Сообщений всего: 100
Дата рег-ции: Июль 2012  


Помог: 5 раз(а)
CODE (htmlphp):
скопировать код в буфер обмена
  1. margin-top = отлкиваемся от родительского блока
  2. padding-top = отлкиваемся внутри блока


это позиционирование Огорчение а не выравнивание Огорчение
 
 Top
vectorserver
Отправлено: 22 Июля, 2012 - 22:33:04
Post Id



Гость


Покинул форум
Сообщений всего: 105
Дата рег-ции: Нояб. 2011  


Помог: 3 раз(а)
В абсолютном позиционировании нет такого, текст толко толкается с левого края и все.

Можно и так: http://ntagil[dot]convex[dot]ru/test_all/table.php
CODE (html):
скопировать код в буфер обмена
  1. <style>
  2. td,div{
  3.         width:110px;
  4.         height:110px;
  5. }
  6. div.bg{
  7.         position:relative;
  8.         background:#ccc;
  9.         font-size:22px;
  10.         z-index:1;
  11. }
  12. span.text{
  13.         left: 50%;
  14.         top: 60%;
  15.         margin-top: -25px;
  16.         margin-left: -25px;
  17.         position: absolute;
  18.         width: 50px;
  19.         font-size:28px;
  20.         color:#fff;
  21.         text-align: center;
  22.         z-index:2;
  23.         background:#999;
  24. }
  25.  
  26. div,span{
  27. -webkit-border-radius: 6px;
  28.  border-radius: 6px;
  29. }
  30. </style>
  31. <table border="0" cellspacing="2" cellpadding="2" >
  32.     <tbody>
  33.         <tr>
  34.             <td>
  35.                                 <div class="bg">Background Background Background
  36.                                         <span class="text">text</span>
  37.                                 </div>
  38.                         </td>
  39.             <td>
  40.                                 <div class="bg">Background Background Background
  41.                                         <span class="text">text</span>
  42.                                 </div>
  43.                         </td>
  44.             <td>
  45.                                 <div class="bg">Background Background Background
  46.                                         <span class="text">text</span>
  47.                                 </div>
  48.                         </td>
  49.             <td>
  50.                                 <div class="bg">Background Background Background
  51.                                         <span class="text">text</span>
  52.                                 </div>
  53.                         </td>
  54.             <td>
  55.                                 <div class="bg">Background Background Background
  56.                                         <span class="text">text</span>
  57.                                 </div>
  58.                         </td>
  59.         </tr>
  60.     </tbody>
  61. </table>
 
 Top
Macka_CMEXA
Отправлено: 22 Июля, 2012 - 22:37:42
Post Id


Гость


Покинул форум
Сообщений всего: 100
Дата рег-ции: Июль 2012  


Помог: 5 раз(а)
я сделал так как хотел изначально, но сам не могу понять как я сделал это.. ищу ошибку у себя..
(Добавление)
Отталкивается, во только позиционируется автоматически на том месте где расположен предыдущий элемент из-за
CODE (htmlphp):
скопировать код в буфер обмена
  1. position:absolute


тоесть если

CODE (htmlphp):
скопировать код в буфер обмена
  1. <td style="vertical-align: middle;>
  2.    <span> ... </span>
  3.    <div style="position:absolute"> ssss </div>
  4. <td>


div позиционируется там же где и span, но не будет выровнен.

Итог. Всеравно не то что хотелось. Но это то, что делать придется ;)
Спасибо всем кто участвовал. Это только начало Ха-ха

(Отредактировано автором: 22 Июля, 2012 - 22:55:32)

 
 Top
Поиск в теме | Версия для печати
Страниц (2): « 1 [2]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB