Leaderboard
Popular Content
Showing content with the highest reputation on 09/24/2011 in all areas
-
Здравствуйте. Столкнулся со следующей проблемой с обтеканием div-ов. На картинках ниже приведено, что есть и что нужно получить. Это у нас есть: (http://itmages.ru/image/view/287959/d5fb3475) А вот так надо: (http://itmages.ru/image/view/287960/4a7d5e0b) Код: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <style> .news_main{ font-weight:normal; text-align:left; padding-top: 3px; padding-bottom: 7px; } .news_box{ text-align: left; vertical-align: top; padding: none; height: auto; width: 700px; margin: 0 auto; } .news_box:after{ content:''; display:block; clear:both; } .news_box .text { padding-top: 7px; } .news_box .events_block { float:right; text-align: left; vertical-align: top; height: auto; width: 250px; padding: 0px; margin-left: 7px; margin-bottom: 5px; border:1px solid black; } .news_box .events_block .text { padding: 3px; } .news_box .events_block:after { content: ''; display: block; clear: both; } .news_box .caption { text-align: center; font-weight: bold; } .div5 { text-align: left; vertical-align: top; padding: 3px; padding-left: 5px; height:auto; } .div5:after { content:''; display:block; clear:both; } .div_img { margin-right:7px; margin-bottom:7px; float:left; text-align: left; vertical-align: top; height: auto; } .div_img:after { content:''; display:block; clear:both; } </style> </head> <body> <div class="news_box"> <div class="caption">Caption1</div> <div class="text"> <div class="events_block"> <div class="caption">Caption2</div> <div class="text"> - text2 <br> - text2 <br> - text2 <br> - text2 <br> </div> <div class="caption">Caption3</div> <div class="text"> - text3 <br> - text3 <br> - text3 <br> - text3 <br> </div> </div> <div class="news_main"> Title1<br> <div class="div5"> <div class="div_img"> <img src="http://www.google.ru/images/srpr/logo3w.png" alt="image" width="100px"> </div> Some long text here.Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. </div> </div> <div class="news_main"> Title2<br> Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image. </div> <div class="news_main"> Title3<br> 3. Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image. </div> </div> </div> </body> </html> Проблема заключается в том, что при вставке картинки, которая обтекается текстом, все идущие дальше записи начинаются только после окончания правого блока. Если картинки нет, то все в порядке. Помогите, пожалуйста, разобраться и сделать правильное обтекание. Если это критично для верстки, хочу обратить внимание на следующее: блок справа может быть произвольной высоты, а слева могут идти подряд несколько записей с картинками. Заранее всем откликнувшимся огромное спасибо!1 point
-
Объясняю по пунктам в Дриме. 1. Выделяешь нужный тег 2. Жмёшь вот на эту штуку http://screencast.com/t/N73YP6SKxE3n 3. Пьёшь пиво1 point
-
Ну, как кросс вариант, то я бы лучше воспользовался JS. Вот, лови вариантик один, как-то раз делал) http://psywalker.ru/Forum/JS/Primitive/SetTimeOut/ImgPlavnoe/3.html1 point
-
Лови дружище <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <style> .news_main{ font-weight:normal; text-align:left; padding-top: 3px; padding-bottom: 7px; } .news_box{ text-align: left; vertical-align: top; padding: none; height: auto; width: 700px; margin: 0 auto; } .news_box:after{ content:''; display:block; clear:both; } .news_box .text { padding-top: 7px; } .news_box .events_block { float:right; text-align: left; vertical-align: top; height: auto; width: 250px; padding: 0px; margin-left: 7px; margin-bottom: 5px; border:1px solid black; } .news_box .events_block .text { padding: 3px; } .news_box .events_block:after { content: ''; display: block; clear: both; } .news_box .caption { text-align: center; font-weight: bold; } .div5 { text-align: left; vertical-align: top; padding: 3px; padding-left: 5px; height:auto; } .div5:after { content:''; display:block; clear:both; } .div_img { margin-right:7px; margin-bottom:7px; float:left; text-align: left; vertical-align: top; height: auto; } .div_img:after { content:''; display:block; clear:both; } </style> </head> <body> <div class="news_box"> <div class="caption">Caption1</div> <div class="text"> <div class="events_block"> <div class="caption">Caption2</div> <div class="text"> - text2 <br> - text2 <br> - text2 <br> - text2 <br> </div> <div class="caption">Caption3</div> <div class="text"> - text3 <br> - text3 <br> - text3 <br> - text3 <br> </div> </div> <div class="news_block" style="overflow: hidden;"> <div class="news_main"> Title1<br> <div class="div5"> <div class="div_img"> <img src="http://www.google.ru/images/srpr/logo3w.png" alt="image" width="100px"> </div> Some long text here.Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. </div> </div> <div class="news_main"> Title2<br> Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image. </div> <div class="news_main"> Title3<br> 3. Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image. </div> </div> </div> </div> </body> </html>1 point
-
Можно background-size использовать для масштабирования, а лучше медиа-запросы.1 point
-
В Notepad++, при клике на определенную строчку с дивом,слева появляется красная полоска до закрывающего дива.Это относится не только к дивам, но и к любым закрывающимся тегам, кроме этого у открывающего тега там стоит квадратик с плюсом и минусом,который собирает/раскрывает указанный тег, что удобно в больших сайтах.1 point
-
Возьми любой справочник и узнай или и это трудно? Можно. не трудно - дольше-1 points
-
<html> <head> <STYLE type="text/css"> body {background-color:#000000;} textarea { background: #000000; border: 4px solid #54ff00; overflow: auto; width: 100%; height: 95%; padding:6px; } textarea:hover { background: #101010; border: 4px solid #00ff00; } input.text { background: #000000; border: 4px solid #54ff00; width: 93%; height: 5%; } </style> </head> <body> <form> <textarea READONLY WRAP=SOFT> </textarea> <input class="text" type=”text” name=”msg” /> <button type="button">сказать</button> </form> </body> </html> как изменить цвет и фонт и размер , кроче как обратитя к тексту внутри инпут текста и текстареи ?-1 points
-
А, ну то есть вам своего времени жалко, да? А то, что люди тратят его на вас это ничего? какие вы все нежные тут и обидчивые . Вы же всё равно сидите сейчас в форуме , я вас не отвлекаю от чегото важного , а если иначе , то это ваше решение ответить на мой пост , никто не приставил пистолет к виску и не говорил -"А ну помогай мне". Оформление для мнея долгий процесс , я мог засесть еще на час какой , а сюда написал , так как подумал что мне за минуту покажут че да как... Как бы там не было спасибо за помощь , сделал так как хотел-1 points
This leaderboard is set to Kiev/GMT+02:00
-
Upcoming Events
No upcoming events found -
Сообщения форума
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-