F�rum Div dentro de uma Div - Fora dos l�mites #527931

05/08/2015

Ol�, boa noite.
A minha d�vida � a seguinte, estou criando um site s� por prova de conhecimentos e me deparei com um problema de posicionamento de divs.
Queria que a <div id="menu"> ficase dentro da <div id="cont">, ou seja tudo oque tem dentro dela sai para fora caso a pagina fique em resolu��es 1024x768 ou menores.
Queria que algu�m podese me ajudarvou por o c�digo aqui:

<html>
 <head>
	<meta charset="utf-8">
	<title> teste </title>
	<link rel="stylesheet" type="text/css" href="css.css">
	<meta name="viewport" content="width=device-width, initial-scale=2">
 
 </head>
 <body>
	<div id="cont">
	    <div id="menu">
			<form>
				<label>Login</label>
				<input type="text" placeholder="Ins�ra o login">
				<label>Password </label>
				<input type="password" placeholder="Ins�ra o password">
			
			</form>
			<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Sobre</a></li>
					<li><a href="#">Contatos</a>
						<ul>
							<li><a href="#">De Brusque</a>
								<ul>
									<li><a href="#">Prataleiro</a></li>
								</ul>
							</li>
							<li><a href="#">De joinvile</a></li>
						</ul>
					</li>
					<li><a href="#">Marketeiro</a>
						<ul>
							<li><a href="#">pedrinho</a></li>
							<li><a href="#">Nada a ver</a></li>
							<li><a href="#">Tudo a ver</a></li>
							<li><a href="#">sem a ver</a></li>
							<li><a href="#">que nada</a></li>
							<li><a href="#">ehehe</a></li>
						</ul>
					
					</li>
					<li><a href="#">Prexequeiro</a></li>
				</ul>
			</nav>
		</div>

CSS:

*{
	margin:0 auto;
	padding:0 auto;
	-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


body{
	background-color:#AAAAFF;
		background-size:100%;
}



/*	MENU COM DROP DOWN COME�O	1 */
  /*Estiliza��o dos ul e li 2*/

#menu {
	position:relative;
	text-align:center;
	background:purple;
	height:55px;
	position:absolute;
	margin:0 auto;
	margin-top:0px;
	border-radius:10px 10px 10px 10px;
	z-index:1;
	max-width:600px;
	min-width:1000px;
	left:50%;
	margin-left:-500px;

}  

  
ul{
	position:absolute;
	margin:10px;
	list-style:none;
	padding:0px;
	margin-top:-10
	
	
}

form {
	position:relative;
	left:250px;
	padding-left:0px;
	width:490px;
	top:16px;
}


li {
	display:inline-block;
	padding: 5px 10px;
	position:relative;
	border:5px solid purple;
	background:rgba(0,0,200,0.5);
	
}

li:hover {
	border:4px solid white;
	padding: 6px 11px;
	
}
/* 222222222222222222222222222222222*/

li:hover > ul{
	display:block;
	top:33px;
	width:150px;
	text-align:center;
	box-shadow:white 2px 2px 5px;
	border:2px solid white;
	background:purple;
	

}



ul ul {
	position: absolute;
	display: none;
	margin: 0;
	padding: 5px 10px;
}


/*Para caso for menu drop down de 3 ou mais 3 */
ul ul ul{
	position: absolute;
	left:169px;
	margin:-25px;	
}
/*3333333333333333333333*/


ul ul li {
	display:block;
}



li a {text-decoration:none;
	color:white;
	}
	
li a:hover {text-decoration:none;
	color:white;
	text-shadow:white 3px 2px 2px;
	}	

/*111111111111111111111*/

#cont{
	border:2px solid gray;
	width:90%;
	margin: 0 auto;
	position:relative;
	margin:0% 5%;
	
	
}

#conteudo {
	border:2px solid white;
	width:500px;
	height:500px;
	position:relative;	
	left:-270px;
	margin: 50%;
	margin-top:80px;
	overflow:auto;
	
}

Aguardo respostas. Obrigado :)

Anderson Souza

Curtir t�pico

+ 0

Responder