[Resolvido] Menu liquido = submarino

[donato 0]

Olá pessoal, estou tentando aqui um menu tipo do submarino mas não consigo resultado parecido ele redimenciona errado, alguem sabe como desenvolvo algo parecido.

 

 

abraços

[inforsis 1]

Bom Dia donato!

Desculpe, mais não entendi sua dúvida/problema. Poderia ser mais especifico, passar um link para o pessoal visualizar o problema, e/ou postar o código do que você tem até o momento detalhando o erro, e informando o resultado que você quer.

Sempre confira as Busca do Fórum iMasters os termos que falam em relação a criação de tópicos.

E também tem um tópico do gio! que auxilia a criar um tópico corretamente.

Como Criar um tópico para seu problema

E não esqueça de usar a busca antes de postar possa ser que encontre o que procura.

Busca do Fórum iMasters

 

Bom no momento essas são as unicas dicas que posso te passar. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[donato 0]

Olá! Desculpe, o layout é esse: http://www.ourofino.com/web/teste2/index2.html. Eu to parado no menu pq ele não redimenciona legal, gostaria que fizesse tipo o do submarino, o link do que estou começando a programar é esse: www.ourofino.com/web/portal , comecei agora, mas barrei no menu, ele não dimenciona junto com a página, fica com espaços e e não quebra legal.

 

 

CSS:

body  { font-family: Arial, Verdana, Helvetica, sans-serif; margin: 0; padding: 0;}

#topo { display: inline; padding: 0px; } 

#esquerdo ul{overflow: hidden;	position:relative; left:0px; font-size:11pt; list-style:none; float: left; width: 180px; background: #FFFFFF; padding: 10px 0; }


#esquerdo ul li{margin-top: 0px;  font-size: 14px; list-style:none;	float: left;	width: 173px; background: #FFFFFF;top:784px;}

#barramenu{margin:0px 0px 25px;}

#menutopo {height: 21px; margin: 0 0 30px; width: 178px;top:0;	padding: 0 0 25;}

#direito {	float: right; width: 170px; background: #FFFFFF; padding: 5px 2px 2px 3px; }

#centro {margin: 0 180px 0 180px;  padding: 0 1em 0 1em; background:#E9E9E9;} 

#footer p {argin: 0; 	padding: 10px 0; }

.clearfloat { clear:both;  height:0;   font-size: 1px;  line-height: 0px;}

#logo {position:absolute; display:inline; width:250px; margin: 2px 0px 10px 3px; overflow: auto; z-index: 0;	left: 0px;	top: 0px;}

#menu {overflow: hidden; width: 100%;}

#menu ul {margin: 0px; left: 0px; list-style:none; pading: 0px;}

#saude {width:12%;	padding: 7px;}

#pet {width:11%; padding: 7px;}
			
#agro {width:11%; padding: 7px;}
			
#cuidados {width:16%; padding: 7px;}
						
#health {width:13%;	padding: 7px;}
			
#defensivos {width:16%; padding: 7px;}
			
#genetica {width:11%; padding: 7px;}

#menu ul li {text-align: center;	float: left;	overflow: hidden; font-weight: bold; font-family:Arial, Helvetica, sans-serif; font-size: 14px; color:#FFFFFF;
	margin: 0px; background:url(imagens/barramenu.jpg);}

#menu3 {	margin: 0 auto; overflow: hidden; width: 400px;text-align: center;}

#menu3 ul li {display: inline; padding: 1px 25px; font-weight: bold; font-size: 10px;  color:#FFFFFF; background: url(imagens/fundomenu2.png);}

#menuestilo {position: relative;	width: 400px;}
	
#menu li:a {color: #FFFFFF; text-decoration: none;}

#menu2 li:hover {color: #FFFFFF;background: url(imagens/barraover.jpg); text-decoration: underline;}

#banner {	background: url(imagens/fundobanner.jpg) scroll 50% 0; width: 100%; height: 171px; margin: 0px; padding: 0px;}


#barrameio {position:absolute;	margin:50px 0px 0px 0px; left: 0px;}

#apDiv1 {	position:relative; top:0px; left:0;	right:0; width:100%;	height:34px;}

#rodape {	width: 100%; background: #FFFFCC; text-align: left; position: relative; left: 0px; padding:3px; top: auto;}

[Maujor 144]

Tem 5 menu na sua página!

O que você chama de dimensiona legal?

Qual é o menu?

Menu tipo submarino? O que é isto. Do site Submarino? Forneça o link e diga qual é o menu.

Sua pergunta não faz o meno sentido sentido.

Leia as dicas para postar conforme sugerido pelo Moderador

Afinal o que você quer fazer?

[donato 0]

Opa, Maurício!! to começando em Css, seu site é minha referência, o menu horizontal odne comça com saúde animal, quero que ele fique 100% na tela e com os botões proporcionais.

 

Desculpe, é menu tipo do site submarino mesmo. que dimencione de acordo com a resolução.

[Maujor 144]

Você postou uma imagem.

Onde está hospedado o HTML da página?

[donato 0]

http://www.ourofino.com/web/portal

[Giovani 104]

Você está falando do menu principal do site submarino.com.br, é isso?

Caso seja, foi atribuído, através de classes, um width para cada <li>.

 

Qualquer dúvida, por favor, volte a postar.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[donato 0]

Pessoal, consegui: ta ai o código se alguem precisa, é só mudar as porcentagens dos botões de acordo com o tamanho do texto de cada botão.

 

html:

 

[url="http-~~-//december.com/html/4/element/div.html"]<div[/url] id="menu">
        [url="http-~~-//december.com/html/4/element/ul.html"]<ul>[/url]
                        [url="http-~~-//december.com/html/4/element/li.html"]<li[/url] class="saude">SAÚDE ANIMAL</li>
                        [url="http-~~-//december.com/html/4/element/li.html"]<li[/url] class="pet">OURO FINO PET</li>
                        [url="http-~~-//december.com/html/4/element/li.html"]<li[/url] class="agro">AGROSCIENCES</li>
                        [url="http-~~-//december.com/html/4/element/li.html"]<li[/url] class="cuidados">CUIDADOS DOMÉSTICOS</li>
                        [url="http-~~-//december.com/html/4/element/li.html"]<li[/url] class="health">ANIMAL HEALTH</li>
                        [url="http-~~-//december.com/html/4/element/li.html"]<li[/url] class="defensivos">DEFENSIVOS AGRÍCOLAS</li>
                        [url="http-~~-//december.com/html/4/element/li.html"]<li[/url] class="genetica">GENÉTICA</li>
      </ul>
    </div>

 

CSS

 

[url="http-~~-//december.com/html/4/element/style.html"]<style[/url] type="text/css">
 body {margin:0px;}
 
 
ul li {display: inline; border: solid 1px; width: 100%;}



#menu             { _margin-top:-30px; overflow:hidden;}
#menu ul                 { height:19px; margin:0; padding:0; }
#menu li                { text-align:center; float:left; overflow:hidden; background: url(barramenu.jpg);}
#menu li.saude            { width: 12.6%;}
#menu li.pet                { width: 14%;}
#menu li.agro               { width: 14%;}
#menu li.cuidados           { width: 18%;}
#menu li.health             { width: 14%;}
#menu li.defensivos         { width: 18%;}
#menu li.genetica           { width: 8%;}

li {
        padding: 5px 0px;
        font-family: Arial;
        font-size: 9pt;
        font-weight: bold;
        color: #FFFFFF;
}
</style>