Ir para conteúdo

Arquivado

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

victor2dm

Como fazer com que este menu não quebre?

Por , em Desenvolvimento frontend

Recommended Posts

victor2dm    2

victor2dm
Postado

Olá. Tenho um menu na seguinte maneira:

 

9696c320cad00517bd6e1e60641a0899.png

 

 

Quando redimensiono o navegador, ele quebra. Já tentei o min-width para que ele não quebre, mas não está funcoionando.

Alguma sugestão?

 

1de1d1e54094271837ff52ad65e5431c.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

CleitonK    0

CleitonK
Postado

Olá, uma ideia seria você colocar o menu dentro de tabelas, isso irá facilitar a organização, eu criei um esqueleto (provavelmente exista outros parecidos, mas fiz através dos meus conhecimentos), tenta usar ela de base, da próxima deixa o código html do menu, junto com o css, para facilitar o entendimento do que você fez

<!DOCTYPE html>
<html>
<head>
	<title>Estrutura Básica para um Site</title>
	<meta charset="utf-8">
	<style type="text/css">
		body,html{
			margin:0;
			padding:0;
			background-color:#3FC;
		}
		#web_geral{
			width:100%;
			height:100%;
			margin:0;
			padding:0;
			background-color:#903;
		}
		#web_corpo{
			width:980px;
			height:100%;
			background-color:#69F;
		}
		#web_menu{
			width: 100%; /* Este width deixa o site padrão, por isso é recomendado não apagar*/
			/* Aqui a baixo deve ser colocado todas as configurações do conteúdo, caso haja uma configuração particular, deve-se criar um id ou class */
			background-color:#6F0;
			height:200px;
		}
		#web_conteudo{
			width: 100%; /* Este width deixa o site padrão, por isso é recomendado não apagar*/
			/* Aqui a baixo deve ser colocado todas as configurações do conteúdo, caso haja uma configuração particular, deve-se criar um id ou class */
			background-color: #8D9; /* O backgroud é opcional */
			height: 200px;
		}
		#web_rodape{
			width: 100%; /* Este width deixa o site padrão, por isso é recomendado não apagar*/
			/* Aqui a baixo deve ser colocado todas as configurações do conteúdo, caso haja uma configuração particular, deve-se criar um id ou class */
			background-color: #985;
			height: 200px;
		}
		td,tr{
			padding: 0;
		}
	</style>
</head>
<body>
	<table id="web_geral" cellspacing="0"><!-- Início tabela geral -->
		<tr>
			<td align="center" valign="top">
				<table id="web_corpo" cellspacing="0"><!-- Início tabela corpo (onde fica realmente o site) -->
					<tr>
						<td>
							<table id="web_menu" cellspacing="0"><!-- Início tabela menu -->
								<tr>
									<td>Adicionar conteúdos</td>
								</tr>
							</table><!-- Início tabela menu -->
						</td>
					</tr>
					<tr>
						<td>
							<table id="web_conteudo" cellspacing="0"><!-- Início tabela conteúdo -->
								<tr>
									<td>Adicionar conteúdo</td>
								</tr>
							</table><!-- Início tabela conteúdo -->
						</td>
					</tr>
					<tr>
						<td>
							<table id="web_rodape" cellspacing="0"><!-- Início tabela rodapé -->
								<tr>
									<td>Adicionar conteúdo</td>
								</tr>
							</table><!-- Fim tabela rodapé -->
						</td>
					</tr>
				</table><!-- Fim tabela corpo -->
			</td>
		</tr>
	</table><!-- Fim tabela geral -->
</body>
</html>

Não é necessário criar um novo site, só usar de base para organização e modificar seu web site

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sergio Tomas    16

Sergio Tomas
Postado

Olá Victor, eu não recomendo você a usar tabela para o seu menu. você pode resolver seu problema colocando "position: relative" no elemento pai.

Compartilhar este post

Link para o post
Compartilhar em outros sites

victor2dm    2

victor2dm
Postado

Obrigado pelas dicas.
Código em tabelas não me agrada nem um pouco, argh. Passo longe disto.

Sobre o position relative, não funcionou.

Engraçado que eu já fiz vários menus da mesma forma, e resolvi com min-width.

Estranho.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Electronic    124

Electronic
Postado

Mas o que você esperava?

ao redimensionar, em algum momento, nao vai caber todos os elementos um do lado do outro, logo ele vai quebrar

 

cada caso é um caso, depende do layout e da cabeça do designer

 

na questão de caber tudo na mesma linha com a tela estreita

você teria que diminuir o tamanho do logo, talvez usar um tamanho relativo, e a distancia de uma LI da outra

mas isso resolveria até certo ponto, em um tablet pequeno talvez não seja o suficiente

Compartilhar este post

Link para o post
Compartilhar em outros sites

victor2dm    2

victor2dm
Postado

Não é que caiba tudo na mesma linha. É fazer com que o menu não quebre, mesmo que com isso, seja necessário que o navegador "coma" alguns itens de menu, entende? o código é esse: 

<header id="banner-cabecalho">
    <div class="header-navigation">
        <div class="header-container">

            <span><img src="imagens/logo.png"></span>

            <a href="#" class="slideout-menu-toggle botaomenu">MENU</a>

        <nav class="slideout-menu">
            <a href="#" class="slideout-menu-toggle">×</a>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="index.html">QUEM SOU</a></li>
                <li><a href="index.html">SERVIÇOS</a></li>
                <li><a href="index.html">CONTATO</a></li>
                <li class="iconemenu"><a href="index.html"><img src="imagens/contacticon.png" height="17" width="17">XXXX-XXXX</a></li>
            </ul>
        <img class="logomenu" src="imagens/logofooter.png" alt="logo menu">
        </nav>
        <div class="banner">
            <div class="icone-banner"><span>a</span></div>
            <h1>Olá, como posso te ajudar?</h1>
            <h2>Cuidarei de toda a parte de desenvolvimento.</h2>
            <h3>Você se preocupa apenas com o conteúdo!</h3>
            <h4><a class="botaosaibamais" href="#">Saiba Mais!</a></h4>
        </div>
        </div>
    </div>
</header>

header#banner-cabecalho {width: 100%; height: 100%; min-height: 700px; background-image: url('../imagens/bannerback.jpg'); background-repeat: no-repeat; background-size: cover;}
.header-navigation {width: 100%; height: 60px; background: rgba(243,243,243,.5);}
.header-container {max-width: 1200px ; margin: 0 auto;}
.header-container span img {@include column(9); max-width: 320px; min-width: 220px; margin-top: 13px; margin-left: 5px;}	
a.botaomenu {display: none;}
a.slideout-menu-toggle{display: none; }
.slideout-menu {@include column(7); float: right; margin-top: 18px;} /* propriedade column vem do Grid System (Sass) */ 
.slideout-menu img.logomenu {display: none;}
.slideout-menu ul li {display: inline; font-size: 1.6em; padding: 0 20px 0 0;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Electronic    124

Electronic
Postado

Não acho uma boa ideia fazer que o navegador "coma" alguns itens do menu

 

mas se for o caso:

tente fazer a que a DIV que engloba o menu e o logo, ter um tamanho fixo.

mas isso causaria o aparecimento de barra de rolagem no rodape do site

pra eliminar isso, teria que adicionar overflow: hidden no <header> ou <body>

 

não cheguei a ver o o código postado pq o css que você postou deu nisso

http://jsfiddle.net/fc6jqtdk/ nada a ver com o print que postou

tem o link do thema online?

Compartilhar este post

Link para o post
Compartilhar em outros sites

victor2dm    2

victor2dm
Postado

Não acho uma boa ideia fazer que o navegador "coma" alguns itens do menu

 

mas se for o caso:

tente fazer a que a DIV que engloba o menu e o logo, ter um tamanho fixo.

mas isso causaria o aparecimento de barra de rolagem no rodape do site

pra eliminar isso, teria que adicionar overflow: hidden no <header> ou <body>

 

não cheguei a ver o o código postado pq o css que você postou deu nisso

http://jsfiddle.net/fc6jqtdk/ nada a ver com o print que postou

tem o link do thema online?

 

Ah, eu coloquei Sass não compilado no código. IAHEIAEHAIEHAIE.

mas usei a parada do width que você falou. por enquanto ficarei com isso, até fazer mais adaptações nesse menu.

mas enfim, obrigado.

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