Heeeeeellllllllp!!!! - Please!!

[jim5358]

Hi everyone.

This is my first shot at building a site from scratch in HTML, though I did cheat and use a blank template from Adobe Dreamweaver.
I inserted a slider widget which I really liked from the exchange, but my pictures have come out really small. When I edit the CSS rule to increase their size (which I am doing by increasing the % - is this correct?) then the slides stick out of the right hand side of the centred 'block' design, and I cant get them to 'justify' to the centre again. Ideally, I'd like the picture display to be the same size as the google maps image on the 'about us' page.
I've spent hours tweaking and adjusting as I'd like to learn how to do this, but cant for the life of me get it going. I'd also like for my 'box' design to be centred vertically - but I've not tried that yet and dont want to be greedy! I would very much appreciate any help/advice you can give me - it's driving me NUTS!
The site in question (please forgive the colour scheme!) is:

www.chrisandersonarchitects.co.uk

[abduraooft]

Please follow the second guideline at http://www.codingforums.com/postguide.htm, regarding thread titles. You may edit your thread to provide a meaningful title. Thanks.

[Arbitrator]

Originally Posted by jim5358

When I edit the CSS rule to increase their size ... then the slides stick out of the right hand side of the centred 'block' design, and I cant get them to 'justify' to the centre again.

If you've sized the image such that it's larger than its container, overflow will occur on the right side of the container. There is no current mechanism to "justify" the overflow such that it occurs evenly on the right and left sides of the container insofar as I'm aware.

Originally Posted by jim5358

(which I am doing by increasing the % - is this correct?)

Size the image to the desired size in an image editor, then specify the image dimensions in the HTML. For the current image, your code would be as follows:

<img alt="Put appropriate fallback text here." width="800" height="504" src="images/Slideshow/Index/homeslide.jpg"/>

Resizing images via CSS is bad practice. This is especially the case with resizing images to be smaller since the full image (with its corresponding file size) must be downloaded; in other words, it's a waste of bandwidth and makes your pages load slower. Doing the opposite—resizing images to be larger—results in pixelated images as the image viewer must synthesize missing image information.

If you want, you can set the size in the CSS instead of the HTML, but, again, the size should match the actual dimensions of the image:

img[src="images/Slideshow/Index/homeslide.jpg"] { width: 800px; height: 504px; }

I would recommend pixels over percentages as far as images go.

Originally Posted by jim5358

Ideally, I'd like the picture display to be the same size as the google maps image on the 'about us' page.

I have no idea where to find this "google maps image on the 'about us' page."

[jim5358]

THANK YOU!! I sincerely appreciate you both taking the time to answer my question!s I hope soon to be able to repay this by helping some other people out on here - as long as its basic enough!

Originally Posted by Arbitrator

If you've sized the image such that it's larger than its container, overflow will occur on the right side of the container. There is no current mechanism to "justify" the overflow such that it occurs evenly on the right and left sides of the container insofar as I'm aware.

Size the image to the desired size in an image editor, then specify the image dimensions in the HTML. For the current image, your code would be as follows:

<img alt="Put appropriate fallback text here." width="800" height="504" src="images/Slideshow/Index/homeslide.jpg"/>

Resizing images via CSS is bad practice. This is especially the case with resizing images to be smaller since the full image (with its corresponding file size) must be downloaded; in other words, it's a waste of bandwidth and makes your pages load slower. Doing the opposite—resizing images to be larger—results in pixelated images as the image viewer must synthesize missing image information.

If you want, you can set the size in the CSS instead of the HTML, but, again, the size should match the actual dimensions of the image:

img[src="images/Slideshow/Index/homeslide.jpg"] { width: 800px; height: 504px; }

I would recommend pixels over percentages as far as images go.

I have no idea where to find this "google maps image on the 'about us' page."