Jump to content

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By jvb
      Olá povo do código, eu confesso que estou sem saber o pq de algumas propriedades do Bootstrap 4.2.1 como por exemplo:
      .img-fluid { max-width:100%; height: auto } não funcionar em outra folha de style, que não seja Bootstrap, a propriedade não esta dentro de @media, essa propriedade eu imaginava ser de uso geral.
      Vejamos que a Página continua linkando para o bootstrap, apenas algumas propriedades não terem efeito em outra folha de styles. 
    • By Sapinn
      Fala galera tudo beleza? Então alguém sabe como adicionar e remover campos de texto com js. Tipo teria um botão com um + "mais" para adicionar novos campos e junto a estes campos teria um ícone com um lixeira para remover, toda vez que fosse clicado nesse ícone o campo seria removido, apenas aquele campo. Encontrei um código para adicionar um campo mas a parte de remover ta dando dor de cabeça
      <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Pagina</title>     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> </head> <body>     <form id="myForm">         <div id="lines"></div>         <button type="button" onclick="addInput('lines')">+</button>         <input type="submit" value="Enviar">       </form>             <script>           var formLine = 1;                 function addInput(divName) {                 var newdiv = document.createElement('div');                 newdiv.innerHTML += '<input type="text" name="produto" id='+formLine+'>';                 newdiv.innerHTML += ' <i class="bi bi-trash-fill"></i>';                 document.getElementById(divName).appendChild(newdiv);                 formLine++;             }         addInput('lines');       </script> </body> </html>  
    • By henriquers
      Bom Dia a todos !
       
      Gostaria de saber se tem algum modo de executar um evento em um option do select por exemplo: Um select com vários produtos aparecendo apenas o código do produto e a descrição de cada um, e quando passa o mouse sobre um deles no select inicia um evento que carrega uma imagem do produto ao lado do select sem precisar clikar no produto para aparecer a imagem.
      Eu consegui fazer colocando um onchange no select, mas gostaria um que não precise clicar no produto para aparecer a imagem, carregando a imagem quando passa o mouse nas opções do select.
       
       
      Desde já agraço a ajuda.
    • By Manoel Cicero
      bom, estou utilizando um programa que transforma ppt em html5. coloco o arquivo gerado em minha hospedagem, testo, funciona perfeitamente no pc ou notebook, até aí tudo bem!
      mas quando testo no smartphone ai complica!
      o desenvolvedor me indicou limpar o cache, mas, mesmo assim não funciona e o pior de tudo é que, se isso não funcionasse apenas no meu smartphone não seria problema. o problema é que ja testei em alguns outros e o problema se mantem. alguem poderia me ajudar?
      link de teste: http://www.biodidata.com.br/teste/revis.html
      no PC - tudo ok!
      No smartphone --> na imagem que surgir vá em "click para iniciar", em seguida clique na pergunta 2 - a página para!
      limpar o cache não funciona e não queria alterar qualquer coisa no smartphone porque não seria legal para o meu publico fazer alterações no seu celular só pra ver uma coisa que disponibilizo.
      agradeço!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.