Ir para conteúdo

Arquivado

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

VaizardX

Float center ?

Recommended Posts

Fala galera, tô com um problema aqui que eu não to conseguindo subir o padding do meu menu para acima de 41.4%, se não ele começa a descer devido ao Float: left que utilizei, e isso vai causar algum problema em tamanhos de telas menores e eu acho que em alguns maiores também, já que a minha intenção é fazer algo responsivo.

Segue abaixo meu código HTML e o CSS, se agluém puder me ajudar com isso ficaria muito grato !

HTML:

<!DOCTYPE html>


<html lang="pt-BR">

	<head>
		<title>Index</title>
		<meta charset="utf-8">
		<meta name="description" content="Conteudo da descrição">
		<meta name="Keywords" content="Conteudos, Separados, Por, Virgula">
		<meta name="robots" content="index, follow">
		<meta name="author" content="Hudson Medeiros">
		<meta name="theme-color" content="#12A07F">
		<link rel="stylesheet" href="css/reset.css"> <!-- Reset CSS -->
		<link rel="stylesheet" href="css/estilo.css"> <!-- Meu CSS -->
		<link rel="stylesheet" href="awfonts/css/font-awesome.min.css"> <!-- Fonts Awesome -->
	</head>
	 
	<body>
		
		<header class="cabecalho">
			
			<h1 class="logo">
				Logo da página :)
			</h1>
			
		</header>
		
		<nav class="menu">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Postagens</a></li>
				<li><a href="#">Sobre mim</a></li>
				<li><a href="#">Contato</a></li>
			</ul>
		</nav>
	
	</body>
	
</html>

CSS:

.cabecalho{
	width: 100%;
	float: left;
	padding: 2em 42%;
	background-color: #0ABC93;
}

.logo{
	width: 285px;
	height: 123px;
	float: left;
	font-size: 0;
	background: url(../imagens/logo.png) no-repeat;
}

/* NAVBAR */

.menu{
	width: 100%;
	float: left;
	background-color: #098A6C;
	padding: 1em 41.4%;
}

.menu li{
	float: left;
}

.menu li a{
	color: #FFFFFF;
	margin-right: 1em;
}

.menu li a:hover{
	color: #7FFFD4;
}

Se alguem puder me ajudar com isso ficaria muito grato! :)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá @VaizardX , blz? Posicionamento no CSS pode ser feito com float é bem verdade, mas float na real não foi feito para posicionamentos mais complexos. Por isso sugiro que utilize uma feature chamada: Flexbox. 

Mas pra resolver o problema em questão mesmo que queira usar float, tente as media queries. Elas te deixaram "mudar" facilmente o posicionamento de acordo com a quebra do layout.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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