close ad
Help us test the new Databridge BETA with MySQLi support
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

how can i make image smaller within dynamic html?

Thread began 12/22/2011 11:47 am by Graeme | Last modified 12/28/2011 5:41 pm by Graeme | 3740 views | 4 replies |

Graeme

how can i make image smaller within dynamic html?

Hi

im using html editor with data assist to store html in database so that it can be extracted from recordsets and displayed on page all works well. Aslo using menu maker to create dynamic menu from record sets and mod re write for url, all good

what im trying to do with some luck is have a preview of the the news pages on the front page in a news section and only want to show first paragraph of html with the images withing the first paragraph and link to the detail page all this I can do however I have to make the image smaller

is there anyway i can make
<img alt="" src="/images/cable.jpg" style="padding: 5px; margin-right: 5px; width: 266px; height: 178px; border-width: 0px; border-style: solid; float: left;" /> which is pulled from database with text beteen <p> </p> tags a lot small say 50px wide in the latest news section but leaving image its original size for the detail page

I have tried using !important in css rule to overide inline css but no joy.

Any help please would be welcome.

I also have image resizer extension but not sure if that does what i need either.

Sign in to reply to this post

Jason ByrnesWebAssist

an inline style cannot be overridden.

you would need to remove the inline style, and replace it with a class:
<img alt="" src="/images/cable.jpg" class="newsImage" />


on the main page, add the following CSS:
<style>
.newsImage {
padding: 5px;
margin-right: 5px;
width: auto;
height: auto;
border-width: 0px;
border-style: solid;
float: left;
}
</style>


and on the latest news page, use this css:
<style>
.newsImage {
padding: 5px;
margin-right: 5px;
width: 50px;
height: 50px;
border-width: 0px;
border-style: solid;
float: left;
}
</style>

Sign in to reply to this post

Graeme

Thanks Jason

Almost there now, I have one small problem left and that is when inserting the image in the html editor it always puts the size of image in
so at the moment getting

<img alt="" class="newspic" src="/images/cable.jpg" style="width: 266px; height: 178px;" />


how do i get rid of the style="width: 266px; height: 178px in the settings of the html editor. I know i can blank the boxes of width hight on the insert pic popup but explaining that to client will be so difficult, also thay may want to resize the image.

Sign in to reply to this post

Jason ByrnesWebAssist

the style cannot be removed automatically, it needs to be done manually in the image editor.

Sign in to reply to this post

Graeme

ok cheers for reply.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...