topical media & game development
#javascript-css-style-layout-demo.htm / htm
<head>
<style>
/*~ Default/shared styles
----------------------------------------------------------------------*/
body {
font: normal 70% Verdana, Arial, sans-serif;
}
p {
line-height: 160%;
}
div#count {
background-color: #AAAAFE;
padding: 6px;
font: normal 1.2em Arial, Helvetica, sans-serif;
margin-bottom: 10px;
width: 80%;
}
.article {
border: 1px solid #CCC;
padding: 8px;
}
h2 {
font: bold 2.2em Arial, Helvetica, sans-serif;
}
p.intro {
font: bold 1.2em/130% Verdana, Arial, sans-serif;
}
p.summary {
font: normal 1em/130% Verdana, Arial, sans-serif;
}
p.fulltext {
font: normal 1em/140% Verdana, Arial, sans-serif;
}
a.more {
display: block;
margin: 20px 0 0 0;
}
ul,
ul li {
margin-left: 0;
padding-left: 0;
}
/*~ Body class: initial
----------------------------------------------------------------------*/
.initial .article {
width: 30%;
}
.initial h3 {
font: bold 1.2em Arial, Helvetica, sans-serif;
}
.initial dd {
position: absolute;
right: 0;
margin-top: -1.1em;
}
.initial dl {
position: relative;
width: 150px;
}
.initial .imagewrapper {
width: 140px;
height: 140px;
float: left;
margin: 0 6px 6px 0;
}
/*~ Body class: pda_ver
----------------------------------------------------------------------*/
.pda_ver .article {
width: 60px;
}
.pda_ver .imagewrapper {
display: none;
overflow: hidden;
}
.pda_ver h2 {
font-size: 13px;
}
.pda_ver p {
font-size: 12px;
}
.pda_ver a.more {
font-size: 9px;
}
.pda_ver .intro {
font-weight: normal;
font-size: 9px;
}
.pda_ver dt,
.pda_ver dd,
.pda_ver .related,
.pda_ver h3,
.pda_ver .a,
.pda_ver .b,
.pda_ver .summary,
.pda_ver .short {
display: none;
}
/*~ Body class: pda_hor
----------------------------------------------------------------------*/
.pda_hor .article {
width: 80px;
}
.pda_hor h2 {
font-size: 14px;
}
.pda_hor p {
font-size: 9px;
}
.pda_hor a.more {
font-size: 9px;
}
.pda_hor .imagewrapper {
width: 70px;
height: 70px;
overflow: hidden;
}
.pda_hor .imagewrapper img {
width: 320px;
height: 100%;
}
.pda_hor dt,
.pda_hor dd,
.pda_hor .related,
.pda_hor h3,
.pda_hor .a,
.pda_hor .b,
.pda_hor .intro,
.pda_hor .short {
display: none;
}
/*~ Body class: screen_ultralow
----------------------------------------------------------------------*/
.screen_ultralow h2 {
font-size: 15px;
margin: 0 auto;
}
.screen_ultralow .more {
float: right;
margin: 0;
margin-top: -10px;
}
.screen_ultralow .intro,
.screen_ultralow p {
font-size: 11px;
margin-left: 4px;
}
.screen_ultralow .article {
width: 130px;
padding: 8px;
}
.screen_ultralow .imagewrapper {
width: 120px;
height: 120px;
margin: 0 auto;
overflow: hidden;
}
.screen_ultralow dt,
.screen_ultralow dd,
.screen_ultralow .related,
.screen_ultralow h3,
.screen_ultralow .a,
.screen_ultralow .b {
display: none;
}
/*~ Body class: screen_low
----------------------------------------------------------------------*/
.screen_low .article {
width: 220px;
padding: 10px;
}
.screen_low .imagewrapper {
width: 120px;
height: 120px;
float: left;
margin: 0 4px 2px 0;
overflow: hidden;
}
.screen_low dt,
.screen_low dd,
.screen_low .related,
.screen_low h3,
.screen_low .b {
display: none;
}
.screen_low .intro {
font-size: 12px;
}
/*~ Body class: screen_med
----------------------------------------------------------------------*/
.screen_med .article {
width: 280px;
padding: 12px;
}
.screen_med .imagewrapper {
width: 180px;
height: 120px;
float: left;
margin: 0 6px 6px 0;
overflow: hidden;
}
.screen_med dt,
.screen_med dd,
.screen_med .related,
.screen_med h3,
.screen_med .b {
display: none;
}
.screen_med .intro {
font-size: 12px;
}
/*~ Body class: screen_high
----------------------------------------------------------------------*/
.screen_high dt,
.screen_high dd,
.screen_high .related,
.screen_high h3 {
display: none;
}
.screen_high .date {
display: block;
}
.screen_high dd.date {
margin-top: -1.2em;
margin-bottom: 0;
}
.screen_high .article {
width: 600px;
padding: 14px;
}
.screen_high .imagewrapper {
width: 320px;
height: 120px;
}
.screen_high h2 {
margin-bottom: 0;
}
.screen_wide .article {
width: 800px;
padding: 16px;
}
.screen_wide .imagewrapper {
width: 589px;
clear: right;
height: 120px;
float: right;
margin: 0 0 8px 8px
}
.screen_wide .a {
width: 36%;
float: left;
margin-right: 3.4em;
}
.screen_wide .b {
width: 36%;
float: left;
margin-right: 2em;
}
.screen_wide .related {
width: 18%;
float: right;
background-color: #FBFBFB;
padding: 4px 4px 28px 4px;
}
.screen_wide h3 {
width: 18%;
float: right;
font-size: 1em;
margin: 0 0 1px 0;
background-color: #F7F7F7;
padding: 4px 4px 4px 4px;
color: #666;
}
.screen_wide a {
clear: left;
}
.screen_wide h2 {
font: bold 2.6em Arial, Helvetica, sans-serif;
letter-spacing: 1px;
}
.screen_wide .classify {
color: #CCC;
float: right;
font-size: 0.9em;
margin-top: -4em;
width: 160px;
}
.screen_wide dt,
.screen_wide dd {
float: left;
}
.screen_wide dt {
clear: left;
width: 40%;
}
.screen_wide dd {
margin: 0 0 2px;
}
.screen_wide ul li {
margin-bottom: 0.4em;
}
</style>
<script type="text/javascript" src="javascript-css-style-layout-script.js"></script>
</head>
<body>
<div class="article">
<h2>Adaptive Layout</h2>
<dl class="classify">
<dt class="date">Date:</dt>
<dd class="date">12 May 2006</dd>
<dt>Category:</dt>
<dd>CSS techniques</dd>
</dl>
<div class="imagewrapper"><img src="mountains_very_wide_hq.jpg" alt="blue mountains" /></div>
<p class="intro">Intro: After liquid layout and zoom layout, adaptive layout may be the next big thing</p>
<p class="summary">Summary: The base for this layout form is class switching using JavaScript. A trigger value like screen size is used to define different CSS styles for certain screen objects so transitions between different layouts can be made.</p>
<p class="fulltext a">Body aDolor sit esse, at facilisis euismod wisi duis elit amet feugiat laoreet luptatum lobortis tincidunt. Minim eu minim quis feugait et eros, feugait in dolor aliquam aliquam duis ex. Suscipit consequat facilisis, nostrud, tation consequat, iriure, eu et. molestie in wisi wisi aliquip te feugiat vel, et qui nisl, vel in at qui eros lobortis. Eum minim eros consequat ut commodo dolor ad luptatum augue enim esse, autem tation. Volutpat aliquip lobortis et iusto facilisi minim vel adipiscing nostrud consequat, feugait</p>
<p class="fulltext b">Body bquis euismod dolor nisl quis consequat ex. Nostrud hendrerit ad et dolor nonummy, ullamcorper eu lorem ullamcorper laoreet. Augue augue ullamcorper facilisi te velit esse nostrud dignissim, consectetuer esse luptatum at vel praesent erat. Veniam feugait praesent sit. Ut vel illum. Exerci luptatum diam illum, duis ut, dolor, duis facilisis hendrerit aliquip exerci autem commodo praesent vulputate veniam odio, hendrerit. Commodo blandit nulla duis lobortis magna, velit lobortis.</p>
</div>
</body>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
