Using a single image containing several buttons/links?
I have an image that I'd like to use as the main navigational device for a new site I'm designing, but I have no idea which is the easiest way to do this? The thing is, i want the different parts of the image (as the user hovers/clicks, etc) to animate and thus load new movie clips containing the content for that element... (the main image will minimise into the corner to make room). What's the best program to use? I have a feeling it's fireworks... in any case, how do I go about implementing mutliple buttons onto one image, and then dealing with the imagery in each button area individually?
Hope someone can help!
Si
xx
Ned, I think I see what you mean, but my worry is that I have to make sure each of the buttons (you said movieclips?? can movieclips function as buttons or do they still have to be button symbols? surely you mean a movieclip within a button symbol..?) are aligned to the original main image properly, which takes a lot of time. Especially if I want the images to animate and align perfectly with the surrounded static image...
And Jim, it's not quite what i was thinking of, what i'm trying to do is this: I have a large picture of a pigeon pecking at a tambourine (don't ask!) and what i want is for different parts of the image (say, the head, a wing, the metal bits on the tambourine) to move when hovered/clicked on, and that will serve as links to areas of the site. therefore, only part of the whole image will appear to change. My biggest concern is dealing with alignment issues, between each of the buttons and the surroundinbg static image.
Perhaps another way to think of it is to lay a series of transparent buttons over different areas of the image, that will allow me to pick up the sections of the image that falls within those button boundaries and be able to edit that mini-image/animate it. I don't think that's possible in flash... isn't there something in fireworks that allows you to convert a flat image into clickable areas...? (slicing? is that what is it is?) maybe photoshop/illustrator can do it too...
Thanks for your help tho, guys
Similar Messages
-
Using a background image for the buttons in spry menu
Hi All,
Going nuts here.
I'm using the vertical spry menu widget w DW CS3 and trying
to alter the css style sheet, so that I can use a li class for each
of the 14 links on this page, with an upstate and a hover state
only. (the focus, and hover while down will be the same as the
others, to keep it simple and not too distracting)
The page is here that I will be replacing the entire
background image in sidebar1 and sidebar2 with a custom spry menu
with the 14 li classes for 2 seperate menus:
http://audibleimagesav.com/blank_doc.html
Has anyone used a background image in place of just using
bkgrd colors and borders for the spry menu ?
I am aware of the attributes that the help docs suggest that
need to be altered as listed here :
http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0BB04E11-1BE3-4a67-BC94-BE7DA 93A0159.html
I have been working on just an experimental page, that is now
hacked up, however if you want to see that it is here with only the
first list item coded:
http://audibleimagesav.com/site%20theme%20ideas/sprymenu_exp.html
The spry css menu widget for that page is here:
http://audibleimagesav.com/SpryAssets/SpryMenuBarVertical.css
So in short, has anyone done a bkgrd image for the main menu
(not submenu) in a spry widget?
Thanks in advance.
Art
Art Hansen
Web Design & Marketing
http://www.innova-techsolutions.com
321.750.3852 - Cocoa Beach, Florida, USAhttp://meyerweb.com/eric/css/edge/popups/demo2.html
Maybe -
Can I save a single image as several file names in one go.
I know this sounds like an unsual question, but I want to take an image (say a logo) and save that image multiple times (could be 1000 times), but each time as a different file name. ( I have a commercial reason why I dont want that image to be named the same for each entry to a database.)
I already have the database of filenames, but do not want to "save as" 1000 times in terms of my time.
So is there a way to take an image and then "save as" then apply up to 1000 file names, so they are all saved in one go.
I do know these images will all look the same.
thanksHi,
No, this is not possible in PSE.
Thanks/ Tarun -
Accordion using different background images on panels
Hi,
I'm creating an accordion in Dreamweaver cs3 which has seven
panels. I would like to use a different background image for each
panel. I have only managed to use a single image, that ends up on
all the panels. Any ideas on this?It worked!!! a BIG hug to U..
quote:
Originally posted by:
Newsgroup User
I haven't done this, but I would think it would be pretty
easy by copying
the .AccordionPanelTab style code and pasting it over and
over and then
changing the class names to .AccordionPanelTab1,
.AccordionPanelTab2, etc.
Of course, you would also change the div references in your
pages.
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development
"Kimson76" <[email protected]> wrote in
message
news:fkudd1$1hp$[email protected]..
> Hi,
>
> I'm creating an accordion in Dreamweaver cs3 which has
seven panels. I
> would
> like to use a different background image for each panel.
I have only
> managed to
> use a single image, that ends up on all the panels. Any
ideas on this?
>
> .AccordionPanelTab {
> height: 30px;
> background-image:
>
url(file:///Macintosh%20HD/Users/kimson.ekman/Desktop/web%20development/challeng
> er_purple/images/7.jpg);
> background-repeat: repeat-x;
> background-color: #122541;
> border-top: solid 0px #1C3B5A;
> border-bottom: solid 0px #1C3B5A;
> margin: 0px;
> padding: 0px;
> cursor: pointer;
> -moz-user-select: none;
> -khtml-user-select: none;
> -
Is there a way to use a single bitmapdata for multiple images with GPU mode?
With GPU mode is there a way to bring in a single 1024 X 1024 png containing all my sprites and then slice it up into multiple display objects all refering to the original BitmapData?
I have an app that runs in GPU mode - but I want to optimize the image management.
I am making three sets of images in the orders of 2048, 1024 and 512 px.
The app is a book app and each page has around 4 to 5 bitmaps. I would like to bring in one single image and slice it up - but just refer to the original bitMapData in the memory.
Is there a way to do this - e.g. using a masking technique?
I think it is possible using textures in direct mode - but that is not an ideal solution for me - as the app is already in the appstore - and I would have to entirely refactor it for stage3D. Also I use very large bitmaps which have some masking animations applied to them dynamically: http://youtu.be/Nm0T1jLCTz8?t=42s
Currently, I use jpgs and a jpeg mask file for each image which I composite to get the alpha - then I scale them.
PNGs may be better for GPU - (no compositing) but they make for a huge app file.
Now I am converting it to use diffent sized assets depending on the device, then scaling them if need, and then compositing them for apha. What I was hoping was to find a technique that could reduce the number of bitmapdata objects used and reduce the operations in general.
Any thoughts on optimizing would be appreciated. I can add my code here if it helps.Tell Apple:
http://www.apple.com/feedback/iphone.html
We're all users here, just like you. -
How to link an image to a button in Flash Builder 4
I am new to Flash Builder 4 and have trouble to link an image to a button in Flash Builder 4.
For example, I want an image of a round green button to replace the default retangle button in Flash Builder 4.
Can anyone help me up?
ThanksYou could also use the mx:Image control and just add a click event handler:
function(){return A.apply(null,[this].concat($A(arguments)))}
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="500" height="400">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
protected function image1_clickHandler(evt:MouseEvent):void {
Alert.show("You clicked the image");
]]>
</fx:Script>
<mx:Image source="http://helpexamples.com/flash/images/image1.jpg"
click="image1_clickHandler(event);" />
</s:Application> -
ive got the iphone 5s 4 weeks ago.today the screen turned blue and the phone turned off . i tried several times to turn it on but i doesnt work even by using the power and the home button. what should i do ?
Hi vanessato,
Thanks for visiting Apple Support Communities.
I recommend these troubleshooting steps if your iPhone does not turn on.
iPhone: Hardware troubleshooting
http://support.apple.com/kb/TS2802
Will not turn on, will not turn on unless connected to power, or unexpected power off
Verify that the Sleep/Wake button functions. If it does not function, inspect it for signs of damage. If the button is damaged or is not functioning when pressed, seek service.
Check if a Liquid Contact Indicator (LCI) is activated or there are signs of corrosion. Learn about LCIs and corrosion.
Connect the iPhone to the iPhone's USB power adapter and let it charge for at least ten minutes.
After at least 30 minutes, if:
The home screen appears: The iPhone should be working. Update to the latest version of iOS if necessary. Continue charging it until it is completely charged and you see this battery icon in the upper-right corner of the screen . Then unplug the phone from power. If it immediately turns off, seek service.
The low-battery image appears, even after the phone has charged for at least 20 minutes: See "iPhone displays the low-battery image and is unresponsive" symptom in this article.
Something other than the Home screen or Low Battery image appears, continue with this article for further troubleshooting steps.
If the iPhone did not turn on, reset it while connected to the iPhone USB power adapter.
If the display turns on, go to step 4.
If the display remains black, go to next step.
Connect the iPhone to a computer and open iTunes. If iTunes recognizes the iPhone and indicates that it is in recovery mode, attempt to restore the iPhone. If the iPhone doesn't appear in iTunes or if you have difficulties in restoring the iPhone, see this article for further assistance.
If restoring the iPhone resolved the issue, go to step 4. If restoring the iPhone did not solve the issue, seek service.
Best,
Jeremy -
The option to crop an image is always grayed out or unavailable - both for single images and when I want to crop scanned images into individual pictures. Any idea what I may be doing wrong?
Did you try using the crop tool to see if it is working? See the tool I am talking about.
I suspect you are in Guided Mode rather than in Quick Mode or Expert Mode. -
Using a downloaded image as the icon style for a Button
Hello
I have a problem and after a lot of investigation I have reached to no conclusion.
When setting the icon to a Button, a Class of an image is needed. This can be done very simply by embeding an image. But what I would like to do is use an image known only at runtime.
More exactly I can not download an image from an external source, obtain it bitmapData or something else, convert it and assign it as the icon style for a Button.
So my problem is that for the Flex components that need an image, a Class needs to be assigned, and I can not use an external image to download it, to convert it in some way and assign it.
Does anybody have any sugestion? Is it possible?
My purpose is to make some utility that just downloads the images and after the downloading has been completed, to notify the "client" it should take the "created Class" to use it as a style.
Thank you in advance for your time,
Claude Bur.A quick google search turned up this solution:
http://blog.benstucki.net/?p=42
- Jason -
How do I create a single image using PSE12 from multiple originals in which the originals are still separate (i.e. side by side or arranged in a square)? I could do this in PSE2, but can't find how to get PSE12 to do it.
Grecophile55In PSE2 there was a single photo-merge. I browsed all my images and I could then click and drag each to its new position before saving. There doesn’t seem to be a similar facility in PSE12.
-
Is it possible to use Aperture to make a new jpg from two existing ones? I'd essentially like to create a photo collage (without using existing templates) that I can then print as a single image, rather than in a book. Any advice will be most welcome! Thanks.
https://discussions.apple.com/message/15678716#15678716
(Added)
The main point is that Aperture is used to make digital negatives as good as they can be (for the uses you define), but it does not ADD date to your digital negatives, nor does it produce NEW combination files. For those tasks you need a Graphics program.
Message was edited by: Kirby Krieger -
How do images embeded in InDesign link when using Creative Cloud on more than two desktops?
How do images embeded in InDesign link when using Creative Cloud on more than two desktops?
If I am understanding your question correctly, you shouldn't have to worry about embedded images in InDesign. Once embedded, the image is stored within the file.
If you are wondering about linked images... InDesign will follow the path on your computer and, if it does not find the image, you will recieve a notification. Edit: To prevent this, I would suggest packaging your file using File > Package... This will create a folder with all of your fonts and linked graphics so that you need not worry about broken links. I just remembered that you cannot upload folders directly to Creative Cloud so a packaged folder wouldn't be very helpful unless you wanted to upload each file manually.
The best solution I see right now is to either embed the graphics in the document, or upload the images with your document to relink.
I hope this helped,
Michael -
The old Firefox used to have a small arrow button next to the forward/back buttons. When clicked it would show the entire browsing history making it easy to jump back several pages. Now it seems to be gone. I have only used the new version for a day and already I am tired of having to click back one page at a time. Was the quick navigate button moved or was it taken away?
This feature is still available, simply right click on the back button, and select which page you would like to go back to, just as before.
-
REVIEW PROCESS USING WORKFLOW:CANNOT FIND 'SUBMIT FOR REVIEW' LINK/BUTTON
We installed Oracle Workflow in the Files Storage database and completed all
the required steps for integrating Workflow with Files sucessfully. This
morning, I started trying to test the functionality of review process, but
could not locate the 'Submit for Review' link/button any where. All other
(workflow related) links are visible. For e.g. I can see 'workflow' link on top
right hand corner of the page. Also, I see 'Review Process' links that shows no
review processes as I have not created any.
The documentation is not clear as how to create the review process. Could any one, please let
me know how to find this 'Submit for Review' button/link?
Thanks
Hari Abburuthe submit for review process is available for workspaces - create one, assign members, upload a document.
-
Web links, email links, button links
I have several different links through out my site. I want them to look differently but it keeps inheriting the styles of my button link. How can I make them appear different. For instance, I don't want my email link to have a background behind it when you hoover. I just want it to change colors. What am I doing wrong. Can anyone help?
HTML
<p>According to the American Society of Civil Engineers (ASCE) the nations bridges are getting a little better – last graded as a “C” (2009) in 2013 they are graded as a “C+”. The ASCE not only has the National Report Card on infrastructure available <a href="http://www.infrastructurereportcard.org/" title="ASCE National Report Card" target="new" class="weblink">(see the 2013 report Card here),</a> they have State and Local reports available as well. <a href="http://www.asce.org/Infrastructure/Report-Card/State-and-Local-Report-Cards/" title="ASCE’s State and Local Report Cards." target="new" class="weblink">ASCE’s State and Local Report Cards.</a></p>
<p>Read the entire Case Study by clicking on the RESOURCES tab and selecting Pavemend Case Studies. Send us a photo and a brief report of your Pavemend repair and get a Pavemend Cap by “Mossy Oak.” <strong><a href="mailto:[email protected]" class="emaillink">[email protected]</a></strong>
</p>
CSS
a.weblink:link, a.weblink:visited, a.weblink:active {
/* This will handle all the states of the link other than when it is hovered over */
/* put your style rules in this area */
color: #0033CC; /* or any other color */
text-decoration: underline;
a.weblink:hover {
/* This makes the link Text Hover Color controlable */
color:#999; /* or whatever color you want that is different from the color that you set for the other statuses */
a.emaillink:link, a.emaillink:visited, a.emaillink:active {
/* This will handle all the states of the link other than when it is hovered over */
/* put your style rules in this area */
color: #0033CC; /* or any other color */
text-decoration: underline;
background-color: none;
a.emaillink:hover {
/* This makes the link Text Hover Color controlable */
color: #999; /* or whatever color you want that is different from the color that you set for the other statuses */
background-color: none;
a:link {
color: #FFFFFF;
text-decoration: none;
font-size: 100%;
padding: 5px;
a:visited {
color: #FFFFFF;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
background-color: #03C;
color: #FFF;
height: 120%;
alignment-baseline: text-after-edge;
/* [disabled]font-size: smaller; */
text-align: left;
background-size: 0%;Not sure what I'm doing wrong. Still not getting it right. Now my footer is wrong also:
CSS
@charset "UTF-8";
/* BEGIN HORIZONTAL DROP-MENU */
.clear-fix:before,
.clear-fix:after {
content: " ";
display: table;
.clear-fix:after {
clear: both;
.clear-fix {
*zoom: 1;
.sidebarleft img.MgTp {
margin-top: 185px;
#menu {
clear: none;
position: static;
width: 100%;
padding-top: px;
padding-right: px;
padding-left: px;
padding-bottom: px;
background-image: url(_images/topnavpanel.png);
color: #FFFFFF;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: px;
background-repeat: no-repeat;
float: none;
text-align: center;
#menu ul {
margin: 0;
padding: 0;
text-align: left;
#menu li {
list-style: none;
float: left;
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #000000;
/**top level menu**/
#menu li a {
display: inline-block;
text-decoration: none;
/* adjust width as needed or use auto */
width: 13em;
padding: 8px;
font-weight: bold;
line-height: 12px;
color: #000;
border-top-style: none;
font-size: 90%;
margin-bottom: 0;
margin-left: 2%;
margin-right: 2%;
margin-top: 0;
border-bottom-style: none;
text-align: center;
/**top menu style on mouse over**/
#menu li:hover > a {
color: #FFF;
width: 13em;
text-align: center;
/**sub-menu**/
#menu li ul {
display: none;
text-align: center;
padding: 0;
margin-bottom: 0;
margin-left: 40px;
margin-right: 0;
margin-top: 0;
border-bottom-style: none;
/**sub-menu, help for older IE**/
#menu li:hover ul, #menu li.hover ul {
display: block;
position: absolute;
z-index: 1000;
padding: 0;
text-align: left;
#menu li:hover li, #menu li.hover li {
float: none;
background-color: #E1D5BB;
text-align: left;
/**drop-menu style**/
#menu li:hover li a, nav li.hover li a {
width: 14em; /* adjust width as needed or use auto */
margin-top: 0;
/**drop-menu style on mouse over**/
#menu li li a:hover {
color: #FFF;
background-color: #03C;
position: relative;
text-align: left;
/* Clear floated elements at the end*/
#menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
/**END HORIZONTAL DROP-MENUS STYLES**/
#pavemendlogo {
background-image: url(_images/PAVEMEND_LOGO_WHITE.png);
background-repeat: no-repeat;
height: 78px;
width: 196px;
margin-left: 23px;
margin-top: -130px;
/**END HORIZONTAL DROP-MENUS STYLES**/
#pavemendlogoresourcepage {
background-image: url(_images/PAVEMEND_LOGO_WHITE.png);
background-repeat: no-repeat;
height: 78px;
width: 196px;
margin-left: 23px;
margin-top: -160px;
/**END HORIZONTAL DROP-MENUS STYLES**/
#slqlogo {
background-image: url(_images/PMND_SLQ_logo_White.png);
background-repeat: no-repeat;
height: 92px;
width: 225px;
margin-left: 23px;
margin-top: -170px;
margin-bottom: 35px;
#fifteenlogo {
background-image: url(_images/PMND15Whitesingle.png);
background-repeat: no-repeat;
height: 98px;
width: 225px;
margin-left: 23px;
margin-top: -170px;
margin-bottom: 29px;
z-index: 1000;
#trlogo {
background-image: url(_images/PMND_TRlogoWhite.png);
background-repeat: no-repeat;
height: 115px;
width: 225px;
margin-left: 23px;
margin-top: -185px;
margin-bottom: 26px;
z-index: 1000;
#vrlogo {
background-image: url(_images/PMND_VRlogoWhite.png);
background-repeat: no-repeat;
height: 134px;
width: 225px;
margin-left: 23px;
margin-top: -195px;
margin-bottom: 18px;
z-index: 1000;
#dotlinelogo {
background-image: url(_images/Dotline_White-Red.png);
background-repeat: no-repeat;
height: 91px;
width: 225px;
margin-left: 23px;
margin-top: -170px;
margin-bottom: 35px;
#sllogo {
background-image: url(_images/SLwhitelogo.png);
background-repeat: no-repeat;
height: 92px;
width: 225px;
margin-left: 23px;
margin-top: -170px;
margin-bottom: 35px;
#ialogo {
background-image: url(_images/InstantAsphalttopLogo.png);
background-repeat: no-repeat;
height: 102px;
width: 225px;
margin-left: 23px;
margin-top: -170px;
margin-bottom: 25px;
#kemroklogo {
background-image: url(_images/KEMROK_LOGOWhiteType.png);
background-repeat: no-repeat;
height: 52px;
width: 225px;
margin-left: 23px;
margin-top: -150px;
margin-bottom: 53px;
#kemrokvrlogo {
background-image: url(_images/KEMROK_LOGO_VR.png);
background-repeat: no-repeat;
height: 46px;
width: 230px;
margin-left: 23px;
margin-top: -150px;
margin-bottom: 59px;
#fireroklogo {
background-image: url(_images/Firerok_logo_White.png);
background-repeat: no-repeat;
height: 81px;
width: 225px;
margin-left: 23px;
margin-top: -155px;
margin-bottom: 30px;
#awlogo {
background-image: url(_images/PMNDAWlogowhite1.png);
background-repeat: no-repeat;
height: 70px;
width: 225px;
margin-left: 23px;
margin-top: -155px;
margin-bottom: 40px;
#aslogo {
background-image: url(_images/PMNDASlogowhite1.png);
background-repeat: no-repeat;
height: 64px;
width: 225px;
margin-left: 23px;
margin-top: -155px;
margin-bottom: 47px;
#prochoicetype {
background-image: url(_images/pro_choice_concrete_type.png);
background-repeat: no-repeat;
height: 27px;
width: 550px;
margin-left: 220px;
margin-top: -40px;
bottom: px;
margin-bottom: 66px;
#resourcestype {
background-image: url(_images/ResourcesType.png);
background-repeat: no-repeat;
height: 25px;
width: 148px;
margin-left: 220px;
margin-top: -60px;
bottom: px;
margin-bottom: 73px;
#Contacttype {
background-image: url(_images/PurchaseType.png);
background-repeat: no-repeat;
height: 25px;
width: 151px;
margin-left: 220px;
margin-top: -60px;
bottom: px;
margin-bottom: 73px;
#Contesttype {
background-image: url(_images/ContestType.png);
background-repeat: no-repeat;
height: 54px;
width: 478px;
margin-left: 220px;
margin-top: -75px;
bottom: px;
margin-bottom: 59px;
#sustainabilitytype {
background-image: url(_images/SustainabilityType.png);
background-repeat: no-repeat;
height: 25px;
width: 179px;
margin-left: 220px;
margin-top: -60px;
bottom: px;
margin-bottom: 73px;
#techsupporttype {
background-image: url(_images/TechSupportType.png);
background-repeat: no-repeat;
height: 25px;
width: 761px;
margin-left: 220px;
margin-top: -60px;
bottom: px;
margin-bottom: 73px;
body {
background-color: #666;
color: #000;
text-align: center;
background-image: url(_images/roadblurred.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
padding-top: 60px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
.formtext {
font-size: 100%;
text-align: left;
.bodyfootnote {
font-size: 70%;
margin-left: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
.red {
font-size: 70%;
color: #F00;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
text-transform: capitalize;
text-decoration: none;
list-style: none;
text-align: left;
h1, h2, h3, h4, h5, h6, p {
/* [disabled]margin-top: 0; */ /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 23px;
line-height: 25px;
h4 {
padding-left: 0px;
color: #F40633;
line-height: 0px;
font-size: 100%;
h5 {
padding-left: 23px;
color: #F40633;
line-height: 0px;
font-size: 120%;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
margin-left: 0px;
position: ;
top: 155px;
-webkit-box-shadow: 0px 0px 0px 0px;
box-shadow: 0px 0px 0px 0px;
left: 9px;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #FFFFFF;
text-decoration: none;
font-size: 100%;
padding: 5px;
a:visited {
color: #FFFFFF;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
background-color: #03C;
color: #FFF;
height: 120%;
alignment-baseline: text-after-edge;
/* [disabled]font-size: smaller; */
text-align: left;
background-size: 0%;
a.weblink:link, a.weblink:visited, a.weblink:active {
/* This will handle all the states of the link other than when it is hovered over */
/* put your style rules in this area */
background-color: none;
color: #0033CC; /* or any other color */
text-decoration: underline;
a.weblink:hover {
/* This makes the link Text Hover Color controlable */
background-color: none;
color:#999; /* or whatever color you want that is different from the color that you set for the other statuses */
a.emaillink:link, a.emaillink:visited, a.emaillink:active {
/* This will handle all the states of the link other than when it is hovered over */
/* put your style rules in this area */
background-color: none;
color: #0033CC; /* or any other color */
text-decoration: underline;
a.emaillink:hover {
/* This makes the link Text Hover Color controlable */
background-color: none;
color: #999; /* or whatever color you want that is different from the color that you set for the other statuses */
/* ~~this fixed width container surrounds the other divs~~ */
.container {
width: 960px;
background-color: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
background-image: url(_images/Bridge4WebScreened.png);
background-repeat: no-repeat;
margin-bottom: 0;
margin-left: 0px;
margin-right: 0px;
margin-top: 0;
text-align: left;
position: static;
.containerTS {
width: 960px;
background-color: #FFF;
margin: 0 0px; /* the auto value on the sides, coupled with the width, centers the layout */
background-image: url(_images/US_Map.png);
background-repeat: no-repeat;
text-align: left;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #000;
background-image: url(_images/BannerBlured960.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
background-size: contain;
.headerSL {
background-color: #000;
background-image: url(_images/PMND_SL_Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerPurchase {
background-color: #000;
background-image: url(_images/contact_us_pavemend_header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerSLQ {
background-color: #000;
background-image: url(_images/PMND_SLQ_Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerDOTline {
background-color: #000;
background-image: url(_images/DOTLINEHeader.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.header15 {
background-color: #000;
background-image: url(_images/PMND15Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerTR {
background-color: #000;
background-image: url(_images/PMND_TRHeader.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerAW {
background-color: #000;
background-image: url(_images/anti_wear_pavemend_header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerAS {
background-color: #000;
background-image: url(_images/anti_scale_pavemend_header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerVR {
background-color: #000;
background-image: url(_images/PMND_VRHeader.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerIA {
background-color: #000;
background-image: url(_images/Instant_asphalt_packaged_Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerKemrok {
background-color: #000;
background-image: url(_images/KEMROKpackagedHeader.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerKemrokVR {
background-color: #000;
background-image: url(_images/KEMROK_VRpackagedHeader.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerFirerok {
background-color: #000;
background-image: url(_images/FIREROKpackagedHeader.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerAntiWear {
background-color: #000;
background-image: url(_images/anti_wear_pavemend_header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerTechSupport {
background-color: #000;
background-image: url(_images/FEBlurred.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerResources {
background-color: #000;
background-image: url(_images/ResourceBanner.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerContact {
background-color: #000;
background-image: url(_images/contact_us_pavemend_header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerSustainability {
background-color: #000;
background-image: url(_images/Sustainability_topheader.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.header h1 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20pt;
font-style: normal;
font-weight: bolder;
color: #FFF;
padding-top: 150px;
padding-left: 30px;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: right;
width: 180px;
margin-left: 0px;
margin-right: 30px;
clear: none;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
font-style: italic;
background-image: url(_images/Testimonialb.gif);
background-repeat: no-repeat;
height: 456px;
text-decoration: none;
z-index: 1000;
.sidebarPurchase {
float: right;
width: 210px;
margin-left: 0px;
margin-right: 0px;
clear: none;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
font-style: italic;
background-image: url(_images/purchaseSB.png);
background-repeat: no-repeat;
height: 460px;
margin-top: 0px;
text-decoration: none;
background-color: #217CC0;
background-position: 10px 10px;
.sidebarPurchasePhoto {
width: 190px;
margin-left: 10px;
margin-right: 20px;
clear: none;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
font-style: italic;
background-image: url(_images/purchaseSB.png);
background-repeat: no-repeat;
height: 127px;
margin-top: 320px;
text-decoration: none;
/* [disabled]background-color: #217CC0; */
background-position: 10px 10px;
text-align: center;
.ipadsidebar {
float: right;
width: 200px;
margin-left: 0px;
margin-right: -20px;
clear: none;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
font-style: italic;
background-image: url(_images/iPadSidebar.png);
background-repeat: no-repeat;
height: 460px;
margin-top: 0px;
text-decoration: none;
background-position: 0px 0px;
text-align: right;
.sidebarleft {
float: left;
width: 200px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 85%;
font-style: oblique;
height: 180px;
text-decoration: none;
padding-top: 8px;
padding-left: 10px;
margin-right: 5px;
margin-bottom: px;
background-color: #217CC0;
vertical-align: bottom;
line-height: 120%;
font-weight: bold;
border-bottom-style: groove;
border-bottom-width: 10px;
margin-top: 0px;
text-align: left;
.sidebarleftnonav {
float: left;
width: 200px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 85%;
font-style: oblique;
height: 180px;
text-decoration: none;
padding-top: 8px;
padding-left: 10px;
margin-right: 5px;
margin-bottom: px;
/* [disabled]background-color: #217CC0; */
vertical-align: bottom;
line-height: 120%;
font-weight: bold;
border-bottom-style: none;
border-bottom-width: 10px;
margin-top: 0px;
text-align: left;
.sidebarleftresources {
float: left;
width: 200px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 83%;
font-style: oblique;
height: 490px;
text-decoration: none;
padding-top: 8px;
padding-left: px;
margin-right: 5px;
margin-bottom: px;
background-color: #217CC0;
vertical-align: bottom;
line-height: 120%;
font-weight: bold;
border-bottom-style: groove;
border-bottom-width: 10px;
margin-top: 0px;
text-align: left;
.sidebargreen {
float: left;
width: 195px;
height: 410px;
text-decoration: none;
padding-top: 20px;
margin-right: 5px;
background-color: #8CC63F;
border-bottom-style: groove;
border-bottom-width: 10px;
margin-top: -4px;
padding-left: 10px;
.nav2 {
font-family: bebas-neue;
font-style: normal;
font-weight: 400;
color: #FFF;
text-align: left;
.content {
width: 730px;
float: left;
background-image: none;
background-repeat: no-repeat;
background-position: left;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
padding: 10px 0;
text-align: left;
font-size: 100%;
margin-left: px;
.contactform {
width: 680px;
background-image: none;
background-repeat: no-repeat;
background-position: left;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
padding: 10px 0;
text-align: left;
font-size: 90%;
margin-left: 23px;
z-index: 1000;
.contestcontactform {
width: 680px;
background-image: none;
background-repeat: no-repeat;
background-position: left;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
padding-top: 0px;
padding-right: 0;
padding-left: 0;
padding-bottom: 10px;
text-align: left;
font-size: 90%;
margin-left: 23px;
z-index: 1000;
margin-top: 100px;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px;
text-decoration: none;
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
text-decoration: none;
ul.nav li {
border-bottom: 1px solid #666;
text-align: left;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
background-color: #C6D580;
text-align: left;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background-color: #DFEBF3;
color: #FFF;
text-decoration: none;
text-align: left;
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both;
background-color: #000000;
height: 150px;
/* ~~ miscellaneous float/clear classes ~~ */
.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: left;
margin-left: 760px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
margin-left: 23px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.productlogos {
margin-left: 23px;
margin-top: 20px;
float: none;
.Bold {
font-weight: bold;
.left {
text-align: left;
.inherent {
font-style: inherit;
sup {
position: relative;
top: -1ex;
vertical-align:baseline;
font-size: 75%;
.footer p {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 80%;
color: #FFF;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 30px;
#wrapper {
width:970px; /**adjust as needed**/
margin:0 auto; /**centers page on screen**/
.fltrtpostcard { /* 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: left;
margin-left: 720px;
top: 0px;
margin-top: -200px;
margin-bottom: 20px;
margin-right: 0px;
height: auto;
.flt_rgt {
float: right;
margin-top: 15px;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
.flt_pftrgt {
float: right;
margin-top: -50px;
margin-right: 0px;
background-image: ;
background-repeat: no-repeat;
.flt_rgtbtmlogo {
float: right;
margin-top: 20px;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
.flt_rgt2 {
float: right;
margin-top: px;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
top: -50px;
right: -20px;
padding-top: 0px;
padding-right: 50px;
.title {
/* [disabled]margin-right: 30px; */
margin-top: 0px;
margin-left: 23px;
background-image: ;
background-repeat: no-repeat;
/* [disabled]margin-left: 20px; */
top: 30px;
/* [disabled]margin-top: 30px; */
left: 30px;
.flt_products {
float: right;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
margin-left: 500px;
margin-top: -70px;
.flt_productsb {
float: left;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
margin-left: 500px;
margin-top: -80px;
visibility: inherit;
.flt_productslq {
float: left;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
margin-left: 350px;
margin-top: -125px;
.flt_producttr {
float: left;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
margin-left: 375px;
margin-top: -125px;
.flt_productvr {
float: left;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
margin-left: 475px;
margin-top: -105px;
.flt_productia {
float: left;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
margin-left: 420px;
margin-top: -125px;
.flt_productkemrok {
float: left;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
margin-left: 485px;
margin-top: -180px;
.flt_productkemrokvr {
float: left;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
margin-left: 590px;
margin-top: -170px;
.flt_productfirerok {
float: left;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
margin-left: 485px;
margin-top: -170px;
.flt_productaw {
float: left;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
margin-left: 430px;
margin-top: -170px;
.flt_product15 {
float: left;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
margin-left: 280px;
margin-top: -125px;
.flt_productdotline {
float: left;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
margin-left: 280px;
margin-top: -155px;
.flt_productsl {
float: left;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
margin-left: 370px;
margin-top: -170px;
.container section nav {
background-image: url(_images/topnavpanel.png);
background-repeat: no-repeat;
height: 30px;
width: 960px;
padding-top: 3px;
nav ul {
list-style: none; /* this creates the space between the navigation on the content below */
font-size: 90%;
border-top-width: 0px;
border-top-style: solid;
/* [disabled]border-top-color: #666; */
position: absolute;
line-height: 120%;
text-align: left;
nav ul li {
text-decoration: none;
color: #FFF;
nav ul a:link , nav ul a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
text-align: left;
color: #FFF;
nav ul a:hover, nav ul a:active, nav ul a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
color: #FFF;
text-decoration: none;
nav ul a:hover, nav ul a:active, nav ul a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
color: #FFF;
text-decoration: none;
height: 120%;
width: auto;
margin-left:;
.orange {
color: #FAA634;
.white {
color: #FFFFFF;
.red {
color: #F00;
.red1 {
color: #F00;
.toppanel {
background-image: url(_images/topnavpanel.png);
background-repeat: no-repeat;
height: 30px;
width: 960px;
.white {
.CeraTechLogo {
background-image: url(_images/CTI_logo_white.png);
background-repeat: no-repeat;
width: 200px;
height: 60px;
#resources {
background-image: url(_images/ResourcesType.png);
background-repeat: no-repeat;
height: 25px;
width: 521px;
margin-left: 200px;
margin-top: -40px;
.pavemendlogo {
margin-left: 23px;
margin-top: -130px;
/* [disabled]margin-top: -40px; */
.footer_img {
margin-top: -20px;
margin-left: -10px;
.footer_img2 {
margin-top: -40px;
text-align: right;
float: left;
margin-right: 35px;
margin-left: 200px;
footer aside {
width: 25%;
float: left;
text-align: left;
min-height: 50px;
margin-left: 23px;
line-height: 120%;
font-size: 80%;
margin-top: 20px;
.aside2 {
float: none;
margin-left: 100px;
width: 29%;
margin-top: 35px;
.aside3 {
float: none;
margin-left: 400px;
width: 29%;
line-height: 120%;
margin-top: -43px;
.sidebarleft img {
margin-left: -10px;
.sidebarleft icon {
margin-top: 0px;
margin-left: -10px;
.sidebarleft nav ul li a img {
margin-top: 0px;
.content section p a {
color: #000000;
font-size: 100%;
/**sub-menu, help for older IE**/
.content section p a:hover ul {
display: block;
position: ;
z-index:1000;
padding: 0;
.content section p a:hover li, .content section p a li.hover li {
float: none;
background-color: #E1D5BB;
/**drop-menu style**/
.content section p a:hover li a, nav li.hover li a {
width: 14em; /* adjust width as needed or use auto */
margin-top: 0;
/**drop-menu style on mouse over**/
.content section p a:hover {
position: relative;
background-color: none;
background-image: ;
background-image: ;
height: 120%;
width: 120%;
overflow-y: hidden;
overflow-x: hidden;
visibility: visible;
font-weight: bold;
color: rgba(255,255,255,1.00);
/* Clear floated elements at the end*/
.content section p a:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
#firstname {
width: 330px;
margin-top: 0px;
#lastname {
width:330px;
#streetaddress {
width:684px;
#city {
width:330px;
#zip {
width:260px;
#company {
width:684px;
#phone {
width:330px;
#email {
width:330px;
#outsidetheus {
width:330px;
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Permanent Concrete and Asphalt Repair Home Page</title>
<meta name="description" content="CeraTech's Pavemend family of high performance concrete repair products have become the choice of professionals across the country for their rapid return to service, versatility, ease of use, and superior durability.">
<!-- TemplateEndEditable -->
<link href="../pavmend_styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
a:link {color:blue}
a:visited {color:black}
a:hover,
a:active,
a:focus {background:blue; color:white}
.weblink a:link {color:blue}
.weblink a:visited {color:yellow}
.weblink a:hover,
.weblink a:active,
.weblink a:focus {background:none; color:red}
.email a:link {color:green}
.email a:visited {color:silver}
.email a:hover,
.email a:active,
.email a:focus {background:none; color:navy}
</style>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<div id="wrapper">
<div class="container">
<!-- TemplateBeginEditable name="Header" -->
<div class="header"></div>
<div id="pavemendlogo"></div>
<div id="prochoicetype"></div>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="TopPanel" -->
<nav>
<ul id="menu">
<li><a href="../pavemend_home_page.html">OUR PRODUCTS ▼</a>
<ul>
<li><a href="../slq_product_page.html">SLQ<sup>®</sup> - Very Rapid Repair Mortar</a></li>
<li><a href="../sl_product_page.html">SL<sup>®</sup> - Semi-Leveling Rapid Repair Concrete</a></li>
<li><a href="../dotline_product_page.html">DOTLine™ - Pre-Extended Rapid Repair Concrete</a></li>
<li><a href="../15.0_product_page.html">Pavemend 15.0<sup>®</sup> - Self Leveling Rapid Repair Mortar</a></li>
<li><a href="../TR_product_page.html">Pavemend TR<sup>®</sup> - Semi-Leveling Rapid Repair Mortar</a></li>
<li><a href="../VR_product_page.html">Pavemend VR<sup>®</sup> - Vertical & Overhead Rapid Repair Mortar</a></li>
<li><a href="../IA_product_page.html">Instant Asphalt™ - Permanent Asphalt Repair Material</a></li>
<li><a href="../kemrok_product_page.html">KEMROK™ - Chemical Resistant Repair Concrete</a></li>
<li><a href="../kemrokVR_product_page.html">KEMROK VR™ - Vertical & Overhead Chemical Resistant Repair Mortar</a></li>
<li><a href="../firerok_product_page.html">FIREROK™ - High Temperature Repair Concrete</a></li>
<li><a href="../antiwear_product_page.html">Anti-Wear™ - Reactive, Concrete Surface Hardener</a></li>
<li><a href="../antiscale_product_page.html">Anti-Scale™ - Reactive, Concrete Surface Hardener</a></li>
</ul>
</li>
<li><a href="../resources_page.html">RESOURCES</a></li>
<li><a href="../technical_support.html">TECHNICAL SUPPORT</a></li>
<li><a href="../contact_page.html">CONTACT US</a></li>
</ul>
</nav>
<!-- TemplateEndEditable -->
</section>
<!-- TemplateBeginEditable name="Sidebar" -->
<div class="sidebar1">
<!-- end .sidebar1 -->
</div>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="Content" -->
<div class="content">
<p>
<section>
<p> </p>
<img src="../_images/homeheader.png" alt="" width="650" height="31" class="fltlft"/>
</section>
</p>
<p> </p>
</section>
<p> </p>
<section><p><strong>Pavemend</strong><sup>®</sup> concrete and asphalt repair products are quickly becoming the preferred repair materials for Turnpike, State DOT bridge crews and discriminating engineers who recognize the value of durable, permanent concrete and asphalt repairs. Contractors and maintenance personnel save time, reduce repair costs, and minimize exposure to traffic and traffic disruptions.</p>
<h3>Concrete & Asphalt repair applications include:</h3>
<table width="700" align="left" >
<tr>
<td valign="top" nowrap style="padding-left: 15px;">Full & Partial Depth Bridge Deck Repairs </td>
<td valign="top" nowrap style="padding-left: 15px;">Dowel Bar Retrofits</td>
<td valign="top" nowrap style="padding-left: 15px;">Industrial Concrete Repair</td>
</tr>
<tr>
<td valign="top" nowrap style="padding-left: 15px;">Bridge Header Joints</td>
<td valign="top" nowrap style="padding-left: 15px;">Cold Weather Repairs</td>
<td valign="top" nowrap style="padding-left: 15px;">Concrete Exposed to High Heat </td>
</tr>
<tr>
<td valign="top" nowrap style="padding-left: 15px;">Bridge Approach Slabs</td>
<td valign="top" nowrap style="padding-left: 15px;">Runway Repairs</td>
<td valign="top" nowrap style="padding-left: 15px;">Concrete Exposed to Chemicals</td>
</tr>
<tr>
<td valign="top" nowrap style="padding-left: 15px;">Form & Pour Repairs</td>
<td valign="top" nowrap style="padding-left: 15px;">Utility Trenches</td>
<td valign="top" nowrap style="padding-left: 15px;">Concrete Exposed to Wastewater</td>
</tr>
<tr>
<td valign="top" nowrap style="padding-left: 15px;">Joint Nosings</td>
<td valign="top" nowrap style="padding-left: 15px;">Post Grooving Treatments</td>
<td valign="top" nowrap style="padding-left: 15px; padding-bottom: 30px;">Manhole Rehabilitation</td>
</tr>
</table>
<h3>Sustainable Concrete and Asphalt Repair Technology</h3>
<p>Featuring technology developed in the USA, Pavemend products require only the addition of water, no bonding agents or curing compounds. Pavemend concrete and asphalt products are easier to use, offer greater durability provide, superior return on investment, and are by the far the most sustainable repair products available today.</p>
</section>
<p> </p>
<!-- end .content --></div>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="Footer Logo" -->
<footer>
<img src="../_images/productfamily.png" alt="" width="250" height="80" class="flt_products"/>
<div class="footer"><img src="../_images/Done_Smart_White_Logo.png" alt="done_smart_white" width="150" height="17" class="flt_rgt" />
<aside><strong><em style="color: #FFF; font-size: 90%;">Manufactured by</em></strong><br><br>
<img src="../_images/CTI_logo_white.png" alt="" width="200" height="47" class="footer_img"/></aside>
<aside class="aside2"><a href="#../twitter.com/Pavemend"><strong><em>Twitter</em></strong> <img src="../_images/twitter-bird-dark-bgs.png" width="20" height="17" alt=""/></a></aside>
<aside class="aside3"><strong><em style="color: #FFF"><a href="../sustainability_page.html">Planet Friendly Technology</a></em></strong><br>
<a href="../sustainability_page.html"><img src="../_images/PFTLogo.png" alt="Planet Friendly Technology" width="75" height="73" class="footer_img2" title="Planet Friendly Technology"/></a></aside>
</footer>
<!-- end .footer --></div>
<!-- end .container --></div>
<!-- TemplateEndEditable -->
</body>
</html>
I feel like I'm making a mess of it.
Maybe you are looking for
-
Mail not working with ios 6.1.3
Just installed iOS 6.1.3 on my iPhone 5 and mail no longer works. It opens for a split second and then instantly closes. Anyone else have this problem...this is driving me mad.
-
How to filter the output of a query according to the language
Hi guys, I have the following tables joined togheter: VBAK ,VBKD ,TVZBT. The problem is, the output gives any record as many times as many languages exist in table TVZBT I tried with the following instruction but it doesn't work,no matter in which e
-
Linking of vendor payments to Purchase order
Hi My requirement is that i want to link payments ( vendor ) to PO i.e how much payment has been made to particular vendor for a particular vendor . I have placed several orders to a single vendor for the supply of different material. In my scenerai
-
I am a subscriber to the "Days of Our Lives" season pass. Often I will go to iTunes to "check for purchases" and find I cannot download the latest episode, even though it's available for purchase. It won't let me download the latest episode until I r
-
MIC's of finished product should get transferred to Semi-finished product
Hi all, I have the following requirement Based on the Customer requirement, sales order will be created. Two line items will be created in the sales order. First item: 100kg Second item: 5 kg (this will be the sample to be sent to the customer for ap