Skip to main content
A
amarasatCSFT
Participant
September 7, 2012
Answered

Importing CustomControl into Library???

  • September 7, 2012
  • 1 reply
  • 958 views

Hello Everyone:

I have written a piece of code using HTML div element and CSS as given below to hold text on top of an image.

<body>

<style>

.text_over_image

{

background:url("../../../../../Program Files/Adobe/Adobe Dreamweaver CS6/images/Sample1.bmp");  /* image to display */

width:42px;                    /* width of image */

height:63px;                   /* height of image */

color:000000;                  /* text color */

font-size:12px;                /* font size */

font-weight:bold;              /* font weight */

font-family:Arial;             /* font family */

text-align:center;             /* text position */

padding-left:0px;              /* left position of text */

padding-top:0px;               /* top position of text */

border:;                  /* border around image if desired */

overflow:hidden;               /* so div won't change size */

}

</style>

<div class="text_over_image">

20.00

<input type="hidden" name="INTUNETag" value ="SomeNights"/>

</div>

</body>

Let me name this piece of code (div element with a class and an hidden element) as CustomControlOne. Now i want to place a 1000 of these on a webpage.

Question:

Instead or dragging and dropping a div tag always, can i upload this CustomControlOne into dreamweaver library and drag and drop that control instead. Is this possible?

This topic has been closed for replies.
Correct answer Jon Fritz

Save it as a Snippet.

The CSS stays in your <head> or external style sheet, so you won't need to copy that part repeatedly.

Open the Snippet tab, highlight the code from <div class="

text_over_image"> to it's ending </div> (leave out <body> and any other html that you don't want repeated) and then click the New Snippet button it's the second from left on bottom of Snippet Tab.

Now, whenever you want to use that code, you can just click where you want the code, then click your new snippet in the Snippet Tab.

1 reply

Jon Fritz
Community Expert
Jon FritzCommunity ExpertCorrect answer
Community Expert
September 7, 2012

Save it as a Snippet.

The CSS stays in your <head> or external style sheet, so you won't need to copy that part repeatedly.

Open the Snippet tab, highlight the code from <div class="

text_over_image"> to it's ending </div> (leave out <body> and any other html that you don't want repeated) and then click the New Snippet button it's the second from left on bottom of Snippet Tab.

Now, whenever you want to use that code, you can just click where you want the code, then click your new snippet in the Snippet Tab.

A
amarasatCSFTAuthor
Participant
September 7, 2012

Great,

You saved alot of time, now i have one more question:

In the div element, the value 20.00 is always on the top of the image. Event though it is aligned to the centre, it is still on the top,

how do i bring that value exactly into the centre like this

Sorry, it wouldnt let me add an image i tried jpg, jpeg, bmp, png and gif but neither worked.

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
September 7, 2012

text-align:center is for horizontal alignment.

I usually add a padding-top:##px for something like this. It will make your box taller overall, so you should also remove the same number of pixels from the height setting.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices