0
I’m new to design, and I was trying to put together a page like this http://www.anamelmercearia.com.br/ First of all I would like to thank you for your help, because I tried so hard to fix this problem but I couldn’t find a solution, and now I understand how valuable knowledge is!
Well my problem and the UL in column 3, when I decrease the page it breaks down and the menu that is occurring elements invasion
I need that no element inside both the box and the container break or invade another in a maximum width of 600px, well I understood would have to use media queries, but in all ways I tried they gave bizarre results...
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Teste Drive</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
<!--script src="js/less-1.3.3.min.js"></script-->
<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:500' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400italic,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400italic,400' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/hover.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="caixa">
<div class="row clearfix">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" >
<div class="topo">
</div>
</div>
</div>
<div class="row-clearfix"style="margin:0 13%">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding:0">
<div class="altura">
<div class="coluna1">
<ul class="sociaistopo">
<li><a class="pinterest" href="http://br.pinterest.com/anamelgourmet">p</a>
</li>
<li><a class="facebook" href="https://www.facebook.com/pages/Ana-Mel-Mercearia/363119460524421?fref=ts">f</a>
</li>
<li><a class="twitter" href="https://twitter.com/anamelmercearia">t</a>
</li>
<li><a class="instagram" href="https://instagram.com/anamelgourmet/">i</a>
</li>
</ul>
<br>
<br>
<p class="cadastro">Faça
<a href=""> <span class="cd">loguin</span>
</a> ou<a href=""><span class="cd"> cadastre-se</span></a>
</p>
</div>
<div class="coluna2">
<a class="logo" href="#">L</a>
</div>
<div class="coluna3">
<ul class="navegacao">
<li><a class="navega" href="#">home</a>
</li>
<li class="separador">|</li>
<li><a class="navega" href="#">meu cadastro</a>
</li>
<li class="separador">|</li>
<li><a class="navega" href="#">meus pedidos</a>
</li>
<li class="separador">|</li>
<li><a class="navega" href="#">fale conosco</a>
</li>
</ul>
<span class="carrinho"><b>meu carrinho</b> <a class="btn2 btn-primary btn-large">0 Item(s)</a><span>
</div>
</div>
</div>
</div>
</div>
<div class="container1-fluid" style="margin:0 13%">
<div class="row clearfix" style="margin-top:-24px">
<div class="col-md-12 column">
<div class ="menuloja">
<div class="dropdown1">
<ul class="listas">
<li class="opcoes"><a href="#"><span class="glyphicon1 glyphicon-cutlery" aria-hidden="true"></span><span class="nomemenu">REFEIÇÕES</span></a>
<ul class="listas">
<li class="opcoes"><a class="nomemenu1 "href="#">MASSAS</a>
<li class="opcoes"><a class="nomemenu1 "href="#">ENLATADOS</a> <!-- MUDA COR E FONT E NO SPAN-->
<li class="opcoes"><a class="nomemenu1 "href="#">SOBREMESAS</a>
</ul>
</li>
</ul>
</div>
<div class="dropdown1">
<ul class="listas">
<li class="opcoes"><a href="#"><span class="glyphicon1 glyphicon-glass" aria-hidden="true"></span><span class="nomemenu">BEBIDAS</span></a>
<ul class="listas">
<li class="opcoes"><a class="nomemenu1 "href="#">VINHOS</a>
<li class="opcoes"><a class="nomemenu1 "href="#">SUCOS</a> <!-- MUDA COR E FONT E NO SPAN-->
<li class="opcoes"><a class="nomemenu1 "href="#">IMPORTADOS</a>
</ul>
</li>
</ul>
</div>
<div class="dropdown1">
<ul class="listas">
<li class="opcoes"><a href="#"><span class="glyphicon1 glyphicon-gift" aria-hidden="true"></span><span class="nomemenu" style="marign-bottom:4px">PRESENTEAR</span></a>
<ul class="listas">
<li class="opcoes"><a class="nomemenu1 "href="#">UM AMIGO</a>
<li class="opcoes"><a class="nomemenu1 "href="#">UM FAMILIAR</a> <!-- MUDA COR E FONT E NO SPAN-->
<li class="opcoes"><a class="nomemenu1 "href="#">ALGUÉM ESPECIAL</a>
</ul>
</li>
</ul>
</div>
<div id="area-form">
<input type="email" id="inputEmail" class="form-control3" placeholder="BUSCAR" required autofocus> <a class="btn3 btn-large">
<span class="glyphicon2 glyphicon-search" aria-hidden="true"></span></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
Código CSS
/*ESTRUTURA*/
body{
background-color:#EAE4D6;
font-family: 'Roboto Slab', serif;
width: 100%
}
.topo{
height: 26px;
}
.altura{
height: 170px;
display: flex;
}
.altura > .coluna1 {
width: 33.33%;
height: 170px;
}
.altura > .coluna2 {
width: 33.33%;
height: 170px;
}
.altura > .coluna3 {
width: 33.33%;
height: 170px;
}
.fundo{
background-color: #FFFFFF;
height: 200px;
}
.coluna2{
text-align: center;
}
.coluna3{
flex-direction: row;
flex-wrap: none;
}
#caixa{
height:214px;
background-color: #FFFFFF;
}
/*COLUNA1*/
.sociaistopo{
margin: 0;
padding: 0;
}
.sociaistopo li{
display:inline;
list-style-type: none;
}
.pinterest{ /* Criar links com background*/
background-image:url("../img/pinterest.png");
display:block;
height:30px;
text-indent:-9999px;
width:30px;
float: left;
}
.facebook{
background-image:url("../img/facebook.png");
display:block;
height:30px;
text-indent:-9999px;
width:34px;
float: left;
margin-left:5px;
}
.twitter{
background-image:url("../img/twitter.png");
display:block;
height:30px;
text-indent:-9999px;
width:32px;
float: left;
margin-left:5px;
}
.instagram{
background-image:url("../img/instagram.png");
display:block;
height:30px;
text-indent:-9999px;
width:32px;
float: left;
margin-left:5px;
}
.cadastro{
margin-top:40px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #3E332F;
}
.cadastro a:hover{
color: #9D2E2D;
text-decoration: none;
}
.cd{
font-size: 12px;
color: #8B151B;
}
/*COLUNA2*/
.logo{
background-image: url("../img/logo.png");
text-indent: -9999px;
width:193px;
height: 138px;
display: block;
margin:0 auto;
text-align: center;
}
/*COLUNA3*/
.navegacao{
list-style-type: none;
display: flex;
justify-content:flex-end;
padding: 0;
margin: 0;
}
.navegacao li{
padding: 0;
font-size: 13px;
font-family: 'Roboto Slab', serif;
color: #3E332F;
margin-left: 1%;
display: block;
}
.navega{
color:#3E332F;
}
.navegacao li a:hover{
padding: 0;
text-decoration: none;
color:#9D2E2D;
}
/*MENU*/
.menuloja{
height: 55px;
background-color: #3E332F;
display: flex;
}
.nomemenu{
margin-left: 10px;
font-family: 'Roboto Slab', serif;
font-weight: 700;
color: #EAE4D6;
}
.nomemenu:hover{
color: #FFFFFF;
}
.nomemenu1{
font-family: 'Roboto Slab', serif;
font-weight: 700;
color: #EAE4D6;
}
.nomemenu1:hover{
color: #FFFFFF;
background-color: #9D2E2D;
background-color:
}
.glyphicon1 {
position: relative;
top: 0px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
color: #EAE4D6;
font-size: 30px;
}
.dropdown1{
float: left;
}
.listas {
margin: 0;
padding: 0;
list-style: none;
width: 180px;
text-align: center;
}
.listas .opcoes {
position: relative;
font-family: 'Roboto Slab', serif;
font-weight: 700;
color: #EAE4D6;
}
.opcoes .listas {
position: absolute;
display: none;
z-index: 80;
}
.listas .opcoes a {
display: block;
text-decoration: none;
color: #EAE4D6;
background: #3E332F;
padding: 9px 5px;
border-bottom: 0;
font-family: 'Roboto Slab', serif;
font-weight: 700;
font-size: 17px;
}
.opcoes:hover .listas {
display: block;
}
.opcoes .listas .opcoes .nomemenu1:hover{
background-color:#9D2E2D;
color: #FFFFFF;
}
.form-control3:-moz-placeholder {
color: #AAA7A6;
font-style: italic;
}
.form-control3::-moz-placeholder {
color: #AAA7A6;
}
.form-control3:-ms-input-placeholder {
color: #AAA7A6;
}
.form-control3::-webkit-input-placeholder {
color: #AAA7A6;
}
.form-control3 {
display: inline;
width:280px;
height: 26px;
margin: 16px 0 0 80px;
padding: 6px 0px;
font-size: 11px;
line-height: 1.428571429;
color: #AAA7A6;
background-color: #3E332F;
vertical-align: middle;
border:1px solid #635954;
border-radius:1px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.form-control3:focus {
border-color: #635954;
outline: 0;
}
.btn3 {
display: inline-block;
padding: 0px 0px;
margin:16px 2px 0 0;
font-size: 22px;
width: 24px;
height: 26px;
font-weight: normal;
text-align: left;
vertical-align: middle;
cursor: pointer;
background-color: #3E332F;
background-image: none;
border:1px solid #635954;
border-radius:1px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.btn3:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn3:hover,
.btn3:focus {
color: #3E332F;
text-decoration: none;
background-color: #3E332F;
}
.carrinho{
font-size: 17px;
font-family: 'Roboto Slab', serif;
font-weight: 400;
color: #3E332F;
float: right;
margin-top:9%;
}
.btn2{
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
background-color: #9D2E2D;
font-size: 18px;
width: 124px;
height: 42px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.btn2:hover,
.btn2:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #9D2E2D;
text-decoration: underline;
}
.btn2:focus {
outline: thin dotted #9D2E2D;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
Sorry to put the css code this way however, I was unable to put another block of code
– Adriano Souza
complicated, either you extend your menu by leaving a horizontal scroll on the screen, or you put the items one below the other, or decrease the font to smaller sizes, or one will invade the other as ta happening... You can still decrease the padding of the items, aiming to better use screen, but, I do not see a logical form of 3 items occupy the same place in space without overlapping or breaking line. In case you don’t understand the question, could you explain better....
– Michel Simões
if you notice in the example that you passed, when the screen is decreased, the size of the menu bar remains, creating the scroll horizontal bar
– Michel Simões