Solved

Three Column Layout in iPadd

Posted on 2011-03-11
2
265 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

696 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