Search the Community

Ребят всем привет! Я только начал изучать верстку по видео урокам на ютубе. У меня есть свой макет который я купил у дизайнера. Решил с него поучиться верстать. Подскажите как правильно сделать шапку сайта. У меня все выравнивания происходят с помощь отрицательных "margin". Судя по урокам, везде делают это с помощью flex и тому подобное. Дизайн очень оказался сложным и там много проблем с фонами. Дайте пару советов и подсказок как продолжать дальше. Заранее спасибо ? Вот: макет: Мой сайт

Не получается разобраться, как работает свойство vertical-align. В таблицах работает, а для строчных элементов почему-то нет. Пытаюсь сделать вертикальное выравнивание, но текст не сдвигается <div style="height: 200px"><span style="vertical-align: middle">Текст</span></div> Как правильно устанавливать это свойство?

Добрый день! Может кто нибудь объяснить мне, не смышленому верстальщику-новичку, как мне выравнить текст по центру картинок? Я уже все перепробывал,но что то не клеится(( на первом скрине я отразил суть проблемы, а на втором то, как это должно быть по макету! (я заменил одну картинку, т.к. это не особо важно, но сути это не меняет) в html я объединил это все (картинки\текст) в один див и дал ему класс. далее я дал класс всем текстовым материалам и ид для каждой картинки, дабы сделать более гибкую настройку, но все пошло не по плану. в CSS класс текста выглядит так: .contenttext { display: inline-block; font-family: 'Raleway', Arial, sans-serif; margin-top: 60px; font-weight: 500; font-size: 130%; } Видимо задавать margin-top: 60px; вообще лишнее, по скольку вместе с текстом перемещаются и картинки. Парюсь уже битый час над этим. Если кто сможет, подскажите, что можно предпринять для разрешения проблемы.

Имеется конструкция типа: <p><img src="image.jpg"></p>Как можно с помощью CSS, указать выравнивание по середине?

Добрый день! Помогите пожалуйста разобраться. Хочу сделать, что бы при клике на кнопку, в любом положение (сверху или снизу) объект который открывался, был по центру. То есть, по сути - нажал на кнопку, страница выровнялась относительно кнопки по центру. У меня есть два таких объекта. Один построен на iframe <div id="ch1"> <div id="closeButton" onclick="document.getElementById('ch1').style.display='none'">Х</div> <iframe src="/Summer2015_02/" width="1070" height="508">Ваш браузер не поддерживает плавающие фреймы!</iframe> </div> <div class="showcase">Подробнее<input type="button" value="" onclick="document.getElementById('ch1').style.display='block'"> </div> другой - document.getElementById <div id="divwin"> <div id="closeButton" onclick="document.getElementById('divwin').style.display='none'">Х</div> <p>...</p> </div> <div id="btopen"> <p>...</p> <input type="button" value="Подробнее..." onclick="document.getElementById('divwin').style.display='block'"> </div>

Здравствуйте! Как выровнять блок по середине относительно двух крайних? На codepen лежит свёрстанный слайдер у которого красный блок прижимается к левому, как мне его выставить по середине относительно двух? http://codepen.io/anon/pen/XJVKNg Спасибо!

В этом разделе автор предложил способ выравнивания слоя по центру веб-страницы при фиксированной высоте слоя. Есть ли способ выровнять слой по вертикали с помощью стилей, если высота блока неизвестна заранее (зависит от контента)? Например, http://codepen.io/anon/pen/waCKq?editors=110 Нужно, чтобы слой wrap отображался по центру веб-страницы для браузеров IE7+ и последних версий FF, Sa, Ch, Opera. Примечание: использование inline-block и псевдоэлемента wrap:before (для совместимости с IE7 в указанном выше примере display:inline-block установлен для строчного элемента span, а вместо псевдоэлемента использован span class="before"), увы, не привело к желаемому результату при высоте родительского слоя .wrap{height:100%}, хотя, как видно из примера, отлично работает для центрирования слоя krug внутри слоя ramka.

<div class="news"> <img src="img/no_image.png" > <h4>Российские цены на BMW M6 Купе</h4> </div>Всем привет. Как сделать, что бы заголовок h4 позиционировался с правой стороны картинки?

Добрый день. Помогите, пожайлуста, советом. Хотелось бы чтобы выглядело вот так. В Firefox так и выглядит. А вот в других браузерах (Opera, Chrome) - вот так 1. Выравнивание select`а не по центру. Пробовал через padding, но тогда все "элементы выбора" select`а сдвигаются на фиксированное количество пикселей. А они имеют разную длину. И получается один по центру, а остальные со сдвигом вправо (в зависимости от длины). 2. Число в поле number отображается не четко по центру, а со сдвигом влево. Если наводишь на само поле - справа появляется стрелочки и тогда вроде по центру. Но без наведения виглядит не эстетично. Может можно эти стрелочки как-то принудительно отображать, а не только при наведении. Код: <style>input { font-size:15px; text-align:center; width:195px;}select { font-size:15px; text-align:center; width:202px; padding: 1px;}</style><body><select name="terminal_type"><option value="unknown" >Не установлено</option><option value="entry" selected>Въездной</option><option value="exit">Выездной</option></select><input type="number" name="id_owner" value="1" maxlength="5" min="0" max="65535"></body>

Добрый день! В соответствии со стилями CSS у меня выравнивание текста, расположенного внутри тега <p>, идет по ширине, т.е. "justify". Подскажите, пожалуйста, можно ли прописать в CSS-файле свойства для тега <p>, содержащего тег <a>, внутри которого, в свою очередь, находится тег <img>? Другими словами, мне необходимо, чтобы картинка, являющаяся ссылкой, расположенная внутри тега <p>, выравнивалась по центру. Иначе, мне вручную приходится сейчас прописывать для всех таких абзацев <p style="text-align: center">

Добрый вечер. Есть блок. .main_content { min-width:980px; max-width:1200px; margin: 0 auto; } В нем блок <ul class="ulip"> <li> <img src="icons/rst.png" alt="Только камеры РСТ" title="Только камеры РСТ"></li> <li> <img src="icons/vozvrat_14.png" alt="Возврат товара в течении 14-ти дней" title="Возврат товара в течении 14-ти дней"></li> <li> <img src="icons/garanty.png" alt="Официальная гарантия" title="Официальная гарантия"></li> <li> <img src="icons/dostavka.png" alt="Доставка по России" title="Доставка по России"></li> <li> <img src="icons/price.png" alt="Прозрачные цены" title="Прозрачные цены"></li> </ul> .ulip { padding-top:20px; margin:0 auto; } Блок <ul> никак не могу отцентровать по середине. Что не так? Вот ссылка http://yadi.sk/d/11C4rKB0EA4Hj на целый фрагмент Заранее спасибо за помощь.

Здравствуйте! Скажите пожалуйста как выровнять ссылки по середине? - скриншот | ссылка на проблему Я пробовал двигать паддингом и вроде бы все ок, но в других разрешениях отображается не по центру.

Дело вот в чем. С помощью такого кода добавил в горизонтальное меню своего сайта форму поиска: function menu_search($items){ $search = '<li class="search">'; $search .= '<form method="get" id="searchform" action="/">'; $search .= '<nobr><input type="text" class="field" name="s" id="s" placeholder="Search..." />'; $search .= '<input type="submit" class="submit" name="submit" id="searchsubmit" value="Go" /></nobr>'; $search .= '</form>'; $search .= '</li>'; return $items . $search; } add_filter('wp_nav_menu_items','menu_search'); Получилось так: Т.е. как бы форма поиска стала очередным пунктом меню. Захотел я сделать красиво и выровнять эту форму вместе с кнопкой по правому краю. Сделать это мне не удалось и я решил прописать для input параметр margin-left: input { vertical-align: middle; margin-top: 7px; margin-left: 300px; } Получилось вот так: Т.е. сначала форма ввода отступила от левого края 300px, а потом и кнопка. Подумал я и дописал position: input { vertical-align: middle; margin-top: 7px; position: absolute; margin-left: 300px; } Получилось так: Вопрос: что мне надо сделать, что бы кнопка шла аккурат за формой ввода?

Собственно все мы знаем как выровнять по вертикале одно строчный текст с помощью line-height: высота блока родителя. Но если высота измениться то надо и меня line-height, оговорюсь сразу: мною движет лень. Я В общем стараюсь придерживаться принципа если можно сделать с помощью html+css то делаем так(В общем с внедрением css3 и html5 прибегать к отказу от js стал чаще).Так вот вопрос что было бы лучше использовать в этом случае http://jsfiddle.net/F89Cd/ .