Skip navigation
Currently Being Moderated

Using media queries?

Jun 13, 2013 10:02 AM

Ive designed the layout for my website and want to make it user friendly for other devices, desktop, tablet, ipad, mobiles (smartphones and iphones). Ive got the basic layout ready and thought this would be the best time to tackle the media queries before i start to add all the content. Im not sure if the layout i currently have is ready/suitable to apply the media queries to?

 

Appreciate any help.

 

This is the code, you can aslo view the page here - www.milesfunerals.com/index2.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;

<title>Untitled Document</title>

<style type="text/css"&gt;

body {

          background-image: url(Images/Background.jpg);

}

</style>

<link href="style sheet.css" rel="stylesheet" type="text/css" /&gt;

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"&gt;</script&gt;

<script src="scripts/jquery-1.6.min.js" type="text/javascript"&gt;</script&gt;

<script src="scripts/jquery.cycle.all.js" type="text/javascript"&gt;</script&gt;

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" /&gt;

</style>

<style type="text/css"&gt;

/* BeginOAWidget_Instance_2559022: #slideshow_2 */

 

 

                              #slideshow_2 {

          padding: 0px;

          margin-right: auto;

          margin-left: auto;

          height: 200px;

          width: 1000px;

          margin-top:0;

                              }

 

                              #slideshow_2 img, #slideshow_2 div { 

                                  padding: 0px;

                                  background-color: #EEE;

                                        -webkit-border-radius: 0px;

                                        -moz-border-radius: 0px;

                                        border-radius: 0px;

                                  margin: 0;

                                        position: absolute;

                              }

 

/* EndOAWidget_Instance_2559022 */

</style>

<script type="text/xml"&gt;

<!--

<oa:widgets&gt;

  <oa:widget wid="2559022" binding="#slideshow_2" /&gt;

</oa:widgets&gt;

-->

</script>

</script>

<style type="text/css"&gt;

<!-- Start PureCSSMenu.com STYLE --&gt;

<style>

#pcm{display:none;}

 

 

ul.pureCssMenu ul{

          display:none;

 

}

ul.pureCssMenu li:hover&gt;ul{

          display:block;

          height:auto;

}

ul.pureCssMenu ul{

          position: absolute;

          left:100%;

          top:-1px;

          padding-right: 0px;

 

 

}

ul.pureCssMenu ul ul{

          position: absolute;left:98%;top:-2px;

          }

ul.pureCssMenu,ul.pureCssMenu ul {

          margin:0px;

          list-style:none;

          height: auto;

          padding-top: 0px;

          padding-right: 0px;

          padding-left: 0px;

          width: 350px;

          margin-top: 120px;

          margin-left: 8px;

          background-image:url(Images/button.jpg);

          background-repeat:no-repeat;

}

 

 

ul.pureCssMenu table {border-collapse:collapse

}

 

 

ul.pureCssMenu {

          display:block;

          zoom:1;

          _width:auto;

          float: left;

          z-index: 3;

}

ul.pureCssMenu ul{

          margin-top: 0px;

 

 

}

ul.pureCssMenu li{

          display:block;

 

}

ul.pureCssMenu a:active, ul.pureCssMenu a:focus {

          outline-style:none;

}

ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {

          display:block;

          zoom:1;

          border-color:#;

          text-align:left;

          text-decoration:none;

          padding-bottom:14px;

          padding-top:10px;

          padding-left:12px;

          text-decoration:none;

          cursor:default;

          font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

          font-size: 18px;

          font-weight: bold;

          color: #000;

          text-shadow: 1px 1px 1px #FFF;

          background-image:url(Images/button.jpg);

          background-repeat:no-repeat;

 

}

ul.pureCssMenu span{

          overflow:hidden;

 

}

ul.pureCssMenu ul li {

          float:none;

 

 

}

ul.pureCssMenu ul a {

          text-align:left;

          white-space:nowrap;

 

}

ul.pureCssMenu li.sep{

          text-align:left;

          padding:0px;

          line-height:0;

 

}

ul.pureCssMenu li.sep span{

          float:none;

          width:100%;

          height:3;

          display:inline-block;

}

ul.pureCssMenu li:hover{

          position:relative;

          z-index: 3;

}

ul.pureCssMenu li:hover&gt;a{

          border-color:#;

          text-decoration:none;

          font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

 

}

ul.pureCssMenu li a:hover{

          position:relative;

          border-color:#;

          color: #956221;

          text-decoration:none;

          font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

          font-size: 18px;

          font-weight: bold;

}

ul.pureCssMenu li.dis a {

          color: #000000 !important;

}

ul.pureCssMenu img {

          border: none;

          float:left;

          _float:none;

          margin-right:4px;

 

}

ul.pureCssMenu ul img {

}

ul.pureCssMenu img.over{display:none}

ul.pureCssMenu li.dis a:hover img.over{display:none !important}

ul.pureCssMenu li.dis a:hover img.def {display:inline !important}

ul.pureCssMenu li:hover &gt; a img.def  {display:none}

ul.pureCssMenu li:hover &gt; a img.over {display:inline}

ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover img.over{display:inline}

ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover img.def{display:none}

ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul{

          display:block;

}

ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul,ul.pureCssMenu a:hover a:hover a:hover ul ul,ul.pureCssMenu a:hover a:hover a:hover a:hover ul ul,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover ul ul,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover ul ul{display:none}

ul.pureCssMenu span{

          display:block;

          background-image:url(Images/arrow_sub1.gif);

          background-repeat: no-repeat;

          background-position:right center;

          background-repeat: no-repeat;

   padding-right:15px;}

}

ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{

          background-image:url(Images/arrow_sub1.gif)

}

</style>

<!-- End PureCSSMenu.com STYLE --&gt;

</head>

<body>

<LINK REL="SHORTCUT ICON" HREF="http://www.milesmemorials.com/favicon.ico"&gt;

<div class="#container">

<div id="bannerDiv" class="bannerStyle"&gt;

    <img src="Images/banner.jpg" width="1000" height="168" alt="banner"/&gt;

     </div>

  <div id="navbar" class="navbarRule"&gt;

    <ul id="MenuBar1" class="MenuBarHorizontal"&gt;

      <li&gt;<a href="index.html"&gt;Home</a&gt;</li&gt;

      <li&gt;<a href="about-us.html"&gt;About us</a&gt;</li&gt;

      <li&gt;<a href="why-us.html"&gt;Why choose us</a&gt;</li&gt;

      <li&gt;<a href="contact.html"&gt;Contact us</a&gt;</li&gt;

      <li&gt;<a href="request.html"&gt;Request a brochure</a&gt;</li&gt;

    </ul&gt;

  </div>

  <div id="slideshow2"&gt;<script type="text/javascript"&gt;

// BeginOAWidget_Instance_2559022: #slideshow_2

 

 

                           slideshow_2AddCaption=false;

$(document).ready(function() {

          $('#slideshow_2').cycle({

                    after:                              slideshow_2OnCycleAfter, //the function that is triggered after each transition

                    autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)

                    fx:                                        'fade,',// name of transition effect

                    pause:                              false,     // true to enable pause on hover

                    randomizeEffects:          true,  // valid when multiple effects are used; true to make the effect sequence random

                    speed:                              4000,  // speed of the transition (any valid fx speed value)

                    sync:                              true,     // true if in/out transitions should occur simultaneously

                    timeout:                    3000,  // milliseconds between slide transitions (0 to disable auto advance)

                    fit:                              false,

                    height:                       '200px',

                    width:         '1000px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)

          });

});

function slideshow_2OnCycleAfter() {

          if (slideshow_2AddCaption==true){

                              $('#slideshow_2-caption').html(this.title);

          }

}

 

// EndOAWidget_Instance_2559022

  </script>

    <div id="slideshow_2"&gt;

      <!--All elements inside this will become slides-->

     <img src="Images/ssimage1.jpg" width="1000" height="200" alt="image1" /&gt;<img src="Images/ssimage2.jpg" width="1000" height="200" alt="image2" /&gt;<img src="Images/ssimage3.jpg" width="1000" height="200" alt="image3" /&gt;

    </div>

    <div id="mainContent" class="mainText"&gt;

      <h1>A memory is a lasting tribute that acknowledged the life of your loved one ...let us help you to design a memorial that is every bit as special as that person. </h1>

      <ul class="pureCssMenu pureCssMenum"&gt;

        <li&gt;<a  href="cemetery-memorials.html"&gt;Churchyard memorials<![if gt IE 6]&gt;</a&gt;</li&gt;

            <li&gt;<a href=""&gt;Churchyard memorials<![if gt IE 6]&gt;</a&gt;</li&gt;

            <li&gt;<a  href=""&gt;Cremation memorials<![if gt IE 6]&gt;</a&gt;</li&gt;

       <li&gt;<a  href="" &gt;<span&gt;Vases</span&gt;<![if gt IE 6]&gt;</a&gt;<![endif]&gt;<!--[if lte IE 6]&gt;<table&gt;<tr&gt;<td&gt;<![endif]--&gt;

          <ul&gt;

            <li&gt;<a  href=""&gt;Italian marble vases</a&gt;</li&gt;

            <li&gt;<a  href=""&gt;Granite vases</a&gt;</li&gt;

          </ul&gt;

        <!--[if lte IE 6]&gt;</td&gt;</tr&gt;</table&gt;</a&gt;<![endif]--&gt;</li&gt;

        <li&gt;<a  href="" &gt;<span&gt;Colour guides</span&gt;<![if gt IE 6]&gt;</a&gt;<![endif]&gt;<!--[if lte IE 6]&gt;<table&gt;<tr&gt;<td&gt;<![endif]--&gt;

          <ul&gt;

            <li&gt;<a  href=""&gt;Italian marble & churchyard memorial</a&gt;</li&gt;

            <li&gt;<a  href=""&gt;Granite colour guide</a&gt;</li&gt;

          </ul&gt;

        <!--[if lte IE 6]&gt;</td&gt;</tr&gt;</table&gt;</a&gt;<![endif]--&gt;</li&gt;

        <li&gt;<a  href="" &gt;Home & garden memorials</a&gt;</li&gt;

        <li&gt;<a  href=""&gt;Inscription & vases</a&gt;</li&gt;

        <li&gt;<a  href=""&gt;Engraved designs</a&gt;</li&gt;

        <li&gt;<a  href="" &gt;Sand blasted designs</a&gt;</li&gt;

        <li&gt;<a  href="" &gt;Photos,plaques,etc</a&gt;</li&gt;

        <li&gt;<a  href=""&gt;Italian marble figurines</a&gt;</li&gt;

        <li&gt;<a  href="" &gt;Bronze figurines & accessories</a&gt;</li&gt;

        <li&gt;<a  href="" &gt;Memorial garden plaques</a&gt;</li&gt;

  </ul&gt;

  </div>

</div>

<script type="text/javascript"&gt;

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

    </script>

</body>

</html>

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points