Ir para conteúdo

POWERED BY:

Arquivado

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

Mikael ™

[RESOLVIDO] Ajuda Menu CSS e PHP

Por , em PHP

Recommended Posts

Mikael ™    0

Mikael ™
Postado

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 :
167a4h5.png

Como está Ficando:

 

260bxps.png

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
}

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

marsolim    110

marsolim
Postado

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

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eziquiel    96

Eziquiel
Postado

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.

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mikael ™    0

Mikael ™
Postado
8 horas atrás, Eziquiel disse:

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.

 

Cara muito obrigado deu certinho vlww!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP

  • Conteúdo Similar

    • Gdonato
      Alteracao Tema Wordpress Profolio
      Por Gdonato
      Ola pessoal, baixei um tema wordpress Profolio e alterei ja grande parte do tema, porem estou com 2 problemas, um que os icones das redes sociais nao aparecem, altero, publico e nao aparece e  nao estou achando onde alterar a parte OUR PORTFOLIO onde esta em ingles, alguem pode me ajudar onde acho para editar e alterar?
    • Gdonato
      Alteracao Tema Wordpress Profolio
      Por Gdonato
      Ola pessoal, baixei um tema wordpress Profolio e alterei ja grande parte do tema, porem estou com 2 problemas, um que os icones das redes sociais nao aparecem, altero, publico e nao aparece e  nao estou achando onde alterar a parte OUR PORTFOLIO onde esta em ingles, alguem pode me ajudar onde acho para editar e alterar?
    • Gdonato
      Alteracao Tema Wordpress Profolio
      Por Gdonato
      Ola pessoal, baixei um tema wordpress Profolio e alterei ja grande parte do tema, porem estou com 2 problemas, um que os icones das redes socias nao aparecem, altero, publico e nao aparece e  nao estou achando onde alterar a parte OUR PORTFOLIO onde esta em ingles, alguem pode me ajudar onde acho para editar e alterar?
    • Rafael_Ferreira
      Não consigo carregar imagem do captcha no meu formulário
      Por Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito