@fontface

andys · April 17, 2011

Привет! Какая то проблема! не подрубается шрифт

проверил путь, имя.

Можете помочь?

спасибо

@font-face { 
	font-family: AGOpus; 
	src: url(../fonts/agopus.ttf);
            }

Edited April 17, 2011 by andys

Gaspode · April 17, 2011

@font-face:

Двоеточие не нужно.

andys · April 17, 2011

это опечатка(

в коде её нет

простите

не работает

_____________

а вот была всё таки!спасибо!

какой то глупый первый пост получился на этом форуме!

Gaspode, спасибо Вам!

Edited April 17, 2011 by andys

Gaspode · April 17, 2011

Страницу тогда покажьте.

UPD

Gaspode, спасибо Вам!

Всегда пожалуйста)

Edited April 17, 2011 by Gaspode

andys · April 17, 2011

подскажите ещё одни момент

Edited April 17, 2011 by andys

andys · April 17, 2011

чтобы не создавать лишнюю тему

посмотрите пжста что мне это поле создаёт? жёлтым выделено

 <body>
<div id="site">
	<div id="logo">
    компания 
    </div>
    <div id="menu">
    	<ul>
        		<li><a href="#"> О компании </a></li>
                <li><a href="#"> Бухгалтерские услуги </a></li>
				<li><a href="#"> Прайс </a></li>
                <li><a href="#"> Новости </a></li>
        		<li><a href="#"> Контакты </a></li>
       </ul>


    </div>


</div>


</body>


/* CSS Document */
* { margin: 0px; padding: 0px;}

@font-face { 
	font-family: AGOpus; 
	src: url(../fonts/agopus.ttf);
}

body { 
	background-color:#fcf9f9;
}

#site { 
	width: 1000px; 
	height: auto; 
	margin: 0 auto; 
	background-color:#FFFFFF;
}

#logo { 
	width: 190px; 
	height: auto; 
	border:#CCCCCC dotted thin; 
	padding-top: 90px;
	padding-left:0px;
	display:inline-block;
	color:#000000;
	font: 16px AGOpus
}

#menu { 
	width:auto;
	height:auto;
	display: inline-block;
	border:#CCCCCC dotted thin}

#menu li  {
	display: inline-block;
	list-style-type:none;

}

http://cs4437.vkontakte.ru/u2394720/119480027/z_23195ff7.jpg

Edited April 17, 2011 by andys

psywalker · April 17, 2011

Ключевое слово - display: inline-block;

Gaspode · April 17, 2011

По-моему, это inline-block вам его создаёт. Отодвиньте менюшку вручную влево. Ну или плавающими элементами сделайте всё.

ЗЫ А в чём прикол всех этих height: auto и width: auto, если это дефолтные значения?

Edited April 17, 2011 by Gaspode

psywalker · April 17, 2011

ЗЫ А в чём прикол всех этих height: auto и width: auto, если это дефолтные значения?

А это называется "Безвыходность" :facepalmxd:

andys · April 17, 2011

спасибо

а почему он его создаёт? можно немного теории?

Gaspode · April 17, 2011

Как ни странно, если уберёте перевод строки между блоками, это поле исчезнет:

<div id="logo">
    компания 
    </div><div id="menu">

Мне бы тоже кто объяснил =)

Edited April 17, 2011 by Gaspode

andys · April 17, 2011

А это называется "Безвыходность"

я бы назвал правда это двухнедельный опыт html, но вам наверное виднее

спасибо, нигде ещё не встречал, что переавод строки между тэгами создаёт какие то поля

если не трудно разъясните пожалуйста

psywalker · April 17, 2011

я бы назвал правда это двухнедельный опыт html, но вам наверное виднее
спасибо, нигде ещё не встречал, что переавод строки между тэгами создаёт какие то поля
если не трудно разъясните пожалуйста

Всё просто, это обычные переводы строк, из-за которых получаются пробелы. Соедини li и ты увидишь, что они пропадут.

andys · April 17, 2011

хааааа) простые пробелы...точняк!!!! спасибо Вам!

psywalker · April 17, 2011

хааааа) простые пробелы...точняк!!!! спасибо Вам!

Ага, точняк! :facepalmxd:

andys · April 17, 2011

если можно ещё один момент!

не создаю тем, чтобы не засорять форум

вопрос также теоритеческий...


#menu {
	display: inline-block;
	border:#CCCCCC dotted thin;
	margin-left: 50px;
}


#menu li {
	display: inline-block;
	list-style-type:none;
	text-indent:40px;
	padding-right: 40px;
	font: 16px AGOpus;
}

почему расстояния справа и слева разные..? справа больше

indent и padding как они учитывают рамку вокруг?

подскажите пожалуйста!

http://cs4437.vkontakte.ru/u2394720/119480027/y_89d393be.jpg

Edited April 17, 2011 by andys

psywalker · April 17, 2011

margin-left: 50px;

andys · April 17, 2011

оно отвечает за отступ блока #menu от #logo, по моим соображениям влиять не должно

_________________

попробовал, меняю до 0px - нифигашечки

Edited April 17, 2011 by andys

Int · April 17, 2011

Вроде ничего справа не больше, всё одинаково. А вообще, непонятная картинка. Да и зачем в меню text-indent? Элементы меню обычно однострочные.

andys · April 17, 2011

Вроде ничего справа не больше, всё одинаково. А вообще, непонятная картинка. Да и зачем в меню text-indent? Элементы меню обычно однострочные.

больше-больше

text-indent для отступа конечно, меню из списка,

как видно из кода, inline-block, нужно разлепить буковки, я выбрал text indent...это не рациоанльно? если да, то почему

спасибо

фота плохая, согласен, косяк

пжста, ещё одна

http://cs4437.vkontakte.ru/u2394720/119480027/z_f48b8213.jpg

Edited April 17, 2011 by andys

andys · April 17, 2011

также появилась непонятный пробел под #menu...после увеличения шрифта в блоке #logo (там где Компания написано)

прилагаю код для удобства

<body>
<div id="site">
	<div id="logo">
    <a href="index.html">Компания</a>
    </div><div id="menu">
    	<ul>
        		<li><a href="#"> О компании </a></li>
                <li class="backgrmenu"><a href="#"> Бухгалтерские услуги </a></li>
				<li class="backgrmenu"><a href="#"> Прайс </a></li>
                <li class="backgrmenu"><a href="#"> Новости </a></li>
        		<li class="backgrmenu"><a href="#"> Контакты </a></li>
       </ul>


    </div>


</div>



* { margin: 0px; padding: 0px;}

@font-face { 
	font-family: AGOpus; 
	src: url(../fonts/agopus.ttf);
}

body { 
	background-color: #000000;
}

#site { 
	width: 1000px;  
	margin: 0 auto; 
	background-color:#FFFFFF;
}

#logo { 
	width: 190px;
	border: #CC3399 dotted thin; 
	padding-top: 90px;
	padding-left:30px;
	display:inline-block;
	color:#000000;
	font: 31px AGOpus;


}

#logo a {
	color:#000000;
	text-decoration:none;

}


#menu {
	display: inline-block;
	border: #3300CC dotted thin;
	margin-left: 0px;
}

#menu li {
	display: inline-block;
	list-style-type:none;
	text-indent:37px;
	padding-right: 29px;
	font: 14px AGOpus;
}

.backgrmenu {
	background-image:url(../img/bgnav.gif);
	background-repeat:no-repeat;
}

#menu li a {
	color:#999999;
	font: 16px AGOpus;
	text-decoration:underline;
}

что имеем

http://cs4437.vkontakte.ru/u2394720/119480027/z_c770d9ed.jpg

ИТОГО

1) почему требуются разные значения у margin и text-indent

2) почему появился блок под #menu

СПАСИБО

Edited April 17, 2011 by andys

psywalker · April 17, 2011

1) почему требуются разные значения у margin и text-indent
2) почему появился блок под #menu

1. Не понял юмора, ты же сам такие им отступы ставишь.

2. Виновата выравнивание строки по базовой линии, обнули line-height: 0; у меню, а у пунктов сделай его снова нормальным.

andys · April 17, 2011

1. Не понял юмора, ты же сам такие им отступы ставишь.

имею ввиду, почему чтобы обеспеечить примерно одинаковые отступы в каждом пункте меню я должен прописывать значения с разницей почти в 10px

разве текст-индэнт и падинг в этом случае не будут дейстовать одинаково?

За второй пункт спасибо. а что значит сделай нормальным?)

там косяк в картинке...написано марджин, а использую я падинг

Edited April 17, 2011 by andys

Int · April 18, 2011

Так margin-left тоже отступ даёт.

Теперь понятно с отступами. Тут нужно firebug'ом поглядеть, сразу всё станет понятно.

andys · April 18, 2011

так margin-left: 0px ведь

спасибо

psywalker · April 18, 2011

так margin-left: 0px ведь
спасибо

Дружище, тебе нужно прочитать хотя бы книжек 5 для понимания вещей. Начни с этого сайта, потом перейдёшь к книгам.

Sign In

@fontface

Question

Link to comment

Share on other sites

29 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information