And this is a flexbox layout from 2011, with support for older browsers that is not strictly required anymore.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>dw_flexbox_starter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1 {
text-align: center;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
/* The actual page css */
/*The @media is for Safari, Android and iOS display, it is placed before the main css so that the cascade works correctly Also if it is placed after the main css, Chrome also inherits the css and does not use the new syntax, and most importantly, not the flex-wrap. */
@media
(-webkit-min-device-pixel-ratio: 0){
.container {
width: 100%;
}
header {
display: -webkit-inline-box;
}
/* a div with id name=contentWrap must enclose the
.sidebar, .content, #rtSidebar, aside html elements, in order enable flexbox 'again' */
#contentWrap {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-lines: multiple;
width: 100%;
}
.sidebar, .content, #rtSidebar, aside {
width: 190px;
-webkit-box-flex: 0.0;
}
.content {
min-width: 450px;
-webkit-box-flex: 2.0;
}
footer {
display: -webkit-inline-box;
}
}
/*The #contentWrap is only required because of none flex wrap supporting browsers*/
.container, #contentWrap {
background-color: #FFFFFF;
display: -ms-flexbox;
-ms-flex-direction: row;
-ms-flex-wrap: wrap;
display: -webkit-flex;
-webkit-flex-flow: row wrap;
display: flex;
flex-flow: row wrap;
}
header {
background-color: #ADB96E;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
width: 100%;
}
.sidebar, .content, #rtSidebar, aside {
-ms-flex: 3 1 300px;
-webkit-flex: 3 1 300px;
flex: 3 1 300px;
}
.sidebar1, #rtSidebar {
-ms-flex-preferred-size: 180px;
-webkit-flex-basis: 180px;
flex-basis: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
-ms-flex-preferred-size: 62vw;
-webkit-flex-basis: 50%;
flex-basis: 50%;
}
#rtSidebar {
background-color: #EADCAE;
padding: 10px 0;
-ms-flex-preferred-size: 180px;
-webkit-flex-basis: 180px;
flex-basis: 180px;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
nav ul{
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
width: 180px;
}
nav li {
border-bottom: 1px solid #666;
width: 180px;
}
nav a, nav a:visited {
width: auto;
text-decoration: none;
background-color: #C6D580;
}
nav a:hover, nav a:active, nav a:focus {
background-color: #ADB96E;
color: #FFF;
}
footer {
padding: 10px 0;
background-color: #CCC49F;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
width: 100%;
}
/* Fallback for FF none support of flex wrap */
@supports not (flex-wrap: wrap) /*and not (-webkit-flex-wrap: wrap)*/ {
.container {
display: block;
width: 100%;
}
/* a div with id name=contentWrap must enclose the
.sidebar, .content, #rtSidebar, aside html elements, in order to enable flexbox 'again' */
#contentWrap {
display: flex;
flex-direction: row;
flex-basis: 100%;
}
header, footer {
display: inline-flex;
}
}
@media screen and (max-width:700px){
/* Notice how this rule is not applied until after the flex-flow */
.container {
min-width: 500px;;
}
header {
display: -ms-flex;
-ms-flex-direction: column;
}
header, #contentWrap, footer {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-lines: multiple;
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
flex-flow: column;
width: 100%;
height: auto;
}
.sidebar, .content, #rtSidebar, aside {
width: 100%;
}
nav ul{
width: 100%;
}
nav li {
width: 100%;
text-align: center;
}
}
</style>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
.container {
width: 960px;
margin: 0 auto;
}
#contentWrap {
margin-top: -22px;
}
.sidebar1 {
float: left;
width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
width: 600px;
float: left;
}
aside {
float: left;
width: 180px;
background-color: #EADCAE;
padding: 10px 0;
}
nav a, nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background-color: #C6D580;
}
/* ~~ The footer ~~ */
footer {
padding: 10px 0;
background-color: #CCC49F;
position: relative;
clear: both;
}
/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
header img {
display:block;
}
</style>
<![endif]--></head>
<body>
<div class="container">
<header>
<a href="#"><img src="" alt="Insert Logo Here" width="180" height="90" id="Insert_logo"/></a>
<h1>Dreamweaver Flexbox Demo</h1>
</header>
<div id="contentWrap">
<div class="sidebar1">
<nav>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
</nav>
<aside>
<p> The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce your own unique look. If you require flyout menus, ensure you choose one that works correctly with a flexbox layout.</p>
<p>If you would like the navigation along the top, simply change the ul to 'display: inline-flex;' or include it in your 'header' section. Then create the menu styling.</p>
</aside>
</div>
<article class="content">
<h1>Instructions</h1>
<section>
<h2>How to use this document</h2>
<p>Be aware that the CSS for this layouts is a flexbox layout. Flexbox is a W3C specification that is specificaly for layouts. It does not rely on hacks such as, floats and positioning, this means that the requirement to use a 'float clear' is also not required for the layout. It also reflows the layout to fit the available viewport size, cutting down considerably on the css code required to create a responsive layout. Flexbox also has the added advantage that your html and css code is much cleaner and easier to read.</p>
</section>
<section>
<h2>Styling your content</h2>
<p>You can style your content as you would for any other layout. If you are creating a blog, an album or even an e-commerce page you can also have that content re-flow automatically using flexbox.</p>
</section>
<section>
<h2>Logo and other styles replacement</h2>
<p>An image placeholder was used in this layout in the header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
<p>Use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder in code view)</p>
<p>To see what css properties are applied to any element, simply select 'live view - inspect' then hover over the item in your layout and CSS Designer will list all the properties that are set.</p>
</section>
</article>
<aside id="rtSidebar">
<h4>Backgrounds</h4>
<p>In traditional css layouts, the background color on any block element will only show for the length of the content. Using flexbox this problem does not exist. The background color fills the entire sidebar.</p>
</aside>
</div>
<footer>
<p>This footer will also automatically reflow.</p>
<address>
Address Content
</address>
</footer>
</div>
</body>
</html>
65
Replies
AdChoices