Inserir imagem entre campos

[wilson 0]

olá pessoal

 

estou começando com css e tenho uma duvidazinha

como faco pra colocar uma imagem entre 2 <li>

 

assim : | home | cadastro | teste |

<li>home</li>

<li>cadastro</li>

<li>teste</li>

 

meu css ta assim:

#tudo #topo #menu ul li{	display: block;	float: left;	margin: 0 4px;	padding: 6px 8px 8px;	display: block;	background-image: url(imagens/cabecalho_divide_menu.gif);	background-repeat: no-repeat;	background-position: right top;}

mas a imagem nao ta beeem no meio... fica todo desconfigurado

 

obrigado

 

abç

 

Wilson

[Giovani 104]

Se está começando, vai pelo básico: http://forum.imasters.com.br/index.php?showtopic=124982

 

Em relação a sua dúvida sobre menu, pesquise no fórum que existem "n" posts.

No seu caso específico um border já ajudará.

 

[]´s

[wilson 0]

Border não dá porque é uma imagem q eu quero colocar ai...Obrigado pelos links.AbçWilson

[Giovani 104]

Você quer colocar uma imagem assim: |, é isso?

 

Se for, me diga qual a diferença para essa borda aqui, |?

 

[]´s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[wilson 0]

nao nao... a imagem é diferente... esse PIPE eu só coloquei pra exemplificar melhor

[Giovani 104]

Tente definir um width para os <li> e jogue uma imagem com background.

Foi a idéia que surgiu agora na minha cabeça, devem existir outras possibilidades.

 

[]´s

[Guilherme Rambo 4]

Só por curiosidade, como é essa imagem que ficaria entre os itens? Não dá pra "simular" com border ou algo assim?[]'s

[wilson 0]

olá pessoal..

 

obrigado a todos que me ajudaram

 

resolvi assim:

 

#header {	float:left;	width:100%;	background:#DAE0D2 url("imagens/bg.gif") repeat-x bottom;	font-size:100%;	line-height:normal;  }#header ul {  margin:0;  padding:10px 10px 0;  list-style:none;  }#header li {  float:left;  background:url("imagens/left_on.gif") no-repeat left top;  margin:0;  padding:0 0 0 9px;  }#header a {  float:left;  display:block;  background:url("imagens/right_on.gif") no-repeat right top;  padding:5px 15px 4px 6px;  text-decoration:none;  font-weight:bold;  color:#765;  }

[wilson 0]

Olá Gio... obrigado por atualizar meu Post. eu esqueci o CodeAgora eu tenho mais uma duvida... não sei se existe possibilidade...como eu faria pra atualizar esta propriedade ID do meu menu sem dar um Refresh no site, sendo que já estou usando o onClick para mudar o conteúdo do site.

<li id="current"><a href="index.php">Home</a></li><li><a href="#" onclick="java script:Atualiza('quemsomos','1');">Quem Somos</a></li><li><a href="#" onclick="java script:Atualiza('cursos','1');">Curso de Estética</a></li>

o Resultado este código está em:www.wilsonsavegnago.com.br/teste/abçWilson

[Guilherme Rambo 4]

Recomendo que mude a classe, não o ID.

 

<li><a href="#" onclick="this.parentNode.className='current';Atualiza('quemsomos','1');">Quem Somos</a></li>

Pode otimizar pra separar isso do HTML, colocando o comando dentro da função "Atualiza"

 

[]'s

[wilson 0]

Olá INsideTua lógica está correta, mas tem necessariamente que ser no ID do <li> senao nao funciona. Voce sabe onde tem um tutorial sobre ajax que fala "pra que serve cada um desses comandos, tipo o ParentNode e tal?Obrigado amigo

[Guilherme Rambo 4]

http://www.w3schools.com - Busca ali no lado direito pelo nome da Função/Propriedade/Tag q você quer saber, pode ser de xHTML, XML, CSS, Javascript... esse eh um ótimo site pra consulta dessas coisas

 

PS: Não confunda qualquer coisa javascript com Ajax. Ajax é estritamente "Javascript Com XML, fazendo requisições assíncronas à um servidor", no nosso caso é apenas Javascript DOM

 

[]'s

[wilson 0]

Obrigado Inside... ja entendi o recado... tudo q era "xique" hehe com javascript eu chamava de AJAX.

 

Resolvi meu problema mudando os ID´s mesmo, entretanto, ele até funciona se eu clicar uma vez em cada um dos meus menus, mas se eu precisar voltar e clicar de novo, ele bagunça tudo... aí é um probleminha de lógica eu acho...

 

<ul>
<li id="atual"><a href="index.php">Home</a></li>
<li id="quemsomos"><a href="#" onclick="muda('quemsomos');javascript:Atualiza('quemsomos','1');">Quem Somos</a></li>
<li id="curso"><a href="#" onclick="muda('curso');javascript:Atualiza('cursos','1');">Curso de Estética</a></li>
<li id="distribuidor"><a href="#" onclick="muda('distribuidor');javascript:Atualiza('distribuidor','1');">Seja um Distribuidor</a></li>
<li id="produtos"><a href="#" onclick="muda('produtos');javascript:Atualiza('produtos','1');">Produtos</a></li>
<li id="cadastro"><a href="#" onclick="muda('cadastro');javascript:Atualiza('cadastro','1');">Seu Cadastro</a></li>
<li id="contato"><a href="#" onclick="muda('contato');javascript:Atualiza('contato','1');">Contato</a></li>
</ul>

e o meu script:

<script type="text/javascript">function muda(pagina){var y = document.getElementById(pagina);var m = document.getElementById('atual'); m.id = y.id;var x = document.getElementById(pagina);x.id = 'atual'; } </script>

O resultado está em:

http://www.wilsonsavegnago.com.br/teste/index2.php