I can't figure out how the color of header-outer and footer-outer is it is.
I can't find any hex color values for the both of them.
Here is the full code:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Layout: full width bands</title>
<style media="all">
body {
font: 100% Calibri,"Gill Sans","Gill Sans MT","Myriad Pro",Myriad,Frutiger,"Frutiger Linotype",Univers,"DejaVu Sans Condensed","Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif;
background: #30353b; margin: 0; padding: 0;
}
.header-outer, .main-outer, .footer-outer {
width: 100%;
}
.main-outer {
background: #f7f7f7;
}
.header, .main, .footer {
margin: 0 auto;
width: 50em;
padding: 20px 0;
overflow:hidden;
max-width: 98%;
}
.header, .footer {
color: white;
}
a {
color: #D45227;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.footer p {
margin: 0; font-size: 0.85em;
}
.logo {
float: left;
padding: 30px;
background: #D45227;
}
h1, h2 {
margin: 0;
padding: 0;
}
.content {
float: left;
width: 69%;
padding: 0 5% 0 0;
}
.sidebar {
width: 24%;
float: left;
}
@media only screen
and (max-width : 480px) {
body {-webkit-text-size-adjust: none;}
.content, .sidebar {float: none; width: 100%;}
.content {padding: 0;}
.sidebar {margin-top: 1em; padding-top: 1em; border-top: 1px solid #e7e7e7;}
}
</style>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="header-outer">
<div class="header">
<div class="logo">Your Logo here</div>
</div>
</div>
<div class="main-outer">
<div class="main">
<div class="content">
<h1>Layout: 100% width bands</h1>
<p>This is a simple page layout with bands of color across the page.</p>
<p>The basic idea is to have outer and inner divs for each section, the outer set to width: 100% and the inner divs centered with a width and margin: 0 auto;</p>
<p>The body background color serves as the background for the header section and the footer, but extends to the bottom of the screen if there is extra space. (That's much nicer than having a white gap at the bottom of the page under the footer.) Of course, each section could have its own background color. It's up to you.</p>
<p>The .header, .main and .footer divs are given a width in ems to make them more elastic, but the columns within the .main div are given % widths so that they will adjust in width on narrow browsers. (Squeeze the browser to a narrow width to see the effect. Also try zooming in on the page to see how nicely everything fits at a large size.)</p>
<p>The .header, .main and .footer divs are set to overflow: hidden to ensure that they <a href="http://pageaffairs.com/notebook/containing-floats">encose any floated content</a> within them.</p>
<p>@media rules are added so that, on small screens like handhelds, the floated columns will be unfloated.</p>
<p>Return to <a href="http://pageaffairs.com/code/layout-full-width-bands">original Page Affairs article</a>.</p>
<p>For more details on the fluid/elastic nature of this layout, see the <a href="http://pageaffairs.com/notebook/fluid-elastic-fantastic">Fluid, Elastic, Fantastic!</a> article.</p>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>Content relevant to the sidebar</p>
</div>
</div>
</div>
<div class="footer-outer">
<div class="footer">
<p>Footer text goes here. Layout by <a href="http://pageaffairs.com/">Page Affairs</a></p>
</div>
</div>
</body>
</html>
Originally Posted by successfulfail
Instead, use the dev tools in your browser. For example, in Chrome, right click > Inspect Element to view the HTML and CSS of the page.
Posting Permissions
Reply With Quote
Bookmarks