PHP.SU

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


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

> Без описания
mstdmstd
Отправлено: 25 Сентября, 2019 - 15:00:13
Post Id


Частый гость


Покинул форум
Сообщений всего: 151
Дата рег-ции: Авг. 2014  


Помог: 0 раз(а)




Всем привет
Хочу использовать dl,dd,dt как прописано тут
https://onextrapixel[dot]com/how-to-[dot][dot][dot]table-list-data/
для реализации таблички с ключем и справа значения

Но вствив этот код
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <dl>                   
  3.         <dt>Name: </dt>
  4.         <dd>John Don</dd>
  5.                        
  6.         <dt>Age: </dt>
  7.         <dd>23</dd>
  8.                                
  9.         <dt>Gender: </dt>
  10.         <dd>Male</dd>
  11.                                
  12.         <dt>Day of Birth:</dt>
  13.         <dd>12th May 1986</dd>
  14. </dl>
  15.  
  16.  

и стили
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. dl {
  3.    margin-bottom:50px !important;
  4. }
  5.  
  6. dl dt {
  7.    background:#5f9be3 !important;
  8.   color:#fff !important;
  9.   float:left !important;
  10.    font-weight:bold !important;
  11.    margin-right:10px !important;
  12.    padding:5px !important;
  13.    width:100px !important;
  14. }
  15.  
  16. dl dd {
  17.    margin:2px 0 !important;
  18.    padding:5px 0 !important;
  19. }
  20.  


в свою Bootstrap 4.3 / vuejs 2.5 страницу http://hostels2[dot]my-demo-apps[dot]tk/test вижу что
поле со значением снизу а не справа как я ожидал.
Как исправить?

Спасибо!
 
 Top
LIME
Отправлено: 25 Сентября, 2019 - 16:24:42
Post Id



Активный участник


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


Помог: 313 раз(а)




float убрать


-----
DDD
 
 Top
mstdmstd
Отправлено: 25 Сентября, 2019 - 16:55:36
Post Id


Частый гость


Покинул форум
Сообщений всего: 151
Дата рег-ции: Авг. 2014  


Помог: 0 раз(а)




убрал float из
CODE (html):
скопировать код в буфер обмена
  1.          dl dt {
  2.                 background:#5f9be3 !important;
  3.                 color:#fff !important;
  4.        

не помогло...
 
 Top
LIME
Отправлено: 25 Сентября, 2019 - 18:02:22
Post Id



Активный участник


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


Помог: 313 раз(а)




скопировал разметку и стили
все норм выглядит как и задумывалось с флоатом
чтото еще вмешивается в стили
chrome -> правая мыша -> исследовать элемент
и смотри какие стили в итоге применяются
или пробуй
Спойлер (Отобразить)


-----
DDD
 
 Top
mstdmstd
Отправлено: 25 Сентября, 2019 - 18:31:54
Post Id


Частый гость


Покинул форум
Сообщений всего: 151
Дата рег-ции: Авг. 2014  


Помог: 0 раз(а)




Да смотрел уже
и обратил внимание на dt => display= block
https://prnt[dot]sc/pav76z
Но заместо указания на css файл рядом написано “user agent stylesheet” и чекбокса рядом чтобы отменить или изменить это свойство с ним нет
Что это за хрень и как с этм бороться ? Или дело не в этом?
 
 Top
LIME
Отправлено: 25 Сентября, 2019 - 18:41:05
Post Id



Активный участник


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


Помог: 313 раз(а)




mstdmstd пишет:
и обратил внимание на dt => display= block
а что должно быть
это же не таблица
может тебе проще тогда table?


-----
DDD
 
 Top
mstdmstd
Отправлено: 25 Сентября, 2019 - 18:44:51
Post Id


Частый гость


Покинул форум
Сообщений всего: 151
Дата рег-ции: Авг. 2014  


Помог: 0 раз(а)




Наверно проще Но хотел разобраться с этой dl, dd версткой ...
 
 Top
LIME
Отправлено: 25 Сентября, 2019 - 22:59:31
Post Id



Активный участник


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


Помог: 313 раз(а)




возможно ширины не хватает
Не помещается в странице
В приведенном виде отдельно от всего нет ошибок


-----
DDD
 
 Top
mstdmstd
Отправлено: 26 Сентября, 2019 - 10:33:41
Post Id


Частый гость


Покинул форум
Сообщений всего: 151
Дата рег-ции: Авг. 2014  


Помог: 0 раз(а)




Непонятно. Переделал по другому .
И можно еще 2 вопроса с версткой на bootstrap4/vuejs2 странице:
Откройте пожалуйста страничку http://hostels2[dot]my-demo-apps[dot]tk/[dot][dot][dot]general-business
1)Как сделать чтобы на широком экране таблица с данными была на весь экран и конпка “Post New Thread” не имела под ниже пустого места ?

2)Если уменьшить экран как можно сделать чтобы текст в правой колонке списка был в одну строку а не разбивался на 3 колонки :
https://prnt[dot]sc/pars09

Это реализовано кодом :
CODE (html):
скопировать код в буфер обмена
  1.                         <div class="latest_post mb-4" v-show="latestPost">
  2.                                 <span class="service_key_word">Latest:</span>&nbsp;
  3.                                 <span><strong>{{ latestPost.title }}</strong>, by {{ singleForumRow.creator_name }},</span>
  4.                                 <span class="date_ago_label">{{ last_modified_label(latestPost) }}</span>
  5.                         </div>
  6.  
  7.  
И это нормально работает на большом экране но не на экране меньше ...


Спасибо!
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« HTML, Дизайн & CSS »


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



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

 
Powered by ExBB FM 1.0 RC1. InvisionExBB