Home page sections layout
Question
I'm realizing a new website. I have attached an image of how I would like it to be the base of my home page. I ask you please what is the best method to create these three colored sections.
The first blue in which to insert the title. The second light blue with black borders in which to include names. And the rest light gray where I will add a table containing input boxes and below I will add the text.
I state that I have no problem formatting title, tables, texts, input boxes, etc.
I only can't get the effect of the three sections like in the image. I either tried to use div but I think it's not the best solution because I get unwanted margins.
How would you do?
Thanks:)
.div0 { background-color: red; margin-top: 0%; margin-bottom: 0%; }.title1 { font-family: Arial; font-weight: normal; color: black; font-size: 428%; margin-top: 0.7%; margin-bottom: 0%; text-align: center; bgcolor: red; }.td1 { text-align: center; }.div1 { background-color: blue; margin-top: 0%; margin-bottom: 0%; }
<BODY> <div class="div0"> <H1 class="title1"> Title </H1> </div> <div class="div1"> <table width="96%" align="center"> <tr class="tr1"> <td class="td1" width="1/7"> Name1 </td> <td class="td1" width="1/7"> Name2 </td> <td class="td1" width="1/7"> Name3 </td> <td class="td1" width="1/7"> Name4 </td> <td class="td1" width="1/7"> Name5 </td> <td class="td1" width="1/7"> Name6 </td> <td class="td1" width="1/7"> Name7 </td> </tr> </table> </div> <div class="div2"> </div> </BODY>
2 answers
solution1
1 ACCPTED 2019-10-17 21:49:32
A minimal markup and css for something similar to that, using css grid and flexbox, would be more or less like this:
body { margin: 0; font-family: sans-serif; }.main { display: grid; grid-template-rows: 120px max-content 1fr; min-height: 100vh; }.header { display: flex; justify-content: center; align-items: center; background-color: blue; color: yellow; }.header__title { text-transform: uppercase; }.navbar { display: flex; background: lightblue; border-top: 2px solid; border-bottom: 2px solid; }.navbar__item { flex-grow: 1; padding: 6px 12px; text-align: center; text-transform: capitalize; text-decoration: none; color: black; }.content { background: silver; }
<main class="main"> <header class="header"> <h1 class="header__title">Title</h1> </header> <nav class="navbar"> <a href="#" class="navbar__item">item</a> <a href="#" class="navbar__item">item</a> <a href="#" class="navbar__item">item</a> <a href="#" class="navbar__item">item</a> <a href="#" class="navbar__item">item</a> <a href="#" class="navbar__item">item</a> <a href="#" class="navbar__item">item</a> </nav> <article class="content"> </article> </main>
I recommend you do a bit of studying about html5 semantic markup, to help you know where to use each kind of tag in their appropriate context.
solution2
0 2019-10-17 22:38:12
It is not good practise using tables for the structure of a page. For a structure you may use display:flex or float:left . The first stylesheet removes differences between browsers and give some good readable default values for many devices. The second stylesheet is your styling (see below)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page">
<header id="header">
<h1 class="title1">Title</h1>
</header>
<nav id="nav">
<ul>
<li>Name1</li>
<li>Name2</li>
<li>Name3</li>
<li>Name4</li>
<li>Name5</li>
<li>Name6</li>
<li>Name7</li>
</ul>
</nav>
<main id="main">
<p>Your content</p>
</main>
<footer id="footer">
Footer
</footer>
</body>
</html>
And the css in file "style.css"
html, body {
height: 100%;
}
#page {
max-width: 100%;
min-height: 100%;
padding-top: 0.7%;
}
#header {
background-color: red;
}
#header h1 {
margin: 0;
text-align: center;
}
#nav {
background-color: yellow;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#nav::after {
display: block;
clear: both;
content: "";
}
#nav ul {
padding: 0;
list-style: none;
}
#nav ul li {
float: left;
width: 14.2857%;
padding: 5px 0px 7px 0px;
text-align: center;
}
#main {
min-height: 5em;
padding: 12px 16px;
background-color: silver;
}
#footer {
text-align: center;
background-color: red;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.