- 0
-
Similar Content
-
By Shiza
Вопрос наверное глуповат, но как сделать я не понимаю.
Есть блок с position relative в нем есть ul, который абсолютно позиционирован по правому краю. Сейчас top стоит 50% и все точки добавляются вниз, да и выглядит не так, как задумано:
Как можно позиционировать так, чтоб он всегда был ровно в центре:
Количество пунктов (li) может быть произвольным и обертку я добавить не могу:
http://jsfiddle.net/ytjh8gn1/
-
By Doomsday
Есть 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 встают нормально в центр блока, но только не каждый в своем, а все в первом. Кто-нибудь в курсе как исправить? -
By hike
В этом разделе автор предложил способ выравнивания слоя по центру веб-страницы при фиксированной высоте слоя.
Есть ли способ выровнять слой по вертикали с помощью стилей, если высота блока неизвестна заранее (зависит от контента)?
Например, 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.
-
By tolik_ke
Я только начал свой путь в этом деле. Решил попрактиковаться,скачал шаблон,решил его посильней изменить. Решил сделать резиновую(адаптивную) верстку,с горем пополам справился. Вот теперь столкнулся с проблемами и целый день не могу справиться,голова кипит, знающих прошу помочь,пока я с ума не сошел.
1)съехавшие картинки-ссылки ни при каких условиях не хотят возвращаться и становиться горизантально. Нужно чтобы они всегда были в центре окна браузера.
2)точно так же в самом центре нужно чтобы стояла картинка баннер вверху.
3)самое верхнее меню надо чтобы своим правым краем не пересекала красную линию. Пытался поменять как только можно,что знаю,и меню только немного уезжает вверх.
Пожалуйста,вытащите меня из тупика.
/* CSS Document */ html,body { height: 100%; max-height: 1280; margin:0; padding: 0; }body { font:11px Arial, Helvetica, sans-serif; color:#535353; background:#FFFDE4 url(../images/bg.jpg) left top repeat-x; margin:0px; padding:0px;}#container { width:80%; margin:0px auto; text-align:justify; }.banner { position:center; /* Положение слоя от левого края */ margin-left: 15%; /* Отступ слева */}.header { height:32px; background:#1B1B1B; text-align:right;}.workzone { padding:28px 0px 0px 0px;}#sidebar { float:left; margin-left: 22%; border: 1px solid #333; /* Параметры рамки вокруг */ margin-right: 20px; margin-bottom:45px; width: 200px; /* Ширина слоя */ padding: 5px; /* Поля вокруг текста */ }#content {font-size: 20px;text-align:justify; background: #eee 100; /* фон контента */ margin-right: 22%; margin-left:; padding: 20px ; /* поле слева */}.latestprojectzone { padding:20px 0px 0px 0px; margin: 20px 0px 0px 0px;}.projectgallery { border-bottom:1px solid #CCCAB6; padding-bottom:20px; color: #000000;}.project-img { width:50px; height:50px; margin-left:10px; margin-right:10px; float:left; display:block; }.clear { clear:both; margin:0px; padding:0px;}.footer { background:url(../images/footer.jpg) left bottom repeat-x;}.footerinside { width:950px; margin:0 auto; text-align:right; padding:11px 16px 45px 0px; color: #F3F3F3;}/* Menu Styles Start Here */a { color:#000000; text-decoration:underline;}a:hover { text-decoration:none;}.topmenu { padding:7px 0px 0px 0px;}.topmenu ul { margin:0px; padding:0px}.topmenu li { display:inline; border-right:1px solid #ffffff; padding:0px 10px 0px 10px;}.topmenu li a{ font:bold 11px Tahoma, Arial, Helvetica, sans-serif; color:#ffffff; text-decoration:none;}.topmenu li a:hover { color:#cccccc;}.footerlink {}.footerlink ul { margin:0px; padding:0px;}.footerlink li { display:inline; border-right:1px solid #ffffff; padding:0px 10px 0px 10px;}.footerlink li a{ color:#ffffff; font-weight:bold; text-decoration:none;}.footerlink li a:hover { color:#cccccc;}ul#menu {list-style-type:none; margin:0; padding:0;}ul#menu li a{ color:#909090; /* цвет букв в обычном состоянии */ background: url(images/vert_menu.png) no-repeat 0 0; /* путь к изображению */ text-decoration:none; width: 200px; height: 55px; display:block; border:none; text-shadow: #ddd 2px 2px 0; /* цвет тени у букв в обычном состоянии */ }ul#menu li a:hover{ background-position: 50% 100%; width: 200px; height: 55px; display:block; color:#fff; /* цвет букв в активном состоянии */ text-shadow: #1185EE 2px 2px 0; /* цвет тени у букв в активном состоянии */}ul#menu li a span{ font-family:sans-serif; /* Шрифт букв */ font-size:18px; /* размер букв */ padding:17px 0 0 20px; display:block; }/* Menu Styles End Here *//* Text Styles Start Here */h1 { font:26px Georgia, Arial, Helvetica, sans-serif; color:#000000; padding:0px; margin:0px 0px 20px 5px;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>ООО «ГенСтройСервис» </title><link href="stylesheet/style.css" rel="stylesheet" type="text/css" /></head><body><div id="container"> <div class="header"> <div class="topmenu"> <ul> <li><a href="aboutus.html">О компании</a></li> <li><a href="projects.html">Услуги компании</a></li> <li><a href="services.html">Аренда</a></li> <li><a href="support.html">Вакансии</a></li> <li><a href="privacy.html">Партнеры</a></li> <li style="border:none;"><a href="contact.html">Контакты</a></li> </ul> </div> </div> <div class="banner"> <img class="content_img" src="images/bannerlogo.jpg" usemap="#logo"> <map id="logo" name="logo"><area shape="rect" alt="" title="" coords="23,19,523,126" href="index.html" target="_self" /> </div> <div class="clear"></div> <div class="clear"></div> </div> <div class="workzone"> <div id="sidebar"> <ul id="menu"> <li><a href="aboutus.html"><span>О компании</span></a></li> <li><a href="projects.html"><span>Услуги компании</span></a></li> <li><a href="services.html"><span>Аренда</span></a></li> <li><a href="support.html"><span>Вакансии</span></a></li> <li><a href="privacy.html"><span>Партнеры</span></a></li> <li><a href="contact.html"><span>Контакты</span></a></li> </ul> </div> <div id="content"> <h1>ООО «ГенСтройСервис»</h1> Общество с ограниченной ответственностью «ГенСтройСервис» организовано в апреле 2007 года. Основной профиль нашей кампании – строительство наружных объектов/сетей теплоснабжения, водоснабжения и канализации. В период с 2007 по 2014 гг. ООО «ГенСтройСервис» участвовало во многих крупных и значимых строительных проектах Северо-Западного региона РФ, в частности в 2014 году подходит к завершению 3-х летний период комплекса работ по устройству внутриплощадочных инженерных сетей теплоснабжения, канализации и водоснабжения объекта: «Следственный изолятор на 4000 мест в Санкт-Петербурге» - «Кресты». <br /> <br /> ООО «ГенСтройСервис» располагает штатом квалифицированных сотрудников, парком спецтехники и оборудования, которые позволяют решать любые по сложности производственные задачи. </div></div> <div class="clear"></div> <div class="latestprojectzone"> <h1></h1> <div class="projectgallery"> <div style="height:113px;"> <table> <tr> <div class="projectimg"><a href="#"><img src="images/project1.jpg" alt="" border="0" /></a></div> <div class="projectimg"><a href="#"><img src="images/project2.jpg" alt="" border="0" /></a></div> <div class="projectimg"><a href="#"><img src="images/project3.jpg" alt="" border="0" /></a></div> <div class="projectimg"><a href="#"><img src="images/project4.jpg" alt="" border="0" /></a></div> <div class="clear"></div> <div class="clear"></div> </div> <div> <div class="projecttxt">Наши награды</div> <div class="projecttxt">Документация</div> <div class="projecttxt">Лицензии</div> <div class="projecttxt">Черный список</div> <div class="clear"></div> </div> </div> <div class="clear"></div> </div> </div> <div class="clear"></div> </div> </div> <div class="clear"></div> </div> <div class="clear"></div></div><div class="clear"></div><div class="footer"> <div class="footerinside"> <div class="footerlink"> </div> </div></div><div class="clear"></div></body></html>
-
By gnomikprazdnik
Имею такую структуру:
<div id="header"><div id="logo"></div></div><style>#header {height: 100%} #logo img{ width: 80%;}</style>Как задать вертикальное центрирование блоку "#logo"?
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
krissm8
Всем привет. Помогите центрировать меню категорий магазина. Выравнивание идет по левому краю, а хотелось бы центрировать их. Центрирование получается, если пункты в одну строчку.
Link to comment
Share on other sites
3 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.