Layout error Iphone 5?

Discussion in 'Web Design and Development' started by Dal123, Mar 10, 2013.

  1. macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    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 :D).

    I've noticed on my new iphone I am getting this: [​IMG]

    It Should be looking like this [​IMG]

    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:
    1. div id='container': 1st element that contains everything on page;
      • div id='masterhead': contains logo;
        • div id='nav': navigation bar;
          • div id=''sidebar'; side navigation bar;
            • 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;
            }
     
  2. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    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-responsive-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.
     
  3. thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #3
    Thanks Jim, it was a few years back now, and I remember it was Angelwatt and yourself that helped me massively :), many thanks :D.

    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.
     

Share This Page