Jump to content
  • 0

Меню (проблема с отступами)


Евгений_SB
 Share

Question

Ребят здравствуйте .я только учусь взял PSD из бесплатных шаблонов и пробую верстать,в принципе после прочтения уроков на вашем сайте за несколько дней смог сверстать маленькое меню.а здесь застопорился все мое меню почему то кривое .думаю напутал с отступами и размерами, не найду только где. 

Вот так должно быть 

3752375.png

 

как у меня получилось.

3744183.png

 

не совсем понял как поставить такие черточки между меню как на первом скрине, возможно это у меня из за неправильных отступов такие 

вот код 

 

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; }
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Не видно что там, если швейная линия то вместо solid - dotted, или картинка, для нижнего подчерка используй ту же нижнию обводку для li, чтобы опустить вниз используй padding-bottom

Link to comment
Share on other sites

  • 0
.header-menu {	width: 940px;	height: 69px;	margin: 0 auto;	background: #474747;}.header-menu ul {	list-style: none;	margin: 0px 30px;	padding: 25px;}.header-menu ul li {	float: left;	width: 110px;	border-right: 1px #767676 solid;	text-align: center;}.header-menu ul li:last-child {	border-right: none;}.header-menu a:hover {	border-bottom: 4px solid #f26c4f;	text-shadow: none;	padding: 23px 0;}.header-menu img {	float: left;	position: relative;	left: 35px;	top: 25px;}.header-menu ul li a {	font-weight: normal;	font-size: 13px;	color: #cecece;}

Сам такой же новичок как ты, верстал этот же макет, скорее всего тут гора ошибок, но возможно почерпнешь что нибудь для себя.

Link to comment
Share on other sites

  • 0

Шрифты тоже не соответствуют макету. И почему-то все элементы вне <body>. В фотошопе есть замечательные инструменты: линейка и направляющие, чтобы замерить отступы и размеры элементов, а в браузерах есть инспекторы.

Link to comment
Share on other sites

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By mn8156
      Приветствую! 
      Проблема: добавил блоку псевдоэлемент (треугольный ). Абсолютно спозиционировал и отодвинул вправо на величину, равную ширине этого псевдоэлемента. Во всех браузерах работает нормально, но в некоторых мобильных 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; }  

    • By RaGe2244
      У текста есть внутренние отступы, например h1 размером 68px имеет высоту 93px. Как с этим бороться кроме как подбором отступа если хочешь сделать пиксель в пиксель?
    • By sp0k1e
      Что-то не получается убрать этот промежуток. Съехало все после того, как добавил картинку звездочки в элемент списка.
      <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; }
    • By Rooner
      Меню сверстано с использованием float: left; Ширина меню 980пикселей. На скрине видно, что при 100% все хорошо, а вот при зуме в 75% последний элемент переносится на следующую строку. Каждый пункт меню, он же li имеет отступы padding: 18px 13px 18px 13px; но не имеет заданной ширины. Почему то при масштабе эти отступы то увеличиваются, то уменьшаются, а следовательно пункт меню то влазит то нет.
       

      Как мне сделать меню одной строкой, фиксированной ширины 980пикс., чтобы пункты никуда не переносились?
      Нашел только 1 решение - прописать ширину всех li, но так не получится, не все влезет.
      Может быть указать отступы в pt или em? Пробую но не получается.

      Сейчас заметил что проблема в размере шрифта, при зуме он увеличивается и расталкивает блоки, как можно зафиксировать размер шрифта в меню?
    • By alexander85
      Здравствуйте! Помогите пожалуйста разместить фон 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;
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy