Menu horizontal com sprites

[felipecesar 0]

Estou criando um menu horizontal com sprites, utilizando o background position, só que não estou conseguindo fazer o seguinte.

 

queria que tudo ficasse no canto da tela sem espaços tentei um monte de coisa.

 

meu style.css

 

#menu { margin: 0px; clear: both;  }
  #menu li {
float: left;
list-style: none;
}
     #menu li a { display: block; width: 1024px; height: 30px; background:url(imagens/menu.jpg) no-repeat; }
     #menu li a span { display: none; }
	    #menu li .home { background-position: 0px 0px; }
		#menu li .home:hover { background-position: 0px 0px;}

 

no html da página principal!

 

<ul id="menu">

			<li><a href="#" class="home"><span>Home</span></a></li>			
</ul>

[Mateus Avila Isidoro 8]

A tua fonte é Arial, e o background se repete. Creio que fazer sprite para o teu menu é uma péssima idéia. Recorte 1 px de largura do meu menu, e faça-o repetir na extensão do #menu.

 

Mateus

[William Bruno 1501]

você tem um css reset ?

 

* { margin: 0; padding: 0; }

[Mateus Avila Isidoro 8]

usa o reset do eric meyer, que é melhor. Mas o código dele dá pra fazer sem sprites. Bem mais leve.

[William Bruno 1501]

usa o reset do eric meyer, que é melhor.

Opa, bom dia Mateus.

 

você pode me explicar pq você acha o css reset do Eric Meyer "melhor" ?

 

Mas o código dele dá pra fazer sem sprites.

dá sim.

 

 

Bem mais leve.

Se ele usar o sprite de forma correta, como por exemplo para o fundo normal, e o fundo com :hover, então é melhor q use sprite.

mas também apoio que onde tem texto, deve ser escrito.

[Thiago Moraes 32]

Me deparei com um problema similar aqui...na verdade tenho um tab menu com css e jquery e gostaria de colocar icones em cada item do menu. Se puderem me ajudar ficarei muito agradecido.

 

CSS do menu:

 

ul.tabs {
list-style:none;
margin: 0;
padding:0;
}
ul.tabs li {
float: left;
margin-left:20px;
text-align: center;
color: #66CCFF;
padding: 40px 0 22px 0;
display:block;
cursor:pointer;

}
ul.tabs li:hover {
color: #FFFFFF;
}
ul.tabs li.active {
background:url(imagens/seta.gif) bottom center no-repeat;
color: #FFFFFF;
}

 

HTML:

 

          <ul class="tabs">
           <li class="active" rel="tab1">Home</li>
           <li rel="tab2">item1</li>
           <li rel="tab3">item2</li>
           <li rel="tab4">item3</li>
           <li rel="tab5">item4</li>
         </ul>

 

Ja uso uma imagem de fundo na li para os itens ativos, que seria uma seta abaixo de cada item, mas gostaria de colocar um icone em cima também.

 

Agradeço a atenção.

[_Leandro_ 0]

Tente utilizar um <span></span>

 

<ul class="tabs">

<li class="active" rel="tab1"><span></span>Home</li>

<li rel="tab2"><span></span>item1</li>

<li rel="tab3"><span></span>item2</li>

<li rel="tab4"><span></span>item3</li>

<li rel="tab5"><span></span>item4</li>

</ul>

 

E neste span você insere a imagem como background.

Não se esqueça que vais ter que setar o span como display:block; e float:left;

 

Att

Leandro

http://www.maisumpixel.com.br

[Thiago Moraes 32]

Vlw, vou tentar aqui...mas eu consigo setar um estado hover para essa imagem, dentro do span? Me perdi legal nesse menu :wacko:

[Mateus Avila Isidoro 8]

Vamos lá;

 

1) O mestre Eric Meyer criou um reset de css, que faz com que o css defina um padrão mínimo de desenvolvimento cross browser, reduzindo a quantidade de hacks.

 

2)Se a fonte fosse com gradiente interno, ou mesmo uma fonte que ficaria toda descaracterizada no navegador, compensaria usar sprite. Mas é arial e sem efeito (no máximo uma pequena shadow de fundo branco), não vejo necessidade de carregar 20 kb se dá pra fazer esse código em menos de 1kb.

 

Em relação ao post do nosso amigo lá, eu fiz uma vez uma lista com ícones ao lado, usando 2 classes na tag span. O CSS tá aqui embaixo:

 

.spriteZone{background: url(../images/sprite.png);display:block;float:left}
.spriteZone{width:22px;height:22px;margin: -2px 2px 0}
.inicio{background-position:-24px 0}
.pedidos{background-position: 0 0}

 

<ul>
<li><a href="inicio.php"><span class="spriteZone inicio"/>início</a></li>
<li><a href="pedidos.php"><span class="spriteZone pedidos"/>pedidos</a></li>
</ul>

 

Só lembrando que o sprite varia em relação ao tamanho dos objetos internos, e se ele é em horizontal é mais leve do que ele ser em vertical.

[William Bruno 1501]

1) O mestre Eric Meyer criou um reset de css, que faz com que o css defina um padrão mínimo de desenvolvimento cross browser, reduzindo a quantidade de hacks.

para isso, os meus 4 anos de experiência com Tableless, me dizem que essas 4 regras:

 

* { padding: 0; margin: 0; list-style: none; border: none; }

já são mais doque suficientes.

 

 

compensaria usar sprite.

não sabemos se ele está usando o sprite com texto, ou somente para trocar o fundo que tem aquele degradê.

[Thiago Moraes 32]

Tive algumas dificuldades pra posicionar a imagem usando span, levando em conta que a minha intençao era colocar o icone acima do titulo da li.

 

Bom, não sei se foi a maneira mais ortodoxa, mas resolvi meu problema atribuindo um id com o background pra cada li no menu. Agora tenho um icone diferente pra cada item do menu.

[Mateus Avila Isidoro 8]

/* http://meyerweb.com/eric/tools/css/reset/ 
  v2.0 | 20110126
  License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

 

Para WBruno:

Magicamente tu dá suporte para HTML5 usando apenas um plugin de javascript? Esse reset ai em cima é mais detalhado, ajuda a remover alguns hacks. Necessariamente, apenas dando retirando padding aqui e ali não resolve o problema.

 

E não se esqueça que chrome tem um pequeno problema padrão com line-height que flutua as vezes.