Search the Community
Showing results for tags 'отступы'.
Found 6 results
-
Приветствую! Проблема: добавил блоку псевдоэлемент (треугольный ). Абсолютно спозиционировал и отодвинул вправо на величину, равную ширине этого псевдоэлемента. Во всех браузерах работает нормально, но в некоторых мобильных Chrome добавляется отступ примерно в 1px между элементом и псевдоэлементом. От куда он? Как убрать? //Блок .news-img_tag-category { color: #fff; font-size: 0.75em; width: 71px; height: 20px; text-align: center; } //Псевдоэлемент .news-img_tag-category::after{ content:""; border-left:10px solid #812780; border-right:10px solid transparent; border-top:10px solid transparent; border-bottom:10px solid transparent; position:absolute; right:-20px; }
-
У текста есть внутренние отступы, например h1 размером 68px имеет высоту 93px. Как с этим бороться кроме как подбором отступа если хочешь сделать пиксель в пиксель?
-
Что-то не получается убрать этот промежуток. Съехало все после того, как добавил картинку звездочки в элемент списка. <body> <div class='wrapper'> <header> <img src="images/logo.png"> <div class='right'> <a href="#"><img src="images/search.png"></a> <button type='submit'>LOGIN or REGISTER</button></div> <div class='clearfix'></div> </header> <nav> <ul> <li><a href="/home/">Home</a></li> <li><a href="/products/">Products</a></li> <li><a href="/about/">About</a></li> <li><a href="/pages/">Pages</a></li> <li><a href="/blog/">Blog</a></li> <li><a href="/contact/">Contact</a></li> </ul> <ul class="tool"> <li> <a href="/wish/"> <div><img src="images/star.png"></div> <div>30</div> </a> </li> <li> <a href="/wish/"> <div><img src="images/card.png"></div> <div>30</div> </a> </li> </ul> </nav> <div class="main-item"> <div class="price">$145.99</div> <h2>Pinck shoes</h2> <h2>2013 Collection</h2> <div class='desc'>Nunc non fermentum nunc. Sed ut ante eget leo tempor consequat sit amet eu orci. Donec dignissim dolor eget..</div> </div> <ul class='action-menu'> <li><a href="/view/"><img src="images/eye.png"></a></li> <li><a href="/wish/"><img src="images/wish.png"></a></li> <li><a href="/share/"><img src="images/share.png"></a></li> <li><a href="/buy/"><img src="images/buy.png"></a></li> </ul> </div></body>body { margin: 0; padding: 0; font-family: Calibri;}header{background-color: black; padding: 0 230px; position: relative;}header>img { padding: 10px 0;}header .right { float: right;}header a{ padding: 15px 20px;}header button { border: none; height: 45px; font-size: 12px; padding: 10px 20px; color:#7e7e7e; background-color: #d3d3d3;}nav { background-color: white;}nav a{ text-decoration: none; color:#242424;}nav ul { margin: 0; margin-left: 230px; padding: 0; display: inline-block;}nav li { list-style-position: inside; font: 10pt 'Arial', sans-serif; display: inline-block; background-color: #d3d3d3; padding:25px; margin-right: -4px; font-weight: bold;}.tool { margin-left: 206px; }.tool>li { display: inline-block; width: 90px; line-height: 10px; text-align: center; vertical-align: middle;}.tool>li:first-child{ line-height: 1px; text-align: center; vertical-align: middle;}.tool>li>a>div { display: inline-block; }
-
Меню сверстано с использованием float: left; Ширина меню 980пикселей. На скрине видно, что при 100% все хорошо, а вот при зуме в 75% последний элемент переносится на следующую строку. Каждый пункт меню, он же li имеет отступы padding: 18px 13px 18px 13px; но не имеет заданной ширины. Почему то при масштабе эти отступы то увеличиваются, то уменьшаются, а следовательно пункт меню то влазит то нет. Как мне сделать меню одной строкой, фиксированной ширины 980пикс., чтобы пункты никуда не переносились? Нашел только 1 решение - прописать ширину всех li, но так не получится, не все влезет. Может быть указать отступы в pt или em? Пробую но не получается. Сейчас заметил что проблема в размере шрифта, при зуме он увеличивается и расталкивает блоки, как можно зафиксировать размер шрифта в меню?
-
Здравствуйте! Помогите пожалуйста разместить фон top_menu.png для кнопки background-image: url(top_menu-l.png), url(top_menu-r.png), url(top_menu.png); background-position: top left, top right, left 5px right 5px; background-repeat: no-repeat, no-repeat, repeat;
-
Ребят здравствуйте .я только учусь взял PSD из бесплатных шаблонов и пробую верстать,в принципе после прочтения уроков на вашем сайте за несколько дней смог сверстать маленькое меню.а здесь застопорился все мое меню почему то кривое .думаю напутал с отступами и размерами, не найду только где. Вот так должно быть как у меня получилось. не совсем понял как поставить такие черточки между меню как на первом скрине, возможно это у меня из за неправильных отступов такие вот код ps. Подскажите пожалуйста ребят.заранее спасибо HTML <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Maket</title> <link rel="stylesheet" href="style.css"></head><div id="maket"> <div class="heder-top"> <div class="logo"> <a href="#"><img src="images/GoodInc_02.png"></a> </div> <div class="nevsletter"> <p>Newsletter</p> </div> <div class="Contakt"> <p>Contact</p> </div></div> <div class = "clear"></div> <div class="navigation"> <div class="icon"></div> <div> <ul class="navigations"> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Staff</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <div class="quiclinks"></div> <div class="dropdown"></div> <div class = "clear"></div> </div><body> </body></html>CSS * { margin: 0px; padding: 0px;}body { background: #ebebeb;}#maket { width: 938px; height: 100%; margin: 0 auto;}.heder-top { margin: 0px; padding: 0px; background: #373737; width: 938px; height: 67px;}.logo { float: left; margin-right: 300px;}.nevsletter { display:inline-block; width: 172px; height: 35px; background-image: url(images/nav_05.png); padding-left: 10px; margin-right: 20px; margin-top: 15px; line-height: 30px; color: #bbb; text-align: center;}.Contakt { display: inline-block; width: 172px; height: 35px; background-image: url(images/nav_05.png); padding-left: 10px; margin-right: 20px; margin-top: 15px; line-height: 30px; color: #bbb; text-align: center}.clear { clear:both; content:""; display:block; height:0; font-size:0; overflow: hidden;}.navigation { background: #474747; width: 938px; height: 65px; display: inline-block; margin-top: -5px;}.icon { background-image: url(images/icon_09.png); float: left; width: 50px; height: 65px;}li:hover { border-bottom: 5px solid #f26c4f; }.navigations li:before { content: "|"; color: #fff; padding-right: 2px;}.navigations li { display: inline-block; list-style: none; margin: 2px; padding: 10px; height: 37px; width: 50px;}.navigations li a { list-style: none; margin: 10px; color: #eee; text-decoration: none; font: 12px Arial; line-height: 40px; }
