Ir para conteúdo

Arquivado

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

Daniel Filho

[Resolvido] Centralizar lista

Por , em Desenvolvimento frontend

Recommended Posts

Daniel Filho    1

Daniel Filho
Postado

Bom, quero centralizar uma lista dentro de uma div, ja tentei diversas maneiras...

me ajudem!

 

tenho o seguinte codigo:

 

#menu {
	clear:both;
	margin:auto;
	width:800px;
	height:25px;
	background:#035df1;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
}

#menu ul {
	list-style-type:none
}

#menu ul li {
	position:relative;
	float:left;
	line-height:25px
}

#menu ul li a {
	display:block;
	padding:0px 10px 0px 10px;
	text-decoration:none;
	color:#FFF
}

#menu ul li a:hover {
	background:#2875f3
}


<div id="header">
    	<a href="?pagina=inicio"><img src="imagens/logo.png" width="485" height="167" border="0"  /></a>
    </div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Filho    1

Daniel Filho
Postado 

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

body {
	background:#FFF;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px
}

#header {
	clear:both;
	margin:auto;
	margin-top:20px;
	margin-bottom:20px;
	width:484px
}

#menu {
	clear:both;
	margin:0 auto;
	width:800px;
	height:25px;
	background:#035df1;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
}

#menu ul {
	margin:0 auto;
	list-style-type:none
}

#menu ul li {
	position:relative;
	float:left;
	line-height:25px
}

#menu ul li a {
	display:block;
	padding:0px 10px 0px 10px;
	text-decoration:none;
	color:#FFF
}

#menu ul li a:hover {
	background:#2875f3
}

.link-ativado {
	background:#2875f3
}

#container {
	clear:both;
	margin:auto;
	width:798px;
	height:auto;
	border-left:1px solid #035df1;
	border-right:1px solid #035df1;
	border-bottom:1px solid #035df1
}

.titulo-a-empresa {
	margin-left:35px;
	padding-top:5px;
	padding-bottom:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:36px;
	color:#2875f3
}

.titulo-localizacao {
	margin-left:105px;
	padding-top:5px;
	padding-bottom:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:36px;
	color:#2875f3
}

.titulo-embarcacoes {
	margin-left:200px;
	padding-top:5px;
	padding-bottom:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:36px;
	color:#2875f3
}	

.titulo-motores {
	margin-left:340px;
	padding-top:5px;
	padding-bottom:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:36px;
	color:#2875f3
}

.titulo-produtos {
	margin-left:420px;
	padding-top:5px;
	padding-bottom:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:36px;
	color:#2875f3
}	

.titulo-contato {
	margin-left:510px;
	padding-top:5px;
	padding-bottom:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:36px;
	color:#2875f3
}

<body>
	<div id="header">
    	<a href="?pagina=inicio"><img src="imagens/logo.png" width="485" height="167" border="0"  /></a>
    </div>
    <div id="menu">
		<?php include "estrutura/menu.php"; ?>
    </div>
    <div id="container">
		<?php include "estrutura/titulos.php"; ?>
    	<?php include "paginas/query.php"; ?>
    </div>
</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Filho    1

Daniel Filho
Postado

sim, estou

 

<!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" />
<link rel="stylesheet" type="text/css" media="screen" href="estilo.css" />
<title>Mar Náutica - Fabricação de Embarcações para a Amazônia.</title>
</head>
<body>
	<div id="header">
    	<a href="?pagina=inicio"><img src="imagens/logo.png" width="485" height="167" border="0"  /></a>
    </div>
    <div id="menu">
		<?php include "estrutura/menu.php"; ?>
    </div>
    <div id="container">
		<?php include "estrutura/titulos.php"; ?>
    	<?php include "paginas/query.php"; ?>
    </div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Filho    1

Daniel Filho
Postado

o meu MENU é um script em php, por causa do seletor.

 

mas ele ta assim:

 

<div id="menu">
<ul>
<li class="link-ativado"><a href="?pagina=inicio">INÍCIO</a></li>
<li><a href="?pagina=a-empresa">A EMPRESA</a></li>
<li><a href="?pagina=local">LOCALIZAÇÃO</a></li>
<li><a href="?pagina=embarcacoes">EMBARCAÇÕES</a></li>
<li><a href="?pagina=motores">MOTORES</a></li>
<li><a href="?pagina=produtos">PRODUTOS</a></li>
<li><a href="?pagina=contato">CONTATO</a></li>
</ul>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

RafaelNMNM    0

RafaelNMNM
Postado

Você diz centralizar o texto dentro do menu? Se for testa o css abaixo:

 

#menu {
        clear:both;
        margin:auto;
        width:800px;
        height:25px;
        background:#035df1;
        font-family:Arial, Helvetica, sans-serif;
        font-weight:bold;
        font-size:12px;
	text-align:center;
}

#menu ul {
        list-style-type:none
}

#menu ul li {
	display:inline;
        line-height:25px
}

#menu ul li a {
        padding:0px 10px 0px 10px;
        text-decoration:none;
        color:#FFF
}

#menu ul li a:hover {
        background:#2875f3
}

.link-ativado {
        background:#2875f3
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

RafaelNMNM    0

RafaelNMNM
Postado

Foi mal, nem percebi, segue abaixo arrumado.

#menu {
        clear:both;
        margin:auto;
        width:800px;
        height:25px;
        background:#035df1;
        font-family:Arial, Helvetica, sans-serif;
        font-weight:bold;
        font-size:12px;
	text-align:center;
}

#menu ul {
        list-style-type:none
}

#menu ul li {
	display:inline;
        line-height:25px
}

#menu ul li a {
        padding:5px 10px 6px 10px;
        text-decoration:none;
        color:#FFF
}

#menu ul li a:hover {
        background:#2875f3
}

.link-ativado {
        padding:5px 0 6px 0;
        background:#2875f3
}

Aproveitando, aconselho usar um CCS Reset.

CSS Reset básico

* {margin:0; padding:0;}

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