Ir para conteúdo

Arquivado

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

HelderPeixoto

Menu diminui no mozilla!

Por , em Desenvolvimento frontend

Recommended Posts

HelderPeixoto    0

HelderPeixoto
Postado

E ai, povo,

 

Então... nunca mexi com html nem css, nem nada parecido antes... Mas agora tô tentando criar um site assistindo uns vídeos no youtube e lendo umas coisas que acho por aí.

 

Fiz a página e ficou tudo certinho no chrome e no IE, porém quando abro no mozilla o menu diminui de tamanho e fica desalinhado do painel de leitura no lado direito.

 

hospedei no xpg da uol pra testar.. esse é o endereço:

 

http://profhistoriahelder.xpg.uol.com.br/

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>PROFHISTÓRIA</title>
<link rel="stylesheet" type="text/css" href="index.css"/>

</head>

<body>
    <div id="interface">
<header id="cabecalho">

<figure class="topo">
<a href="index.html"><img src="_imagens/topo_profhistoria.png"/> </a>
</figure>
 
<nav>
<ul class="menu">
	<li><a href="index.html">O Programa</a>
    	<ul>
        	<li><a href="apresentacao.html">Apresentação</a></li>
            <li><a href="areaconcentracao.html">Área de <br>Concentração</br></a></li>
            <li><a href="matriz.html">Matriz Curricular</a></li>
            <li><a href="calendario.html">Calendário Acadêmico</a></li>
        </ul>
        </il>
    <li><a href="corpodocente.html">Corpo Docente</a></li>
	<li><a href="normaseprocedimentos.html">Normas e <br>Procedimentos</br></a></li>
	<li><a href="dissertacoes.html">Dissertações</a></li>
	<li><a href="processosseletivos.html">Processos <br>Seletivos</br></a></li>
	<li><a href="publicacoes.html">Publicações</a></li>
	<li><a href="orgaoseentidades.html">Orgãos e <br>Entidades Integradas</br></a></li>
	<li><a href="linksuteis.html">Links Úteis</a></li>
	<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</header>

<section id="painel">
<h3>ÚLTIMAS NOTÍCIAS</h3>
<header id="noticias">

<h4>12/04/2016 - <a>Homologação das Inscrições - Seleção 2016.</a></h4>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</header>
</section>

<aside id="destaques">
<h3>DESTAQUES</h3>
	<figure class="fotodivulga">
    	<figurecaption>
        <p>Exame Nacional de Acesso 2016</p>
        </figurecaption>
    	   	<a href="http://www.profhistoria.uerj.br/" target="_blank"><img src="_imagens/exame2016.jpg"/></a>  
       <figurecaption>
        <p>Nossa Página no Facebook</p>
        </figurecaption>
    	   	<a href="https://www.facebook.com/profhistoria.uneb/?view_public_for=1525865347719790" target="_blank"><img src="_imagens/faceprofhistoria.jpg"/></a>  
    </figure>
</aside>

<footer id="rodape"> 
<img src="_imagens/rodape-site.png"/>
</footer>

</div>
</body>
</html>


@charset "utf-8";


body{
	background-image:url(_imagens/fundo2.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	width:100%;
	}


p{
	text-align:justify;
	text-indent:20px;
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#000;
	}
	
h3 {
	text-align:center;
	font-size:16px;
	background-color:rgb(226,105,34);
	padding:10px;
	font-weight:bold;
	font-family:Verdana, Geneva, sans-serif;
	margin-top:-70px;			
	}

div#interface{
	width:1010px;
	background-color:rgba(255,255,255,.9);
	margin:300px;
	box-shadow: 0px 0px 10px #333333;
	padding: 10px;
	margin-left:auto;
	margin-right:auto;
}


.menu li  ul{
	position:absolute;
	z-index:1000;
	top:25px;
	left:0px;
	display:none;
	width:94.5%;
	margin:-2px;
	}  

.menu li:hover ul,li.over ul{
	display:inline-block;
	top: 39px;
	left:2px;
	position:absolute;}

li:hover{
	background-color:rgb(234,145,96);
	}
	

ul{
	display:inline-box;
	list-style:none;
	position:relative;
	top:-150px;
	margin-left:auto;
	margin-right:auto;
	right:50px;
	font-weight:bold;
	width:1050px;

}

ul li{
	display:inline;
	background-color:rgb(226,105,34);
	padding: 14px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	margin: -2px;
	max-width:100%;
}

li ul li{
	display:block;
	background-color:rgb(233,142,88);
	max-width:15%;
	text-align:center;
	border-bottom:inset;
}
	
li ul li a{
	color:#000;
}
	
li ul li a:hover{
	color:#FFF;}

li ul li:hover{
	background-color:rgb(255,164,119);}

a{
	color:#FFF;
	text-decoration:none;
	display:inline-block;
	text-align:center;
	vertical-align: middle;	
	}
	
section#painel a{
	color:rgb(236,109,55);
}

section#painel a:hover{
	color: #F00;
	background-color:transparent;}
	
a:hover{
	color: #000;
}
	

figure.topo img{
	position:absolute;
	left:275px;
	top:80px;
	}

.topo{
	position:relative;
	margin:auto;
	top:-320px;
	right:287px;
}
	
section#painel{
	display:block;
	width:680px;
	float:right;
	border-left: 1px solid #999;
	padding-left:15px;
	margin:auto;
	}

aside#destaques{
	display:block;
	width:300px;
	float:left;	
	position:relative;
	}
	
footer#rodape{
	clear:both;
	border-top: 1px solid #999;
	}
	
figure.fotodivulga img{
	border:5px  #FFFFFF solid;
	box-shadow: 1px 1px 4px  #000000 ;
	width:250px;
	height:150px;
	margin:5px -22px;
	}
	
figurecaption p{
	text-align:center;
	color:#000;
	text-decoration:blink;
	font-size:12px;
	font-weight:bold;
	margin-bottom:2px;
	margin-top: 20px;
	text-indent:0px;
	}

@media screen and (max-device-width: 480px) {
		
header#cabecalho li{
	font-size:90.6%;
	padding:17px;
	;
	margin-rigth:-4px;}

.menu li:hover ul,li.over ul{
	display:block;
	top:54px;
	left:2px;}
			
div#interface{
	margin-left:25px;}
	
body{
	background-image:url(_imagens/fundounebazul_cel.png);
	background-repeat:no-repeat;
	background-position:center;;}
	
}

@media screen and (max-device-width: 700px) {
		
header#cabecalho li{
	font-size:90.6%;
	padding:17px;
	;
	margin-rigth:-4px;}
	
.menu li:hover ul,li.over ul{
	display:block;
	top:54px;
	left:2px;}
	
div#interface{
	margin-left:25px;}

body{
	background-image:url(_imagens/fundounebazul_cel.png);
	background-repeat:no-repeat;
	background-position:center;
	}

}

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