- 0
-
Similar Content
-
By JustUser
Приветствую!
Ребят, что-то меня заклинило, и никак я не могу решить простую, в общем-то, задачу. Собственно, задача: поместить несколько таблиц друг в друга (без каких-либо промежутков) во весь экран.
Когда содержимое внутренней таблицы не превышает высоту экрана, то всё хорошо. А вот когда контент не помещается, то таблица, соответственно, вырастает сообразно содержимому. А внешние-то table‘ы – нет! Так и остаются на месте. Как сделать так, чтобы они двигались вместе?
http://s017.radikal.ru/i405/1605/4e/d5119940ed94.jpg
http://s41.radikal.ru/i094/1605/75/58aae8416ead.jpg
Подскажите, пожалуйста, решение проблемы. Перепробовал кучу вариантов. Всё не то. Наверняка есть более элегантный способ сделать то же самое. Спасибо.
HTML:
<html> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="begin"> <table class="t1"><tr><td align="center" valign="top"> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <table class="t2"><tr><td align="center" valign="top"> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <table class="t3"><tr><td align="center" valign="top"> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text </p> </td></tr></table> </td></tr></table> </td></tr></table> </div> </body> </html> CSS:
table.t1 { background-color: #004400; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 12px solid #ff0000;} table.t2 { background-color: #0000ff; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 12px solid #ff9933;} table.t3 { background-color: #440000; position: absolute; top: 0px; left: 0px; width: 90%; height: 100%; border: 12px solid #007700;} p {color: #ffffff;}
-
By mike.onl
У меня есть div с display:table, в нем два div с display:table-cell.
Проблема в том, что из за картинки в одном div смещается содержимое другого div.
Помогите пожалуйста.
-
By Zloi_Pain
Здравствуйте. У меня возникла проблема и я попробую ее объяснить. Дело в том, что у меня отказывается подключаться/отображаться css к html. В коде ошибок нет, вроде все правильно подключаю, а результата нет. Буду очень благодарен если поможете. Скриншот - http://hostingkartinok.com/show-image.php?id=e630d03148bf4d2babe81fedd6c098ae
-
By baxpul
Доброго времени суток, форумчане!
Возникла у меня проблемка не большая.
Нарисовал картинку (бэкграунд), и в этой картинке оставил место для вставки видео. Т.е. рамку. В это место нужно вставить видео. Бэкграунд вроде настроил, вроде отображается, но вот видео на "место" поставить не могу. Использую тег margin-top, указываю значения, а он делает отступ не только для видео, но и для самого бэкграунда. По-любому проблема лежит где-то на поверхности, а я ее не вижу, как обычно. Помогите сообразить, пожалуйста
Вот мой код:
+ Картинка.
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
XopicT
Здравствуйте. Вот есть такой сайт https://jsbin.com/yonapon/edit?html,css,js,output. На обычном мониторе есть отступы справа и слева, отображение корректное. Но когда проверяю на мобильном, нет этих отступов и некорректно работает ширина. Как мне это справить?
Edited by XopicTLink to comment
Share on other sites
1 answer to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.