Ir para conteúdo

Recommended Posts

Preciso de ajuda com o menu que estou fazendo no meu site.

Bem, já fiz de tudo pra tentar arrumar esse site, mas não consigo, por isso estou mandando meu código HTML e CSS aqui.

HTML5:

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<title>RUGBY</title>
    <meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="_css/normalize.css">
    <link rel="stylesheet" type="text/css" href="_css/index.css">
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'>
	<link rel="shortcut icon" href="_imagens/favicon.ico" type="image/x-icon">
<link rel="icon" href="_imagens/favicon.ico" type="image/x-icon">	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="center clearfix">
    <header>
        <h1><a href="home.html" title="Logotipo Rugby"><img src="_imagens/Rugby.png"><span></span></a></h1>
<!-MENU-!>
        <nav>
		<ul class="menu">
		<li><a href="#"><img id="icone" src="_imagens/menu2.png"></a>
		<ul>
				<li><a href="#">Inicio</a></li>
				<li><a href="#">Entenda o Rugby</a>
						<ul>
							<li><a href="#">Guia para iniciantes</a></li>
							<li><a href="#">Glossário</a></li>
							<li><a href="#">História do rugby</a></li>                   
						</ul>
				</li>
				<li><a href="#">Onde jogar</a>
						<ul>                 
						</ul>
				</li>
				<li><a href="#">Sobre</a>
						<ul>
							<li><a href="#">Contato</a></li>
							<li><a href="#">Sobre "nós"</a></li>
						</ul>
							</li>               
		</ul>
		</ul>
        </nav>
<!-FIM MENU-!>
    </header>
	<section class="welcome">
    	<h2>RUGBY</h2>
  		<h3><span>TEXTO </span>TEXTO TEXTO <span> TEXTO</span> TEXTO TEXTO TEXTO.</h3>
    </section>
	<section class="container">
    	<div class="brancoex">
			<h3>TITULO</h3>
            <p>TEXTOTEXTOTEXTOTEXTOTEXTOTEXTOTEXTO<span class="btn"><a href="estrutura.html" title="Leia mais...">Leia mais...</a></span></p>
        </div>
        <div class="fonteex">
			<h3>TITULO</h3>
            <p>TEXTOTEXTOTEXTOTEXTOTEXTOTEXTOTEXTO<span class="btn"><a href="fonte.html" title="Leia mais...">Leia mais...</a></span></p>
        </div>
        <div class="menuex">
			<h3>TITULO</h3>
            <p>TEXTOTEXTOTEXTOTEXTOTEXTOTEXTOTEXTO<span class="btn"><a href="menu.html" title="Leia mais...">Leia mais...</a></span></p>
        </div>
	</section>
    <footer>
    	<small class="copyright">
        	<p>&copy 17087</p>
        </small>
    </footer>
</body>
</html>

CSS3:

body{
background:#282828;
color:#dadada;
font-family: "Open Sans", Helvetica, sans-serif, arial;
font-size: 1.125em;
font-weight: 300; 
line-height: 22px;
text-align: left; 
text-shadow:1px 1px 0px #4c4c4c; 
}
.center{
margin: 0 auto;
max-width:1200px;
width: 90%; 
}

.clearfix:before, .clearfix:after {
    content: &quot; &quot;;
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
/*fim do clearfix*/
img, picture, video, embed {
    max-width: 100%; 
}
h1, h2{
color:#666666;
font-size: 60px;
font-weight: 800;
letter-spacing: -3px;
line-height: 60px;
}
h3{
font-size: 32px;
font-weight: 300;
letter-spacing: -2px; 
line-height: 38px;
}
p{
font-weight: 300;
letter-spacing: -1px; 
}
a, a:link, a:visited{
color:#a56256; 
font-weight:400; 
text-decoration:none; 
}
a:hover{
color:#FE5E41;
text-decoration:underline;
text-shadow:none;
}
header{
	border-bottom: 1px solid #E0E0E0;
	height:150px;
	width:100%;
}
/* Logotipo */
header h1 a{
		display:block; 
		float:left;
		height:120px; 
		text-indent:-9999; 
		width:35%;
		margin-top:-20px;
		margin-left:-100px;
	}
/*nav - menu de navegação*/
nav{
	float:right;
	margin-top:78px; 
	text-align:right; 
	width:41.6666666666667%;
}

/*SEÇÃO WELCOME*/
.welcome{
	height:290px;
	text-align:center;
	width:100%;
}
h2 span{
	font-size:1em;
	font-weight:300px;
	letter-spacing:-0.0333333333em;
	line-height:1em;
}
.welcome h3{
margin:0 auto;
width:75%;
}
/* CONTAINER - CONTEUDO COM 3 COLUNAS */
.container{
	background-color:#160d0b;
	height: 417px;
	padding:2.5%;
	width:95%;
}
.brancoex, .fonteex, .menuex{
	float:left;
	position:relative;
	text-align:center;
	width:31.57894736842105%;
}
.brancoex, .fonteex{
	margin-right: 2.631578947368421%;
}
.menuex{
	background-color:#1a1a1a;
	margin-right:0px;
}
.brancoex{
	background-color:#1a1a1a;
}
.fonteex{
	background-color:#1a1a1a;
}
/*imagens*/
#brancoex img, #fonteex img, #menuex img{
	margin: 10px auto -15px auto;
	text-align:center;
img {
max-width:100%
}
}
/*formatação do texto*/
.container h3{
	color:white;
	font-size: 1.77777777778em;
	font-weight: 300;
	letter-spacing: -0.0625em;
	margin-bottom: 30px;
	text-shadow:none;
}
.container p{
	background-color:#434343;
	float:left;
	height:160px;
	padding: 1.9444444444444445%;
	position:absolute;
	width-max:100%;
	text-align:justify;
	top:225px;
}
/*formatação do botão*/
span.btn{
	font-size:1.1111111111em;
	font-weight: 400;
	letter-spacing:-0.1em;
	height:27px;
	margin-top: 30px;
	position:absolute;
	right: 1px;
	text-align:center;
	text-shadow:none;
	width:33.33333333333333%;
}
span.btn a{
	color:#1a1a1a;
	padding: 2px 3.333333333333333%;
}
.brancoex span.btn a{
	background-color:#868686;
}
.fonteex span.btn a{
	background-color:#868686;
}
.menuex span.btn a{
	background-color:#868686;
}
/*Seção FOOTER - Rodape com 2 colunas*/

footer{
	clear:both;
	height: 50px;
	padding: 10px 0;
	width:100%;
}
.copyright{
	float:left;
	margin-left:2.5%;
}
.desenvolvedor{
	float:right;
}
.desenvolvedor figure{
	width:100%;
}
#menuu{
border:none;
margin-left:-32.9%;
width:100%;
height:100%;
overflow:hidden;
margin
}


/*MENU*/

/*esse aqui oculta as marcações da lista*/ 
.menu{
	list-style:none;
	float:left;
	}

/*esse faz ficar na horizontal*/
.menu li{
	position:relative;
	float:left;
}

/*esse aqui muda a cor dos links e tira o efeito de link no menu não suspenso*/
.menu li a{
	color:black;
	text-decoration:none;
	display:block;
	}
	

#icone{
width:17%;
height:17%;
}

Imagem do menu em anexo.

 

Capturar.PNG

Podem editar o layout do menu como quiserem, apenas me ajudem a deixar coerente isso tudo.

Há páginas em cima de outras. t.t

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
    • Por joaon77@yahoo.com.br
      Olá pessoal!
      Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
      ... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
       
      Agradeço muito se alguém puder me ajudar.
       
    • Por Raphaeldidata
      Vamos supor que eu coloque uma logomarca no topo do meu site, e queira dar semântica à ela. Tudo bem se eu fizer dessa forma? Existe uma maneira mais simples?
       
      Basicamente criei um cabeçalho para minha logomarca, de forma a dar importância e contexto para que o "robo" do Google, por exemplo, tenha mais facilidade em interpretar o "conteúdo" da minha imagem e conseguir catalogá-la adequadamente em seu motor de buscas. 
      span.td-visual-hidden { display: none; } <div class="td-header-logo"> <h1 class="td-logo"> <a href="#"> <img src="_images/defesa-evangelho.png" alt="Defesa do Evangelho" title="Defesa do Evangelho"/> <span class="td-visual-hidden">Defesa do evangelho</span> </a> </h1> </div> Desde já agradeço!
    • Por rodrigoalgeri
      BOA NOITE
      OLHA ISSO onde esta escrito isso aqui "Health star ratings Kellogg reveals the cereal Rodrigo Algeri", tem uma pequena imagem em cima se voce perceber ela e uma imagem redonda so que nao aparece inteira voce sabe algum jeito pra aparecer ? tipo ela tem que ficar 75px altura e largura a altura fica, so que ela corta, EU GOSTARIA QUE FICASSE UM QUADRADO TIPO 75PX X
      75PX E ISSO E PRA FICAR EM TODAS ESSAS IMAGENS AI QUE TEM 

    • Por bessa238
      Bom dia galera, estou tendo um problema com meu código, eu trago os dados do banco mas tenho 2 SELECT dependentes, um com estado e a cidade, segue o código
                  $.when(                 $('#estado').val(data.estado), //o valor da option no select estado ( já está preenchido com os values desde o carregamento da página ) é setado.                 $('#estado').change()) //o método change() é chamado para que o carregamento das cidades no select 2 ( cidades ) é feito.             .then(function() {                 $('#cidade').val(data.cidade); //deveria setar a cidade vinda do banco como a option no select.             }); funcional apenas até a parte do $('#estado').change(), a cidade ( vinda do banco ) é até setada por um breve momento, questão de 0,25 segundos, depois o valor que aparece na cidade é alterado e setado como a primeira option dentre todas opções do select. Alguém já passou por tal problema ? estou a um tempo atrás de solução e não consigo obter nenhuma resposa, porém sei que é possível fazer como isso é apenas um formulário de cadastro para edição, muitos outros sistemas e sites usam este recurso. Desde já, obrigado a todos !
×

Informação importante

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