4 replies [Last post]
Donna the printer
Donna the printer's picture
Offline
newbie
Eastern Canada
Last seen: 6 years 8 weeks ago
Eastern Canada
Timezone: GMT-3
Joined: 2015-05-29
Posts: 3
Points: 4

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta name="google-site-verification" content="LPpllYj4y9Arb9E-iCZnrnMGmAQp75OmQmzog7M_7Hk" />
<meta name="msvalidate.01" content="224AD7B92865A97507AC246D5A50692C" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Codiac Printing Inc. Home</title><link href="themes/8/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="themes/8/js-image-slider.js" type="text/javascript"></script>
    <link href="themes/8/tooltip.css" rel="stylesheet" type="text/css" />
    <script src="themes/8/tooltip.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
    <link href="generic.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        imageSlider.thumbnailPreview(function (thumbIndex) { return "<img src='images/thumb" + (thumbIndex + 1) + ".jpg' style='width:70px;height:44px;' />"; });
    </script>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.css" rel="stylesheet" type="text/css">
 
<script src="respond.min.js"></script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_popupMsg(msg) { //v1.0
  alert(msg);
}
</script>
 
<style>
body{ margin:0px; }
 
}
 
    #gridContainer clearfix {
        background-color: #;
	width: 1232px;
	margin-right: auto;
	margin-left: auto;
    }
 
 
div#topbar{
	height: 50px;
	width: 100%;
 
}
div#topbar > #logo{
	float:left;
}
div#topbar > #sections_btn_holder{
	float:left;
	width:176px;
	height:46px;
	padding-top:0px;
	padding-bottom:20px;
}
div#topbar > #sections_btn_holder > #button{	
    background:#333;
	color: #FFF;
	height: 50px;
	width: 176px;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
}
div#topbar > #sections_panel{
	position:absolute;
	height:0px;
	width:176px;
	background:#;
	top:427px;
	left:687px;
	border-radius:0px 0px 8px 8px;
	overflow:hidden;
	z-index:1000;
 
}
div#topbar > #sections_panel > div{
	background:#;
	padding:0px;
	height:0px;
	width:176px;
	margin:px;
 
 
}
div#topbar > #sections_btn_holder {
	-webkit-transition: all 0s ease 0s;
	-moz-transition: all 0s ease 0s;
	-ms-transition: all 0s ease 0s;
	-o-transition: all 0s ease 0s;
	transition: all 0s ease 0s;
}
div#topbar > #sections_btn_holder:hover {
	font-size: 102%;
 
}
 
</style>
 
 
 
 
 
 
 
 
<script>
function toggleNavPanel(x){
    var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="175px";
    if(panel.style.height == maxH){
        panel.style.height = "0px";
        navarrow.innerHTML = "&#9662;";
    } else {
        panel.style.height = maxH;
        navarrow.innerHTML = "&#9652;";
    }
}
</script>
 
<!-- Add jQuery library -->
	<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
 
	<!-- Add mousewheel plugin (this is optional) -->
	<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>
 
	<!-- Add fancyBox main JS and CSS files -->
	<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
	<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
 
	<!-- Add Button helper (this is optional) -->
	<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
	<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
 
	<!-- Add Thumbnail helper (this is optional) -->
	<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
	<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
 
	<!-- Add Media helper (this is optional) -->
	<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script type="text/javascript">
		$(document).ready(function() {
			/*
			 *  Simple image gallery. Uses default settings
			 */
 
			$('.fancybox').fancybox();
 
			/*
			 *  Different effects
			 */
 
			// Change title type, overlay closing speed
			$(".fancybox-effects-a").fancybox({
				helpers: {
					title : {
						type : 'outside'
					},
					overlay : {
						speedOut : 0
					}
				}
			});
 
			// Disable opening and closing animations, change title type
			$(".fancybox-effects-b").fancybox({
				openEffect  : 'none',
				closeEffect	: 'none',
 
				helpers : {
					title : {
						type : 'over'
					}
				}
			});
 
			// Set custom style, close if clicked, change title type and overlay color
			$(".fancybox-effects-c").fancybox({
				wrapCSS    : 'fancybox-custom',
				closeClick : true,
 
				openEffect : 'none',
 
				helpers : {
					title : {
						type : 'inside'
					},
					overlay : {
						css : {
							'background' : 'rgba(238,238,238,0.85)'
						}
					}
				}
			});
 
			// Remove padding, set opening and closing animations, close if clicked and disable overlay
			$(".fancybox-effects-d").fancybox({
				padding: 0,
 
				openEffect : 'elastic',
				openSpeed  : 150,
 
				closeEffect : 'elastic',
				closeSpeed  : 150,
 
				closeClick : true,
 
				helpers : {
					overlay : null
				}
			});
 
			/*
			 *  Button helper. Disable animations, hide close button, change title type and content
			 */
 
			$('.fancybox-buttons').fancybox({
				openEffect  : 'none',
				closeEffect : 'none',
 
				prevEffect : 'none',
				nextEffect : 'none',
 
				closeBtn  : true,
 
				helpers : {
					title : {
						type : 'inside'
					},
					buttons	: {}
				},
 
				afterLoad : function() {
					this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
				}
			});
 
 
			/*
			 *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
			 */
 
			$('.fancybox-thumbs').fancybox({
				prevEffect : 'none',
				nextEffect : 'none',
 
				closeBtn  : false,
				arrows    : false,
				nextClick : true,
 
				helpers : {
					thumbs : {
						width  : 50,
						height : 50
					}
				}
			});
 
			/*
			 *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
			*/
			$('.fancybox-media')
				.attr('rel', 'media-gallery')
				.fancybox({
					openEffect : 'none',
					closeEffect : 'none',
					prevEffect : 'none',
					nextEffect : 'none',
 
					arrows : false,
					helpers : {
						media : {},
						buttons : {}
					}
				});
 
			/*
			 *  Open manually
			 */
 
			$("#fancybox-manual-a").click(function() {
				$.fancybox.open('1_b.jpg');
			});
 
			$("#fancybox-manual-b").click(function() {
				$.fancybox.open({
					href : 'iframe.html',
					type : 'iframe',
					padding : 5
				});
			});
 
			$("#fancybox-manual-c").click(function() {
				$.fancybox.open([
					{
						href : 'codiacvan1_b',
						title : 'Codiac Van'
					}, {
						href : '2_b.jpg',
						title : '2nd title'
					}, {
						href : '3_b.jpg'
					}
				], {
					helpers : {
						thumbs : {
							width: 75,
							height: 50
						}
					}
				});
			});
 
 
		});
	</script>
	<style type="text/css">
		.fancybox-custom .fancybox-skin {
			box-shadow: 0 0 50px #222;
		}
 
		body {
			max-width: px;
			margin: 0;
		}
 
 
   </style>
 
 
 
</head>
 
 
<body>
<div class="gridContainer clearfix">
 
 
 
    <div id="topblack"><img src="images/topblack.jpg" alt="topblack"></div>
 
    <div id="topmast"><div id="sliderFrame">
      <div id="slider">
        <a href="http://www.menucool.com/javascript-image-slider" target="_blank">
          <img src="images/image-slider-1.jpg" alt="Signs, Decals and more" />
          </a>
        <img src="images/image-slider-2.jpg" alt="Custom Banners and Signage" />
        <img src="images/image-slider-3.jpg" alt="Construction/Municipal Signage" />
        <img src="images/image-slider-4.jpg" alt="Vehicle Wraps" />
        <img src="images/image-slider-5.jpg" alt="All Real Estate Companies Welcome" />
        </div>
      <div style="display: none;">
        <div id="cap1">
          Municipal Signage
          </div>
        <div id="cap2">
          <em>Welcome</em> to Codiac Printing 
          </div>
        </div></div>
 
      <div id="blackstrip"><img src="images/redblackbar.jpg" alt="redblackbar"></div>
 
 
      <!--THIS IS THE DIV THE MENUBAR IS IN-->    
      <div id="topbar">
 
 
        <!--THESE ARE THE ROOT BUTTONS--> 
 
        <div id="sections_btn_holder">
          <a href="index.html">
          <button onclick=>HOME </button>
        </a>  </div>
 
        <div id="sections_btn_holder">
          <a href="about.html">
          <button onclick=>ABOUT US </button>
        </a>  </div>
 
 
 
 
        <div id="sections_btn_holder">
          <button onclick="toggleNavPanel('sections_panel')">SERVICES <span id="navarrow">&#9662;</span></button>
        </div>
 
 
        <div id="sections_btn_holder">
          <button onclick=>CUSTOM GALLERY </button>
        </div>
 
 
        <div id="sections_btn_holder">
          <button onclick=>LOCATION</button>
        </div>
 
 
        <div id="sections_btn_holder">
          <button onclick=>CONTACT US</button>
        </div>
 
        <div id="sections_btn_holder">
          <button onclick=>PDF CATALOGUE</button>
        </div>
 
 
 
 
 
 
        <!--THIS IS THE DROP DOWN PANEL AND THE BUTTONS IN IT--> 
        <div id="sections_panel">
          <div>
  <div id="sections_btn_holder">
    <button onclick="toggleNavPanel('sections_panel')">GRAPHIC DESIGN</button>
    </div>
 
            <div>
  <div id="sections_btn_holder">
    <button onclick="toggleNavPanel('sections_panel')">VEHICLE WRAPS</button>
    </div> 
 
              <div>
  <div id="sections_btn_holder">
    <button onclick="toggleNavPanel('sections_panel')">INSTALLATION</button>
    </div>
                <!--MAKE SURE THERE'S 4 END DIVS UNDER THIS--> 
  </div>
  </div>
  </div>
  </div> 
        <!--END OF THE MENUBAR-->     
 
 
 
 
        <div id="articles">
 
          <div id="content">
 
            <div id="welcometext"><h2>Welcome</h2>
              <p>Here at Codiac we have a passion for print.  In fact, we house Screen Printing, Large Format Digital,Offset, and Vinyl Cut Lettering.  We just can't get enough of Stationary, Banners, Vehicle Wrapping and Sign-making. For example, one of our specialties is industrial decals. Whether you manufacture furnaces, refrigerators, gaming devices or electrical equipment, our experience in producing decals to industry standards/specs is extensive. Here at Codiac, we know your workflow can depend on something as small as a decal and we go the extra mile to ensure seamless service.</p>
              <p>We have a full selection of traffic/construction signs. Check out our <a href="codiacatalogue_PDF.pdf"> PDF Catalogue</a> and browse our extensive selection of regulation signage carefully made to industry/government specs, and give us a call or a click.</p>
            If all that isn't enough, we offer Graphic Design services for your custom projects, logo development, and branding and then follow through with manufacturing and installation.<br>Want your vehicle to match your stationary? We can do that too.</div>
 
 
 
 
  <div id="referral">      
  <div id="gallery1">
  <p>
    <a class="fancybox-buttons"data-fancybox-group="button" href="images/Referral_b.jpg"title="Referral Program"><img src="images/Referral_s.jpg" alt="refers"></a></div>
 
    </div>
 
 
 
 
 
 
  <div id="icons">
 
    <div id="Screenprint">
      <div id="CollapsiblePanel1" class="CollapsiblePanel">
        <div class="CollapsiblePanelTab" tabindex="0"><img src="images/screenprinttitle.png" alt="screenprinting"></div>
        <div class="CollapsiblePanelContent">• Lexan membranes and switches
          <br>• Metal plates
          <br>• Rigid materials(coroplast, styrene, etc.)
          <br>• Gloss, matte, clear, and static cling<br>
          &nbsp;&nbsp;vinyls
          <br>• Magnetics
          <br>• Lamination
          <br>• Various adhesives</div>
        </div>
 
      </div>
 
    <div id="LayoutDiv1">
      <div id="CollapsiblePanel2" class="CollapsiblePanel">
        <div class="CollapsiblePanelTab" tabindex="0"><img src="images/offset-title.png" alt="offset"></div>
        <div class="CollapsiblePanelContent">• Letterhead
          <br>• Envelopes
          <br>• Forms
          <br>• Booklets
          <br>• Programs
          <br>• Pocket folders
          <br>• Flyers
          <br>• Brochures
          <br>• Labels
          <br>• Post-it-notes
          <br>• Posters
          <br>• Cheques
          <br>• Draw tickets
          <br>• Numbering
          <br>• Computer forms
          <br>• Door knockers
          <br>• Greeting cards
          <br>•	Full color copying</div>
        </div>
 
      </div>
 
    <div id="largeformat">
      <div id="CollapsiblePanel3" class="CollapsiblePanel">
        <div class="CollapsiblePanelTab" tabindex="0"><img src="images/largefmt-title.png" alt="lgfmttitle"></div>
        <div class="CollapsiblePanelContent">• 3M and ROHS certified &nbsp;&nbsp;products
          <br>• Banners &nbsp;&nbsp;(wall,pole,rollup)
          <br>• Posters
          <br>• Coroplast signs
          <br>• Digital roll vinyl &nbsp;&nbsp;(matte,gloss)
          <br>• Styrene
          <br>• Crezon and aluminum
          <br>• Plexiglass
          <br>• Lamination
          <br>• PVC vinyl/films
          <br>• Window perf vinyl
          <br>• Cast/transit car wrap &nbsp;&nbsp;vinyls
          <br>• High resolution &nbsp;&nbsp;roll papers</div>
        </div>
      </div>
 
 
 
 
 
    <div id="vinyl">
      <div id="CollapsiblePanel4" class="CollapsiblePanel">
        <div class="CollapsiblePanelTab" tabindex="0"><img src="images/vinylttitle.png" alt="vinyl title"></div>
        <div class="CollapsiblePanelContent">• 3M and ROHS certifiedproducts
          <br>• Diamond, engineering and high<br>
          &nbsp;&nbsp;intensity
          grade vinyls
          <br>• Municipal signs
          <br>• Construction signs
          <br>• Traffic signs
          <br>• Trail signs
          <br>• Vehicle graphics andlettering
          <br>• 911 signs</div>
        </div>
      </div>
 
    <div id="featuresenvelope">
      <div id="screenprintfeatures">Sharp color reproduction,  PMS-accurate color matching and the ability to be applied to a large assortment of materials  make it the natural choice for industrial decals, pole banners and high volume projects.  We screen print on various weights of vinyl, lexan, and metal plates and have
        the perfect combination for your project.</div>
      <div id="offsetfeatures">And what is a cool vehicle wrap and vibrant banners without slick brochures and business cards to match. Envelopes, letterhead and forms all with matching logos and colors re-enforce your branding. And, getting it all under one roof saves you time and money.</div>
 
 
      <div id="largeformatfeatures">Horizontal/vertical hanging banners are made with top grade materials in a variety of weights for your project. Whether you are looking for a sports banner to hang in a warm gym or a sale banner to hang outside your store building in the hot summer sun and winter weather, there’s a material and an ink combination to suit your purposes.</div>
 
      <div id="vinylfeatures">World class materials and processes together with experienced installers ensures a quality project 	for you. A large portion of our Vinyl Department is involved with Traffic, Municipal, Road and Construction signage,adhereing  to strict industry specifications. Making our signs commonplace in the Maritimes</div>
      </div></div></div>
 
 
 
  <div id="footer">
 
    <div align="center">
  <p>
    <a href="https://www.facebook.com/codiac.printing"><img src="images/LikeUsOnFacebook_Icon.png" alt="facebook" width="220" height="47"></a>
 
    <a href="https://twitter.com/CodiacPrinting"><img src="images/follow-us-on-twitter.png" alt="twittericon"></a></p>
 
 
      <p><a href="privacy.html">Privacy Policy</a> | <a href="terms.html">Terms and Conditions</a></p>
 
  </div>
 
 
  </div>
  </div>
 
  </div>
  </div>
 
  <script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", {contentIsOpen:false});
</script>>
 
</div>
 
</body>
</html>
 <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/aw.png" title="Sad" alt="Sad" class="smiley-content" />(  <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/aw.png" title="Sad" alt="Sad" class="smiley-content" />( 

Donna the printer
Donna the printer's picture
Offline
newbie
Eastern Canada
Last seen: 6 years 8 weeks ago
Eastern Canada
Timezone: GMT-3
Joined: 2015-05-29
Posts: 3
Points: 4

Site won't center and nav buttons won't link

I design for print and not web. Ours is the only website I have.

I know there's probably a lot more issues with this, but if I could just get the thing centered and the buttons to link I could at least publish it while I work on it. The current site is at codiacprinting.com. It won't center either. I was trying to change my dropdown to drop onclick instead of hover and now the whole thing is a mess. I'm not experienced enough to see if I am missing a div or have an extra one somewhere or what. Please help. Boss wants this up asap.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The web is not print

Donna, you have basic problems stemming from the orthogonality of print and web design paradigms. Print is static, once rendered it is unchanging, while the web is dynamic; not just scripted stuff like having onclick event handlers. When you write for the web, you cannot know what your visitor's user agent (UA) is. It may be a pure text browser, a Braille reader, a screen reader, a hand-held device or a full service graphic browser.

If your page, much less the site, doesn't work without css or scripting, it is a failure. If it cannot re-flow to accommodate various display sizes, it is a failure.

If your markup does not reflect what the content is, if it does not reflect the structure of the content, then the UA, especially assistive technologies cannot properly render that content nor aid in navigating the page or site. It is a failure.

But it's not your fault. I know of no school anywhere, nor have I heard of any that teach web design. They say they do, but in reality, they teach a print based graphical design.

I suggest you throw what you have out and start over. Begin by writing your content as if you're writing a high school term paper; without regard to html markup or styles or scripting. Write as if you're working on a typewriter.

Only after you have the content (or a reasonable proxy), go back and add the tags that name the elements for what they are.

There are some things that are visitor unfriendly, e.g. the slider; it wastes space and slows the visitor from achieving his reason for being there in the first place.

Other things increase maintenance and debugging costs, e.g. the grid system. It is an attempt to emulate the print paradigm, but is patently ridiculous to anyone who really has a css clue. The non-semantic class tokens and their sheer number on so many elements prove a total lack of understanding of the cascade in cascading style sheets (CSS).

BTW, this

<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
is simply stupid. Don't take that harshly, it clearly indicates that the writer of the theme you're using doesn't know enough to be writing web pages.

If you're using Dreamweaver, toss it (I see some MM_ prefixed script stuff). It is crap on a stick. Use any one of a hundred or so free text editors. Preferably get one that tiles buffers rather than uses tabs to switch buffers. I use Emacs. I highly recommend it to anyone. It gets an undeserved bad rep as hard to use. It is not. It comes with a tutorial that will cover 90%+ of anything you'd do. Then learn only the stuff you use regularly. Don't let its capabilities scare you off. It has been in steady development for forty years and is extremely stable and extremely powerful.

Set up a new directory under your server document root. Use it to serve your work pages, so we can assist you in building your site without disturbing the existing stuff.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Document structure

Using floats with poorly structured content1 makes trying to center the content a piecemeal, Sisyphean task. It is an example of increased maintenance and debugging costs due to bad markup, styling and scripting. Tell the boss that the theme being used is too expensive in time and effort to be worthwhile for a commercial website. It should be relegated to Grandma blogging about her grandkids.

g

1. This is a result of fitting content to a theme. If you start with well structured content, this doesn't happen.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Donna the printer
Donna the printer's picture
Offline
newbie
Eastern Canada
Last seen: 6 years 8 weeks ago
Eastern Canada
Timezone: GMT-3
Joined: 2015-05-29
Posts: 3
Points: 4

Thank you for taking the time

Thank you for taking the time to explain all of that, I appreciate it. and I do understand that it sucks but if I could just get it centered and the buttons working it could just suck quietly while I educate myself for the next go round. Just getting the site to this point, I have got my education started (just enough to be dangerous apparently Big smile ). Learning the hard way through trial and error is rough. I cleared out some code where I was trying to make my referral photo enlarge onclick and some other stuff that didn't seem to make any change when I removed it. I had this centered at one point so it's got to be something...PS: I don't know what BBCode is.

<!doctype html>
 
<html class="">
<head>
<meta name="google-site-verification" content="LPpllYj4y9Arb9E-iCZnrnMGmAQp75OmQmzog7M_7Hk" />
<meta name="msvalidate.01" content="224AD7B92865A97507AC246D5A50692C" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Codiac Printing Inc. Home</title><link href="themes/8/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="themes/8/js-image-slider.js" type="text/javascript"></script>
    <link href="themes/8/tooltip.css" rel="stylesheet" type="text/css" />
    <script src="themes/8/tooltip.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
    <link href="generic.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        imageSlider.thumbnailPreview(function (thumbIndex) { return "<img src='images/thumb" + (thumbIndex + 1) + ".jpg' style='width:70px;height:44px;' />"; });
    </script>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.css" rel="stylesheet" type="text/css">
 
<script src="respond.min.js"></script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_popupMsg(msg) { //v1.0
  alert(msg);
}
</script>
 
<style>
 
div#topbar{
	height: 50px;
	width: 100%;
 
}
div#topbar > #logo{
	float:left;
}
div#topbar > #sections_btn_holder{
	float:left;
	width:176px;
	height:46px;
	padding-top:0px;
	padding-bottom:20px;
}
div#topbar > #sections_btn_holder > #button{	
    background:#333;
	color: #FFF;
	height: 50px;
	width: 176px;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
}
div#topbar > #sections_panel{
	position:absolute;
	height:0px;
	width:176px;
	background:#;
	top:427px;
	left:687px;
	border-radius:0px 0px 8px 8px;
	overflow:hidden;
	z-index:1000;
 
}
div#topbar > #sections_panel > div{
	background:#;
	padding:0px;
	height:0px;
	width:176px;
	margin:px;
 
 
}
div#topbar > #sections_btn_holder {
	-webkit-transition: all 0s ease 0s;
	-moz-transition: all 0s ease 0s;
	-ms-transition: all 0s ease 0s;
	-o-transition: all 0s ease 0s;
	transition: all 0s ease 0s;
}
div#topbar > #sections_btn_holder:hover {
	font-size: 102%;
 
}
 
</style>
 
 
 
 
 
 
 
 
<script>
function toggleNavPanel(x){
    var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="175px";
    if(panel.style.height == maxH){
        panel.style.height = "0px";
        navarrow.innerHTML = "&#9662;";
    } else {
        panel.style.height = maxH;
        navarrow.innerHTML = "&#9652;";
    }
}
</script>
 
 
 
 
</head>
 
 
<body>
 
<div class="gridContainer clearfix">
 
 
    <div id="topblack"><img src="images/topblack.jpg" alt="topblack"></div>
 
    <div id="topmast"><div id="sliderFrame">
      <div id="slider">
        <a href="http://www.menucool.com/javascript-image-slider" target="_blank">
          <img src="images/image-slider-1.jpg" alt="Signs, Decals and more" />
          </a>
        <img src="images/image-slider-2.jpg" alt="Custom Banners and Signage" />
        <img src="images/image-slider-3.jpg" alt="Construction/Municipal Signage" />
        <img src="images/image-slider-4.jpg" alt="Vehicle Wraps" />
        <img src="images/image-slider-5.jpg" alt="All Real Estate Companies Welcome" />
        </div>
      <div style="display: none;">
        <div id="cap1">
          Municipal Signage
          </div>
        <div id="cap2">
          <em>Welcome</em> to Codiac Printing 
          </div>
        </div>
 
      <div id="blackstrip"><img src="images/redblackbar.jpg" alt="redblackbar"></div>
 
 
      <!--THIS IS THE DIV THE MENUBAR IS IN-->    
      <div id="topbar">
 
 
        <!--THESE ARE THE ROOT BUTTONS--> 
 
        <div id="sections_btn_holder">
          <a href="index.html">
          <button onclick=>HOME </button>
        </a>  </div>
 
        <div id="sections_btn_holder">
          <a href="about.html">
          <button onclick=>ABOUT US </button>
        </a>  </div>
 
 
 
 
        <div id="sections_btn_holder">
          <button onclick="toggleNavPanel('sections_panel')">SERVICES <span id="navarrow">&#9662;</span></button>
        </div>
 
 
        <div id="sections_btn_holder">
          <button onclick=>CUSTOM GALLERY </button>
        </div>
 
 
        <div id="sections_btn_holder">
          <button onclick=>LOCATION</button>
        </div>
 
 
        <div id="sections_btn_holder">
          <button onclick=>CONTACT US</button>
        </div>
 
        <div id="sections_btn_holder">
          <button onclick=>PDF CATALOGUE</button>
        </div>
 
 
 
 
 
 
        <!--THIS IS THE DROP DOWN PANEL AND THE BUTTONS IN IT--> 
        <div id="sections_panel">
          <div>
  <div id="sections_btn_holder">
    <button onclick="toggleNavPanel('sections_panel')">GRAPHIC DESIGN</button>
    </div>
 
            <div>
  <div id="sections_btn_holder">
    <button onclick="toggleNavPanel('sections_panel')">VEHICLE WRAPS</button>
    </div> 
 
 
  <div id="sections_btn_holder">
    <button onclick="toggleNavPanel('sections_panel')">INSTALLATION</button>
    </div>
                <!--MAKE SURE THERE'S 3 END DIVS UNDER THIS--> 
  </div>
  </div>
  </div>
 
        <!--END OF THE MENUBAR-->     
 
 
 
 
        <div id="articles">
 
          <div id="content">
 
            <div id="welcometext"><h2>Welcome</h2>
              <p>Here at Codiac we have a passion for print.  In fact, we house Screen Printing, Large Format Digital,Offset, and Vinyl Cut Lettering.  We just can't get enough of Stationary, Banners, Vehicle Wrapping and Sign-making. For example, one of our specialties is industrial decals. Whether you manufacture furnaces, refrigerators, gaming devices or electrical equipment, our experience in producing decals to industry standards/specs is extensive. Here at Codiac, we know your workflow can depend on something as small as a decal and we go the extra mile to ensure seamless service.</p>
              <p>We have a full selection of traffic/construction signs. Check out our <a href="codiacatalogue_PDF.pdf"> PDF Catalogue</a> and browse our extensive selection of regulation signage carefully made to industry/government specs, and give us a call or a click.</p>
            If all that isn't enough, we offer Graphic Design services for your custom projects, logo development, and branding and then follow through with manufacturing and installation.<br>Want your vehicle to match your stationary? We can do that too.</div>
 
 
 
 
  <div id="referral">      
  <div id="gallery1">
  <p>
    <a class="fancybox-buttons"data-fancybox-group="button" href="images/Referral_b.jpg"title="Referral Program"><img src="images/Referral_s.jpg" alt="refers"></a></div>
 
    </div>
 
 
 
 
 
  <div id="icons">
 
    <div id="Screenprint">
      <div id="CollapsiblePanel1" class="CollapsiblePanel">
        <div class="CollapsiblePanelTab" tabindex="0"><img src="images/screenprinttitle.png" alt="screenprinting"></div>
        <div class="CollapsiblePanelContent">• Lexan membranes and switches
          <br>• Metal plates
          <br>• Rigid materials(coroplast, styrene, etc.)
          <br>• Gloss, matte, clear, and static cling<br>
          &nbsp;&nbsp;vinyls
          <br>• Magnetics
          <br>• Lamination
          <br>• Various adhesives</div>
        </div>
 
      </div>
 
    <div id="LayoutDiv1">
      <div id="CollapsiblePanel2" class="CollapsiblePanel">
        <div class="CollapsiblePanelTab" tabindex="0"><img src="images/offset-title.png" alt="offset"></div>
        <div class="CollapsiblePanelContent">• Letterhead
          <br>• Envelopes
          <br>• Forms
          <br>• Booklets
          <br>• Programs
          <br>• Pocket folders
          <br>• Flyers
          <br>• Brochures
          <br>• Labels
          <br>• Post-it-notes
          <br>• Posters
          <br>• Cheques
          <br>• Draw tickets
          <br>• Numbering
          <br>• Computer forms
          <br>• Door knockers
          <br>• Greeting cards
          <br>•	Full color copying</div>
        </div>
 
      </div>
 
    <div id="largeformat">
      <div id="CollapsiblePanel3" class="CollapsiblePanel">
        <div class="CollapsiblePanelTab" tabindex="0"><img src="images/largefmt-title.png" alt="lgfmttitle"></div>
        <div class="CollapsiblePanelContent">• 3M and ROHS certified &nbsp;&nbsp;products
          <br>• Banners &nbsp;&nbsp;(wall,pole,rollup)
          <br>• Posters
          <br>• Coroplast signs
          <br>• Digital roll vinyl &nbsp;&nbsp;(matte,gloss)
          <br>• Styrene
          <br>• Crezon and aluminum
          <br>• Plexiglass
          <br>• Lamination
          <br>• PVC vinyl/films
          <br>• Window perf vinyl
          <br>• Cast/transit car wrap &nbsp;&nbsp;vinyls
          <br>• High resolution &nbsp;&nbsp;roll papers</div>
        </div>
      </div>
 
 
 
 
 
    <div id="vinyl">
      <div id="CollapsiblePanel4" class="CollapsiblePanel">
        <div class="CollapsiblePanelTab" tabindex="0"><img src="images/vinylttitle.png" alt="vinyl title"></div>
        <div class="CollapsiblePanelContent">• 3M and ROHS certifiedproducts
          <br>• Diamond, engineering and high<br>
          &nbsp;&nbsp;intensity
          grade vinyls
          <br>• Municipal signs
          <br>• Construction signs
          <br>• Traffic signs
          <br>• Trail signs
          <br>• Vehicle graphics andlettering
          <br>• 911 signs</div>
        </div>
      </div>
 
    <div id="featuresenvelope">
      <div id="screenprintfeatures">Sharp color reproduction,  PMS-accurate color matching and the ability to be applied to a large assortment of materials  make it the natural choice for industrial decals, pole banners and high volume projects.  We screen print on various weights of vinyl, lexan, and metal plates and have
        the perfect combination for your project.</div>
      <div id="offsetfeatures">And what is a cool vehicle wrap and vibrant banners without slick brochures and business cards to match. Envelopes, letterhead and forms all with matching logos and colors re-enforce your branding. And, getting it all under one roof saves you time and money.</div>
 
 
      <div id="largeformatfeatures">Horizontal/vertical hanging banners are made with top grade materials in a variety of weights for your project. Whether you are looking for a sports banner to hang in a warm gym or a sale banner to hang outside your store building in the hot summer sun and winter weather, there’s a material and an ink combination to suit your purposes.</div>
 
      <div id="vinylfeatures">World class materials and processes together with experienced installers ensures a quality project 	for you. A large portion of our Vinyl Department is involved with Traffic, Municipal, Road and Construction signage,adhereing  to strict industry specifications. Making our signs commonplace in the Maritimes</div>
 
 
 
  <div id="footer">
 
    <div align="center">
  <p>
    <a href="https://www.facebook.com/codiac.printing"><img src="images/LikeUsOnFacebook_Icon.png" alt="facebook" width="220" height="47"></a>
 
    <a href="https://twitter.com/CodiacPrinting"><img src="images/follow-us-on-twitter.png" alt="twittericon"></a></p>
 
 
      <p><a href="privacy.html">Privacy Policy</a> | <a href="terms.html">Terms and Conditions</a></p>
 
  </div>
 
 
 
 
  <script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", {contentIsOpen:false});
</script>
 
</div>
 
</body>
</html>
</code