Search the Community
Showing results for tags 'блок'.
Found 16 results
-
Бесплатный VPN - FineVPN.org | Telegram бот c бесплатным VPN - @FineVPNbot
Без ограничений по скорости, трафику и времени. Совершенно бесплатный и безлимитный. -
Проблема в следующем верстаю макет с PSD шаблона. Использую HTML и CSS. Прописал по порядку блоки Header. nav. main. в коде html. Добавил картинку и ссылки в блок header. открыл браузер что бы отобразить результат. и вижу. что блок main наехал на блок header. Вопрос: почему так получилось. Ведь одно из свойств блочных тегов - они начинаются с новой строки и занимают всю доступную ширину. (main. игнорирует свойство и не начинается с новой строки). как решить и почему произошло? Заранее благодарю всех за помощь Скрин прикрепляю. HTML <body> <header> <div class="logo"> <img src="..\matereal\images\logo.png" alt="logotip" class="logo__img"> </div> <nav> <a href="" class="nav" >home</a> <a href="" class="nav" >compane</a> <a href="" class="nav" >servise</a> <a href="" class="nav" >clients</a> <a href="" class="nav" >contacts</a> </nav> </header> <main> <div> <img src="" class="slaider" alt="slaider"> <p class="slaider__text__h1">веб-разработке\практика</p> <p class="slaider__text__h2"></p> </div> </main> <footer> </footer> CSS body { margin: 0; } header { margin: 0; border-top: 3px solid black; } .logo { margin:60,0,60,60; float: left; width: 49%; } nav { float: right; margin: 60,60,60,0; width: 51%; }
-
Подскажите пожалуйста как сделать такие блоки? Уже все перепробовал не могу понять почему не получается на плюсике сделать такой Bg. Буду очень благодарен вам)
-
Доброго времени суток, при написании одного из макетов встала проблема, нужно связать форму input с кнопкой, то есть задав параметр ввода через pattern="[a-z]{1,26}". Нужно сделать так чтобы при неправельно заполнены форме кнопка было не активной. <h2>Введіть Ключ</h2> <input id="key" class="form-control" pattern="[a-z]{1,26}" value="key" placeholder="Писати сюди"> <h2>Введіть слово</h2> <input id="slov" class="form-control" pattern="[a-z]{1,26}" value="hello" placeholder="Писати сюди"> <input class="btn btn-block btn-success" value="Закодувати" onclick="zakoduvaty5(this);" type="submit"> <h2>Закодоване слово</h2> <input class="form-control" id="zakodslov" readonly> <h2>Введіть код</h2> <input id="zakodslovo" class="form-control" pattern="[0-9 ]{1,50}" placeholder="Писати сюди"> <input class="btn btn-block btn-success" value="Розкодувати" onclick="rozkoduvaty5(this);" type="submit"> <h2>Розкодоване слово</h2> <input class="form-control" id="rez" readonly> примерно так это должно выглядеть, чуть не забыл 1 и 2 форма должны быть связаны. Благодарю за внимание, Всего самого лучшего вам.
-
Проблема заключается в том что мне нужно чтобы изображение было на левом краю до конца блочного элемента, а список чтобы был справа и также до конца блочного элемента. Это все в заголовке. https://jsfiddle.net/Lyguc520/3/
-
Возникла проблема с версткой такого блока как на картинке. Подскажите в каком направлении искать информацию?
-
Как сделать так, чтобы этот блок уменьшался по ширине экрана? На обычном ПК он максимально 960px в ширину. Я сделал изображение через тег <img> с шириной 100%, а блок с кружками со свойствами position: absolute; top: 50%; margin-top: -78px; right: 1.2%; width: 100%; Сами кружки прописаны так: margin: 0 0.9%; float: right; Но они сильно съезжают влево с фона при уменьшении разрешения. Как их оставить на своем месте и уменьшать динамически? Т.е. чтобы кружки (и их отступы) уменьшались вместе с блоками Вот что при уменьшении случается:
-
Приветствую. Подскажите, как для блока с изменяющимся ID прописать единый стиль. Поясняю: Имеется блок <div id="div-gpt-ad-1485257279370-0"></div> и цифры могут принимать различные значения, неизменным остаётся только "div-gpt-ad-", вот, как для такого блока можно задать стили css?
-
Всем добра, проблемка в следующим. Нужно например в блоке <div><img ="1"/><img ="2"/><img ="3"/></div> , разместить изображение(от 2 до 6 шт), например размер изображений width:200px; height: auto; А блок див ограничен width:760-780px, и !!внимание!! самое главное. Как сделать чтобы все лишние фотки прятались, и скролом их передвигал, подобие слайдера, но не слайдер.
-
День добрый. Столкнулся с такой проблемой как перемещение div бока. Сам сайт я пытаюсь как-то сделать адаптивным и мне нужно рядом с div болком поставить еще 1 div блок. Как мне это сделать? Проблема в том что если я буду переносить с помощью px или % то этот блок будет куда нибудь сносить (при других разрешениях экрана).Что делать P.S. Ссылка на сайт: http://fineway.net16.net/ .Как он должен выглядеть: http://imgur.com/TjsJiXv . HEEEELP!
-
Помогите решить проблему. У меня читыри блока 300 на 300 px верстка ботстрап. И при наведении на любой из этих высвечивался скрытый полупрозрачный блок с другим текстом и ссылкой. Нужно что бы они по ширине такие же были как и основные (адаптивные) Вот как то так
-
Здравствуйте уважаемые форумчане, почти доделал проект и начал приводить его в адаптивности и понял что вёрстка блока сделана не правильно так как имеется разный текста и фиксировать высоту блока будет не правильно. В вёрстке не эксперт и надеюсь на вашу подсказку, заранее спасибо. http://jsfiddle.net/sehwhhcu/ Я понимаю что на class="static" можно задать высоту и тем самым продлить фон, но я бы хотел что бы фон растягивался с учетом текста и что бы я не указывал под каждое расширение экрана высоту блока.
-
Собственно вопрос от новичка. Проще нарисовать на картинке чем описывать ситуацию на словах. Пытаюсь правильно расставить DIV'ы. При этом чтобы последовательность кода не рвать. (маленькие дивы идут подряд, большой соответственно находится НЕ в середине) Скорее всего здесь придётся поколдовать с css-параметром "display", хотя не уверен. http://i.imgur.com/ViusSLH.png Не нашел как залить картинку на сервер, выкладываю ссылкой.
-
Здравствуйте уважаемые форумчане. Проблема заключается в не переносе текста на след строку в браузере хром. в остальных переносится нормально. Что нужно добавить в свойства <h1>, чтобы все отображалось корректно? http://auto-rentgarant.com.ua/ru/catalog // пациент, .products ul li .info { position: absolute; left: 300px; top:0px; font-size: 12px;}.products ul li .info h1 { //кусок подозреваемого кода margin: 13px 0 5px 0; padding: 0; font-size: 14px;}.products ul li .info h1 a { color: #000; text-decoration: none;}.products ul li .info h1 a:hover { text-decoration: underline;} https://yadi.sk/i/Zd8OeKy-ekwp8 - не правильно https://yadi.sk/i/1yvSXvzFekwq3 - правильно
-
<div class="container"> <div class="content"> <div class="menu_2"> <ul> <li><a href=""><img src="img/home.png">Главная</a></li> <li><a href=""><img src="img/stat.png">Рукописи</a></li> <li><a href=""><img src="img/phone.png">Контакты</a></li> <li><a href=""><img src="img/lamp.png">Разработки</a></li> <li><a href=""><img src="img/music.png">Любимая музыка</a></li> </ul> </div> <div class="info"> <p>Главная - Портфолио, Вид новостей</p> </div> </div> </div>Как сделать, что бы блок "info" отображался справа блока "menu 2"? По умолчанию он отображается снизу.
-
Добрый день. Помогите решить следующую проблему: имеется резиновый шаблон (3 колонки), когда в среднюю колонку помещаю блок который шире её, шаблон не тянется, а этот блок просто выходит за пределы родительского. Как сделать чтобы родительский блок растягивался? Вариант задать min-width не подходит, т.к. на разных страницах может быть разный контент, и он будет или вмещаться в текущую ширину родителя, или тянуть его. <!DOCTYPE html> <html> <head> <title>Layout 1</title> <meta content="text/html; charset=iso-8859-1" http-equiv="content-type"> <meta content="HAPedit 3.1" name="generator"> <style type="text/css"> html,body{margin:0;padding:0} body{font: 76% arial,sans-serif} p{margin:0 10px 10px} a{display:block;color: #006;padding:10px} div#header{position:relative} div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B} div#header a{position:absolute;right:0;top:23px} div#content p{line-height:1.4} div#navigation{background:#B9CAFF} div#extra{background:#FF8539} div#footer{background: #333;color: #FFF} div#footer p{margin:0;padding:5px 10px} div#footer a{display:inline;padding:0;color: #C6D5FD} div#wrapper{float:left;width:100%} div#content{margin: 0 25%} div#navigation{float:left;width:25%;margin-left:-100%} div#extra{float:left;width:25%;margin-left:-25%} div#footer{clear:left;width:100%} </style> </head> <body> <div id="container"> <div id="header"> <h1>Header</h1> <a href="http://blog.html.it/layoutgala/layout01.zip">download this layout</a> </div> <div id="wrapper"> <div id="content"> <p> <strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very. </p> <p> very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p> <p> fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p> <p> column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p> <div style="width: 2000px; border: 1px solid black; background-color: yellow;">asd</div> </div> </div> <div id="navigation"> <p> <strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p> </div> <div id="extra"> <p> <strong>3) More stuff here.</strong> very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p> </div> <div id="footer"> <p>The footer. You can go to the <a href="http://blog.html.it/layoutgala/">index page</a>.</p> </div> </div> </body> </html> Посмотреть код: http://pastebin.com/K2nCfrR5 Скачать шаблон: http://clck.ru/8ncR2
