Ir para conteúdo

POWERED BY:

Arquivado

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

MatheusSilva

Posicionamento link dentro do menu

Por , em Desenvolvimento frontend

Recommended Posts

MatheusSilva    0

MatheusSilva
Postado

mais uma vez eu enchendo o saco de vcs...

 

eu tenho o menu, com float left e porem sobrou um espaço estremamente gigante na parte direita....porem tem um problema, se eu coloco atributo text-align:center ele fica desconfigurado por há tambem os separadores no meio.

 

segue img

 

2-1.png

 

há alguma opçao para que o menu se torne mais agradavel sem esses espaçamentos gigantescos e senao como coloca-lo no meio?

 

Index...

 

<!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>Qualitec - Cursos Tecnicos , Soldagem industrial, Cursos profissionalizantes</title>
<!-- SEO-->
<meta name="description" content="Qualitec - Cursos profissionalizantes na area de soldagens industriais" />
<meta name="keywords" content="qualitec, trabalho, cursos profissionalizantes, soldagem industrial, soldagem" />
<meta name="robots" content="INDEX, FOLLOW" />
<meta name="author" content="trabalho, cursos profissionalizantes, soldagem" />
<link href="estilo.css" rel="stylesheet" type="text/css"  />

<!-- Scripts-->
<script type="text/javascript" src="js-cuber/jquery.js"></script>
<script type="text/javascript" src="js-cuber/swfobject/swfobject.js"></script>
<script type="text/javascript">

var flashvars = {};
	flashvars.xml = "config.xml";
	flashvars.font = "font.swf";
	var attributes = {};
	attributes.wmode = "transparent";
	attributes.id = "slider";
	swfobject.embedSWF("cu3er.swf", "cu3er-container", "1024", "200", "3", "expressInstall.swf", flashvars, attributes);
</script>
</head>

<body>
<div id="box">

<div id="header">
	<div id="logo">
       	<a href="index.php"><img alt="logo" src="img/logo/logo.jpg" /></a>
   	</div><!--Logo -->

   	<div id="pesq"><!-- pesquisa -->
   	<form action="pesquisar.php" method="post">
     	<table width="40%" border="0" cellpadding="1">
       	<tr>
         	<td width="10%"><span class="ativo">Pesquisar: </span> </td>
         	<td width="20%"><input type="text" name="pesquisa" onfocus="if(this.value=='Pesquisar') this.value='';" value="Pesquisar" /></td>
         	<td width="70%"><input name="acao" type="submit" class="btn" value="Pesquisar" /></td>
       	</tr>
     	</table>
     	</form>
   	</div><!--pesquisa -->  
</div><!--header -->


<div id="menu_bar">
<a href="?pag=home">Home</a>
<img src="img/menu/separador.jpg"  />
<a href="?pag=cursos">Cursos</a>
<img src="img/menu/separador.jpg" />
<a href="?pag=metodo" >Metodo</a>
<img src="img/menu/separador.jpg"  />
<a href="?pag=localizacao">Localização</a>
<img src="img/menu/separador.jpg" />
<a href="?pag=valores">Valores</a>
<img src="img/menu/separador.jpg"  />
<a href="?pag=contato">Contato</a>
</div><!--menu -->


<!-- clear -->
<div id="clear">
</div>
<!-- fim clear -->

<!--slider-->
<div id="cu3er-container">
<a href="http://www.adobe.com/go/getflashplayer">
   	<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>
<!-- fim slider -->


<!-- clear -->
<div id="clear">
</div>
<!-- fim clear -->



<div id="content">

   	<div id="conteudo">
   	<?php
		include("functions/function_querystring.php");
   	QueryString($_GET['pag'], 'home', 'arquivos');
   	?>
  	</div><!--conteudo -->


     	<div id="sidebar"><!-- inicio sidebar -->

<h1>Algumas coisas</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis eleifend velit. Quisque varius malesuada bibendum. Etiam in quam eget nibh fringilla hendrerit. Ut elementum dui quis erat pellentesque nec faucibus est cursus. Quisque molestie tellus ac eros pulvinar in porta neque convallis. Fusce at turpis et odio tempus pretium ut in diam. Donec ac sapien porta nulla semper hendrerit? Donec mattis, quam eget vulputate hendrerit, metus augue faucibus magna; eget dictum nibh nunc quis massa. In at sem nisi. Etiam sit amet odio neque? Nunc viverra viverra nunc.

Nulla sit amet viverra dui. Etiam quis arcu non sapien vulput</p>
 <br />
<br />
<br />

<h1>Redes Sociais</h1>
<div id="redes">
<a href="#"><img src="img/redessociais/twitter.png" /></a>
<a href="#"><img src="img/redessociais/facebook.png" /></a>
<a href="#"><img src="img/redessociais/orkut.png" /></a>
<a href="#"><img src="img/redessociais/youtube.png" /></a>
</div><!-- redes sociais-->

		</div><!--sidebar -->
</div><!--content -->



<div id="clear"></div><!--clear-->


<div id="footer">
<div id="news">
<span>Cadastre-se em nosso sistema de newslette</span>
 	<form id="form1" name="form1" method="post" action="newsletter/enviar.php" enctype="multipart/form-data">
   	<span>Nome:</span>
   	<input type="text" name="nome" id="nome" value="Digite seu nome" onfocus="if(this.value=='Digite seu nome') this.value='';" />
   	<br />
   	<span>Email:</span>
		<input type="text" name="email" id="email" value="Digite um email válido" onfocus="if(this.value=='Digite um email válido') this.value='';" />
		<input type="submit" name="acao" id="btn" value="Cadastrar" />
		<input name="acao" type="hidden" value="Cadastrar" />
  	</form></div><!-- newsletter-->


<div id="footer_cpr">
<p>2010 - <?php echo date('Y');?> Qualitec© - Cursos Tecnicos de soldagem industrial.</p>
<p>Todos os Direitos reservados</p>
</div><!-- cooperaight-->

</div><!--footer -->
</div><!-- box-->
</body>
</html>

 

 

css

/*reset e body*/
*{margin:0;padding:0px;}
body{background:url(img/logo/bg.jpg) repeat-x #999;}

/*Classes Adicionais*/
.clear{clear:both}

/*Corpo do site*/
#box{width: 1040px; margin:auto} 


/*formulario de pesquisa*/
#pesq{float:right; background:#F00;-webkit-border-bottom-left-radius:150px;border-bottom-left-radius:150px; width:400px; /*
padding:5px;*/ padding-left:18px; padding-right:10px; padding-bottom:5px; padding-top:3px; width:298px;}
.btn{border:0px; background:#e5e5e5;}
#pesq form input{background-color:#FFF; border:1px solid #06C; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; padding:3px 4px; color:#999}

/*Header*/
#header{height:119px;}
#logo{float:left; padding:20px;}



/*Menu*/

#menu_bar{background-color:#0080c0;; float:left; width:1024px; height:45px}
#menu_bar a{text-decoration:none; float:left; color:#FFF; font:18px Tahoma, "Trebuchet MS", Arial, sans-serif;padding-bottom:15px; padding-left:15px; padding-right:12px; padding-top:13px; text-align:center;}
#menu_bar a:hover{background:#0F0}
#menu_bar img{padding-top:6px;float:left;}

/*
#menu_bar{height:50px; background:#80ffff;}
#menu_bar a{float:left; text-decoration:none; color:#FFF; font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; padding:13px 15px}
#menu_bar a:hover{background-image:url(img/menu_hover.jpg); background-repeat:repeat-x;}
#menu_bar img{float:left} 
*/



/*Content*/
#clear{clear:both}
#content{margin-top:10px}
#conteudo{width:780px;padding:5px; text-align:left; font-family: 14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#333; float:left; margin-right:1px; background:#FFF}
#conteudo h1{font:18px Tahoma, Geneva, sans-serif; color:#069; border-bottom:solid #069 3px; margin:0 0 5px 0; padding:0 0 3px 0; }
#conteudo h2{font: 16px Tahoma, Geneva, sans-serif; color:#CCC; font-weight:bold; }
#conteudo p{margin:10px 0px 10px 0; text-align:justify;}
#conteudo a{color:#06C; text-decoration:none; font-weight:bold;}
#conteudo a:hover{color:#036;}
#sidebar{width:215px; float:right; margin-right:10px; background:#FFF; margin-bottom:20px; border:1px solid #069; padding:5px; font:14px "Palatino Linotype", "Book Antiqua", Palatino, serif; margin-top:0px;}
#sidebar ul li{list-style:none;}
#sidebar .titulo{font:16px Georgia, "Times New Roman", Times, serif; color:#000; border:2px solid #CDCDCD; width:200px;text-align:center;}
#sidebar h1{font:18px Tahoma, Geneva, sans-serif; color:#F90; font-weight:bold; padding:5px; border:1px solid #063; background-color:#CCC; float:left; width:200px}
#redes a{margin:4px; ba}

/*Footer*/
#news{float:left; height:auto; overflow:auto;width:auto;}
#news span{font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bolder}
#news form input{background:#F5F5F5; border:1px solid #069; font:Tahoma, Geneva, sans-serif; color:#069;}
#news #btn{font-weight:bolder; color:#000}
#news form span{font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bolder}
#footer{overflow:auto; background:#0CC;}
#footer_cpr{text-align:right; font:12px Tahoma, Geneva, sans-serif; float:left;font-weight:bolder; height:auto; width:500px;}

 

 

obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulol    0

Paulol
Postado

Tenta colocar no css do menu:

position: relative;
margin-left: auto;
margin-right: auto;

 

Mesmo assim eu recomendaria você a utilizar um <ul>/<li> para fazer um menu nesse seu estilo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

MatheusSilva    0

MatheusSilva
Postado

entao eu teria de criar uma ul dentro da div certo?

 

<div id="menu_bar"
<ul>
<li>Home</li>
<li>imagem do separador</li>
<li>Produtos</li>
<li>imagem do separador</li>
etc....
</ul>

</div>

 

entao eu teria de atacar a li com esse css postado por você??

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