Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Unhappy Heeeeeellllllllp!!!! - Please!!

    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 280 Times in 274 Posts
    Quote Originally Posted by jim5358 View Post
    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.

    Quote Originally Posted by jim5358 View Post
    (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:

    Code:
    <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:

    Code:
    img[src="images/Slideshow/Index/homeslide.jpg"] { width: 800px; height: 504px; }
    I would recommend pixels over percentages as far as images go.

    Quote Originally Posted by jim5358 View Post
    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."
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    jim5358 (01-20-2012)

  • #4
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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!

    Quote Originally Posted by Arbitrator View Post
    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:

    Code:
    <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:

    Code:
    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."


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •