Drupal / CSS Add images

I would like to add one image above, and another image to the right of the images that is in the CSS.  Can somebody please tell me how to do that.

Thanks.

a.download,
a.download:hover{
    background:
    transparent url("images/download_btn01.gif") no-repeat scroll 0 0;
    display: block;
    margin-top: 45px;
    overflow: hidden;
    padding: 5px 10px;
    text-decoration: underline;
    text-indent: -5000px;
}
virtuali1151Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
Do you want to do this via CSS or Javascript?
0
virtuali1151Author Commented:
by css...:)

Tks.
0
RobOwner (Aidellio)Commented:
I have done this using :before and :after and the content property. Use the url() function for css

https://css-tricks.com/almanac/selectors/a/after-and-before/
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

virtuali1151Author Commented:
Anybody know how to style these three buttons..?? I need to two one top of the other, and then the 3rd button aligned with the top button...
0
RobOwner (Aidellio)Commented:
what three buttons are you referring to?  Do you have a link to your page?
0
virtuali1151Author Commented:
0
RobOwner (Aidellio)Commented:
Do you have these buttons separately? Do you have any html?  I need something to work with because currently I do not know what you're after.   I want to help but I need to see the html markup for the content you're trying to manipulate
0
virtuali1151Author Commented:
Hey Rob,

Im using drupal, so the fields are inserted via php.. then styled by the css like the below:

<?php if(isset($node->field_product_download) && isset($node->field_product_download[0]) && $node->field_product_download[0]['filepath']){?>
        <?php print l(t('Protocol Download'),$node->field_product_download[0]['filepath'],array('attributes' => array('class' => 'download','target' => '_blank')));?> 
      <?php }?>       
      <?php if(isset($node->field_product_protocol_download) && isset($node->field_product_protocol_download[0]) && $node->field_product_protocol_download[0]['filepath']){?>
        <?php print l(t('Quick Protocol Download'),$node->field_product_protocol_download[0]['filepath'],array('attributes' => array('class' => 'download','target' => '_blank')));?> 
      <?php }?>    

Open in new window

0
virtuali1151Author Commented:
This is the css that is currently there for the one button, I just need to do the other two:

a.download,
a.download:hover{
    background: 
    transparent url("images/download_btn01.gif") no-repeat scroll 0 0;
    display: block;
    margin-top: 45px;
    overflow: hidden;
    padding: 5px 10px;
    text-decoration: underline;
    text-indent: -5000px;
}

Open in new window

0
virtuali1151Author Commented:
Anybody know how to aline these two extras fields?  Thanks in advance
0
Julian HansenCommented:
Your code is not complete - your image says there are three buttons with text

- Complete Protocol
- Quick Protocol
- Something Else

The code you posted only shows two buttons
- Protocol Download
- Quick Protocol Download

These do not match.

However, those lines are not useful as they call functions that do the actual output. What you need to do is to render the page in a browser and the cut and past the rendered HTML for those buttons so we can look at the actual HTML generated.
0
virtuali1151Author Commented:
Hi Julian.

Thanks for your msg.  You can consider the 3rd button as you have it.  "Something".  It is actually a chinese name:), so for the ease of simplicity lets just call the 3rd button "something".  This is actual html is outputs for the one button I currently have, I just need to add the other two buttons as I have noted above.  Thanks for your help mate.  Let me know if you need anything else.

Cheers.

</div>
              <div id="center"><div id="squeeze">
                <div class="content-bg"><div class="content-bg-r"><div class="content-bg-c">
                  <div class="content clear-block"><div id="node-325" class="node-product node">
                    <div class="content clear-block">
                      <div class="desc"><div class="product-body"> </div> </div> 
                    <a href="/sites/default/files/file.pdf" class="download" target="_blank">Protocol Download</a> 
             
          
        
              <div class="spec"><div></div>
              </div>
  </div>

Open in new window

0
Julian HansenCommented:
Ok, one step at a time. Based on the code posted these statements should produce the html for the 3 buttons. In your previous post you used an isset test to determine if you should output or not - I leave that to you to add those back in.

<?php 
print l(t('Complete Protocol'),$node->field_product_download[0]['filepath'],array('attributes' => array('class' => 'download complete_protocol','target' => '_blank')));
print l(t('Quick Protocol'),$node->field_product_protocol_download[0]['filepath'],array('attributes' => array('class' => 'download quick_protocol','target' => '_blank')));
print l(t('Something Else'),$node->field_product_protocol_download[0]['filepath'],array('attributes' => array('class' => 'download something_else','target' => '_blank')));?> 

Open in new window


This should create the three buttons under each other.

Next step - create the image sprite to use for the three buttons. I have attached a sample of one I cobbled together from the JPG you posted - see attached. We will use this image for all the buttons.

Change your CSS to this
a.download,
a.download:hover{
    background: 
    transparent url("images/download_btn01.gif") no-repeat scroll 0 0;
    display: block;
    margin-top: 45px;
    overflow: hidden;
    padding: 5px 10px;
    text-decoration: underline;
    text-indent: -5000px;
	width: 400px;
	height: 81px;
}
a.download.quick_protocol,
a.download.quick_portocol:hover {
	background-position: 0 -81px
}
a.download.quick_protocol,
a.download.quick_portocol:hover {
	background-position: 0 -162px
}

Open in new window

Without a working page to work off it is going to be a bit of trial and error.

What you need to establish from the above is

a) Is the HTML for all three buttons produced - post the rendered html
b) Are the correct images showing for the buttons - post screen shot of result.

We can look at positioning the button to the right after we sort out the markup and initial styling.
download-btn01.gif
0
virtuali1151Author Commented:
Ok, Ive got that all in and so far ok but a few things:

1.) the 2 new images need to have their own links when clicked on like the first button, currently the whole sprite links to the first PDF.

2.) the other buttons need to not show if no file isnt attached. IE: If there is not PDF file to click on it shouldnt show.

3.) The buttons to need to stack like this: Protocol Download, the Quick Protocol Download underneath, then the "Something Else" button to the right of those two buttons.

4.) The buttons need to be resized down to about 128px wide, and 25px high.

Thanks for  your assistance so far Julian! Getting there! :)
0
Julian HansenCommented:
1. Change the code to point to the required PDF - I have no idea how your documents are structured so you have to figure this out and change the parameters to the code to output the correct path.

2. As I said in my previous post - the application of the isset() test you need to put in yourself - I have no knowledge of the logic required and it appears from your earlier post that you have already implemented that.

3. Understood which is why I said in my previous post lets start with them underneath each other for now and then once that is working and styled look at positioning the third button to the right.

4. Ok - that can be done with any image editor - I worked off the supplied JPG - resize the sprite to suite your requirements ...

Otherwise you are welcome - will wait for you to implement the above and post results.
0
virtuali1151Author Commented:
Ok, I got the separate pdf's going.. thats all good..:) Now I guess its just to move the image to the right, align it at the top with the other one... and then just resize them...

Thanks again.. really appreciate the help..;)
0
Julian HansenCommented:
Great - but we need to see what it looks like - can you post the rendered html and a screen shot.
0
virtuali1151Author Commented:
Hey Julian,

Here is the code with 3 images.  The links to the separate files work the way they should, but you will see it creates 3 different sprites rather than the one image, and it will have to be moved to right how my image attached shows.. thanks again mate.

div class="content clear-block">
                
              <div class ="image"><div class="product-image"><div class="main-product-image"><a href="http://www.geneaid.com/sites/default/files/imagecache/product_full/Untitled-1_1.jpg" title="Mini Plasmid Kit" class="colorbox" rel="uc_image_0"><img src="http://www.geneaid.com/sites/default/files/imagecache/product/Untitled-1_1.jpg" alt="Mini Plasmid Kit" title="Mini Plasmid Kit" width="400" height="300" class="imagecache imagecache-product"/></a></div><div class="more-product-images"></div></div> </div> 
            <div class = "product-title">Presto™ Mini Plasmid Kit PDH100/PDH300</div>  
              <div class ="desc"><div class="product-body"><p><span style="color: rgb(0, 0, 0);"><span style="font-family: Arial;">This <strong>Plasmid Kit </strong>was designed for plasmid and cosmid DNA purification&nbsp;</span></span><span style="color: rgb(0, 0, 0);"><span style="font-family: arial,helvetica,sans-serif;">from 1-7 ml of cultured bacterial cells.&nbsp;<span style="color: rgb(0, 0, 0);"><span style="font-family: arial, helvetica, sans-serif;"><font face="Arial">For processing larger volumes, the</font></span></span><span style="color: rgb(0, 0, 0); font-family: Arial;"> </span><strong><a href="http://www.geneaid.com/products/plasmid-dna-purification/plasmid-kit-midiprep-presto" target="_blank" title="Plasmid Midiprep Kit | Midiprep Plasmid" type="Plasmid Midiprep Kit | Midiprep Plasmid"><span style="color: rgb(51, 102, 255);"><span style="font-family: Arial;">Presto™ Midi Plasmid Kit</span></span></a></strong><span style="color: rgb(0, 0, 0);"><strong><a href="http://www.geneaid.com/products/plasmid-dna-purification/plasmid-kit-midiprep-presto" target="_blank" title="Plasmid Midiprep Kit | Midiprep Plasmid" type="Plasmid Midiprep Kit | Midiprep Plasmid"><span style="font-family: Arial;"> </span></a></strong></span><span style="color: rgb(0, 0, 0); font-family: Arial;">is also available. Both</span><span style="color: rgb(0, 0, 0); font-family: arial, helvetica, sans-serif;"> <strong>plasmid kits </strong>include TrueBlue Lysis Buffer (an optional color indicator) to prevent common handling errors while ensuring efficient cell lysis, neutralization <span style="font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 9pt; mso-font-kerning: 1.0pt; mso-ansi-language: EN-US; mso-fareast-language: ZH-TW; mso-bidi-language: AR-SA; mso-fareast-font-family: PMingLiU;"><font color="#000000">and maximum plasmid product yield</font></span>. </span></span></span><span style="color: rgb(0, 0, 0); font-family: arial, helvetica, sans-serif;"><span style="color: rgb(0, 0, 0);"><span style="font-family: Arial;">The Presto™ Mini <strong>Plasmid Kit </strong></span></span>uses a modified alkaline lysis method and RNase treatment to obtain clear cell lysate with minimal genomic DNA/RNA contaminants.&nbsp;</span><font face="Arial" style="color: rgb(0, 0, 0);">In the presence of chaotropic salt, plasmid DNA in the lysate binds to the glass fiber matrix of the plasmid&nbsp;spin column. Contaminants are removed with a Wash Buffer (containing ethanol) and the purified plasmid DNA is eluted by a low salt Elution Buffer, TE or water. DNA phenol extraction or alcohol precipitation are not required&nbsp;and the entire procedure can be completed within&nbsp;15 minutes.&nbsp;</font></p>
</div> </div> 
                    <a href="/sites/default/files/PDH11.pdf" class="download" target="_blank">Protocol Download</a> 
             
              <a href="/sites/default/files/JCM%2050th%20half%20page%20ad%201.pdf" class="download" target="_blank">Quick Protocol Download</a> 
      	          <a href="/sites/default/files/John%20Crawford%20Marine%20Farr%207500%20news%20article.pdf" class="download" target="_blank">Chinese Protocol Download</a> 
           
        
              <div class ="spec"><div><span style="color: rgb(0, 0, 0);"><span style="font-size: 16px;"><span style="font-family: arial,helvetica,sans-serif;"><strong>Advantages</strong>&nbsp;<span style="font-size: 12px;">(Cat. # PDH100, PDH300)</span></span></span></span></div>
<ul style="line-height: normal; font-family: Verdana, Arial, Helvetica, sans-serif;">
<li>

Open in new window


Screenshot
0
Julian HansenCommented:
If we look at the code the only bit that is relevant is this

	<a href="/sites/default/files/PDH11.pdf" class="download" target="_blank">Protocol Download</a> 
	<a href="/sites/default/files/JCM%2050th%20half%20page%20ad%201.pdf" class="download" target="_blank">Quick Protocol Download</a> 
	<a href="/sites/default/files/John%20Crawford%20Marine%20Farr%207500%20news%20article.pdf" class="download" target="_blank">Chinese Protocol Download</a>

Open in new window


If we look at the above we see that the class for each is the same (download). In the example I posted earlier I modified the l() function to include different class names for each output - refer the following code
// Refer class parameter
print l(t('Complete Protocol'),$node->field_product_download[0]['filepath'],array('attributes' => array('class' => 'download complete_protocol','target' => '_blank')));

Open in new window


The next thing to look at is to see if the height parameter is being applied correctly to the download style. The height must be the same as the height of the button - if the height is not set correctly it is possible for the entire sprite to show - as is seen in the screen shot.

First fix the class issue above
Second check the css for the .download and ensure the height is the same as the height of a button.
0
virtuali1151Author Commented:
Ok,

Here is what I changed it too as you noted and the result, the image sprite is exactly 127X75 as noted in the CSS.  See the screen shot for how it came out.  The files attached are correct, but it is still outputting 3 separate sprites as seen below.screenshot 2
print l(t('Protocol Download'),$node->field_product_download[0]['filepath'],array('attributes' => array('class' => 'download','target' => '_blank')));?> 

print l(t('Quick Protocol Download'),$node->field_product_protocol_download[0]['filepath'],array('attributes' => array('class' => 'download quick_protocol','target' => '_blank')));?> 

print l(t('Chinese Protocol Download'),$node->field_chinese_protocol_dow[0]['filepath'],array('attributes' => array('class' => 'download chinese_protocol','target' => '_blank')));?>

Open in new window


THE CSS:

a.download,
a.download:hover{
    background: 
    transparent url("images/download_btn01.gif") no-repeat scroll 0 0;
    display: block;
    margin-top: 45px;
    overflow: hidden;
    padding: 5px 10px;
    text-decoration: underline;
    text-indent: -5000px;
	width: 127px;
	height: 75px;
}
a.download.quick_protocol,
a.download.quick_protocol:hover {
	background-position: 0 -81px
}
a.download.chinese_protocol,
a.download.chinese_protocol:hover {
	background-position: 0 -162px
}

Open in new window

0
virtuali1151Author Commented:
the download style should be 127x25 not 127x75 correct..??
0
Julian HansenCommented:
I assume so - you modified the images on your side so you need to make it the height of one of the images. If that is 25px then that is what the height should be.
0
virtuali1151Author Commented:
Yes, I did resize the image as that... sooo I have changed it and it seems we are getting closer... but heres how it looks now..

a.download,
a.download:hover{
    background: 
    transparent url("images/download_btn01.gif") no-repeat scroll 0 0;
    display: block;
    margin-top: 15px;
    overflow: hidden;
    padding: 5px 10px;
    text-decoration: underline;
    text-indent: -5000px;
	width: 127px;
	height: 25px;
}
a.download.quick_protocol,
a.download.quick_protocol:hover {
	background-position: 0 -81px
}
a.download.chinese_protocol,
a.download.chinese_protocol:hover {
	background-position: 0 -162px
}

Open in new window


screenshot 3
0
Julian HansenCommented:
To put the images next to each other do as follows

Change .download style to

display: inline-block;

Then wrap your l() function call in a <div> to group the images you want to appear next to each other in other words something like this - change as needed.
echo "<div>";
print l(t('Complete Protocol'),$node->field_product_download[0]['filepath'],array('attributes' => array('class' => 'download complete_protocol','target' => '_blank')));
print l(t('Quick Protocol'),$node->field_product_protocol_download[0]['filepath'],array('attributes' => array('class' => 'download quick_protocol','target' => '_blank')));
echo "</div><div>";
print l(t('Something Else'),$node->field_product_protocol_download[0]['filepath'],array('a
echo "</div>";

Open in new window

0
virtuali1151Author Commented:
Doesnt want to work for some reason?

<?php if(isset($node->field_product_download) && isset($node->field_product_download[0]) && $node->field_product_download[0]['filepath']){?> 
	  <?php echo "<div>"; print l(t('Protocol Download'),$node->field_product_download[0]['filepath'],array('attributes' => array('class' => 'download','target' => '_blank')));?> 
      <?php }?>       
      <?php if(isset($node->field_product_protocol_download) && isset($node->field_product_protocol_download[0]) && $node->field_product_protocol_download[0]['filepath']){?>
        <?php print l(t('Quick Protocol Download'),$node->field_product_protocol_download[0]['filepath'],array('attributes' => array('class' => 'download quick_protocol','target' => '_blank')));?> 
      <?php } echo "</div><div>";?>
	  <?php if(isset($node->field_chinese_protocol_dow) && isset($node->field_chinese_protocol_dow[0]) && $node->field_chinese_protocol_dow[0]['filepath']){?>
        <?php print l(t('Chinese Protocol Download'),$node->field_chinese_protocol_dow[0]['filepath'],array('attributes' => array('class' => 'download chinese_protocol','target' => '_blank')));?> 
      <?php } echo "</div>";?>    

Open in new window

0
Julian HansenCommented:
Doesnt want to work for some reason?
Not helpful - we cannot see what you are seeing so if you want a solution you need to give us as much information as possible.

How is it not working?
0
virtuali1151Author Commented:
I put the code in below as your requested and now I get the below.. ? See attached..

CSS

a.download,
a.download:hover{
    background: 
    transparent url("images/download_btn01.gif") no-repeat scroll 0 0;
    display: inline;
    margin-top: 15px;
    overflow: hidden;
    padding: 5px 10px;
    text-decoration: underline;
    text-indent: -5000px;
	width: 127px;
	height: 25px;
}
a.download.quick_protocol,
a.download.quick_protocol:hover {
	background-position: 0 -81px
}
a.download.chinese_protocol,
a.download.chinese_protocol:hover {
	background-position: 0 -162px
}

Open in new window


PHP
<?php if(isset($node->field_product_download) && isset($node->field_product_download[0]) && $node->field_product_download[0]['filepath']){?> 
	  <?php echo "<div>"; print l(t('Protocol Download'),$node->field_product_download[0]['filepath'],array('attributes' => array('class' => 'download','target' => '_blank')));?> 
      <?php }?>       
      <?php if(isset($node->field_product_protocol_download) && isset($node->field_product_protocol_download[0]) && $node->field_product_protocol_download[0]['filepath']){?>
        <?php print l(t('Quick Protocol Download'),$node->field_product_protocol_download[0]['filepath'],array('attributes' => array('class' => 'download quick_protocol','target' => '_blank')));?> 
      <?php } echo "</div><div>";?>
	  <?php if(isset($node->field_chinese_protocol_dow) && isset($node->field_chinese_protocol_dow[0]) && $node->field_chinese_protocol_dow[0]['filepath']){?>
        <?php print l(t('Chinese Protocol Download'),$node->field_chinese_protocol_dow[0]['filepath'],array('attributes' => array('class' => 'download chinese_protocol','target' => '_blank')));?> 
      <?php } echo "</div>";?>    

Open in new window


Screenshot 4
0
virtuali1151Author Commented:
The links look to be be correctly setup, but the images dont seem to be overlaying them?
0
virtuali1151Author Commented:
By the way, thanks for your assistance and help.. youve been awesome!! :)
0
Julian HansenCommented:
Line 5 of the CSS
 display: inline;

Open in new window

Is not the same as
 display: inline-block;

Open in new window

The links need to be inline block elements in order for the height to take effect and for the links to appear side by side.
0
virtuali1151Author Commented:
I added display: inline-block; and the attached is now showing...

screenshot 5
0
Julian HansenCommented:
In one of your earlier posts you enclosed your button output in this element
<div class="content clear-block">

Open in new window

Try doing that again - you need to clear that left float that is causing the content to appear to the left of the image.
0
virtuali1151Author Commented:
Hey Julian,

I do already have that clear block... and still no difference.. this is what I currently have for code...

<div class="content clear-block">
    <?php //print $content ?>
      <?php }?>
	  <?php if(isset($node->field_product_download) && isset($node->field_product_download[0]) && $node->field_product_download[0]['filepath']){?> 
	  <?php echo "<div>"; print l(t('Protocol Download'),$node->field_product_download[0]['filepath'],array('attributes' => array('class' => 'download','target' => '_blank')));?> 
      <?php }?>       
      <?php if(isset($node->field_product_protocol_download) && isset($node->field_product_protocol_download[0]) && $node->field_product_protocol_download[0]['filepath']){?>
        <?php print l(t('Quick Protocol Download'),$node->field_product_protocol_download[0]['filepath'],array('attributes' => array('class' => 'download quick_protocol','target' => '_blank')));?> 
      <?php } echo "</div><div>";?>
	  <?php if(isset($node->field_chinese_protocol_dow) && isset($node->field_chinese_protocol_dow[0]) && $node->field_chinese_protocol_dow[0]['filepath']){?>
        <?php print l(t('Chinese Protocol Download'),$node->field_chinese_protocol_dow[0]['filepath'],array('attributes' => array('class' => 'download chinese_protocol','target' => '_blank')));?> 
      <?php } echo "</div>";?>
      </div>

Open in new window

0
Julian HansenCommented:
Not going to be able to debug with that. I am assuming this page is not online anywhere?
0
virtuali1151Author Commented:
Heres the output from that page if this helps:
<div class="content clear-block">
       
	  <div><a href="/sites/default/files/PDH11.pdf" class="download" target="_blank">Protocol Download</a> 
             
              <a href="/sites/default/files/John%20Crawford%20Marine%20Farr%207500%20news%20article.pdf" class="download quick_protocol" target="_blank">Quick Protocol Download</a> 
      </div><div>	          <a href="/sites/default/files/Sonata%20Class%20Specifications.pdf" class="download chinese_protocol" target="_blank">Chinese Protocol Download</a> 
      </div></div>   

Open in new window

0
Julian HansenCommented:
First up change the following style to be -25px (from -81px). When you changed the size of the image you needed to change this as well - this will sort out the missing image for the other two buttons.

a.download.quick_protocol, a.download.quick_protocol:hover {
  background-position: 0 -25px; /* Change from -81px */
}

Open in new window

The remove the padding from this style - it is messing with the height
a.download, a.download:hover {
  background: transparent url("images/download_btn01.gif") no-repeat scroll 0 0;
  display: inline-block;
  height: 25px;
  margin-top: 15px;
  overflow: hidden;
/* padding: ... REMOVE THIS */
  text-decoration: underline;
  text-indent: -5000px;
  width: 127px;
}

Open in new window


Now change the top offset on this style - again to match the 25px high images you are using.

a.download.chinese_protocol, a.download.chinese_protocol:hover {
  background-position: 0 -50px; /* Change from -162px */
}

Open in new window


Lastly all we need to do is to fix that float issue. The .clear-block style works on clearing the float AFTER the element it is bound to - so you need to put an element before your current div like this

<div class="clear-block"></div>
<div>
 <!-- YOUR BUTTONS HERE -->
</div>

Open in new window

Ideally this should be done without adding an empty div - but lets do it like that for now.
0
virtuali1151Author Commented:
YAY!! Getting very close!! If you check the page now I have the 3 buttons almost the way they should be! A couple issues:

1.) The quick protocol button is duplicated, for some reason the 3rd button is not the chinese button?

2.) The quick protocal button on the top right needs to be moved over to right abit.. just so it lines up like the bottom button does.....

http://www.geneaid.com/products/plasmid-dna-purification/plasmid-kit-miniprep-presto

Almost there mate!
0
virtuali1151Author Commented:
ok, I got the chinese button show, I just need to know how to align the top quick protocol button abit better...:)
0
virtuali1151Author Commented:
How would I get the chinese button to come up abit, and the quick protocol one to the right.. just want to get them equal..:)

Tks for all your assistance thus far mate..:)
0
Julian HansenCommented:
1. remove the margin from the a.download style so it looks like this
a.download, a.download:hover {
  background: transparent url("images/download_btn01.gif") no-repeat scroll 0 0;
  display: inline-block;
  height: 25px;
  overflow: hidden;
  text-decoration: underline;
  text-indent: -5000px;
  width: 127px;
}

Open in new window


2. Add this style
a.download:first-child {
  margin-right: 15px; /* CHANGE AS NEEDED*/
}

Open in new window


3. To the containing <div> - add a top margin by adding a class to target it like so
<div class="content clear-block button-block" >

Open in new window


and then adding a style
.button-block {
  margin-top: 15px;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
virtuali1151Author Commented:
Its perfect now! ... Thanks a million for your assistance.. you've been awesome!
0
virtuali1151Author Commented:
Julian is awesome with CSS and a HUGE help... tks mate!
0
Julian HansenCommented:
You are most welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.