Ir para conteúdo

POWERED BY:

Arquivado

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

Felipe Sartori

[Resolvido] Centro :p

Por , em Desenvolvimento frontend

Recommended Posts

Felipe Sartori    0

Felipe Sartori
Postado

Pessoal, eu estou fazendo um site e gostaria de deixar o MENU centralizado, mas não consigo de jeito nenhum, oque posso fazer?

 

CSS:

@charset "utf-8";
/* CSS Document */

Body {
background-image:url(images/bg1.png);

background:repeat:none;
background-color:#CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
}

#Logotipo {
text-align:center;
margin-top:35px;
margin-left:43px;}

#Menu {
margin-top:25px;
text-align:center;}

#Produtos {
margin-top:40px;
color:#000000;}

#Conteúdo {
margin-left:160px;
margin-top:40px;
text-align:left;
margin-right:160px;
color:#FFFFFF;}

#Rodape {
margin-top:110px;
margin-right:35px;
margin-left:35px;
text-align:center;
text-decoration:none;}

a:link, a:visited {
text-decoration: none;
color:#FF6600;}

a:hover {
text-decoration: none;
color:#FF6600;}

a:active {
text-decoration: none;}

#gallery {
	margin-top:100px;
	padding: 10px;
	width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
	border: 5px solid #3e3e3e;
	border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
	border: 5px solid #fff;
	border-width: 5px 5px 20px;
	color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>

 

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>João Batista - Raspagem de Tacos</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />    

   <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
   <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
   <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
   <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->

   <!-- Ativando o jQuery lightBox plugin -->
   <script type="text/javascript">
   $(function() {
       $('#gallery a').lightBox();
   });
   </script>

</head>

<body>
<div id="Logotipo">
<a href="index.html" title="Página Inicial"><img border="0" src="images/logotipo.png" /></a>
</div>

<center>
<div id="Menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
 <li><a href="index.html" title="Página Inicial">Início</a> </li>
 <li><a href="servicos.html" title="Meus serviços">Serviços</a></li>
 <li><a href="fotos.html" title="Veja aqui as fotos dos meus trabalhos">Fotos</a> </li>
 <li><a href="contato.html" title="Entre em contato comigo">Contato</a></li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</div></center>

<center>
<div id="gallery">
   <ul>
       <li>
           <a href="images/grande_image1.JPG" title="A Raspadora de Tacos João Batista vem há 36 anos no mercado, sendo especializada em colocação e raspagem de tacos, assoalhos e rodapés.">
               <img src="images/image1.JPG" width="72" height="72" alt="" />
           </a>
       </li>
       <li>
           <a href="images/grande_image2.JPG" title="Fazemos orçamento em toda região de Campinas, entre em contato!">
               <img src="photos/image2.jpg" width="72" height="72" alt="" />
           </a>
       </li>
       <li>
           <a href="images/grande_image3.JPG" title="A Raspadora de Tacos João Batista trabalha com várias opções de acabamento, utilizando produtos que atendem os mais diferentes gostos, acompanhando as novas tendências de mercado.">
               <img src="images/image3.JPG" width="72" height="72" alt="" />
           </a>
       </li>
       <li>
           <a href="images/grande_image4.JPG" title="Telefones para contato: (19) 3873-9300 | (19) 9715-7581 | (19) 9485-2019">
               <img src="images/image4.JPG" width="72" height="72" alt="" />
           </a>
       </li>
       <li>
           <a href="images/grande_image5.JPG" title="Raspadora de Taco João Batista, satisfazendo a vontade de seus clientes.">
               <img src="images/image5.JPG" width="72" height="72" alt="" />
           </a>
       </li>
   </ul>
</div></center>


<div id="Conteúdo">
<i><h4>A raspadora de tacos João Batista está no mercado desde 1975, buscando satisfazer os desejos de nossos clientes. Trabalhamos com produtos de ótima qualidade, proporcionando um visual inovador, luxuoso e aconchegante para sua casa ou seu negócio. Entre em contato, trabalhamos em Campinas e região.</h4></i></p></center>
</div>

<div id="Rodape">
<p style="float:left;">Raspagem de Tacos - João Bastista © 2011<br />
Desenvolvido por: <a href="mailto:fsartori96@hotmail.com" title="Contato Felipe Sartori"><b>Felipe Sartori</b></a></p>
<p style="float:right;">(19) 3873-9300 | (19) 9715-7581 | (19) 9485-2019</p>
</div>


</body>
</html>

 

Desde já obrigado :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

O menu já está centralizado, só não está inline.

 

Adiciona no CSS:

li { display:inline; }

Acho que é isso. :bye:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe Sartori    0

Felipe Sartori
Postado

Não foi :(

Eu não entendo muito isso, voce pode me explicar? Eu sou iniciante, é meu PRIMEIRO website.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Você usou aquelas ferramentas prontas do Dreamweaver, não foi? Se sim, é bem provável que mesmo você reescrevendo o CSS em outro arquivo, o original possa sobrescrever estas alterações.

 

Mas, caso consiga, é mais ou menos na ideia que a Diéssica falou mesmo:

 

#Menu { text-align: center }
#Menu ul { display: inline-block; margin: 0 auto }
#Menu li { float: left }

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe Sartori    0

Felipe Sartori
Postado

#André;

Funcionou perfeitamente, dê uma conferida, eu vou falar mesmo, NÃO ESTÁ BOM, eu reconheço, por ser meu PRIMEIRO site não sei :c

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