Jump to content


Photo

[resolvido]duvida Sobre Displays, Como Ajustar Um Menu


  • Faça o login para participar
2 replies to this topic

#1 Kahor

Kahor

    12 Horas

  • Usuários
  • 230 posts
  • Sexo:Masculino

Posted 10/11/2009, 08:23

Galera, to fazendo um site para a empresa em que estou trabalhando e estou fazendo o seguinte com o menu:

Tem 4 links, com imagens de fundo diferentes de cada, e cada link eu jogueio uma div para que a imagem subisse com o mouse hover ficando assim:

#menu  {width: 801px; margin-left : 99px;margin-top: -10px;}

#menu #menuempresa a {
		background: url('menuempresa.png') no-repeat 0 0;
		height: 58px; width: 198px;
		display: inline-block;}
#menu #menuempresa a:hover {background: url('menuempresa.png') no-repeat 0 -62px; height: 58px;}


#menu #menuprodutos a {
		background: url('menuprodutos.png') no-repeat 0 0;
		height: 58px; width: 198px;
		display: inline-block;}
#menu #menuprodutos a:hover {background: url('menuprodutos.png') no-repeat 0 -62px; height: 58px;}

Só que eu quero que fique um do lado do outro e estao em baixo

Segue imagem:

Posted Image

Edição feita por: Victor Hugo Odo, 10/11/2009, 15:10.


#2 Victor Hugo Odo

Victor Hugo Odo

    Doutor

  • Administradores
  • 779 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP
  • Interesses:Compartilhar conhecimentos!

Posted 10/11/2009, 08:27

Kahor, posta o link da página, ou o código completo.
Assim fica difícil...

[]'s

Fórum WMO - Administrador


#3 Kahor

Kahor

    12 Horas

  • Usuários
  • 230 posts
  • Sexo:Masculino

Posted 10/11/2009, 08:56

Sorry..

Segue código, link ainda nao tem, comecei ontem e nao tenho server =/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Visual Comunicação - Pedreira/SP</title>

<style type="text/css">

* {margin: 0;}
body {margin: 0; background-color:#900;}
img, img a, a {text-decoration: none; border: 0;}

#top img {z-index: 1000px;}

#menu  {width: 801px; margin-left : 99px;margin-top: -10px; display: inline-block;}

#menu #menuempresa a {
		background: url('menuempresa.png') no-repeat 0 0;
		height: 58px; width: 198px;
		display: inline-block;}
#menu #menuempresa a:hover {background: url('menuempresa.png') no-repeat 0 -62px; height: 58px;}


#menu #menuservicos a {
		background: url('menuservicos.png') no-repeat 0 0;
		height: 58px; width: 198px;
		display: inline-block;}
#menu #menuservicos a:hover {background: url('menuservicos.png') no-repeat 0 -62px; height: 58px;}

#menu #menuprodutos a {
		background: url('menuprodutos.png') no-repeat 0 0;
		height: 58px; width: 198px;
		display: inline-block;}
#menu #menuprodutos a:hover {background: url('menuprodutos.png') no-repeat 0 -62px; height: 58px;}

#menu #menucontato a {
		background: url('menucontato.png') no-repeat 0 0;
		height: 58px; width: 198px;
		display: inline-block;}
#menu #menucontato a:hover {background: url('menucontato.png') no-repeat 0 -62px; height: 58px;}

</style>
</head>

<body>



<div id="top">
	<img src="bglogotop.png" />
</div><!-- /top -->



<div id="menu">

	<div id="menuempresa">  <a href="#"> </a> </div>
	<div id="menuprodutos"> <a href="#"> </a> </div>
	<div id="menuservicos"> <a href="#"> </a> </div>
	<div id="menucontato">  <a href="#"> </a> </div>
	

</div><!-- /menu -->




</body></html>

Consegui.

Joguei floats lefts nas divs do menu, acho que to dormindo ainda heheheheh

Desculpem o incomodo :assobio:




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq