AblazeRich

Hello All, Thanks for all your help. Bashing away at this responsive code and encountering a problem: Bit of the text and the News Bar / Aside jump up into and around the USP boxes (blue boxes in the middle of the page Acoustic Floating Floors and Noise Control Boxes). This only occurs when you are increasing the browser size from about 300px wide to 480px (or there abouts). And then its ok again (with the blue boxes next to each other) and when you increase it again the text beneath starts getting up in amongst it all. (I know that there is errors above that screen size too, will sort them once this is sorted, hopefully it will be a similar fix for it all!) To View this issue you need to shrink your browser window down small and then enlarge it slowly. http://www.mason-uk.co.uk/responsive/html5boilerplate.html Thanks Again! Rich

What didn't you understand? Are you trying to create re-directs?

It was recommended to me to start with HTML 5 Boilerplate, and I have found that quite useful. I just downloaded it and start tinkering with it, and am slowly getting there. The key is to start with the smaller resolutions first in the CSS (was screwing up a bit to begin with before I realised this!). Then scroll down the main.css and start tinkering with the CSS under the media queries for larger resolutions. May add in my own one for tablets once I've conquered the built in ones!

I spent ages messing about with .httpd.ini and .htaccess and everwhere I went I got told different code to put in it. None of it worked and then eventually after about a dozen conversations with the hosting company they realised that they didnt have it turned on! Arrgh! Found an old copy of one of my .htaccess files, dunno if this is of any use, but this is all it contains. redirect 301 /pages/isolate.html http://www.mason-uk.co.uk/index.asp

Sorry solved it! Gave the container div of the Logo & text a height in pixels, seems to have done it!

Working on a responsive site at the moment, and I'm battling with my nav bar. My Nav bar jumps up next to my logo on the smaller resolutions (less than about 780px), but it needs to go underneath it! I've been bashing away at this all morning and cannot see why this is occurring. Is there an easy way to tell a div to appear underneath of the one before that I am missing here? http://www.mason-uk.co.uk/responsive/html5boilerplate.html

It looks like you are mixing Javascript with the CSS. Is this necessary? Why not just have the CSS and get rid of this: onmouseover='thinkwithsatish.src="Images/Frisdrank1.gif" ' onmouseout='thinkwithsatish.src="Images/Frisdrank.gif"

Also, would it be fair to say that a flexible design between the lowest and highest used mobile res's would be the best way to go? What would you say would be the smallest res worth designing for?

Is that widths?

Hi All, Working on this responsive site, and was wondering what you guys felt that the minimum mobile phone screen res width I should design for was? I went on http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html It shows that the current most used size is 240 x 320 Although there are some older phones that have 128 x 128 and even 101x 80 - which just seems ridiculously small to design for. I know that the idea of good responsive design is that it functions on everything, but getting down that low just seems painful!

Thanks mate, that worked! I did look at it in Chrome Inspect Element, but didn't spot it. Got another problem now, probably a bit of a stupid one, but in the main content area of my site, I keep getting bits jumping up into the wrong areas and overlapping each other. What is the code that stops things (or allows things) to overlap? My z-index's are set to 0. So I don't know whats going on. I'm not the hottest on DIVs as it is. I tend to mess around with position, float, display until it appears right, but I just can't see what's affecting my main body content.

Hi All, I'm struggling through the code for a responsive website. Getting there with most of it, but having an issue with the underline of the Title text next to the logo. When I reduce the browser size down the bottom border of the Title suddenly jumps up in size and runs through the logo and beyond. I've been trawling through the code but cannot find a reason for this. Its very frustrating. I'm actually having issues right through this website with stuff appearing ontop of other stuff and jumping around in weird ways... Still battling with the main content window (as you can see!) Thanks guys! Rich http://www.mason-uk.co.uk/responsive/html5boilerplate.html

I think that the ASP code just briefly accesses the database, grabs the info, then draws the HTML page, the ASP automatically ends the Database session when its got the info it needs then posts the HTML to the end-user. I reckon they will get away with it, as they are aimed at an extremely small but profitable section of the B2B community to do with soundproofing recording studios etc. I'm not really a back end developer, but I just happened to have picked up the basics of Classic ASP years ago, as I used to work closely with a developer that used this. Unfortunately I don't know other Databases, I have tried to use them and never managed to get them to work. Is there a DB that is better than the rest and easy to use? Reluctant to use Wordpress as the website is very bespoke, plus I have a bit of a mental block when it comes to off the shelf software. I know that I do need to learn wordpress though...

Thanks mate

Progressing with the buttons, but for some reason I'm having trouble with getting the main content lined up correctly. I want the title to line up with the image and for the underline to stop around there. Also the body text beneath keeps jumping up. Any idea where I'm going wrong on this bit? Thanks again! I think that perhaps some of the CSS I'm trying to put in is getting overwritten by other bits of CSS.... Need to look at this logically... Any tips? http://www.mason-uk.co.uk/responsive/html5boilerplate.html

Thanks man, but I don't really know PHP very well. Could I simply stick this in and then have it forward onto ASP pages? Does it need any supporting scripts? Would this be a stand alone index.php page, with just this code in? That then automatically forwards onto other index's?

Hello All, One of my clients is branching out into Europe and they need their website translated into the major languages of the continent. This isn't too much of a problem as I have some contacts that can help with the actual translation. But what I wanted advice on is the mechanics of how this could work website wise? For instance, is it possible for the website to detect what country is accessing it and automatically adjust accordingly? The website is database driven and I can duplicate current entries with translations. (Classic ASP / Access DB). Or would it be better to duplicate the website, translate it, and then have a different web address for each language (for instance a web address ending is .es for spanish sites etc). Obviously I guess it would also need some kind of manual language swap, as a viewer may speak a different language to the country they are accessing it from (or some countries have multiple languages such as Switzerland) Does anyone know of any good tutorials or starting points for this kind of project? Any other advice welcome Kind Regards Rich

I know what you mean Wickham, you have to allow for things to go wrong on some unexpected browser setting or something. I usually make sure there is a couple of ways to navigate my websites. The only issue is that with this site there is so many pages that they have to be stored in drop downs really. Inspired, I used the code you recommended, thanks for that! Although this code seems fairly robust, but it seems to fall apart when it gets to between about 480px and 600px on my website but not in the example index that comes with it. Probably some CSS conflict or something, any idea what though? http://www.mason-uk.co.uk/responsive/html5boilerplate.html

Thanks guys, Inspired I do know what you mean reg the out of date code. I've been tinkering with the HTML Boilerplate you recommended and it does seem relatively straight forward as you said. One thing is though, that I'm having trouble with the drop down menus on the smaller resolutions. This is the version I am currently working on: http://www.mason-uk.co.uk/responsive/html5boilerplate.html Any idea on how to do this? Is there some code that fits well with this boiler plate for drop downs? I've literally just copied out of the old site.... Thanks again Rich

Yeah I did start this off with a dreamweaver template and then modified it. Thought that might be somewhere to start..... Will try that boiler plate idea. Perhaps I can move the left hand sidebar/nav up into the header area.... Thanks guys

Thanks for those tips, sorry it took me a while to get back to you. I was working on some other projects for a bit, but I'm back onto the responsive site. I'm starting off with making it elastic for resolutions 800px and up and will bring in media queries for sizes below that. I'm currently struggling with two things with the elastic design; something that I am sure should be easy to sort but cant work it out right now. 1)The container doesn't stretch down vertically as far as the main content, nav and sidebars do. I need em all to reach down as far as the bottom of the maincontent div. Any idea how I do this? 2)The text in the centre maincontent div gets overlapped by the news sidebar. Is there an easy way to keep this out of the way of the sidebar? And still keep it elastic? http://www.mason-uk.co.uk/responsive/index.html Sorry its a bit messy design wise at the moment, its a work in progress! Thanks Rich CSS and HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { font: 100% Verdana, Arial, Helvetica, sans-serif; background:#cccccc; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #000000; } .twoColHybLtHdr #container { width: 80%; /* this will create a container 80% of the browser width */ height: 100%; background:#637b8c; margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ border: 1px solid #000000; text-align: left; /* this overrides the text-align: center on the body element. */ border:solid 2px #FFF; border-radius: 29px; -moz-border-radius: 29px; -webkit-border-radius: 29px; } header { padding: 0 0px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */ height:114px; text-align:center; margin:0px 0px 0px 0px; } header h1 { margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */ padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */ } .smalltext { margin:0px 0px 0px 0px; text-align:left; font-size:9px; color:#333; padding:2px 4px 2px 0px; } H1 { margin:0px 0px 2px 0px; font-family: Verdana, Arial, Verdana, Helvetica, sans-serif; font-size:13px; top:110px; position:absolute; font-style:normal; font-weight:bold; color:#333; text-align:left;} H2 { margin:0px 0px 2px 0px; font-family: Verdana, Arial, Verdana, Helvetica, sans-serif; font-size:12px; font-style:normal; font-weight:bold; color:#333; text-align:left;} H3 { margin:0px 0px 2px 0px; font-family: Verdana, Arial, Verdana, Helvetica, sans-serif; font-size:13px; font-style:normal; font-weight:bold; color:#333; text-align:left;} H4 { margin:0px 0px 0px 0px; font-family: Verdana, Arial, Verdana, Helvetica, sans-serif; font-size:11px; font-style:normal; font-weight:bold; color:#333;} H5 { margin:0px 0px 0px 0px; font-family: Verdana, Arial, Verdana, Helvetica, sans-serif; font-size:10px; font-style:normal; font-weight:bold; color:#FFF; text-align:left;} H6 { margin:0px 0px 0px 0px; font-family: Verdana, Arial, Verdana, Helvetica, sans-serif; font-size:11px; font-style:normal; font-weight:bold; color:#333; text-align:left;} img { margin:0px 0px 0px 0px; } p { margin:0px 0px 0px 0px; text-align:left; font-size:11px; color:#333; } /* Tips for sidebar1: 1. Since we are working in relative units, it's best not to use padding on the sidebar. It will be added to the overall width for standards compliant browsers creating an unknown actual width. 2. Since em units are used for the sidebar value, be aware that its width will vary with different default text sizes. 3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColHybLtHdr #sidebar1 p" rule. */ nav.sidebar1 { float: left; width: 10em; /* since this element is floated, a width must be given */ background: #637b8c; /* the background color will be displayed for the length of the content in the column, but no further */ top:1px; font-family: Verdana, Arial, Helvetica, sans-serif; padding:0px 0px 0px 7px; margin:0px 0px 0px 0px; text-align:left; vertical-align:top; z-index:0; } .leftborder { margin:0px 0px 0px 0px; font-family: Verdana, Arial, Helvetica, sans-serif; padding:0px 0px 0px 80px; } .twoColHybLtHdr .sidebar1 h3, .twoColHybLtHdr .sidebar1 p { margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */ margin-right: 10px; } .projectscolumn { float: right; position:absolute; right:10%; width: 10%; /* since this element is floated, a width must be given */ min-width: 10em; background: #888e9b; /* the background color will be displayed for the length of the content in the column, but no further */ padding: 15px 5px; /* top and bottom padding create visual space within this div */ font-family: Verdana, Arial, Helvetica, sans-serif; text-align:left; vertical-align:top; z-index:2; border-left:solid 2px #FFF; } .twoColHybLtHdr #projectscolumn h3, .twoColHybLtHdr #projectscolumn p { margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */ margin-right: 10px; } /* Tips for mainContent: 1. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div. No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. 2. Be aware it is possible to cause float drop (the dropping of the non-floated mainContent area below the sidebar) if an element wider than it can contain is placed within the mainContent div. WIth a hybrid layout (percentage-based overall width with em-based sidebar), it may not be possible to calculate the exact width available. If the user's text size is larger than average, you will have a wider sidebar div and thus, less room in the mainContent div. You should be aware of this limitation - especially if the client is adding content with Contribute. 3. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This may help avoid several IE-specific bugs. */ .twoColHybLtHdr #mainContent { margin: 0 10% 0 10em; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */ float:left; z-index:0; position:absolute; width:60%; min-width:400px; background: #e5e5e5; border:solid 2px #FFF; border-radius: 29px; -moz-border-radius: 29px; -webkit-border-radius: 29px; } .twoColHybLtHdr #footer { padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */ background:#DDDDDD; } .twoColHybLtHdr #footer p { margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */ padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ } /* Miscellaneous classes for reuse */ .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ float: right; margin-left: 8px; } .fltlft { /* this class can be used to float an element left in your page */ float: left; margin-right: 8px; } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */ clear:both; height:0; font-size: 1px; line-height: 0px; } .dropdowns { position:static; float:right; padding:70px 20px 0px 0px; margin:0px 0px 0px 0px; } .borderbuttonstyle { border:3px; border-color:#666; border-bottom-style:inset; } a.links:link { margin:0px 0px 0px 0px; color:#FFF; display:inline; font-size:10px; text-decoration:underline; padding:0px 10px 20px 0px; text-align:right;} a.links:visited { margin:0px 0px 0px 0px; color:#FFF; display:inline; font-size:10px; text-decoration:underline; padding:0px 10px 20px 0px; text-align:right;} a.links:hover { margin:0px 0px 0px 0px; color:#333; display:inline; font-size:10px; text-decoration:underline; padding:0px 10px 20px 0px; text-align:right;} a.leftbuttons:link { margin:5px 5px 5px 5px; background-image:url(images/lb-mason-uk.gif); background-repeat:no-repeat; height:15px; color:#FFF; display:block; font-size:12px; font-weight:bold; font-family:Verdana, Geneva, sans-serif; text-decoration:none; padding:2px 0px 2px 0px;} a.leftbuttons:visited { margin:5px 5px 5px 5px; background-image:url(images/lb-mason-uk.gif); background-repeat:no-repeat; height:15px; color:#FFF; display:block; font-size:12px; font-weight:bold; font-family:Verdana, Geneva, sans-serif; text-decoration:none; padding:2px 0px 2px 0px;} a.leftbuttons:hover { margin:5px 5px 5px 5px; background-image:url(images/lb-mason-uk2.gif); background-repeat:no-repeat; height:15px; color:#FFF; display:block; font-size:12px; font-weight:bold; font-family:Verdana, Geneva, sans-serif; text-decoration:none; padding:2px 0px 2px 0px;} .searchbutton { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #adc1d0), color-stop(1, #637b8c) ); background:-moz-linear-gradient( center top, #adc1d0 5%, #637b8c 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#adc1d0', endColorstr='#637b8c'); background-color:#adc1d0; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; border:1px solid #adc1d0; display:inline-block; color:#fffaff; font-family:Arial; font-size:12px; font-weight:bold; padding:1px 9px; text-decoration:none; }.searchbutton:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #637b8c), color-stop(1, #adc1d0) ); background:-moz-linear-gradient( center top, #637b8c 5%, #adc1d0 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#637b8c', endColorstr='#adc1d0'); background-color:#637b8c; }.searchbutton:active { position:relative; top:1px; } .tbox {position:absolute; display:none; padding:14px 17px; z-index:900} .tinner {padding:15px; -moz-border-radius:5px; border-radius:5px; background:#fff url(images/preload.gif) no-repeat 50% 50%; border-right:1px solid #333; border-bottom:1px solid #333} .tmask {position:absolute; display:none; top:0px; left:0px; height:100%; width:100%; background:#000; z-index:800} .tclose {position:absolute; top:0px; right:0px; width:30px; height:30px; cursor:pointer; background:url(images/close.png) no-repeat} .tclose:hover {background-position:0 -30px} #error {background:#ff6969; color:#fff; text-shadow:1px 1px #cf5454; border-right:1px solid #000; border-bottom:1px solid #000; padding:0} #error .tcontent {padding:10px 14px 11px; border:1px solid #ffb8b8; -moz-border-radius:5px; border-radius:5px} #success {background:#2ea125; color:#fff; text-shadow:1px 1px #1b6116; border-right:1px solid #000; border-bottom:1px solid #000; padding:10; -moz-border-radius:0; border-radius:0} #bluemask {background:#4195aa} #frameless {padding:0} #frameless .tclose {left:6px} --> </style><!--[if IE]> <style type="text/css"> /* place css fixes for all versions of IE in this conditional comment */ .twoColHybLtHdr #sidebar1 { padding-top: 30px; } .twoColHybLtHdr #mainContent { zoom: 1; padding-top: 15px; } /* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */ </style> <![endif]--> <script type="text/javascript" src="tinybox.js"></script> <script src="modernizr-2.5.3.js"></script> <script type="text/javascript" src="fsmenu.js"></script> <link rel="stylesheet" type="text/css" id="listmenu-h" href="listmenu_h.css" title="Horizontal 'Earth'" /> <link rel="stylesheet" type="text/css" id="fsmenu-fallback" href="listmenu_fallback.css" /> <link rel="stylesheet" type="text/css" href="divmenu.css" /> <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"> </head> <body class="twoColHybLtHdr"> <div id="container"> <header> <nav class="dropdowns"> <ul class="menulist" id="listMenuRoot"> <li><a style="background-image:url(images/littlearrows.gif); background-repeat:no-repeat" href="acoustic-engineering-services.asp">Services</a> <ul> <li><a class="borderbuttonstyle" href="service.asp?pid=2"> Installation Services</a></li> <li><a class="borderbuttonstyle" href="service.asp?pid=3"> Supplying Products</a></li> <li><a class="borderbuttonstyle" href="service.asp?pid=4"> Design Services</a></li> <li><a class="borderbuttonstyle" href="service.asp?pid=1"> Floating Floors</a></li> <li><a class="borderbuttonstyle" href="service.asp?pid=5"> Bespoke Products</a></li> </ul> </li> <li> <a style="background-image:url(images/littlearrows.gif); background-repeat:no-repeat" href="vibration-control-products.asp">Products</a> <ul> <li><a class="borderbuttonstyle" href="search-mason-uk.asp"> Search Product Listings</a></li> <li><a class="borderbuttonstyle" href="datasheets.asp"> Product Datasheets</a></li> <li><a class="borderbuttonstyle" href="new-vibration-control-products.asp"> New Products</a></li> <li><a class="borderbuttonstyle" href="basket.asp?pid=401"> Inertia Bases</a></li> <li><a class="borderbuttonstyle" href="basket.asp?pid=428"> Airsprings</a></li> <li><a class="borderbuttonstyle" href="isolated-rubber-mounts-pads.asp"> Rubber Mounts & Pads</a></li> <li><a class="borderbuttonstyle" href="isolated-spring-mounts.asp"> Spring Mounts</a></li> <li><a class="borderbuttonstyle" href="isolation-bearings.asp"> Isolation Bearings</a> <ul> <li><a class="borderbuttonstyle" href="basket.asp?pid=410"> Building Isolation</a></li> <li><a class="borderbuttonstyle" href="basket.asp?pid=445"> Isolation Bearings</a></li> </ul> </li> <li><a class="borderbuttonstyle" href="acoustically-isolated-walls.asp"> Isolated Walls</a></li> <li><a class="borderbuttonstyle" href="flexible-pipe-connectors.asp"> Flexible Pipe Connectors</a></li> <li> <a class="borderbuttonstyle" href="floatingfloors.asp"> Floating Floors</a> <ul> <li><a class="borderbuttonstyle" href="basket.asp?pid=383"> L.D.S Rubber Floating Floors</a></li> <li><a class="borderbuttonstyle" href="basket.asp?pid=382"> Spring Floating Floors</a></li> <li><a class="borderbuttonstyle" href="basket.asp?pid=384"> Wooden & Sports Floating Floors</a></li> <li><a class="borderbuttonstyle" href="basket.asp?pid=440"> EAFM Form Work Floating Floors</a></li> </ul> </li> <li> <a class="borderbuttonstyle" href="acoustic-suspended-ceilings.asp"> Hangers & Ceilings</a> <ul> <li><a class="borderbuttonstyle" href="neoprene-hangers.asp"> L.D.S Rubber Hangers</a></li> <li><a class="borderbuttonstyle" href="spring-hangers.asp"> Spring Hangers</a></li> </ul> </li> <li><a class="borderbuttonstyle" href="acoustic-foams.asp"> Acoustic Foams</a></li> </ul> </li> <li> <a style="background-image:url(images/littlearrows.gif); background-repeat:no-repeat" href="vibration-control-applications.asp"> Applications</a> <ul> <li><a class="borderbuttonstyle" href="application.asp?pid=2"> Theatres & Venues</a></li> <li><a class="borderbuttonstyle" href="application.asp?pid=3"> Night Clubs & Pubs</a></li> <li><a class="borderbuttonstyle" href="application.asp?pid=4"> Cinemas</a></li> <li><a class="borderbuttonstyle" href="application.asp?pid=1"> Bowling Alleys</a></li> <li><a class="borderbuttonstyle" href="application.asp?pid=5"> Recording Studios</a></li> <li><a class="borderbuttonstyle" href="application.asp?pid=6"> Gymnasia</a></li> <li><a class="borderbuttonstyle" href="application.asp?pid=7"> Sports & Health Clubs</a></li> <li><a class="borderbuttonstyle" href="application.asp?pid=8"> Science & Medical</a></li> <li><a class="borderbuttonstyle" href="application.asp?pid=9"> Plant Rooms</a></li> <li><a class="borderbuttonstyle" href="application.asp?pid=14"> Libraries & Eductional Facilities</a></li> <li><a class="borderbuttonstyle" href="application.asp?pid=17"> Industrial</a></li> </ul> </li> </ul> </nav> </header> <nav class="sidebar1"> <a href="index.asp" class="leftbuttons"> Home<br /></a> <a href="about-mason-uk.asp" class="leftbuttons"> About <br /></a> <a href="news.asp" class="leftbuttons"> News<br /></a> <a href="projects.asp" class="leftbuttons"> Past Projects<br /></a> <a href="casestudies.asp" class="leftbuttons"> Case Studies<br /></a> <a href="contact.asp" class="leftbuttons"> Contact Us<br /></a> <a href="links.asp" class="leftbuttons"> Links<br /></a> <br /><br /> <br /> <h5> Search Website<br /></h5> <FORM action="search-mason-uk.asp" method="post"> <input type="text" name="SearchString" size="13" /> <br /><bR /> <input type="submit" value="+ Search" name="Submit" class="searchbutton"> </Form> <br /><br /> <br /> <h5> Phone / Email:<br /></h5> <font class="stext"> 01252 716610<br /> info@mason-uk.co.uk</font> <br /><Br /> <br /> <a href="http://www.ioa.org.uk"> <img border="0" alt="Mason UK is a member of the Institute of Accoustics IOA" title="Mason UK is a member of the Institute of Accoustics IOA" src="images/ioa.gif" /> </a> </nav> <section class="projectscolumn"> <h6>Mason UK News</h6><bR /> <article> <a href="project.asp?pid=74 " > <img border="0" width="100" src="images/P1010070.JPG" title=" Spring mounts attached to Column - Mason UK Ltd" alt="Mason UK Ltd - Spring mounts attached to Column" /></a> <h5> Helipad - Stockholm Hospital - Sweden<br /></h5> <p class="smalltext"> Mason UK are working on the new Karolinska Hospital in Stock...</p> <a href="project.asp?pid=74" class="links">Click Here > ></a><br /><BR /><br /> </article> <article> <a href="project.asp?pid=75 " > <img border="0" width="100" src="images/Photo0151.jpg" title=" Gym Group Building Manchester - Mason UK Ltd" alt="Mason UK Ltd - Gym Group Building Manchester" /></a> <h5> The Gym Group - Manchester<br /></h5> <p class="smalltext"> Isolated, acoustic, concrete Spring Jack up floating floors ...</p> <a href="project.asp?pid=75" class="links">Click Here > ></a><br /><BR /><br /> </article> <article> <a href="project.asp?pid=55 " > <img border="0" width="100" src="images/denmark1.jpg" title=" Rendering of the finished building - Mason UK Ltd" alt="Mason UK Ltd - Rendering of the finished building" /></a> <h5> House of Music - Denmark<br /></h5> <p class="smalltext"> The Musikkenshus is designed to be the largest classical mus...</p> <a href="project.asp?pid=55" class="links">Click Here > ></a><br /><BR /><br /> </article> <article> <a href="project.asp?pid=73 " > <img border="0" width="100" src="images/Merthyr 002.jpg" title=" Westminster Lodge - Mason UK Ltd" alt="Mason UK Ltd - Westminster Lodge" /></a> <h5> Westminster Lodge<br /></h5> <p class="smalltext"> Mason UK won the contract from Willmott Dixon to supply ligh...</p> <a href="project.asp?pid=73" class="links">Click Here > ></a><br /><BR /><br /> </article> </section> <section id="mainContent"> <div class="underline"> <h1>Welcome to Mason UK Ltd</h1> <section class="mainpic"> <a href="javascript:gotoshow()"> <img src="images/royaloperahouse-small.jpg" alt="Floating Floors Applications - Mason UK" title="Floating Floors Applications - Mason UK" name="slide" border=0 style="filter:blendTrans(duration=3)" width="200" height="150"></a> <script language="Javascript1.1"> <!-- var whichlink=0 var whichimage=0 var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0 function slideit(){ if (!document.images) return if (ie) document.images.slide.filters[0].apply() document.images.slide.src=imageholder[whichimage].src if (ie) document.images.slide.filters[0].play() whichlink=whichimage whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0 setTimeout("slideit()",slidespeed+blenddelay) } slideit() //--> </script> </section> </div> <p><h6>We are acoustic engineers, specialising in noise & vibration control products, including floating floor systems. Mason UK is the exclusive agent in the UK and Ireland for Mason Industries Inc.</h6></p> <br> <p>Services include; design, installation and product supply for specialist floating floors, suspended ceilings, HVAC, building and wall isolation. Additionally bespoke and specialist noise and vibration control products can be provided.</p> <div class="homebox"> <div class="toppad2"> <h4>Noise Control Products</h4></div> <div class="homeboxpic"> <a href="vibration-control-products.asp" class="textlink"> <img class="nonoborder" alt="Click here to View Noise Control Products" title="Click here to View Noise Control Products" border="0" width="200" src="images/mason-uk-acoustic-products.jpg" /></a></div> <div class="homeboxtext"> We have a large range of acoustic products inc; flexible pipe connectors, inertia bases, air springs, springs, hangers, wall & building isolation. To view click below<br /> </div> <div class="buttonborder2"> <a href="vibration-control-products.asp" class="plusbutton">View This</a> </div> </div> <div class="homebox2"> <div class="toppad2"> <h4>Acoustic Floating Floors</h4></div> <div class="homeboxpic"> <a href="service.asp?pid=1" class="textlink"> <img class="nonoborder" alt="Click here to go to: Acoustic Floating Floors" title="Click here to go to: Acoustic Floating Floors" border="0" width="200" src="images/westminster-park-plaza2.jpg" /></a></div> <div class="homeboxtext"> We offer a range of acoustic floating floors including jack up LDS rubber and spring as well as wooden floating floors. For more information click below<br /> </div> <div class="buttonborder2"> <a href="service.asp?pid=1" class="plusbutton">View This</a> </div> </div> <span class="textspan"> <p><h3></h3></p><br /> <p>Please take a look around our website. Our services and applications pages will give you an idea of the typical areas in which we work and our products pages list the majority of the isolation systems we provide. </p><br /> <p>Contact our friendly and knowledgeable staff for more information concerning your project and any questions you may have.</p><br /> <p><h3></h3></p><br /> <p></p><br /> <p></p><br /> </span> <!-- end #mainContent --></section> <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --> <br class="clearfloat" /> <div id="footer"> <p>Footer</p> <!-- end #footer --></div> <!-- end #container --></div> </body> </html>

I also want the sidebar nav on the left hand side to disappear and become part of the nav at the top in the header

Thanks for that! I want a certain sidebar to totally disappear on smaller resolutions on the website I need to redesign to responsive web design. www.mason-uk.co.uk See the grey bar on the right hand side, with the news articles in it? I want that to disappear totally on smaller screen resolutions. Does anyone have a simple or easy solution to this? Is it possible to totally remove an element using media queries alone? Or is there a cool bit of script that someone has that can help, preferably Javascript, JQuery or ASP. Thanks Rich

I kinda like alot of the Anonymous stuff I've seen on Youtube, but whilst I can see the point in hactivism on some of our worlds major exploiters and especially the right wing and biased press, I fail to understand how GoDaddy is really 'that important' of a target. Apart from that, the Anonymous movement seems pretty cool to me! I wonder if it will all end like V for Vendetta! Big up Guy Fawkes!

As opposed to un-responsive web design, I'd say that responsive web design is the future (and present) more than anything else at the moment, as there are more and more screen sizes and devices using the internet now, so a website that is flexible and re-adjusts is much more likely to look good (and be useable) across the board, than one that doesn't. Unless in the future there becomes one set standard screen size (or something else which standardises) which is unlikely, then web designers will have to design in a flexible way for these different platforms. Just trying to learn the bloody thing now!