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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Canada
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Float or Center Thumbnail Images

    Hello, I have created my own art portfolio website. I have a question; How do I float or center thumbnail images? (before reading further.. If you simply want to visit my website for to view its source code and to see what I'm talking about.. here and / or at the end of this post.)

    There are "two" thumbnail navigation segments: One for main homepage (index.html, the medium size thumbnail images of my artworks and 2nd smaller ones that are similar to 1st, but smaller for the rest of 5 sub-webpages. Presently both thumbnail navigations are set to left. I've looked at some coding techniques on other websites on such as using block inline or float to center it but I'm not sure how with multiple images (those codings seems to work well with text or images being set to left or right)?

    To keep this a little simpler, I've put in just the HTML & CSS coding for JUST the 2nd Thumbnail Navigation (also because it is similar to 1st medium thumbnail navigation anyway) HTML & CSS coding start below.

    HTML coding for 2nd thumbnail navigation.
    Code:
    <!-- Main Content -->
    <div class="mainc">
    <h2>Art Portfolio Gallery Navigation</h2>
    <a href="artwork_5.html"><img class="imgb" src="The_3D_Reality_Changer-Small_Image.png" alt="Artwork 5" width="86" height="86"></a> <a href="artwork_4.html"><img class="imgb"  src="The_Alcoholic_Bricko_Man-Small_Image.png" alt="Artwork 4" width="86" height="86"></a> <a href="artwork_3.html"><img class="imgb" src="Screenshot_GrimleyForestWebsite-Small_Image.png" alt="Artwork 3" width="86" height="86"></a> <a href="artwork_2.html"><img class="imgb" src="rendered_cf188hornet_2of2-Small_Image.png" alt="Artwork 2 (Series)" width="86" height="86"></a> <a href="artwork_1.html"><img class="imgb" src="Winter_Landscape_Painting-Small_Image.jpg" alt="Artwork 1 (Series)" width="86" height="86"></a>
    CSS coding for 2nd thumbnail navigation.
    Code:
    .mainc
    {
    width:800px;
    margin-left:auto;
    margin-right:auto;
    font-family:Arial, Helvetica, sans-serif;
    text-align:left;
    margin-bottom:50px;
    }
    I would've set the text-align to center but only for just the thumbnail images, not texts.

    If you have time, could you please visit my website for to see what I'm talking about?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Primebluez,
    Have a look at a photo presentation I worked up that would work well for you here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Primebluez (12-12-2012)

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Canada
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Going to Take Time Learning

    Hey, thanks for making that web page. I have altered my medium and small navigations with some minor code changes. However, I suspect the coding you done with that website to demonstrate how to center images is correct and certainly better. Honestly my current understanding of the CSS and HTML coding which at level that you did with that website is nowhere high as yours. I ended up using another div as wrapper and text-align (most likely incorrect way) to center images. So, it will take me some time understanding the whole things you did on that website, the center thing.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Primebluez View Post
    : I ended up using another div as wrapper and text-align (most likely incorrect way) to center images.
    Text align applied to the containing element is a perfectly valid way of centering images since they are inline elements.
    The main reason for so much extra coding in my example page is being able to handle the captions as well.

    It looks like you're doing great though - I love seeing people figure it out for themselves. Good job on the valid markup
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Canada
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    HTML5 Validation Icon

    Your links reference to validating html & css files sure does help. Several errors were found on index & a few pages when I set the doc to just xhtml strict then once I done that, I set it back to just doc html 5 declaration. Everything passed in flying green colour.. but there is no validation icon for passed HTML5, I kinda like the addition of CSS & HTML validation icons to my website . I know this may be not important but I'm just a little curious on how to get the HTML5 icon (I already got the CSS one)? There is only this reference link leading to the index webpage as validated but no icon.


  •  

    Posting Permissions

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