CODEWITHSUNDEEP
htmlcssfont-face
Gabriel Santos
Gabriel Santos

Reputation: 4974

Wrong font-face

see the menu at http://di20.com.br/novosite/ When I define line-height:100% the menu text does not work as expected, getting enough space at the top of the source.

@font-face {font-family: 'AGAvantGarde';src: url('../fonts/agagcb.eot');src: url('../fonts/agagcb.eot?#iefix') format('embedded-opentype'),url('../fonts/agagcb.woff') format('woff'),url('../fonts/agagcb.ttf') format('truetype'),url('../fonts/agagcb.svg#AGAvantGarde') format('svg');font-weight: normal;font-style: normal;}

body {
    font-family: 'AGAvantGarde',Arial;
    line-height: 100%;
}

Thanks!

UPDATE

The problem is SOLVED, and are related to the font, not to my CSS or HTML, thanks to all!

Upvotes: 0

Views: 159

Answers (3)

Max Chandler
Max Chandler

Reputation: 513

It seems that you need to add a vertical negative margin to your UL, or increase the height of the #topo-container, and add the css property, whilst increasing the height of the div for the required affect. 

#topo-container {
 background: url(../images/menu_bg.png) repeat-x;
 top: 0;
 height: 57px; - Change height for more space
 background-size: 100%;

}

This would allow more space for your text, be aware that background-size is a CSS3 property, you could always repeat the background vertically as it doesn't seem to change.

Changing the font of your website doesn't seem to change the layout at all, it's not font related as stated.

I'm not sure what you're asking here!

Hope this helps...

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

Setting line-height:100% is somewhat abnormal: it means setting text solid. But it may be OK in special cases like this, and it need not relate to the problem at hand.

It is difficult to suggest solutions when the problem has not been described explicitly; “does not work as expected” does not say much. But I suppose the menu items should be higher up, so that they do not extend to the area containing changing images—at least it is very difficult to read tiny text against varying image backgrounds. One of the reasons seems to be that the menu, with id=menu, has a top margin of 20px.

Upvotes: 1

Max Chandler
Max Chandler

Reputation: 513

Thats because the second line of your menu is classed as another menu below a horizontal element.

This is the reason that "DESIGN ARQUITETURA" is underneath the current menu, as it isn't in the same line!

<ul><li class="item-135"><a href="/novosite/index.php?option=com_k2&amp;view=itemlist&amp;layout=category&amp;task=category&amp;id=3&amp;Itemid=135" >Design</a></li><li class="item-136"><a href="/novosite/index.php?option=com_k2&amp;view=itemlist&amp;layout=category&amp;task=category&amp;id=4&amp;Itemid=136" >Arquitetura</a></li></ul>

The code there is creating a Second UL inside the first UL.

Hope this helps!

Upvotes: 1

Related Questions