Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

RicardoRodrigues

Submenu invadindo area do menu

Por , em Desenvolvimento frontend

Recommended Posts

RicardoRodrigues    0

RicardoRodrigues
Postado

Bom dia a todos.

eu estou com um problema para alinhas esse menu com o resto do site.

o site vai ter cabeçalho e corpo, o menu vai estar no cabeçalho com background branco, e os submenus vão aparecer no corpo com o background do corpo. o problema é que o submenu esta "invadindo" uma área do menu, sou iniciante em css, dei um lida numa apostila do apostilando e estou estudando o site do maujor e tableless, estou desde ontem tentando varias coisas e não consigo fazer com que o submenu fique somente na área do corpo. se alguém puder me ajudar agradeço muito.

abraços.

 

 

 

 

 

 

CSS

 

/* menu.css */#nav  { /*Menu*/	float: left;	width: 320px;	height:15px;	list-style: none;	background: #fff;	margin: 0;	clear: both;	padding: 0;}#nav ul  { /*Submeu*/	float: left;	width: auto;	list-style: none;	padding: 0;	/*border: 1px solid #fff;*/	/*border-width: 1px 0;	margin: 0 0 1em 0;*/		font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif;	height:15px;}#nav a { /* Estado hover */	display: block;	width: 3em;	w\idth: 3em; /*largura das celulas do menu */	color: #fff;	text-decoration: none;	/*border: 1px solid #FFF;*/	padding-left:2px;	padding-bottom:1px;	height: 15px;	}#nav li { /*todas as celulas */	float: left;		padding-bottom: 0px;	width: 70px;}#nav li ul  {	position: absolute;	left: -999em;	width: 14.2em;	w\idth: 13.2em; 	font-weight: normal;	border-width: 1px; 	margin: 0;}#nav li ul a {	width: 13.2em;	w\idth: 14em;		}#nav li ul ul {	margin: -1.6em 0 0 8em; /*-1.75em 0 0 13.2em; Distancia do submenu2 para o submenu*/	}#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul, #nav li.sfhover ul ul ul ul ul {	left: -999em;}/*Submnus*/#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul, #nav li li li li li.sfhover ul  {	left: auto;	background: #C4C1A0;	border:#C4C1A0; }img {	border:none;}

[b]HTML[/b]<!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=iso-8859-1" /><title>Designo Design</title><!--[if gte IE 5.5]><script language="JavaScript" src="menu.js" type="text/JavaScript"></script><![endif]--><style type="text/css"><!--@import"file:///C|/site/menu2.css";#geral {	width:756px;	height:360px;	background-position: center;}body {	margin: 0;	padding: 30px;	background: #FFF;	color: #fff;	margin-left: 113px;	margin-top: 5px;	margin-right: 0px;}#MenuHorizontal {	float: left;	height: 17px;	width: 515px;	background-color: #FFF;	background-position:bottom;	position:absolute;	bottom:0;	left:0;	}#corpo {	background:#C4C1A0;	width:756px;	height:290px;	}#circulo {	float:left;	width:250px;	height:290px;	background:url(arquivos/circulos.jpg) left bottom no-repeat;}#logo {	float:right;	width:220px;	height:70px;	background:url(arquivos/logo.jpg)right 1px no-repeat;	cursor:pointer;}#cabecalho {	height:70px;	width:756px;}#topmenu {	height:70px;	width:520px;	position:relative;	}#sofa {	height:290px;	width:400;	background:url(arquivos/sofa.gif) right bottom no-repeat;}--></style></head><body><br /><br /><br /><div id="geral"><div id="cabecalho"><div id="logo"> </div><div id="topmenu">	<div align="left" id="MenuHorizontal" lang="pt">		<ul id="nav"> 			  <li><a href="#"><img src="portifolio/portifolio6pt.gif" alt="portifolio" width="44" height="13" border="0" /></a>				<ul>					  <li><a href="#"><img src="../portifolio/portifolio6pt.gif" alt="portifolio" width="44" height="13" border="0" alt="visual" /></a>						<ul>							  <li><a href="#"><img src="../portifolio/portifolio6pt.gif" alt="portifolio" width="44" height="13" border="0" /> </a></li>							  <li><a href="#"><img src="../portifolio/portifolio6pt.gif" alt="portifolio" width="44" height="13" border="0" /></a></li>							  <li><a href="#"><img src="../portifolio/portifolio6pt.gif" alt="portifolio" width="44" height="13" border="0" /></a></li>							  <li><a href="#"><img src="../portifolio/portifolio6pt.gif" alt="portifolio" width="44" height="13" border="0" /></a></li>						</ul>					  </li>					  <li><a href="#" class="daddy"><img src="portifolio/portifolio6pt.gif" alt="portifolio" width="44" height="13" border="0" /></a>						<ul>							  <li><a href="#"><img src="../portifolio/portifolio6pt.gif" alt="portifolio" width="44" height="13" border="0" /></a></li>							  <li><a href="#"><img src="../portifolio/portifolio6pt.gif" alt="portifolio" width="44" height="13" border="0" /></a></li>							  <li><a href="#"><img src="../portifolio/portifolio6pt.gif" alt="portifolio" width="44" height="13" border="0" /></a></li>							  <li><a href="#"><img src="../portifolio/portifolio6pt.gif" alt="portifolio" width="44" height="13" border="0" /></a></li>	   					</ul>					  </li>				  </ul>			  </li>			  <li><a href="#" ><img src="portifolio/portifolio6pt.gif" alt="a designo" width="44" height="13" border="0" /></a> </li>			  <li><a href="#"><img src="portifolio/portifolio6pt.gif" alt="novidades" width="44" height="13" border="0" /></a></li>			  <li><a href="#"><img src="portifolio/portifolio6pt.gif" alt="contato" width="44" height="13" border="0" /></a></li>		</ul>	</div> <!--fim da div menu --></div> <!--Fim da div topmenu --></div> <!--Fim da div cabecalho --><div id="corpo">	<div id="circulo"> </div>	<div id="sofa"> </div></div></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

void    1

void
Postado

dude posta o link ai q vai facilitar para ajudarmos você!!!the void

Compartilhar este post

Link para o post
Compartilhar em outros sites

RicardoRodrigues    0

RicardoRodrigues
Postado

então não coloquei na web ainda, estou fazendo primeiro aqui para colocar pronto, mais acho que vou upar antes ate pra ver o tempo que leva pra carregar.

esse lang? vi em algum lugar que é bom definir o idioma, fica melhor para os leitores de tela ta no lugar errado? xD

o tempo ta corrido tenho que termina outras coisas por isso que não estou pesquisando, não gosto de perguntar sem pesquisar mais é que não ta dando http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

 

 

 

#nav a { /* Estado hover */	display: block;	width: 3em;	w\idth: 3em; /*largura das celulas do menu */	color: #fff;	text-decoration: none;	border: 1px solid #FFF;	padding:0; 		margin:0;	height: 15px;

 

se eu colocar border nesse trecho fica certo. o problema por enquanto é que isso afeta o menu e sub menu, e a borda do menu tem que ser branca e do submenu #C4C1A0, bem vou ficar tentando umas coisas ai, mais se alguem souber http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

E outra, naum use a tag img pra fazer menus, coloque as imagens como fundo no css, estude os links de iniciante que o Gio passou, e recicle seu css e html http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

void    1

void
Postado

mesmo assim da para fazer com css!!posta o link ai que vamos te ajudar!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

void    1

void
Postado

dude o link!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

void    1

void
Postado

dude é = a cara só q em ingles é giria!!posta o link da pagina com problema!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

camilo.oliveira    0

camilo.oliveira
Postado

pra fazer isso eu teria que criar um div pra cada imagem e colocar ela como background não é?dai ficaria <li> <div id="portifolio"> </div> </li><li> <div id="novidades"> </div> </li>ou é d outra maneira?

Você não precisa abrir uma div só pra ficar dentro da lista.A lista é uma tag "auto-suficiente", se é que me entende.Precisa só colocar a lista, as propriedades você colocaria na UL ou na LI, no seu CSS.Ex:<ul><li>Portifólio</li><li>Novidades</li></ul>Aí claro, fora o link e tal...Espero que tenha entendido.Leia o texto do Maujor sobre Divmania[]´s

Compartilhar este post

Link para o post
Compartilhar em outros sites

RicardoRodrigues    0

RicardoRodrigues
Postado

mais se eu aplicar um estilo no li ou ul isso vai ser para todos os elementos não é?

o meu problema é que cada palavra é uma imagem diferente, http://designodesign.freehostia.com

então acho que tenho que criar uma div ou class para cada imagem.

tem como eu colocar uma class num elemento li? <li class="bla" > ?

não sei se fui bem claro.

Compartilhar este post

Link para o post
Compartilhar em outros sites

RicardoRodrigues    0

RicardoRodrigues
Postado

eu vou começar a estudar mais infelizmente tenho que entregar logo esse site e não vai dar tempo de eu estudar, a unica coisa que falta é tirar a borda branca, acabando isso vou ter tempo e vou ver a fundo. por isso peço que se alguem souber como fazer isso me ajude http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito