Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Mar 10, 2013, 09:04 AM   #1
Dal123
macrumors 6502a
 
Dal123's Avatar
 
Join Date: Oct 2008
Location: England
Layout error Iphone 5?

I am trying to tidy up our http://www.preciseformwork.com website before I embark on a new website.
It's been a couple of years since I did a site and I was never a professional. A lot of it was thanks to angelwatt on here (thanks for all the massive help buddy ).

I've noticed on my new iphone I am getting this:

It Should be looking like this

Page Organisation:

I have php to get the top of the page and bottom of the page to save tediously writing all pages: and the doctype is xhtml 1.0 strict:[LIST=1]div id='container': 1st element that contains everything on page;[LIST=2]div id='masterhead': contains logo;[LIST=3]div id='nav': navigation bar;[LIST=4]div id=''sidebar'; side navigation bar;
  1. div id='page content'; all page content;

This is where I have all page content.

CSS:
/* page */
body {
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
background-color:#000000;
}

#container {
position:relative;
width:900px;
height:100%;
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
border:0px;
background-color:#000000;
}

#page-content {
position:absolute;
width:700px;
height:100%;
float:left;
clear:right;
padding:10px 10px 0 0;
}

.spacer {
clear:both;
}

.thumbs {
padding:0;
display:inline;
}

a {
padding:0;
margin:0;
border:0;
}

img {
border: none;
}
/* page */

/* headings */
#masterhead {
position:relative;
width:900px;
height:79px;
padding:0px 0px 0px 0px;
margin:5px 0 0 0;
}

#masterhead span {
background-image:url(images/logo.png);
position:absolute;
width:100%;
height:100%;
padding:0px 0px 0px 0px;
margin:0px;
color:#F8F5FF;
text-indent:-999px;
}

h1, h2, h3, h4, h5, h6 {
font-family: "Lucidia Grande", "Lucida Sans Unicode", "Verdana", sans-serif;
font-size: 1.2em;
color:#CCCCCC;
letter-spacing:1.5px;
font-weight:500;
padding:0;
margin:0;
text-decoration:underline;
}

p {
color:#666666;
font-family: "Trebuchet", "Tahoma", "Arial", sans-serif;
letter-spacing:0.1em;
font-size:1em;
}
/* headings */

/* lists */
ul {
letter-spacing: 1px;
}

#nav {
padding:0;
margin:0;
}

#nav-list {
position:relative;
padding:0;
margin:0;
}

#nav-list li{
position:relative;
display:inline;
padding:0 2.5em 0 0;
margin:0;
font-family: "Lucidia Grande", "Lucida Sans Unicode", "Verdana", sans-serif;
font-size: 25px;
}
#nav-list li a{
text-decoration:none;
color:#FFFFFF;
margin:0;
padding:0;
}
#nav-list li a:hover{
color:#FFF3CC;
}
#nav-list li a.no-pad {
padding:0;
margin:0;
float:right;
}

#nav-list .no-pad {
padding:0;
margin:0;
float:right;
}

#nav-list li a.highlight {
color:#FFFF66;
}

/* Sidebar Formatting */

#sidebar {
float: right;
}

#side {
color:#FFFFFF;
list-style:none;
padding: 10px 0 10px 0;
font-size: 20px;
font-family: "Lucidia Grande", "Lucida Sans Unicode", "Verdana", sans-serif;
max-width:200px;
margin:0;
}

#side li{
text-align:right;
padding: 0 0 10px 0;
line-height:0 0 10px 0;
border-bottom: 1px solid #272727;
}
#side li a {
color:#CCCCCC;
display:block;
text-decoration:none;
}
#side li a:hover {
color:#FFF3CC;
}
#side .highlight-side {
color:#FFFF66;
}

/* lists */

/* slideshows */

.slideshow {position: relative; height: 250px; width: 393px; overflow: hidden; float:right;}
.slide { display: none; position: absolute;}
.slide.current { display: block; }


.portfolio-slides {
}

#1 {
float:left;
}

#2 {
float:left;
}

.movie {
width:auto;
float:right;
}
__________________
concretestairslondon.co.uk
Dal123 is offline   0 Reply With Quote
Old Mar 13, 2013, 05:23 PM   #2
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
see vendor information in user profile
Couple of comments...

Flash is not supported natively on iPhone Safari - although third party browser apps exist which do, you're kind of own your own if troubleshooting those.

I know you're not a guru and someone else here helped you awhile back so not sure how long ago that was, but when it comes to web pages on mobile devices these days the way to go is to use a RESPONSIVE THEME. These adjust elements, fonts and even images dynamically, responding either to detected screen size, user-agent (type of device and browser of client) or both.

For beginners guide to creating responsive themes or download pre-built themes visit this helpful website: http://www.copyblogger.com/mobile-re...ve-design-101/

Instead of writing it from scratch (or spending time trying to change the CSS so it looks reasonable when viewed via mobile but without responsive theming), using a prebuilt responsive theme is faster and more reliable. There are also plenty of iPhone specific themes but remember the market is not exclusive to Apple (Blackberry, Android, Galaxy, etc.). There are also responsive themes for WordPress, Drupal, Joomla and other popular open source CMS's so you can design your full sized web page and let the theme handle the rest. Normally this is where I'd direct you if you had come to me prior to building your site. FYI.

I I'll let others assist you to adjust CSS quirks if you can't go responsive on this one, but I felt compelled to mention it as a better LONG TERM solution for your site. This response is an FYI for you to absorb, no need to reply if not interested.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   1 Reply With Quote
Old Mar 14, 2013, 01:19 PM   #3
Dal123
Thread Starter
macrumors 6502a
 
Dal123's Avatar
 
Join Date: Oct 2008
Location: England
Thanks Jim, it was a few years back now, and I remember it was Angelwatt and yourself that helped me massively , many thanks .

The size of the images are coming up well on the iphone, the only strange bit is that formatting issue where it is being pushed out of its flow.
The flash will be replaced by a slideshow shortly like the rest of my portfolio.

Sorry I tried posting screenshots in my original post but images are not uploading properly to this site so I can't post screenshots.

Elasticated sites were just coming out when I did my sites, however they seem faltered with images to me.
I understand you can set minimum widths, I have just searched for iphone specific themes but like you say that's a waste of time as it's only tailored to iphones and ignores the others.
__________________
concretestairslondon.co.uk
Dal123 is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 10:53 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC