Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-10-2012, 08:40 PM   PM User | #1
Primebluez
New to the CF scene

 
Join Date: Dec 2012
Location: Canada
Posts: 3
Thanks: 1
Thanked 0 Times in 0 Posts
Primebluez is an unknown quantity at this point
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?
Primebluez is offline   Reply With Quote
Old 12-10-2012, 11:31 PM   PM User | #2
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
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
Excavator is offline   Reply With Quote
Users who have thanked Excavator for this post:
Primebluez (12-12-2012)
Old 12-16-2012, 10:17 PM   PM User | #3
Primebluez
New to the CF scene

 
Join Date: Dec 2012
Location: Canada
Posts: 3
Thanks: 1
Thanked 0 Times in 0 Posts
Primebluez is an unknown quantity at this point
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.
Primebluez is offline   Reply With Quote
Old 12-16-2012, 10:46 PM   PM User | #4
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
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
Excavator is offline   Reply With Quote
Old 12-17-2012, 01:42 PM   PM User | #5
Primebluez
New to the CF scene

 
Join Date: Dec 2012
Location: Canada
Posts: 3
Thanks: 1
Thanked 0 Times in 0 Posts
Primebluez is an unknown quantity at this point
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.
Primebluez is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:15 AM.


Advertisement
Log in to turn off these ads.