Jump to content

kiwigirl

Member
  • Posts

    5
  • Joined

  • Last visited

Posts posted by kiwigirl

  1. I have a assignment I'm working on where we are implementing HTML5 and CSS3 code. Up to this point I have had no major issues. I have finished designing the mobile design and now I am moving to the tablet.

     

    The issue is that I need to change the menu so when the browser size is over 480px it will revert to a different html file.

     

    So my understanding is if I'm going to use php code I need to change the file name to .php

     

    This is where I'm now running into problems. It no longer links any of my images and some of the layout is changed. Also, none of the css are recognised within the index file.

     

    So how can I place code into a file without having to change the entire site.

     

    This was the code I came up with and hoping to use:

     

    <?php

     

     

    // Include and instantiate the mobile detect class

    include('classes/Mobile_Detect.php');

    $detector = new Mobile_Detect();

     

    $mobile = $detector;

     

    $tablet = $detector;

     

     

     

    ?>

     

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8" />

    <title>Maria Louisa Dolls - About the Dolls and Creator</title>

    <meta name="viewport" content="width=device-width" />

    <link rel="stylesheet" href="css/default.css" />

    <link rel="stylesheet" href="css/mobile.css" media="only all and (max-width: 480px)" />

    <link rel="stylesheet" href="css/tablet.css" media="only all and (min-width: 481px)" />

    <link rel="stylesheet" href="css/desktop.css" media="only all and (min-width: 960px)" />

    <!--[if lt IE 9 & !IEMobile]>

    <link rel="stylesheet" href="css/tablet.css" />

    <link rel="stylesheet" href="css/desktop.css" />

    <![endif]-->

     

    <!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->

    </head>

     

    <body>

    <nav>

    <h1><a href="index.html">M<span id="heading-font">aria </span>L<span id="heading-font">ousia </span>D<span id="heading-font">olls</span></a></h1>

    <ul>

    <li><a id="greenHyperLink" href="about.html">About</a></li>

     

    <?php

    $url = 'gallery';

    if($mobile) {

    $url .= '_mobile';

    }

    $url .= '.php';

     

    echo '<li><a href="' . $url . '">Gallery</a></li>';

     

    ?>

     

    <li><a href="shop.html">Shop</a></li>

    <li><a href="contact.html">Contact</a></li>

    <li><a href="sitemap.html">Sitemap</a></li>

    <li><a href="help.html">Help</a></li>

    <li><a href="contact.html">Subscribe</a></li>

    </ul>

    </nav>

     

    I did try to add a zipped file of my website, but it doesn't allow this. I'm a little concerned as this is due on Tuesday, so if any body can help I so will appreciate this. Cheers :)

  2. Hey thanks Ben I really appreciate this. I'm sure you know how you can at stare at code so long, where you just can't see the issue.

     

    Have made the corrections, and its now up and working.

     

     

    It tends to be a bit slower over the weekends -- people tend to be busy -- so that's probably why you got a bit of a slow reply.

     

    I've downloaded the files and taken a look. I think the issue is this -- your .thumbnailVertical div is 64px wide by 94px high, but your image inside it is 96px by 96px (2 px for a border, 15px on the left and right, and the image width is 64px wide. This means that the image inside the .thumbnailVertical is larger than the .thumbnailVertical, causing things to seem to overlap. You have the same issue with .thumbnailHorizontal.

     

    The first fix I would do would be to make sure that the images within .thumbnailVertical and .thumbnailHorizontal are the same size or smaller than their container. I would also suggest making .thumbnailVertical and .thumbnailHorizontal have the same height (center the images within them, either horizontally or vertically), to ensure that when items are floated, the flow consistently.

     

    I would suggest doing that first and seeing if that either leads you to your answer, or post back if you still need help after you have fixed that issue.

  3. Well I've nearly finished this website. Everything has come together without too many issues, except of course this page.

     

    The finished result will display 7 images across. Depending how images return from a search, the images will flow down, 7 at a time.

     

    I've tried several different things, experimenting with overflow, positioning. I'm sure its something fairly simple that I'm just over looking. If anyone could help that would be great. The next step after this, I'm converting this into php.

     

    Please note, slap the default.css file into a folder called 'css', and put the images into a folder called 'images/thumbnails' :)

     

    Cheers, Maria

    adminImageSearch.html

    default.css

    post-45607-018298700 1346478541_thumb.jpg

    post-45607-018344000 1346478563_thumb.jpg

×
×
  • Create New...