Centering images on fluid site

Rebuilding a very antiquated site to meet the upcoming Google deadline, I'm having problems centering images. I defined a class of "center" but it's not working;
http://www.aptcoweb.com/dev/aptcoFluid/office/label.htm
Sometimes I want to center a single image, other times a group of images. What's wrong with my css?
Also, what's the best way to center the iframe video?

larrycfc wrote:
Still don't know how to center the video. wrapping the iframe in a div made it disappear.
Add some inline css styling to the iframe:
<iframe width="640" style="display: block; margin: 0 auto;" height="480" src="https://www.youtube.com/embed/RWgpByd3UrI?rel=0" frameborder="0" allowfullscreen></iframe>

Similar Messages

Centering images in fluid layouts while maintaining height of image

I am working in DW CS6 on a windows 7 computer; can someone tell me the HTML and CSS coding to use for the following idea?
I have an image file that is 900px wide by 300 px tall. (there is only one (1) image in the Div and no text) My goal is the keep the center of the image file (450px left & right) in the center of the fluid Div ID and keep the height of the image constant at 300px. The left and right sides of the image file just overflow the sides of the Div ID and are not visible to the users.
Thank you.

Maybe my request was not clear enough so I will see if I can explain it better. (getting the image inserted at the proper size is no problem using CSS)
It is my desire to keep the height of the image at 300px (and it does); I am looking for a way for the image to stay at 900px wide as the page width decreases WHILE the center of the image remains in the center WITHOUT the entire image narrowing. The left and right sides of the images just dissappear outside of the viewable area as defined by the adjustable width of the fluid Div ID.
Within the Source Code & Div Id - my html is as follows: <img src="images/logo.png" alt="logo" class="align-center large" />
Within the Styles CSS - my code uses: img.align-center { ~ .... } & img.large ( width: ~px; height: ~px; }
Do you have another suggestion?

Matching Image Colours with Site Colours

Hi
I would like to match the colour of an image to the site corporate colours. If you see this logo - http://www.portfoliohealth.co.uk/ - you can see that the pastel green colour (#CDE8D9) on the far left of the the graduated image is different to the main colour in the 'p' logo opn the right.
Any idea on mathing these exactly (or as near as)?
Many thanks

Have you tried the Eye Dropper tool over the area?
It kind of difficult to determine which green is the color your looking for since there appears to be an oval in the middle.
Another idea to help pinpoint a color is to draw a Export Area JUST around the 'green' rounded logo. Double click it once drawn and it will take you to the Export dialog. Chnage the output to Gif /256 colors and you can see the exact green color variants in that area. To the right of the Gif, there's a Options icon, click that and from the list choose Sort by Luminance. You can then get a better idea of the darkest to lightest greens. Mouseover/click anyone of them and the rgb/hex shows up. Copy down the ones you need.
You can also choose Save > Save Palette (.act) from the Same Option context list, and load it directly into the Window > Swatches > Panel Options (Add Swatches (.act) command). This way you can interact with the Swatches Panel and you recreated logo.
h

Preview image of top site selected or enable through fox tab, doesnt shows up? Instead of preivew image of particular site its showing up blank?

I have assigned all top sites in the fox tab. It was working fine for two days. Later now it doesn't shows up the thumbnail image of each site. When i click the icon its redirecting to the particular site assigned to it. But i don't see the thumbnail image on it?

Do any one have an answer or solution for this? i have attached the screen shot of it. I have assigned nearly 7 to 8 top site but none of them shows up.

PreLoad ALL images within a site?

My ImageReady rollover preloads are working fine (per page).
However, can someone please provide script that I can place in my
index page, that downloads every single image in my site?
Thanks.

...and it would be a pain for anyone still using dialup. They
may just
close your portfolio and go somewhere else.
"David Powers" <[email protected]> wrote in message
news:e7eotm$j2v$[email protected]..
> swissgrid wrote:
>> Why not? Of course you would want the index page to
load its own images
>> first. However, why stop there? By the time a user
clicks on the next
>> page, all of the images could be loaded.
>
> Wasting huge amounts of bandwidth on images that may
never be seen. If
> your images are taking too long to download, you ought
to reconsider their
> size. On the other hand, if it's a portfolio site, users
will normally be
> happy to wait if your material is really worth looking
at.
>
> --
> David Powers
> Author, "Foundation PHP for Dreamweaver 8" (friends of
ED)
> Author, "Foundation PHP 5 for Flash" (friends of ED)
>
http://foundationphp.com/

Putting gif images on my site

I have a few questions about putting gif images on my site.
How can I easily create a gif image from my favourite photos and put them on my site by using iWeb ?
Can I do it by using Preview or QT Pro ?
Thanks

Flash is great as long as your audience is able to view flash animation on their systems. I've had trouble with PC users having Flash 7 viewer installed and not being able to view newer Flash 8 material. In a corporate environment, upgrading to each successive update is like pulling teeth.
Having said that, I don't think animated GIFs are too hard to work with. There is a limitation with color depth and I think various programs produce gifs of varying quality. But everything I've seen have been more than acceptable for web viewing.
I have a few examples on my website below. Check out the entries for "Goodbye Daisy," "Sporting My New Duds," and "An Important Message." I used Adobe ImageReady.
==> www.DirtDoog.com <==</a>
Place A Virtual Pin On Putt-Putt's GuestMap!

I just installed the new firefox for Mac OSX 10.6.8 and when I select an image on a site (right click and copy) and paste in Photoshop 5.5, the image lightens. It does not do this in Safari.

Question
I just installed the new firefox for Mac OSX 10.6.8 and when I select an image on a site (right click and copy) and paste in Photoshop 5.5, the image lightens. It does not do this in Safari.

Firefox, Safari, and PhotoShop each handle embedded color profiles differently. For an add-on that makes it easier to experiment with Firefox's color management options, you might be interested in: [https://addons.mozilla.org/en-US/firefox/addon/color-management/ Color Management :: Add-ons for Firefox]. I haven't tried it myself.

ReportBuilder. Centering image in Report

Hello everybody,
I need help in centering image in Report.
Thanks
http://firebird-vbnet.blogspot.com/

Hi giovannigiorgio,
According to your description that you want to know how to centering an image in ReportBuilder, right?
Before centering the image, we should be clear about some of the position related properties, only after we have done the proper setting of them can we be able to make the image to display in the center of the page.
For physical page renderers, it's important to keep in mind the concept of Usable Area. The Usable Area is the amount of space left on a page for your report to be drawn after reserving space for margins, headers and footers, and column spacing (for
multi-column reports).
Horizontal usable area:
X = Page.Width - (Left Margin + Right Margin)
Vertical usable area:
Y = Page.Height - (Top Margin + Bottom Margin + Header Height + Footer Height)
I suppose there is only image in the page. Please following the steps below to check all the related properties of size and center the image.
Right click on Report area and select the Report Properties
Make a note of the values for Page width(8.5), Page Height(11in), Left margin(1in), Right margin(1in),Top margin(1in),Bottom margin(1in)
Close and go back to the design surface and in the Properties window, select Body
Click the + symbol to expand the Size node and do setting as below:
Body Width <=Page width- Left margin -Right margin(Body Width <=6.5)
Body Height <=Page Height- Top margin -Bottom margin-Header Height-FooterHeight(Body Height <=11-1-1-1-1=7)
Right click the body area to insert an image and in the Image properties window select the size and check the “fit to size”
the image will fit the size of the image item, we can set the position(Location and size) properties to determine the display of the image now
In the Image properties, Set the value for position(Location and size) (according to the best Resolution of image to set the values of the location):
Location left = (Body Width – Width of Image) /2 (Location left =(6.5-4.5)/2)
Location Top =(Body Height – Height of Image) /2 (Location Top =(7-5) /2)
If the page both include the image and the table, we should also consider the size of the table(Column Spacing in the width and Row Spacing in the height).
Article about the Pagination in Reporting Services for your reference:
http://msdn.microsoft.com/en-us/library/dd255278.aspx
If your problem still exists, please feel free to ask
Regards
Vicky Liu

How do I block individual pictures or images (not entire sites)

.
how do I block individual pictures or images (not entire sites) ?
------- '''SOLVED''' ------

Someone told me to download 'adblock plus' It did the trick and more. I recommend it to everyone. Bill

Re-sizing images in fluid grid layout (responsive site design)

I have an image that I placed in dreamweaver cc. It scales great in all deives and browsers. The thing is I want to make some small ajustments with its height in the differant devices and when I do so in one device it screws everything up in all the others terribly.

Mr.adobe2341 wrote:
I have an image that I placed in dreamweaver cc. It scales great in all deives and browsers. The thing is I want to make some small ajustments with its height in the differant devices and when I do so in one device it screws everything up in all the others terribly.
Throw us some code.......preferable a link url to what you have so far.

How to design a fluid site at a specific largest size?

I liked the sizing of the "desktop" preview standard in dreamweaver so I mocked up a whole site at that size only to find out there are sizes above it that stretch out the page. Should I ALWAYS design websites at the largest size ( 1580 w x 1050 h ) so I am sure it won't scale up at all? The pages size down perfectly so I know I have the space settings and text (% and em) set up correctly. Why wouldn't it just size up?
Is there a way I can set the max size? I have the desktop size at 12 column with a fill size of 80%. Above the picture it says 1232px.
Oh, I wanted to make a site at the 960 fluid grid size.

I changed the max width for the desktop layout to be 960px, which worked fine but I am confused as to what the options are in the New Fluid Grid Layout dialog box. The phone and tablet view are fine. But the desktop says 1232px. I am guessing that is for the width. Then I have the percentage set to 80%. So now it is 80% of 1232 which would be around 985? I create the pages as so and click on the desktop view. But it says 1000 x 888. Where did that come from? The tablet says it is 768, and the phone says 480, just as it did in the dialog box.
The actual grid area for the desktop view is 800px, the 80% I set before. So now I change that to be 96% so the grid is 960px wide, the width I want. This would work perfectly fine for me if it never got bigger than the 960px. What I don't get is the three settings (desktop, tablet, and phone) are the points at which the design changes if I want, correct? So why would there be any options bigger than the desktop size???
If the desktop size is the size I want the design to be at its' largest, it should continue to stretch to the 1600 x 1200 maximized that is listed....
I spent a day designing a site at the 960px wide only to find when I expand my window past that point, it stretches the grid area to that 1600 x 1200 w. I made all my images in the 3 different sizes to accomodate different media viewings. Why do I have the option to put in custom sizes if it doesn't matter that it will go larger and distort everything?
Is the correct way to just set the number of columns I want then set a min and max width? I figured it would just create the grid how I wanted it in the first place.

IWeb site update problem-app missing images/files, but site is ok

I created and uploaded a web site to my .mac (yeah, MobileMe) and it displays just fine. I have visited it from a couple of different comps. The problem is that I want to add/update files/pages, but when I open iWeb, several of the images/audio files do not display: shows a x-through and a centered question mark. They are in the sites idisk folder and in the laptop's copy of the files. When I try to replace the missing images/files by dragging onto the iWeb drafting page the following message appears: "the file can't be used because you don't have access privileges, or because it contains no content or was corrupted."
I'm afraid to make any updates for fear of losing what is already published.
Extra info: have family pack and am switching between .mac accounts because iWeb published to the iDisk corresponding to the account/sub-account you are logged into (BIG pain in the ***! It should have a password protected account toggle like Panther used). I have double-checked that the files for this site are only in the one iDisk account (am redirecting my masked domain url to the .mac iDisk server-works great.
Any ideas?

The upgrade from '06 to '08 which changed the domain.sites to a domain.sites2 caused more confusion, disasters and lost web sites than the bug ridden introduction of '09.
I ended up rebuilding all my sites from new, blank domain files in '08 and the conversion to '09 went OK apart from '09's nasty habit of changing media file links.
Fortunately, I have very little QuickTime content and don't use the iWeb Photos, Albums Blog or Podcast templates.
Most iWeb built sites look pretty awful when users stick to the default page width. I start from a Blank, Black or white page and trash everything on it.
I use the "standard" 980 px page width and most, if not all, of the iWeb themes do not adapt to this.
This is why I constantly ask the question. "Do the iWeb developers actually build any websites with the application?".
Perhaps if they did, we would get more bug free releases and some of the features that "real life" users are requesting.

Slideshow Behind Image in Fluid Design

I'm attempting to have an auto slide show run behind an image of a TV so that the slide show appears to be various screen shots appearing "on" the TV screen. I found this site as a perfect example where the images cycle in the picture frame:
www.bozthebear.com
I need this to be fluid such that it scales with screen size/device (just as the example page does). Thanks in advance for your help!

This was already answered in another discussion
http://forums.adobe.com/message/6058104#6058104
Nancy O.

Images in Fluid Grid

Hi,
I'm guessing this is something simple. I"m new to dreamweaver, but have been coding forever. I started a basic fluid grid site and put a header image in. In Dreamweaver within live view the image scales properly from mobile/tablet/browser views. However, when I preview it in a browser using the preview/debug the image does not scale down. I also noticed that when I changed a simple block background color for the footer it again changes fine in the live view within Dreamweaver, but does not show the change when I preview in a browser. I assume I'm missing something simple here, but I'm not sure what it is. Any thoughts?
Thanks,

First, it would be easier to troubleshoot if we were able to see your live page. If it's too soon to make it public, create a test folder on your server and upload all the files there. Then share that URL here. Only those who follow this thread will be able to find it.
Second thought is, did you save all changed files before you went to the browser to view?
Chris

Placing image throws whole site off.

Help. I've been trying to work this out for hours and hours -
going over to my friends who has a pc. My site works just fine on
most apple browsers.. but not microsoft ie. The problem is the main
image creates extra space to the right when i have it placed in. I
know this because I colored the table behind it. Is there something
I'm missing?
My url example...
http://www.kidlogicdesign.com/pkg_mp3producer.html

>>Does that change fix it on a pc?
Looks alright on FF. Shows the cell background to the left
side on IE(
because cell is wider than image and image is aligned to the
right).
Simplest solution would be to not give the cell a background.
The cell
background will also cause problems if you start increasing
the text size in
FF (ctrl++). As the text size increases and the image size
doesn't change
ofcourse, the cell background starts showing.
<td colspan="3" rowspan="9" valign="top"
bgcolor="#CC9966"><div
align="right"><img src="pkg_mp3producer.jpg"
width="499" height="406"
/></div>
Do you really need the cell background ? You don't intend
showing it, so if
you just remove the background, everything will look the way
it should in IE
PC and FF.
Regarding the space on top. You'll never achieve the sort of
uniformity
you're looking for. Viewers will look at your page with
different screen
resolutions. If I view our page in 800x600 resolution,
top-half of the
screen is empty. If I view the same page in 1280 x 1024, the
page looks
centered. Maybe you're centering the layout based on your
machine screen
resolution, but that may look poor for someone with a 800 x
600 resolution.
If you want to check how your site looks go to
http://browsershots.org You
can get screen shots of your site in different resolutions,
browsers etc.
for free. You'll see what I am trying to explain.
"B-easy on me" <[email protected]> wrote in
message
news:ep84c7$fa7$[email protected]..
> Thanks mista. I like your email address.. I tried what
you said, and I'm
> taking the space at the top into consideration.. it is
sort of an asthetic
> thing.. What I'm aiming for is to have the colored
border be uniform
> around the
> whole page. Does that change fix it on a pc? Btw, I've
tried the
> allignment to
> no success before, but it was align left and center..
>
>
http://www.kidlogicdesign.com/pkg_mp3producer2.html
>
> Thanks!
>

Centering images on fluid site

Similar Messages

Maybe you are looking for