<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"> <head> <title>The Perfect 3 Column Liquid Layout</title> <link rel="stylesheet" type="text/css" href="screen.css" media="screen" /> </head> <body> <div id="header"> </div> <div class="colmask threecol"> <div class="colmid"> <div class="colleft"> <div class="col1"> <!-- Column 1 start --> <p>centre stuff</p> <!-- Column 1 end --> </div> <div class="col2"> <!-- Column 2 start --> <p>left stuff</p> <!-- Column 2 end --> </div> <div class="col3"> <!-- Column 3 start --> <p>right stuff</p> <!-- Column 3 end --> </div> </div> </div> </div> <div id="footer"> </div> </body> </html>
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:100%;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
}
a {
color:#369;
text-decoration:none;
}
a:hover {
color:#369;
text-decoration:none;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
img {
margin:0px;
border:0px;
vertical-align:middle;
}
input {
vertical-align: middle;
}
.buttonspan {
position:relative;
display:inline-block;
background:url('appbar.base.png') no-repeat center center;
style:opacity: 1;
}
input[id="check-button"]{
src:url('appbar.check.png')
}
#ads img {
display:block;
padding-top:10px;
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #ddd;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}
#header ul li a:hover {
background:#369;
color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
}
#header ul li a span {
display:block;
}
/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%; /* width of page */
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead
only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;
}
/* 3 Column settings */
.threecol {
background:#fff; /* right column background colour */
}
.threecol .colmid {
right:25%; /* width of the right column */
background:#fff; /* center column background colour */
}
.threecol .colleft {
right:50%; /* width of the middle column */
background:#fff; /* left column background colour */
}
.threecol .col1 {
text-align:left;
width:46%; /* width of center column content (column width minus padding on either side) */
left:102%; /* 100% plus left padding of center column */
}
.threecol .col2 {
text-align:right;
width:21%; /* Width of left column content (column width minus padding on either side) */
left:31%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
text-align:left;
width:21%; /* Width of right column content (column width minus padding on either side) */
left:85%; /* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
}
#footer p {
padding:10px;
margin:0;
color:#ddd;
float:right;
}
header, footer, nav, section {
display: block;
}
/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
border: 1px solid #eee;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
}
legend {
font-size: 1.2em;
}
textarea {
min-height: 75px;
}
.editor-label {
margin: 1em 0 0 0;
}
.editor-field {
margin: 0.5em 0 0 0;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
color: #f00;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}
.validation-summary-errors {
color: #f00;
}
.validation-summary-valid {
display: none;
}
integrate with the windows buttons
<span class="buttonspan"><a href="@Url.Action("Edit", new { id = item.id })" title="Edit"><img src="~/Content/appbar.edit.png" alt="Edit" /></a></span>
<span class="buttonspan"><a href="@Url.Action("Details", new { id = item.id })" title="Details"><img src="~/Content/appbar.paper.png" alt="Details" /></a></span>
<span class="buttonspan"><a href="@Url.Action("Delete", new { id = item.id })" title="Delete"><img src="~/Content/appbar.delete.png" alt="Delete" /></a></span>
@section left {
<span class="buttonspan"><a href="@Url.Action("Create")" title="Create"><img src="~/Content/appbar.add.png" alt="Create" /></a></span>
}
</fieldset>
@using (Html.BeginForm()) {
<p>
<span class="buttonspan"><input type="image" src="../../Content/appbar.check.png" title="Save" value="Save" /></span>
<span class="buttonspan"><a href="@Url.Action("Index")" title="Cancel"><img src="~/Content/appbar.close.png" alt="Cancel" /></a></span>
</p>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
@section left {
<p><span class="buttonspan"><a href="@Url.Action("Index")" title="Back to List"><img src="~/Content/appbar.arrow.left.png" alt="Back to List" /></a></span></p>
}
@section right {
}
img {
margin:0px;
border:0px;
vertical-align:middle;
}
input {
vertical-align: middle;
}
.buttonspan {
position:relative;
display:inline-block;
background:url('appbar.base.png') no-repeat center center;
style:opacity: 1;
}