Importing CustomControl into Library???

Report · Sep 07, 2012

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>

20.00

</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?

Report · Sep 07, 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.

Report · Sep 07, 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.

Report · Sep 07, 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.

Report · Sep 07, 2012

Thanks,

That helped, if i need any other assistance i will post here, thanks a lot.

Report · Sep 08, 2012

amarasatCSFT wrote:
That helped, if i need any other assistance i will post here, thanks a lot.

If you need further assistance, please start a new thread by clicking "Start a discussion" rather than asking multiple questions in the same thread.

Keeping each question in a separate thread makes it easier for others to see when a question has been answered. It also helps others to search for answers.

Report · Sep 10, 2012

Note: This is not a multiple question, its a question on the discussion above

I am dragging and dropping the new snippet i just created from the snippets menu. When i am in the Design View, i dont see the bitmap until i click on Live. The whole reason i am trying to use dreamweaver is so that the user can drag the div element (snippet) around the design view so that he does have to write code for positioning the div element.

But when i drag the snippet onto the design view

1.) I cant see the image in the Design view and

2.) The element is not moving at all, or is barely moving and has no effect on the code view side.

How do i add an image to this forum post, it wouldn't let me attach Gif, bmp, Jpg, Jpeg and png

Report · Sep 11, 2012

In general,

I was able to move Images and Div elements around in the Design view and reorder them where ever i want, this is working awesome. But if i have a Div element with a class which has a background image like in my example above.

May be since the class will be applied to the Div elements only at runtime, so i dont see any images in the design view. Once i click the Live view then only i can see images but you know we cannot edit or move around elements in live view.

In the above case the div element kind of sticks on the page and i was not able to move those elements in design view. This kind of defeats the purpose of us buying Dreamweaver. How ever i was able to move thing around in Sharepoint Designer's, Microsoft Expression's and Microsoft Visual Web Developer Express's design views.

So do you know if the design view is not yet applying the class to div elements or do you think i am doing something worng?

Importing CustomControl into Library???

1 Correct answer