Jump to content
Fórum Script Brasil
  • 0

Criação de layout


Yanna Silva

Question

2 answers to this question

Recommended Posts

  • 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 to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.2k
    • Total Posts
      652k
×
×
  • Create New...