Search the Community

Доброе время суток. Так-как в javascript`ах я не силен, опять обращусь к умельцам. Существует проблема с реализацией всплывающих блоков. Скрипт в идеале должен работать так: при клике по пункту меню .libut.***1 выводится .faqinfobox.***1 , при клике вне дива или по клике по .libut.***1 .faqinfobox.***1 закрывается, а при клике на .libut.***2 выводится .faqinfobox.***2 , а .faqinfobox.***1 закрывается. Что имелось до фансибокса: http://jsfiddle.net/e5wet0fx/1/ Поставил фансибокс, настроил все кроме привязки. Сейчас он открывается по центру окна, а надо чтобы открывался на позиции заданной в дефолтном.цсс

Всем привет. Такая проблема: на сайте есть блок с div с картинками, расположен по горизонтали (через float:left, ширина задается в процентах). Нужно чтобы картинка полностью заполняла див. Проблема в том, что картинки есть у которых ширины больше высоты и наоборот соответственно. При уменьшении масштаба ширина (она в процентах) тоже уменьшается, а высота остается прежней, т.е. вытягивается по вертикали. На данный момент реализовано так http://jsfiddle.net/u424m8fh/ - попробуйте уменьшить масштаб. Может есть у кого мысли как можно сделать так, что бы картинка заполняла див не по мах размерам - width и height, а по минимальным?

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

Не прошу писать мне готовый код, просто намекнуть как сделать лучше. На изображении 2 блока. Нужно, чтобы каждый из них занимал 50% ширины. А контент внутри этих блоков прижимался внутри к краю с отступом, чтобы при разных разрешениях всю ширину занимал только фон. В принципе кажется, что ничего сложно нет, но я запутался Сделал один общий id="webhost" и в нем два класса с еще двумя классами В одном классе фон с 50% шириной (wleft и wright), а в другом контент(wleft-row и wright-row). Получается куча флоатов и куча кода, можно же ведь как-то попроще сделать.

Уважаемые мастера, подскажите как правильнее решить такую задачу: http://hostingkartinok.com/show-image.php?id=f99888585c0b10129461838efec6a637 В коде они идут по порядку: header content footer и все находятся в одной обертке. Я размещаю блоки header и footer, друг над другом, с помощью position:absolute. Content занимает все что остается по правую сторону. При большом наполнении контента, появляется полоса вертикальной прокрутки, и при скролинге блоки зафиксированные слева, убегают в верх. Как лучше разместить их с левой стороны, чтобы вне зависимости от размера контента они оставались фиксированными? (я могу это сделать - поместив их в персональный блок и зафиксировать его, но тогда подвал окажется над контентом)

Есть примерно такой html: <div class="container"> <div id="bloсk1">Высота контента может быть любой</div> <div id="bloсk2">Высота контента может быть любой</div> <div id="bloсk3"></div> </div> Возможно ли block3 поместить между block1 и block2, не изменяя html?

Добрый день, друзья! Я даже не знаю как сформулировать свою проблему. Нужно код ниже сверстать слоями. <table width="950px"><tr><td><nobr>Очень длинный текст</nobr></td><td><nobr>Ещё один очень длинный текст</nobr></td><td width="100%">Резиновый блок</td></tr></table>Ни какие размеры блоков заранее неизвестны, кроме ширины макета. display: table не предлагать. Т.е. что я имею ввиду: есть блоки, которые должны быть размещены по горизонтали, при этом последний из них должен занять всё оставшееся место. Количество блоков неизвестно, но их явно не меньше двух.

Столкнулся с такой проблемой,делаю галерею на сайте. При нажатии появляется div с картинкой,и все сделал,но мне нужно чтобы этот div был по центру страницы. Как вы понимаете,для div стоит position:absolute; и z-index; Что делает невозможным выставить его по центру. Прописать margin-left - не получается,т.к. картинки разные по размеру. Вот css для div #conteiner_2{/* фон в гал */width: auto;height: auto;visibility: hidden;opacity:0;position:absolute;z-index:4;border: 2px solid #328efd;background:white;border-radius:25px;-webkit-transition: opacity 400ms,width 400ms,height 400ms,visibility 400ms ;}Вот у меня и возникла проблема,как сделать блок по центру,но при этом чтобы он был выше всех остальных(z-index) думаю нужно добавить,сайт состоит из 3 колонок,левая,правая,центральная.

1111

вот сайт geometrica.biz в хедере есть логотип и два блока меню. Проблема состоит в том что логотип налаживается на два блока меню из-за этого они становяться неактивные. проблема в том что у логотипа стоит z-index выше чем у блоков меню, но я не знаю как это решить, помогите пожалуйста!

Всем привет , как вы догадались я рукожопый новичек. Обычно я всегда сначала убьую пару часов на решение проблемы своими силами, чаще всего мне этого времени хватает и у меня все получается, но в этот раз вышло совсем не так. В общем решил я склепать что то типа макета отправленного сообщения, чисто div с названиями , сначала я столкнулся с тем что при изменении масштаба моя верстка разваливается как карточный домик, перепробовав тыщу способов я избавился от border и оставил все сзаливкой что бы понимать где что как. Далее когда я уже все вместе более ли менее собрал решил я проверить как будет выглядеть текст, вставил где что надо и бац, у меня из за текста покосился весь шаблон, взде появились какие то отсупы которые я пытался убрать, текст высото в 9пикселей никак не хотел лезть в див размером 12 , он все время сползал вниз, не спасло даже выравнение текста по середине Вот style.css div.comment{ width: 300px; border-style: groove; height: 121px; border-width: 1px; } div.comment-head{ width: 300px; background: #ff1111; height: 13px; position:relative; padding-bottom: 4px; text-align: center; border: 1px #000; } div.comment-right{ width: 240px; background: #ffffff; height: 108px; float:left; } div.comment-left{ width: 60px; background: #111111; height: 108px; float:left; } div.comment-photo{ width: 50px; background: #1111ff; height: 50px; margin-top: 5px; margin-left: 5px; } div.comment-name{ width: 100px; margin-top: 0.5px; background: #11ff11; height: 9px; margin-left: 60px; float:left; } div.comment-number{ width: 40px; margin-left: 10px; background: #11ff61; height: 8px; margin-top: 10px; float:left; text-align: center; }А это сам код <html> <head> <title>test</title> <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon"><!-- картинка в вкладке --> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /><!-- кодировка --> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="comment"> <div class="comment-head"> <p style=" line-height: 0.00001;">ДЕнис Роллов</p> </div> <div class="comment-left"> <div class="comment-photo"></div> <div class="comment-number"><p style=" font-size:3px;">15:12</p></div> <div class="comment-number"><p style=" font-size:3px;">03.12.2012</p></div> </div> <div class="comment-right"><p>Здесь будет комментарий о нашем сайте.Здесь будет комментарий о нашем сайте.Здесь будет комментарий о нашем сайте.Здесь будет комментарий о нашем сайте.Здесь будет комментарий о нашем сайте.Здесь будет комментарий о нашем сайте.</p></div> </div></body></html>Я знаю что все написано ужасно криво и вообще не по правилам, но это мой первый проэкт, так что прошу помочь

Вряд ли за две недели можно изучить с нуля html, но я делаю сайт для себя и профессионально заниматься этим не собираюсь)), так что не сильно бейте. Собственно решел не шаманить на главной странице со всякими разворачивающимися блоками, а просто разместить их в стиле win8 - плитками разной величины. Вот что у меня сейчас выходит: http://jsfiddle.net/gp7GK/5/ Хотелось бы, чтобы профи проверили правильность моих действий)). 1. Пока не понял как правильно разместить текст внутри блоков, так чтобы его отступы не выталкивали "p" за границы "divа". И заставить текст вмещаться в границы родительского блока. 2. Если убрать блоки "clear" в концах секций, то получается какая-то фигня (по моему называется схлопывание), тоже разбираюсь с этим. Но если выставить 100% высоты для секции в которой сидят мелкие блоки, то вроде как все, как надо смотрится и аналогично если выставить блокам inline-block. 3. Что лучше использовать для цвета: rgb или через #..... ? 4. Правильно ли использовать размеры в "px", если мне нужны четкие размеры всего от шрифтов до границ блоков? Заранее спасибо)).

Привет всем! У меня очередная проблема. Сразу хочу сказать, что я не профи, но в html и css разбираюсь. Однако суть в следующем. Мне нужно создать макет, как показано на картинке. Но у меня выходит просто какая-то ерунда. Эту ерунду можно посмотреть по этой ссылке http://testshop.mcdir.ru/. Не могу понять, что я делаю не так. Header уменя весь расползается. Помогите решить эту задачу. Вполне возможно (а я почему-то в этом уверен), что проблема с позиционированием. Исходный код прилагаю. index.html: <!DOCTYPE html><html><head><title>interior</title><link href="style.css" rel="stylesheet" /><meta charset="utf-8" /></head><body><header><img src="images/slide1.jpg" width="1920" height="515" /><div class="length"><div class="logo"><h1>Interior</h1><h2>A wide<br /> selection<br /> of fine<br /> furniture!</h2></div><!--<nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><ul><li><a href="#">Living rooms</a></li><li><a href="#">Bedrooms</a></li><ul><li><a href="#">Loremipsum</a></li><li><a href="#">Dolorsed</a></li><li><a href="#">Aditorias</a></li></ul><li><a href="#">Kitchens</a></li></ul><li><a href="#">Blog</a></li><li><a href="#">Gallery</a></li><li><a href="#">Contacts</a></li></ul></nav>--></div></header></body></html>css: * {margin: 0;padding: 0;}body {width: 1920px;}p {font: italic 13px "Droid Serif";color: #737373;}a {font: italic 13px "Droid Serif";color: #ff4343;text-decoration: none;}h1 {font: bold 18px "Lato Black";color: #000;}/*header*/header {width: 100%;margin: 0;}header .length {width: 100%;height: 75px;background: #000;opacity: .5;position: relative;}header .length .logo {position: absolute;top: 0;left: 0;}header .length .logo h1 {font: normal 30px "Lato Black";color: #fff;text-transform: uppercase;position: absolute;top: 28px;left: 489px;}header .length .logo h2 {font: normal 48px "Lato Black";color: #fff;line-height: .95;text-transform: uppercase;position: absolute;top: 270px;left: 489px;}/*end header*/Заранее всем огромное спасибо!

Здравствуйте! Потребовалось сверстать блок вот такого типа. 1 - плавающий блок с заголовком, неопределенной ширины, растягивается вправо и прижат к аватарке 3. Ширина не ограничена и зависит от того, что в нем написано. 2 - блок с кнопками управления своей учеткой, находится справа от блока 1, прижат к правому краю, НО если из-за длины блока 1 блок 2 не вмещается, он должен переместиться в место под аватаркой, отмеченное красным кругом. 3 - аватарка, у меня она с абсолютным позиционированием, положение блоков относительно ее регулируется пэддингом. Один из ключевых моментов - это резиновый макет, т.е. при увеличивании \ уменьшении окна браузера все должно работать корректно. Собственно, я не смог найти ничего более умного, кроме как определить через php длину заголовка 1 и проставить для блока 2 классы типа pull-left-768, pull-left-1199 и так далее, которые сдвигают при определенных ключевых точках этот блок в место, отмеченное кружочком. Поскольку макет сделан на бутстрапе, то это не сложно. Но решение получилось довольно костыльным и не без недостатков... поэтому у меня вопрос: как бы вы сделали подобный блок? На основании каких хаков \ приемов и т.п. И возможно ли вообще реализовать такое непростое поведение на чистом css? p.s. js я не применял, т.к. возможны артефакты при загрузке страницы. Буду благодарен за советы

Всем привет. Прошу всех оценить мою верстку. А именно по коду где ошибки, чтобы бы вы использовали вместо каких то тегов. По дизайну где че может убрать. Под ie7 не верстал. Подвал еще не доделал. А также классы иногда не корректные давал)) Потому что опыта нету. Вот сайт : http://vacations.besaba.com/

Привет всем. Помогите с оформлением видео на сайт. Хочу сделать видео как миниатюра 160px на 120px. При нажатии на видео он открывается на средний размер просмотра и весь фон вокруг видео темнеет.. Может есть статьи или видеоуроки. Или пример какой знаете. Вот пример http://storage7.static.itmages.ru/i/14/0526/h_1401113037_6440385_d2d588c83f.jpg Вот при открытии видео http://storage5.static.itmages.ru/i/14/0526/h_1401114325_7394666_92e4426726.jpg

Привет) Можно ли на статический сайт поставить виджет от групп в контакте или комментарии? Используя например джава скрипты может php? У кого есть опыт прошу помощи

Приветствую профессионалов и новичков html/css Столкнулся со старой проблемой - как растянуть див по высоте родителя. Не кидайте в меня тапком и не отсылайте в гугл, ибо моя проблема несколько отличается от привычной. В верстке я использовал bootstrap, а конкретнее колоночную верстку (col-lg, col-md, col-sm и так далее). Выглядит это так: Как можно заметить, левая колонка не дотягивает до низу. Точнее не дотягивает полупрозрачный коричневый фон. И все бы ничего, можно было бы использовать старый добрый "margin-bottom:-6000px; padding-bottom:6000px;", но при разрешении экрана 320/480 (читай смартфон) колонки встают друг за другом по вертикали, вот так: И полупрозрачный фон коричневой колонки накладывается на полупрозрачнвй фон белой колонки, в результате чего фон последней становятся грязно-серым. Есть ли решение для данного случая - то есть, чтобы блок тянулся по вертикали до нижнего края родителя или до следующего блока.

Привет всем. Помогите удалить отступ между статьями. Уже второй день копаюсь и никак не могу найти где ошибся. Вот http://vacations.besaba.com/magazine.html А здесь сам макет http://yadi.sk/d/WpESGYPOQFK2g Так же вот картинка где надо убрать отступ http://itmages.ru/image/view/1667620/0c4f2507

Уважаемые гуру, прошу не пинать если я банален, но пытаясь делать первые шаги в верстке не сразу адекватно воспринимаешь весь поток информации)). Подскажите как лучше сделать такую штуковину: Есть блок, по аналогии с пунктом меню - при наведении на пункт меню вываливается еще несколько скрытых до этого пунктов подменю. А как можно сделать чтобы при нажатии на какой то квадратик на странице, к примеру 50х50, она разворачивалась в больший квадратик допустим 100х100. И можно ли это сделать простыми методами?

Привет. Вот сверстал страничку и хотелось бы услышать ваши критерии. Особенно на счет кода критерии нужны. Потому что мне кажется тут очень много ошибок именно со стороны кода, незнаю пока где какой тег именно применять. Вот http://vacations.besaba.com/

Доброго времени суток всякому сюда зашедшему. В общем сразу к проблеме. Делаю сайт на wordpress, нашёл подходящую тему, все настроил, но есть одно "но". Меню. На демке шаблона (http://demo.mythemeshop.com/s/?theme=Playbook) видно, что меню растянуто на всю ширину страницы. Я же хочу сделать меню по ширине внутреннего, белого блока. Собственно, вот кусок кода: .secondary-navigation {display: block;float:left;width:100%;background: url(images/bg1.jpg) 0 0 repeat;} Ширина белого блока - 1015px, соответственно width:1015px; Остается отцентровать меню, но тут появляется проблема. Когда я убираю флот, исчезает бэкграунд менюхи. http://lazurnaya-crimean.com Как быть, как поступать? Буду очень благодарен любому совету.

Есть проблемка,добавляю блок div после слайдера и задаю ему высоту сразу появляется скролл и он не влазит в 1024 пикселя ? joyful-shop.ru/webstudio

Здравствуйте. Есть некий <div><img></img></div> При увеличении изображения внутри дива изображение выходит за его рамки. Как сделать чтобы вместо этого, при увеличении изображения, в блоке появлялись полосы прокрутки?

Нужно чтобы при нажатии другие блоки убирались, а не перекрывались. БЕЗ скриптов. /* css таба */ .tabs { position: relative; min-height: 350px; font-family: calibri; color: #404C59; } .tab { float: left; } .tab label { background:#ccc; ; position: relative; left: 1px; padding: 10px; background-color: #E6E6E6; } .tab [type=radio] { display: none; } .content { position: absolute; left: 0; background: #FAFAFA; right: 0; margin-top: 10px; padding:10px; } [type=radio]:checked ~ label { background: #FAFAFA; z-index: 2; } [type=radio]:checked ~ label ~ .content { z-index: 1; } .tg {border-collapse:collapse;border-spacing:0;} .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} .tg .tg-s6z2{text-align:center} .tg .tg-j1h2{font-size:x-large;font-family:"Lucida Console", Monaco, monospace !important;;text-align:center} .tg .tg-a0td{font-size:100%} .tg .tg-mysd{font-size:18px;font-family:"Lucida Console", Monaco, monospace !important;;text-align:center} .tg .tg-g8f1{font-size:100%;text-align:center} .tg {border-collapse:collapse;border-spacing:0;} .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} .tg .tg-s6z2{text-align:center} .tg .tg-y5uk{font-weight:bold;font-style:italic;font-size:large;text-align:center} .tg .tg-xloo{font-weight:bold;font-style:italic;font-size:medium;background-color:#f2cf44;text-align:center} <!-- HTML --> <html> <body> <div class="tabs"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">Полиграфия</label> <div class="content"> <p> <table class="tg" style="table-layout: fixed; width: 299px; float:left; "> <colgroup> <col style="width: 145px"> <col style="width: 49px"> <col style="width: 54px"> <col style="width: 51px"> </colgroup> <tr> <th class="tg-mysd" rowspan="2">ТИП ПРОДУКЦИИ</th> <th class="tg-j1h2" colspan="3">ЦЕНА</th> </tr> <tr> <td class="tg-g8f1">USD</td> <td class="tg-g8f1">RUB</td> <td class="tg-a0td">UAH</td> </tr> <tr> <td class="tg-031e">Билборд</td> <td class="tg-s6z2">100</td> <td class="tg-s6z2">3500</td> <td class="tg-s6z2">1200</td> </tr> <tr> <td class="tg-031e">Буклет</td> <td class="tg-s6z2">40</td> <td class="tg-s6z2">1400</td> <td class="tg-s6z2">480</td> </tr> <tr> <td class="tg-031e">Флаер</td> <td class="tg-s6z2">30</td> <td class="tg-s6z2">1050</td> <td class="tg-s6z2">360</td> </tr> <tr> <td class="tg-031e">Дисконт карты</td> <td class="tg-s6z2">30</td> <td class="tg-s6z2">1050</td> <td class="tg-s6z2">360</td> </tr> <tr> <td class="tg-031e">Визитки</td> <td class="tg-s6z2">5</td> <td class="tg-s6z2">175</td> <td class="tg-s6z2"></td> </tr> </table> </p> </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">Закладка №2</label> <div class="content"> <p> </p> <img src="http://placekitten.com/200/100"> </div> </div> <div class="tab"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3">Закладка №3</label> <div class="content"> <p>Содержание закладки №3</p> <img src="http://placedog.com/200/100"> </div> </div> <div class="tab"> <input type="radio" id="tab-4" name="tab-group-1"> <label for="tab-4">Закладка №4</label> <div class="content"> <p>Содержание закладки №4</p> <img src="http://placedog.com/200/100"> </div> </div> </div> </body> </html>