by JuliannaKunstler.com
Layout containers provide the visual structure of your website by dividing your pages into blocks of content.
You can add multiple layout containers on each page.
These are some basic layout containers you might want to use.
There is more out there if you need them.
And... you can create your own containers as well. But that's later....
Before you start your design - you need to decide of where and how do you want to use the layout containers.
There are different options available for the content area alone - use one column content, two-column, or three.
You could have more columns, but why??? That would look silly.. :))
Let's start with the header. This is where you will write the title of your page or site, place a logo, or just an image...
Right below the <body> tag
<header>my site</header>
header {
background-color: #DEDDDD;
text-align: center;
padding: 30px;
font-size: 3em;
color: #333333;
}
background-color - is a color of the header container (the box);
text-align - obviously - text alignment;
padding - space around the content inside the container. 30 pixels value means that there are 30 pixels around the content on all 4 sides.
font-size - use em units - 1em=your default text size; 3em=three times the default text size
color - refers to text color inside this container.
after the header tag.
<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>
<ul> - unordered list (the one with bullets).
<li> - list item - your link-button
<a href="#"> - specifies link target
/* navigation container */
nav {
width: 20%;
float: left;
}
/* unordered list inside navigation */
nav ul {
list-style-type: none;
background-color: #333333;
margin: 0;
padding: 0;
}
/* list item inside the list in navigation */
nav li a {
display: block;
color: #CCC;
padding: 8px 16px;
text-decoration: none;
}
/* list item changed color on rollover */
nav li a:hover {
background-color: #CCCCCC;
color: #333333;
}
/* - you can add your notes to the code */
the nav container:
width - specifies the width of your navigation container. Can be in pixels or %.
float - property is used for positioning and formatting content
unordered list:
list-style-type: none; - removes the list formatting (bullets)
background-color - obviously
margin: 0; padding: 0; - to remove browser default settings
list items that are links:
display: block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width (and padding, margin, height, etc. if you want)
color - text color
padding: 8px 16px; - sets padding top and bottom to 8 pixels, and left and right - to 16.
text-decoration: none - removes default link underline formatting.
rollover settings:
background-color - changes as you roll over the button
color - text color changes as well
nav ul {
list-style-type: none;
background-color:#333333;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li a {
display: block;
float: left;
text-align: center;
color: #CCC;
padding: 8px 16px;
text-decoration: none;
}
nav li a:hover {
background-color:#CCCCCC;
color: #333333;
}
Here are some changes you need to make to the code to convert the vertical menu into horizontal.
nav - you can remove the nav tag unless you want to specify its parameters.
unordered list
add overflow property - it tells whether to clip the content or add scroll bars when the content is too big to fit in the area.
list item
float: left; - will position the list items in line
text-align: center; - to center text inside the list item box.
after the nav tag.
<main>
</main>
Leave the content empty for now. We will return here shortly.
main {
background-color: #713839;
}
Just add some weird background color so you can see the container.
You will probably change it later anyway.
after the main tag.
<footer>© 2020</footer>
where © is the copyright symbol © and 2020 is just a year.
footer {
text-align: center;
font-size: 0.5em;
padding: 20px;
}
text-align - to center the content
font-size: 0.5em; - half of default font size
padding - for extra cushion around the content
Congrats!
You are now done with your basic page structure.
Do not forget to save the file.
Next step is to work on the main content area.
We are going to place a row with 2 columns.
The main column is going to be 75% of the page width, and the side column will be 25%.
inside the <main> tag
Create a container, named "row".
Opening tag: <div class="row"> and closing tag </div>.
Inside the row container:
<div class="column main"> </div>
<div class="column side"> </div>
Place headings inside each column:
<div class="column main"><h2>topic</h2> </div>
<div class="column side"><h4>side topic</h4> </div>
You can add attributes to format the .row, or just leave it blank.
Retype or copy/paste the code for .row:after settings..
/* columns that float next to each other */
.column {
float: left;
display:block;
}
/* Main column */
.column.main {
background-color: #888888;
width: 74%;
margin-right: 1%;
}
/* side column */
.column.side {
background-color: #B9B9B9;
width: 25%;
}
Self-explanatory code for columns.
.column - is a common setting for both columns
as you probably have noticed, we change the width value for the main column from 75% to 74%, leaving 1% for the gap between the columns.
/* Responsive layout */
@media screen and (max-width: 800px) {
.column.main, .column.side {
width: 100%;
}
}
This is the code you need to make your page responsive to different devices: desktop, iPad, or phone.
It tells that if the screen is less than 800 pixels wide, the layout will adjust to fit the screen - make the two columns stack on top of each other instead of next to each other
Let's add a container, that would hold your articles, blocks of information, etc.
It should fit inside the columns and adjust its size based on its placement.
in HTML Source Code:
Place it inside <div class="column main"> and </div>
<div class="card">
<p>my content here</p>
</div>Place multiple cards inside both columns.
You can add headings inside these cards and before them.
To make sure the content inside your cards looks great and predictable, add this code to the stylesheet:
.card {
background-color: white;
padding: 20px;
margin: 20px;
width: auto;
}
.card img {
max-width: 100%;
height: auto;
float: left;
margin-right: 15px;
margin-bottom: 15px;
}
.card p {
width: auto;
text-align: left;
}