Class 4 handout two column layout w mobile web design
Upcoming SlideShare
Loading in...5
×
 

Class 4 handout two column layout w mobile web design

on

  • 1,044 views

 

Statistics

Views

Total Views
1,044
Views on SlideShare
1,044
Embed Views
0

Actions

Likes
0
Downloads
22
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Class 4 handout two column layout w mobile web design Class 4 handout two column layout w mobile web design Document Transcript

  • Intro to HTML/CSS Class 4 Handout: Two Column Layout w/ CSS + Mobile Web Design1. Two Column LayoutWe are starting out with a two column layout. You can download the code and images here:http://ge.tt/6YVcnPL/v/0Unzip and open this in Aptana.Here is the HTML code:<!DOCTYPE html><html> <head> <title>Two Column Layout</title> <link rel="stylesheet" type="text/css" href="style.css"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0"> </head> <body> <div id="wrapper"> <div id="header"> <h1>My Vacation Blog</h1> <h2>Places I like to go.</h2> </div> <ul id="nav"> <li><a href="index.html">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Stuff</a></li> <li><a href="#">Contact</a></li> </ul> <div id="content"> 1
  • <div class="post"> <h3>First Post</h3> <img src="images/big_wave.jpg" class="pic" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae enim ante.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Nullam auctor, leo convallis rhoncus vestibulum, lectus justo tempor urna, egestas consequatnisi nibh vitae magna. In auctor, erat id ornare auctor, turpis metus eleifend tellus, vel adipiscingpurus nunc lacinia turpis. </p> <p> Aenean consectetur turpis at justo laoreet laoreet. Sed at sapien nec enim egestasultricies quis vehicula elit. Quisque mattis, urna in venenatis accumsan, nisl orci facilisis diam, ahendrerit sapien sem eget libero. Cras ultricies ligula sed magna mattis mollis at at augue.Curabitur iaculis vulputate elementum. Maecenas quis enim est, nec egestas massa. Ut necneque lorem. In volutpat pellentesque lacinia. Nulla facilisi. </p> </div> <div class="post"> <h3>Second Post</h3> <img src="images/sunset.jpg" class="pic" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac rutrum magna.Maecenas ac orci ac justo dignissim fermentum. Nam sit amet sem ac est rutrum fermentum aac est. Pellentesque non quam dui. Aliquam ligula eros, dictum eget suscipit non, gravida aante. </p> </div> <div class="post"> <h3>Third Post</h3> <img src="images/on_the_rocks.jpg" class="pic" /> <p> Vivamus lacinia iaculis felis, gravida sagittis libero aliquam id. Nam faucibus porta arcu,nec ullamcorper felis tempor euismod. Nam nec metus et velit dignissim condimentum. Nullaquis pretium erat. Sed vel urna ac sem accumsan scelerisque. Nunc vitae risus nisi, velconvallis libero. </p> <p> Ut pellentesque, nisi nec dignissim aliquam, tortor lacus tincidunt dui, et egestas augueleo eget felis. In neque arcu, pulvinar quis imperdiet ac, facilisis a ipsum. Nam felis enim,pellentesque sollicitudin pellentesque sed, ornare sed massa. Pellentesque habitant morbitristique senectus et netus et malesuada fames ac turpis egestas. </p> <p> Quisque aliquam placerat pharetra. Mauris vel nisi libero. Sed ut viverra dui. Maecenasconsequat velit id turpis mollis a euismod lectus viverra. Donec ullamcorper elementuminterdum. In eget lectus et tellus tristique viverra non quis sem. </p> 2
  • </div> </div> <div id="sidebar"> <div class="section"> <h3>Sidebar Content</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac rutrum magna.</p> </div> <div class="section"> <h3>About this Site</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac rutrum magna.Maecenas ac orci ac justo dignissim fermentum. Nam sit amet sem ac est rutrum fermentum aac est. Pellentesque non quam dui. Aliquam ligula eros, dictum eget suscipit non, gravida aante. </p> </div> </div> </div> </body></html>Here is the CSS:/*********************Page Styles*********************/body { margin: 0; background: #90ADB7 url(../images/background.png) repeat-x; font-family: verdana, sans-serif; font-size: 0.85em;}#wrapper { width: 960px; margin: 0 auto;}p{ line-height: 1.5em; color: #333;}a:hover { text-decoration: none;} 3
  • /*********************Navigation*********************/#nav { list-style: none; padding: 0; float: right; margin: 40px 0;}#nav li { float: left; margin-right: 10px; font-size: 1.4em; font-weight: bold;}/*********************Header*********************/#header { font-style: italic; float: left; margin: 20px 0;}#header h1 { font-size: 3em; margin: 0;}#header h2 { margin: 0; color: #888; font-size: 1.2em;}/*********************Content*********************/#content { 4
  • float: left; width: 700px; margin-right: 20px;}#content .post { background: #FFF; padding: 10px; margin-bottom: 20px; border: 2px solid #CCC;}#content .post h3 { margin: 0; color: #333;}.pic { margin-left: 10px; float: right;}/*********************Sidebar*********************/#sidebar { float: left; width: 200px; background: #FFF; padding: 10px; border: 2px solid #CCC;}#sidebar h3 { margin: 0;}#sidebar .section { border-top: 2px dashed #CCC; padding-top: 10px;}#sidebar .section:first-child { border-top: none; padding: 0;}There are also some images in the zipped file in a folder called “images”. 5
  • Now make your browser window really small, about the size of a smartphone screen. It doesn’tlook so great. The navigation is difficult to click, etc.We will add the following to the CSS:/*********************Media Queries*********************/@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) { #wrapper, #content { width: inherit; } #sidebar { display: none; } #header { float: none; margin: 0px; } #header h1 { 6
  • text-align: center; font-size: 2em; margin: 5px; } #header h2 { display: none; } #nav { font-size: 0.75em; margin: 5px; float: none; padding: 4px 0px; text-align: center; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A5C6D1), to(#6A8087)); border-bottom: 1px solid #555; -webkit-border-radius: 8px; } #nav li { float: none; display: inline; margin: 0; } #nav li a { padding: 4px; padding-left: 6px; text-decoration: none; text-shadow: 0px -1px 1px rgba(0,0,0,0.5); color: #FFF; border-left: 1px solid #CCC; } #nav li:first-child a { border-left: none; } #content { margin: 5px; } .pic { margin: 10px auto; display: block; float: none; }} 7
  • Now look at your browser again. It should look better for mobile devices.The finished exercise file is here:http://ge.tt/6SLuoPL/v/0You can read more about media queries here:http://www.w3.org/TR/css3-mediaqueries/ 8