Solved

Three Column Layout in iPadd

Posted on 2011-03-11
2
259 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Why "Mobile First"? 5 60
tiled banner 2 14
White space in figure / img 4 32
Text color in a select 11 30
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

738 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