Search the Community
Showing results for tags 'div'.
-
Здравствуйте, дорогие друзья! Я начинающий верстальщик. Выполняя макет столкнулась с такой проблемой: при уменьшении масштаба все элементы макета начинают плыть. Помогите пожалуйста решить эту проблему и если можете дайте рекомендацию по улучшению кода. Ссылка на проект: http://rghost.ru/7WnZCZt5Y
-
Доброе время суток! Нашел в инете такую идею реализации блоков. Пытался ее реализовать 2 дня, не все получается, что хочется. Можете помочь кодом? Дело в том, что она еще и резиновая. Спасибо большое.
-
Здравствуйте. Извиняюсь, если пишу не в ту категорию, ибо не знаю, к какой категории отнести мой вопрос. Появилась нужда сделать чтобы в <iframe> выводилась определенная часть контента сайта, т.е. контент в определенном блоке. Была мысль реализовать это через :select(Если не ошибаюсь) в CSS но как сделать, чтобы все выводилось я не понял. Такое вообще можно реализовать не прибегая к js или php?
-
Сделал блок div ссылкой. Появилась фиолетовая рамка. Как её убрать?
lsw posted a question in HTML Coding
<body><table class="top"><div class="layer1"><a href="remzona.html"><img src="1.png"></a></div><div class="layer2"><a href="index.html"><img src="2.png"></a></div></table> <table class="bottom"><div class="layer3"><a href="kuzremont.html"><img src="3.png"></div><div class="layer4"><a href="avtomoika.html"><img src="4.png"></div></table> </body>CSS .top { margin: auto; } .bottom { margin: auto; } .layer1 { background-color: white; /* Цвет фона слоя */ padding: 0px; /* Поля вокруг текста */ margin: 0px; /* внешний отступ */ float: left; /* Обтекание по правому краю */ width: 250px; /* Ширина слоя */ height: 331px; }a:link { border:none; text-decoration: none; color: white; } a:visited { border:none; text-decoration: none; color: white; } a:active { border:none; text-decoration: none; color: white; } a:hover { border:none; text-decoration: none; color: white; }стиль layer1 идентичен остальным Я в этом деле новичек, так что сильно не ругайте! -
Помогите сверстать div контейнеров. ссылка на то что есть http://potfel.esy.es/uchis-upravlyt.htm нужно чтобы div контейнеры с темами статей шли друг за другом без больших разрывов в 2 столба <div class="work-area"> <div class="post"> <a href="radislav.htm"> <img src="uchis-upravlyt/img/radislav.jpg"> <h2>Правила ведения бизнеса в эпоху перемен</h2> <p>Рять советов бизнес-тренера Радислава Гандапаса</p> </a> </div> <div class="post"> <img src="uchis-upravlyt/img/workdream.jpg"> <h2>Как стать работодателем мечты</h2> </div> <div class="post"> <img src="uchis-upravlyt/img/bocharova1.jpg"> </div> <div class="post"> <img src="uchis-upravlyt/img/hostel.jpg"> </div> <div class="post"> <img src="uchis-upravlyt/img/failureinbis.jpg"> </div> </div> <div class="right-reklama">Это правая часть </div>.work-area{border: 1px solid red;overflow: hidden;float: left;width: 620px;padding: 0px;}.post {border: 1px solid red;position : relative;width : 295px; /* for IE 6 */margin:5px 5px 5px;/*сверху, слева.справа, снизу*/float: left;overflow: hidden;border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:5px; -khtml-border-radius:10px;}.post:hover{border: 1px solid #37D4FF;}
-
Добрый день форумчане. Прошу вашего мудрого совета. Имею небольшие поверхностные знания в Web-программирование. Стоит задача в следующем: Есть маршрутизатор Microtic под управлением routeros настроенный под режим хотспота. У хотспота есть страница авторизации, которая позволяет зарегистрироваться в гостевом режиме. Родная страница передела в элементарную, содержащую картинку и ссылку авторизации. Ссылка специфического характера, составная, понимается только самим роутером, поэтому чтобы её использовать - надо находиться на этой самой странице авторизации. И теперь собственно проблема - нужно встроить в страницу другую страницу, возможно целый сайт (для рекламных целей). Просто редирект в этом случае непомогает, так как ссылку нельзя применить из вне. Как я понимаю это должно как-то работать с помощью DIV и фрэймов. Послушаю с радостью ваши предложения!
-
Здравствуйте, подскажите как решить проблему: хочется сделать адаптивный дизайн, застрял практически в самом начале. вот что имеется: идея такая. Это полный размер: а это мелкий : я набросал кое что, оно работает но я уверен что не правильно: Css #header_line{ width: 100%; height: 500px; background: url(../images/header.png) #333;}#contener{ max-width: 1000px; height: 500px; margin: 0 auto;}#block_contener{ display: inline-block;}#block1{ width: 500px; height: 500px; background: #eee; float:left;}#block2{ width: 500px; height: 500px; background: #000; float: right;}@media screen and (max-width: 350px) {#contener{ max-width: 1000px; height: 500px; margin: 0 auto;}#block_contener{ display: block;}#block1{ width: 91%; max-height: 220px; background: #eee; float:left; margin: 5% 5% 5% 4%;}#block2{ width: 91%; max-height: 220px; background: #000; float: right; margin: 1% 5% 5% 4%;}}html <div id="header_line"> <div id="contener"> <div id="block_contener"> <div id="block1"></div> <div id="block2"></div> </div></div>Помогите разобраться очень прошу.
-
Здравствуйте, форумчане! Подскажите, правильно но ли использовать для верстки такого блока таблицу: http://joxi.ru/GrqVBLOhxq3amz Или это далеко в прошлом и сейчас так никто не делает? Если лучше делать другим способом, то подскажите каким. Спасибо!
-
Привет, форумчане! Подскажите, как можно выровнять div по правому краю без использования flot и относительного либо абсолютного позиционирования. Имеется вот такой вот div.pagination, внутри которого лежит div.pages, что и нужно сдвинуть в правую сторону блока pagination: http://joxi.ru/gmvjVqJuM9XQma Для вложенного блока установил свойство 'display: inline-block'. Пробовал сдвинуть с помощью text-align - не помогло И margin'ы тоже не выручают. Что посоветуете? Заранее спасибо!
-
Всем привет! Опытные верстальщики помогите разобраться, почему блок с таблицей опускается ниже всех остальных. Да и последний div тоже не на своем месте. Почему то немного опущен. http://cssdeck.com/labs/8madbvfx Никак не могу понять в чем дело. Спасибо!
-
Здравствуйте! Вот пример http://jsfiddle.net/09wv3w6w/ Блоку задано размер 800px. В нем сделал список li, а в списке сделал ссылки а. li сделал отображение inline-block, а ссылкам сделал тоже inline-block и ширину 200px, а высота 40, а проблема вот в чем: Последний блок списка выпадает за предел основного блока. в списке 4 элемента, а значит 200*4=800, я правильно понял? Подскажите в чем проблема. Спасибо.
-
Всем доброго времени суток, столкнулся с проблемой. Понимаю что решаться она должна просто, но все же: При вставке блока комментов соц сетей, пропадает правая боковая ячейка (сайт сделан при помощи <table>). Сам блок: <br><h3><font size="5">Ваши комментарии:</font></h3> <section class="tabscomment"> <input id="tab_2" type="radio" name="tab" checked="checked" /> <input id="tab_3" type="radio" name="tab" /> <input id="tab_4" type="radio" name="tab" /> <label for="tab_2" id="tab_l2">Вконтанте</label> <label for="tab_3" id="tab_l3">Facebook</label> <label for="tab_4" id="tab_l4">Google+</label> <div style="clear:both"></div> <div class="tabs_cont"><div id="tab_c2"> <div align="left"><img src="http://howmakeit.ru/img/vk_comm.jpg" border="0" width="580" height="35"></div> <div id="vk_comments"></div> <script type="text/javascript">VK.init({apiId: 4729083, onlyWidgets: true});</script> <script type="text/javascript">VK.Widgets.Comments("vk_comments", {limit: 10, width: "580", attach: "*"});</script> </div><div id="tab_c3"> <div align="left"><img src="http://howmakeit.ru/img/fb_comm.jpg" border="0" width="580" height="35"></div> <a rel="nofollow" class="fb-mod" target="_blank" href="https://developers.facebook.com/tools/comments?id=541042475998202">Интерфейс модератора</a> <div class="fb-comments" data-href="http://homeuyt.ru" data-width="580" data-numposts="10" data-colorscheme="light"></div></div><div id="tab_c4"><div align="left"><img src="http://howmakeit.ru/img/gp_comm.jpg" border="0" width="580" height="35"></div><script src="https://apis.google.com/js/plusone.js"></script><div class="g-comments" data-href="<?php the_permalink(); ?>" data-width="580" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD"></div> </div></div></section>CSS к блоку (soc.css: .tabscomment {position:relative;margin:40px 0;} /* width:600px;*/ .tabscomment label {display:block;float:left;font-family: Verdana;font-weight: bold;background:#f5f5dc; /* Цвет фона кнопок */border-radius:6px 6px 0 0; /* Радиус закругления кнопок */color:#5d7fa3;cursor:pointer; /* Вид курсора при наведении на кнопки */position:relative;top: 2px;/* Высота подъема кнопки при наведении курсора */padding:5px 0;width:100px; /* Длинна кнопок */margin:0 5px 0 0; /* Отступы от кнопок */text-align:center;z-index:1;}.tabscomment input {position:absolute;left:-9999px;} .tabscomment label:hover {font-family:Verdana;font-weight:bold;background:#E7E1DD;top:0;-webkit-transition: all 0.2s ease-in-out;} #tab_1:checked ~ #tab_l1, #tab_2:checked ~ #tab_l2, #tab_3:checked ~ #tab_l3,#tab_4:checked ~ #tab_l4 {font-family:Verdana;font-weight:bold;background:#5d7fa3;color:#fffffe;top:0px;} .tabs_cont {background:#f7f7f7;border-radius:0 6px 6px 6px;padding:10px 15px;position:relative;z-index:2;} .tabs_cont > div {position:absolute;left:-9999px;top:0;opacity:0;opacity .45s ease-in-out;} #tab_1:checked ~ .tabs_cont #tab_c1, #tab_2:checked ~ .tabs_cont #tab_c2,#tab_3:checked ~ .tabs_cont #tab_c3,#tab_4:checked ~ .tabs_cont #tab_c4 {position:static;left:0;opacity:1;} .comments-title {background:#577aa2;font-family:verdana;font-weight:bold;color:#fffffe;padding:5px;border-radius:10px 0 10px 0;} .fb-mod {font-face:verdana;color:#5d7fa3;font-size:8pt;}a { outline: none; color: #5d7fa3;}a:hover { color: #dae2e8;}PHP к блоку: <div id="comments" class="comments-area"><?php if ( have_comments() ) : ?> <h2 class="comments-title"> <?php printf( _n( 'One thought on “%2$s”', '%1$s thoughts on “%2$s”', get_comments_number(), 'twentytwelve' ), number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' ); ?> </h2> <ol class="commentlist"> <?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?> </ol><!-- .commentlist --> <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?> <nav id="comment-nav-below" class="navigation" role="navigation"> <h1 class="assistive-text section-heading"><?php _e( 'Comment navigation', 'twentytwelve' ); ?></h1> <div class="nav-previous"><?php previous_comments_link( __( '← Older Comments', 'twentytwelve' ) ); ?></div> <div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', 'twentytwelve' ) ); ?></div> </nav> <?php endif; // check for comment navigation ?> <?php /* If there are no comments and comments are closed, let's leave a note. * But we only want the note on posts and pages that had comments in the first place. */ if ( ! comments_open() && get_comments_number() ) : ?> <p class="nocomments"><?php _e( 'Comments are closed.' , 'twentytwelve' ); ?></p> <?php endif; ?> <?php endif; // have_comments() ?> <?php comment_form(); ?> </div>Сама страница - http://homeuyt.ru Прошу помощи более развитых в данном вопросе. PS: сайт без движка.
-
Приветствую всех посетителей этой темы! Сейчас учу CSS и при создании шаблона для будущего сайта возникли некоторые проблемы,а далее: (см.скриншот: http://hkar.ru/xj7y) 1.Хотелось бы сделать блок контента и блок меню резиновыми,а не так чтобы их ширина и высота выравнивались только по тому,что находится внутри самих блоков,при этом эти блоки должны сохранить тот маленький отступ от краёв экрана и от других элементов. 2.Футер уже прижат к низу сайта,но проблема в том,что блок контента и блок меню игнорируют футер и продолжают идти дальше,хотелось бы чтобы эти два блока останавливались перед футером и не продолжали идти дальше,при этом имея маленький отступ как и с других сторон. Вот так примерно хотелось бы всё это видеть,при этом чтобы всё было резиновым (см.скриншот: http://hkar.ru/xj82) P.S Ну и скажу заранее: спасибо вам за любую помощь,даже за простые советы,я не заставляю вас прям писать для меня весь необходимый код,если вам конечно не лень то отдельное спасибо таким людям,прошу особо не придираться к моему ужасному коду,я и сам понимаю что у меня там миллион ошибок,но все мы когда-то начинали... Далее друг за другом идёт сам код (HTML и CSS): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>*название*</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="header"></div> <div id="menu"> <form> <p>Ваш Email адрес:<br> <input type="text" name="Login Email"> <br> <p>Пароль:<br> <input type="password" name="Login Password"> <br> <br> <input type="submit" value="Вход"> <a href="Registration.html">Регистрация</a> </form> </div> <div id="content"> <p align="center">Добро пожаловать!</p> <hr noshade> <p>Текст текст текст текст текст текст:</p> <ul> <li>Текст текст текст текст текст текст</li> <li>Текст текст текст</li> <li>Текст текст текст текст текст текст текст</li> <li>Текст текст текст текст текст текст текст текст текст</li> </ul> <hr noshade> <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p> </div> <div id="footer"></div> </body> </html> body { margin: 0; padding: 0; font-size: 75%; font-family: Arial; color: #000000; background: #fff; } #header { background: #FFD700; height: 40px; border-radius: 0px 0px 20px 20px; } #menu { background: #32CD32; float: left; position: absolute; margin: 10px; border: 1px solid blue; padding: 10px; height: 100%; border-radius: 20px; } #content { background: #32CD32; position: absolute; height: 100%; float: right; margin: 10px; margin-left: 16%; border: 1px solid blue; padding: 10px; padding-top: 4px; border-radius: 20px; } #footer { width: 100%; height: 40px; position: absolute; bottom: 0; background: #FFD700; border-radius: 20px 20px 0px 0px; }
-
Здравствуйте. Требуется помощь в написании одной страницы сайта. Код страницы с которой требуется помощь. Код CSS: Задача стоит следующим образом, нужно разместить изображение карты и на карту слоями нанести определенные надписи на определенных городах. При размещении записей у меня уплывает низ первого блока (div class="div-map"). Т.е. длинна страницы при большом количестве городов очень становится длинной. Фото как получается Как решить такую проблему? P|S код черновой. сильно не ругайте.
-
Есть 4 блока (div) друг под другом, каждый из них занимает всю клиентскую область (100 hv, 100 wv). Есть фиксированное меню с 4 пунктами, по клику - скролл к нужному блоку. Необходимо разместить в центр каждого из div по одному section ровно по центру. С центрированием знаком, пробовал три разных способа. К примеру остановимся на этом section{ width:20px;height:20px;margin:auto;position:absolute;top:0;left:0;right:0;bottom:0; } Проблема в следующем, section встают нормально в центр блока, но только не каждый в своем, а все в первом. Кто-нибудь в курсе как исправить?
-
Привет всем! Ребята, помогите пожалуйста, всю голову сломал с позиционированием блоков. У кого есть какие варианты? Верстка резиновая. Прикладываю картинку.
-
Как сделать, чтобы в конце невлезающего текста ставилось многоточие? На сайте написано, что для этого блок должен иметь overflow: auto, scroll или hidden. Но почему тогда не работает этот пример? http://jsfiddle.net/waegtL15/
-
Люди добрые, помогите. Не получается поднять заголовок в самый верх div-a и сократить интервал между ним и текстом. В гугле не забанен, но все равно решение найти не могу ( Пробовал vertical-align - не получается
-
Здравствуйте. Прошу посмотреть мой первый сверстанный шаблон. Сразу говорю там нет Меню, Слайдера и круги не заполнены. Меня, по большому счету, интересует правильность кода. Мне кажется я слишком много делаю обрамляющих div'ов. Так ли это? Ну и в целом не помешает критика по всем остальным критериям. Макет: http://bruimafia.ru/temp_1/template.png Сайт: http://bruimafia.ru/temp_1/
-
Никак не могу совладать с вёрсткой... Есть задача сделать резиновый div на 90% высоты экрана с изборажением на бекграунде. Туда нужно вписать текст, затемнить бекграунд сеткой и выровнять текст по вертикали. Что я сделал. Разместил внутри первого дива второй, у которого бекграунд сеткой. Всё бы хорошо, но теперь не могу растянуть его по размеру родителя и отцентрировать текст. Функционал можно глянуть тут: http://jsfiddle.net/gumbert/ddkd1bs9/3/ Как мне можно его победить?
-
Подскажите как решить следующую проблему, есть li в нём div, при наведении мыши к диву должен применится hover, но он применяется только к вложенным блокам а не к родительскому диву! то есть бэкграунд меняется например у 'news_title_header' когда мышка находится на нем, а у всего 'news_parent' не меняется. такая конструкция <li> <div class="news_parent"> <div class="news_title_header"> <a data-post="5" href="news/novost-3">Новость 3</a> <i class="c_time">01.11.2014</i> </div> <div class="news_short"><p>краткое описание</p></div></div></li>стиль: #news li {margin-bottom: 5px;padding: 5px;background: rgb(252, 252, 252);border-radius: 5px;}#news .news_parent:hover { background: rgb(229, 255, 238);}получается так: а должно быть так:
-
Всем привет, есть 3-и дива уже на готовом сайте в левом div1 список в правом div2 товар а третий div3 находится с низу (там находится меню), проблема в том что первый div1 длинный и он налезает на div3. Хотел попросить вашей помощи друзья как сделать так что бы div3 зависел от div1 а не от div2. Просто уже готовый сайт и можно было бы div1 и div2 объединить в div но нет возможности поэтому могу пользоваться только css(. Заранее благодарен!)
-
я только начинаю учить програмирование, и возникла проблема... http://dropmefiles.com/061578 1 фото когда окно браузера га весь екран 2 фото когда я делаю его меньше... блоки просто сскользают, что делать? или код надо кинуть?
-
Добрый день! Приветствую всех! Только зарегистрировался на форуме, и хотел посоветоваться. Следующая ситуация Мне надо расположить блоки один за другим, так чтобы они выходили за границы экрана, и не съезжали вниз. У меня есть опыт в верстке, и такую ситуацию решал 2 способами (но обе на мой взгляд, являются ужасными) 1) У внешнего diva задаю фиксированную ширину (например 20000px, ну или динамически считаю js если возможно), внутренние делаю float:left и все ок 2) У внутренних делаю position:absolute, и c js ставлю left:0px; left:1280px итд. Что тоже ужасно __________ Хотелось бы сделать как то без js, и более устойчивую систему - эти варианты какие то "на соплях" СПАСИБО
-
Все привет, столкнулся с токой проблемой, что высота моих div'ов разная, и они не могут прилипнуть друг к другу как это исправить? блоки идут в ряд с помощью float: left
