Publicado em 7 de mai.

[RESOLVIDO] Ajuda Menu CSS e PHP

Bom pessoal estou tentando criar um WordPress para divulgar meu portfólio e quero programar meu blog,tenho um pouco de noção de programação mas é mais gambiarra hehehe

Enfim meu Problema é o Seguinte quero colocar um menu no canto superior direito no Header mas não consigo colocar os botões diretamente no canto direito nem alinhar no header vou passar imagem do que eu gostaria e de como está ficando.

Como eu gostaria :
/applications/core/interface/imageproxy/imageproxy.php?img=http://i63.tinypic.com/167a4h5.png&key=54718dc5925d7e0b984411db496b467cf552a6245e3b11632ea52133e84f0eec" width="1000" />

Como está Ficando:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i64.tinypic.com/260bxps.png&key=3f39604b4af6af30eca8396b74d3778f5560bbf4e82d3b7a3e04a3789ce5fc54" width="1000" />

Bom vou passar meus códigos PHP e CSS para vocês darem uma olhada bom desde já agradeço hehe.

PHP:

<html>
<head>
	<title><?php bloginfo(name); ?> - <?php bloginfo(description); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; <?php bloginfo('charset'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" media="all" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0″ href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92″ href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3″ href="<?php bloginfo('atom_url'); ?>" />
	<?php wp_head (); ?>
</head>
<body>
	<div class="header">
 <div class="centered_header"><a href="<?php get_option (home); ?>"><img src="wp-content/themes/mikael-antonio/img/logo.jpg" width="400px;" /></a>
 <div class="menu">
 <div class="centered_menu"></div>
 <ul>
 <li><a href="<?php get_option (home); ?>">INICIO</a></li>
 <?php wp_list_pages ('title_li='); ?>
 </ul>
 </div>
 </div>
	</div>
</body>
</html>

	CSS:

	margin: 0;
	padding: 0;
}
.container {
	position: relative;
	width: 1000px;
	margin-left: -500px;
	left: 50%;
}

.header {
	position: relative;
	width: 100%;
	height: 100px;
	background-color: #222222;
	border-bottom: 1px solid #000000;
}

.centered_header {
	position: relative;
	width: 1000px;
	height: 100px;
	margin-left: -650px;
	left: 50%;
	padding-top: 27px;
}

.menu {
	position: relative;
	display:inline-block;
	padding:5px 10px;
}
.centered_menu {
	position: relative;
}

li {

	list-style-type: none;
	display: inline;
	padding-left: 15px;
	padding-right: 15px;
}

li a {

	font-family: Trebuchet, sans-serif;
	font-size: 20px;
	color:#ffffff;
	text-decoration: none;
}

li a:hover {
color: #2e6470
}

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

marsolim· 7 de mai.

isso é na área de css e não de php mas talvez seja o caso de tirar o position e botar float: right no lugar

Eziquiel· 7 de mai.

Olá.

Sugiro fazer uso de flexbox (display: flex;).

No seu caso isso fará a centralização na vertical automaticamente, bem como o posicionamento do logo na esquerda e menu à direita, através da propriedade "justify-content: space-between;"

Isso também elimina a necessidade de calcular margins ou paddings para determinados ajustes.

Outro porém é a facilidade na hora deixar seu site responsivo.

Por tudo isso aconselho fazer uso de flexbox.

Veja o seu exemplo funcionando (não repare o logo, pois usei um aleatório).

Repare que fiz algumas modificações tanto no html quanto no CSS, eliminando algumas propriedades desnecessárias.

https://codepen.io/Eziquiel/pen/LyOdRy

Abraço.

Mikael ™· 8 de mai.

8 horas atrás, Eziquiel disse: