Ir para conteúdo

POWERED BY:

Arquivado

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

Falconi

Cabeçalho de site com imagem - Como ajustar a resolução

Por , em Desenvolvimento frontend

Recommended Posts

Falconi    0

Falconi
Postado

Olá galera!!!

Estou desenvolvendo um site, e no topo do meu site tenho uma imagem com a logo e slogan da empresa.

O problema é que quando eu mudo a configuração do vídeo, a imagem ou fica cortada ou ultrapassa as dimessões do vídeo.

 

A imagem está com um tamanho de 800 x 600

 

Este é o código que estou utilizando para o topo.

#topo{
   width: 100%; 
   height: 130px;
   background: url(../img/cabecalho.png) no-repeat riht;
   border-bottom-width: 2px;
   border-bottom-style: solid;
   border-bottom-color: #0A246A;
   background-position: center center;
   background-color: skyblue;

Fico no aguardo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Falconi    0

Falconi
Postado

Amigo, só com esse trecho de CSS não dá para ajudar muito... Não tem um link para que possamos ver o que está acontecendo de fato? :mellow:

Na verdade não tem um link, pois o site não está publicado ainda, tenho um site no ar, e to fazendo outro para incorporar no lugar deste, só irei publicar qd estiver pronto.

 

Mas a minha dificuldade está em expandir ou diminuir a imagem dependendo da configuração do munitor.

Todas as outras partes do site, se ajustam que é uma maravilha, mas este cabeçalho tá dificil.

 

Segue o código do topo inteiro do meu site, que está salvo em um arquivo chamado menu.php, onde dou um include em todas as outras páginas.

 

<html>
   <head>

	  <link href="css/cabecalho.css" rel="stylesheet" type="text/css" />

   </head>

   <body onload="menuDropDown(12);">
   <!-- Aqui estou chamando a div topo que é onde está minha imagem que não se ajusta -->

	 <div id="topo"> 
   
	 </div>
	 

	<!-- Daqui para baixo é somente a criação de um menu dropdown -->
	<div id="menu">

			  <!--
			 Na classe submenu deverão ser informadas as opções do menu horizontal (barra de menu).
			 Na classe menu deverão ser informadas as opções do menu vertical.
			 Para inserir mais um nível deve-se alterar a classe "item" para "submenu" e adicionar outra lista de classe "menu" nela.
			  --> 

			 <!-- Criação do menu dropdown -->

<ul id="menu_dropdown" class="menubar">
   <li class="submenu"><a href="index.php"><b>Home</a></li>
   
   <li class="submenu"><a href="#">Institucional</a>
	  <ul class="menu">   
		  
	<li class="item"><a href="#">Quem Somos</a></li>
		  
	<li class="item"><a href="#">Objetivos</a></li>
		  
	<li class="item"><a href="#">Missão e Valores</a></li>   
	
	<li class="item"><a href="#">Justificativa</a></li>  
	
	<li class="item"><a href="#">Metodologia</a></li>				
													   
	  </ul>
  </li>
   <li class="submenu"><a href="#">Cursos</a>
	  <ul class="menu">
		
	<li class="item"><a href="#">Item de Menu...</a></li>
		
	<li class="item"><a href="#">Item de Menu...</a></li>		
		
	<li class="item"><a href="#">Item de Menu...</a></li>
	  </ul>
  </li>
   <li class="submenu"><a href="#">Notícias</a>
	  <ul class="menu">
		
	<li class="item"><a href="noticias (2).php">Notícias</a></li>
		
	<li class="item"><a href="#">Colunistas</a></li>		
		
	<li class="item"><a href="#">Artigos</a></li>  
	  </ul>
  </li>
   <li class="submenu"><a href="#">Parceiros</a>
	  <ul class="menu">
		
	<li class="item"><a href="#">Nossos Parceiros</a></li>
		
	<li class="item"><a href="#">Seja Nosso Parceiro</a></li>		
		
	<li class="item"><a href="#">Contribuição</a></li>		
		
	<li class="submenu"><a href="#">Item SubMenu</a> 
	  <ul class="menu">
		<li class="item"><a href="#">Item SubMenu...</a></li>
		<li class="item"><a href="#">Item SubMenu...</a></li>
		<li class="item"><a href="#">Item SubMenu...</a></li>
	  </ul>
	</li>	   
	  </ul>
  </li>
   <li class="submenu"><a href="#">Galeria de Fotos</a></li>
	  <ul class="menu">
		 
  <li class="item"> <a href="#"> Item de Menu</a></li>
		 
  <li class="item"> <a href="#"> Item de Menu</a></li>
		 
  <li class="item"> <a href="#"> Item de Menu</a></li>
	  </ul>
   <li class="submenu"><a href="#">Downloads</a>   
	  <ul class="menu">
		
	<li class="item"><a href="#">Menu Drop Down</a></li>
		
	<li class="item"><a href="#">Página Menu Drop Down</a></li>
	  </ul>
  </li>
  
   <li class="submenu"><a href="#">Fale Conosco</a></li></b>

  
</body>

<!-- Classe que está no arquivo cabecalho.css que define as propriedades do topo do site -->


#topo{
	width: 100%;
	height: 26%;
	background: url(../img/cabecalho.png) no-repeat right;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #0A246A;
	background-position:center center;
	background-color:skyblue;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Seria legal que você postasse a imagem.

Pois backgrounds não são liquidos por definição.

 

Então oque costumamos fazer, é uma imagem grande, tipo uns 1440 px de largura, que vai sendo mostrada e ocultada, conforme a resolução do usuário.

Ou então, apenas uma com cores simples como degradê, que possamos mandar repetir.

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