Solved

Three Column Layout in iPadd

Posted on 2011-03-11
2
233 Views
Last Modified: 2012-05-11
I am using the code below for most of my websites.  However, on an iPad, the website does not display properly (sorry, I don't have an image / description right now) but I was hoping that someone might be able to see what needs to be changed.

I am not against to going to a two column layout for my sites (on an iPad).  I know I am using a fixed width, so I am guessing that might be one issue.  I usually build for 1280X800 pixels, but now the iPad has switched those two numbers.

You can see an example of the code: http://www.milehighmerchantaccounts.com/
/* Base Reset & Fonts
------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
th, td {vertical-align:top;}
fieldset, img {border:0;}
abbr,acronym {border:0;}
body {font:13px Arial,Helvetica,clean,sans-serif;}
table {font-size:inherit;}
select,input,textarea {font:99% Arial,Helvetica,clean,sans-serif;}
pre,code {font:115% monospace;}
body * {line-height:1.22em;}
label {cursor:pointer;}
address,caption,code,dfn,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
q:before,q:after {content:'';}


/* Main Structure - DO NOT CHANGE THIS SECTION!!
------------------------------------------------- */
html, body {height:100%;}
#wrap {min-height:100%;margin:0 auto;position:relative;overflow:auto;}
#pri, #sec, #ter {float:left;}
#pri {width:100%;}
#sec {position:relative;left:-100%;}
#ft {clear:both;position:relative;}
.grid-2 .col, .grid-4 .grid-2 {float:right;display:inline;}
.grid-2 div.first, .grid-4 div.first, .grid-3 .col {float:left;}
.grid-2 .col, .grid-4 .grid-2, .grid-4 .grid-2 .col {width:50%;}
.grid-3 .col {width:33%;}
body#onecol #sec, body#onecol #ter, body#twocol-left #ter, body#twocol-right #sec {display:none;}
body#onecol #pri .pad {margin:0;}
body#twocol-left #pri .pad {margin-right:0;}
body#twocol-right #pri .pad {margin-left:0;}


/* Widths & Footer height
------------------------------------------------- */
#wrap {width:1220px;}

#pri .pad {
margin:0px 275px 0px 265px;
padding:8px;
background-color: #b8bcc7;
}

#sec {
width:249px;
padding:8px;
margin-right:-265px;
background-color:#b2c4db;
}

#ter {
width:259px;
padding:8px;
margin-left:-275px;
background-color:#b2c4db;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#pri .pad, #sec, #ter {padding-bottom:56px;}

#ft {
width:1220px;
padding:8px;
margin:-40px auto 0;
font-size: .8em;
text-align:center;
background-color:#b2c4db;
}


/* General fonts
------------------------------------------------- */

/* A handy pixel to percent font conversion */
/*
10px / 77%
11px / 85%
12px / 92%
13px / 100%
14px / 107%
15px / 114%
16px / 122%
17px / 129%
18px / 136%
19px / 144%
20px / 152%
21px / 159%
22px / 167%
23px / 174%
24px / 182%
25px / 189%
26px / 197%
*/

/* 
	+++ VERY IMPORTANT+++
		The default font for these templates is 13px Arial, set on the <body> element.
		NEVER set a font-size or font-family on the <body> element.
		ALWAYS override using a child of <body>, with the pixel-equivalent percentage value for the font size, as documented above.
		
		EG: #pagewrap p {font-family:Verdana,Arial,Helvetica,sans-serif;}
		would set every <p> within #pagewrap to Verdana.
		It is better to set font-sizes on elements rather than containers.
*/

#wrap, #ft {font-family:Verdana, Arial, Helvetica, sans-serif;}
h1 {font-size:136%;}
h2 {font-size:107%; color:#00477F;}
h3 {font-size:100%; color:#00477F;}
h4 {font-size:98%; color:#00477F;}
h5 {font-size:96%; color:#00477F;}
h6 {font-size:94%; color:#00477F;}
#pri p, #sec p, #ter p, #ter h2, #sec li, #pri th, #pri td, #pri caption, #pri dt, #pri dd, #nav li {font-size:92%;}
#utilitynav li, #nav li, #ft p, #ft li, #searchform input, #searchform label, #ter h3, #ter li {font-size:85%;}
#ft p, #ft li {font-size:77%;}
#sec li li, #pri legend, #nav li li {font-size:100%;}
strong, b, h2, h3, h4, h5, h6, #pri legend {font-weight:bold;}
em,i,cite {font-style:italic;}


/* Theme
------------------------------------------------- */
html, body {
color:#000;
background-color:#b2c4db;
}

a {color:#008dbc;}
a:hover {color:#000;}
a.skip {position:absolute;left:-9999px;}

#wrap, #ft {background:#b2c4db;}

#masthead {
color:#00477F;
background:#b2c4db;
position:relative;
margin: 0px auto;
padding: 5px 0px 5px 15px;
height: 126px;
}
.pad h1
{
	color:#00477F;
	letter-spacing: 3px;
	text-align:left;
	margin: 1px 0px 5px 3px;
}
.pad h2
{
	letter-spacing:2px;
}
.pad h3
{
	letter-spacing:1px;
}


#pri p, #pri table {
margin: 0px 0px 5px 0px;
line-height:1.33em;
}

#sec a {
text-decoration:none;
color:#000;
}

#sec a:hover {text-decoration:underline;}

#ter p {margin-bottom:1em;}

#ter ul {
list-style:disc;
padding-left:1.5em;
}

#pri ul
{
	list-style-type: disc;
	list-style-image: none;
	list-style-position: inside;
	margin: auto;
	padding: 0em 0em 0em 1.5em;
}
#pri ul ul
{
	list-style-type: circle;
	list-style-image: none;
	list-style-position: inside;
	margin: auto;
	padding: 0em 0em 0em 1.5em;
}


#ft {
background:#b2c4db;
color:#000;
}

#ft p {padding:0 0 0.5em 2em;}

#ft ul#ftnav {
position:absolute;
right:1em;
}

#ft li {display:inline;}

#ft li a {
display:block;
float:right;
border-right:1px solid #000;
padding:0 0.8em;
color:#000;
text-decoration:none;
line-height:1em;
}

#ft li a:hover {text-decoration:underline;}

#ft li:last-child a, #ft li.lastchild a {
border-right:0;
margin-right:0;
padding-right:0;
}

/*.pad h2, .pad h3, .pad h4, .pad h5
{
	margin: 0px;
}*/
*/
h6.date-header
{
	font-weight:bold;
	font-size: .8em;
	font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
	margin-top: 0px;
	margin-bottom: .5em;
}

/* left navigation
------------------------------------------------- */

#wrap .sidenav a {
	padding-left: 10px;
	list-style:none;
	background-image: url(/images/arrow.gif);
	background-repeat: no-repeat;
	background-position: 0 .5em;
	padding-bottom: .4em;
	color: #415892;
	text-decoration: none;
	display: block;
	font-weight: normal;
}
#wrap .sidenav a:visited,active {
	padding-left: 10px;
	list-style:none;
	background-image: url(/images/arrow.gif);
	background-repeat: no-repeat;
	background-position: 0 .5em;
	color: #415892;
	text-decoration: none;
	display: block;
	font-weight: normal;
}
#wrap .sidenav a:hover {
	padding-left: 10px;
	list-style:none;
	background-image: url(/images/arrow.gif);
	background-repeat: no-repeat;
	background-position: 0 .5em;
	color: red;
	text-decoration: none;
	display: block;
	font-weight: normal;
}
#sec h5
{
	padding: 0px;
	color:#439948;
}



/* Rounded corner box styles
------------------------------------------------- */

.rounded {
background:#f1f1f1;
padding:10px;
}


/* Shadowbox styles
------------------------------------------------- */
#shadowbox_container, #shadowbox_overlay {
top:0;
left:0;
height:100%;
width:100%;
margin:0;
padding:0;
}

#shadowbox_container {
position:fixed;
display:block;
visibility:hidden;
z-index:999;
text-align:center;
}

#shadowbox_overlay {
position:absolute;
background-image:url(cssimages/shadowbox/overlay.png);
background-repeat:repeat;
}

#shadowbox {
position:relative;
margin:0 auto;
text-align:left;
}

#shadowbox_body {
position:relative;
margin:0;
padding:0;
border:1px solid #fff;
overflow:hidden;
}

#shadowbox_body_inner {
position:relative;
height:100%;
}

#shadowbox_content.html {
height:100%;
overflow:auto;
}

#shadowbox_loading {
position:absolute;
top:0;
width:100%;
height:100%;
}

#shadowbox_body, #shadowbox_loading {
background-color:#060606;
}

#shadowbox_loading_indicator {
float:left;
margin:10px 10px 0 10px;
height:32px;
width:32px;
background-image:url(cssimages/shadowbox/loading.gif);
background-repeat:no-repeat;
}

#shadowbox_loading span {
font-family:'Lucida Grande', Tahoma, sans-serif;
font-size:10px;
float:left;
margin-top:16px;
}

#shadowbox_loading span a:link, #shadowbox_loading span a:visited {
color:#fff;
text-decoration:underline;
}

#shadowbox_title, #shadowbox_info {
position:relative;
margin:0;
padding:0;
overflow:hidden;
}

#shadowbox_title_inner, #shadowbox_info_inner {
position:relative;
font-family:'Lucida Grande', Tahoma, sans-serif;
line-height:16px;
}

#shadowbox_title {
height:26px;
}

#shadowbox_title_inner {
font-size:16px;
padding:5px 0;
color:#fff;
}

#shadowbox_info {
height:20px;
}

#shadowbox_info_inner {
font-size:12px;
color:#fff;
}

#shadowbox_nav {
float:right;
height:16px;
padding:2px 0;
width:45%;
}

#shadowbox_nav a {
display:block;
float:right;
height:16px;
width:16px;
margin-left:3px;
cursor:pointer;
}

#shadowbox_nav_close {
background-image:url(cssimages/shadowbox/close.png);
background-repeat:no-repeat;
}

#shadowbox_nav_next {
background-image:url(cssimages/shadowbox/next.png);
background-repeat:no-repeat;
}

#shadowbox_nav_previous {
background-image:url(cssimages/shadowbox/previous.png);
background-repeat:no-repeat;
}

#shadowbox_nav_play {
background-image:url(cssimages/shadowbox/play.png);
background-repeat:no-repeat;
}

#shadowbox_nav_pause {
background-image:url(cssimages/shadowbox/pause.png);
background-repeat:no-repeat;
}

#shadowbox_counter {
float:left;
padding:2px 0;
width:45%;
}

#shadowbox_counter a {
padding:0 4px 0 0;
text-decoration:none;
cursor:pointer;
color:#fff;
}

#shadowbox_counter a.shadowbox_counter_current {
text-decoration:underline;
}

div.shadowbox_clear {
clear:both;
}

div.shadowbox_message {
font-family:'Lucida Grande', Tahoma, sans-serif;
font-size:12px;
padding:10px;
text-align:center;
}

div.shadowbox_message a:link, div.shadowbox_message a:visited {
color:#fff;
text-decoration:underline;
}


/* Clearfix
------------------------------------------------- */
.grid-2:after, .grid-3:after, .grid-4:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

Open in new window

0
Comment
Question by:coreybryant
2 Comments
 
LVL 12

Accepted Solution

by:
Amick earned 500 total points
ID: 35113416
This a landscape versus portrait mode problem.  You could use javascript to detect that the iPad is being held in portrait mode and prompt the user to rotate it 90 degrees, or you could use percentages rather than absolute pixels (width:20% rather than 249 px for example) to adjust the page to the available space. I suppose you could also do conditional CSS that renders a completely different page for an iPad.  In any case, the problem is solvable.

Good luck.
0
 
LVL 29

Author Comment

by:coreybryant
ID: 35113621
Landscape / portrait - that was what I was trying to remember.  

I looked at the website on the iPad just now.  It was OK for the most part.  I remember just a few years ago how we were talking about designing / developing sites for a higher resolution than 800X600.  It almost seems like we went back to the dark ages :)

I'll think about maybe doing a fluid / two column layout maybe later.  

Thanks again!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now