Ir para conteúdo
Fórum Script Brasil
  • 0

Criação de layout


Yanna Silva

Pergunta

2 respostass a esta questão

Posts Recomendados

  • 0

Olá!

Para conseguir montar o layout você vai precisar de alguns elementos invisíveis pra "segurar" essa estrutura.

Há algumas maneiras possíveis de se resolver esse layout.

Segue sugestão:layout-2.thumb.jpg.ae6464cd4fc2f1c285782d42cbb64b29.jpg

Os elementos com borda traçada em magenta, serão invisíveis e não terão espaço

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Layout</title>
	<style type="text/css">
	html *{
		box-sizing: border-box;
	}
	html, body{
		margin:0;
		background-color: #ddd;
	}
	main{
		width: 100%;
		max-width: 800px;
		min-width: 320px;
		position:relative;
		margin:0 auto;
		background-color: #fafafa;
		box-shadow:1px 1px 3px #333;
		padding:12px;
	}
	main *{
		border-radius:4px;
		vertical-align: top;
		clear: left;
		min-height: 50px;
	}
	header,
	footer,
	aside,
	.content div{
		border:1px solid #000;
		padding:12px;
	}
	.inline > *{
		float:left;
		width: 50%;
		clear: right;
		height: 160px;
	}
	.inline .content{
		width:70%;
	}
	.inline .content > div{
		height:100px;
	}
	.inline	aside{
		height:400px;
		width:30%;
	}
</style>
</head>
<body>
	<main>
		<header></header>
		<div class="content inline">
			<div></div>
			<div></div>
		</div>
		<div class="inline">
			<div class="content">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<aside></aside>
		</div>
		<footer></footer>
	</main>
</body>
</html>

 

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...