Bottom navigation bar headache - Post...

User 120663 Photo


Registered User
60 posts

Hello,
In a previous thread a suggestion was made by one of the forum members (Prism) after evaluating our site. Quote is below:

I looked at your site and thought it well constructed BUT if you look at the bottom right two images They are forcing a horizontal slide to appear in the Browser. I know it is not always possible but if the page can display in a browser without the need to slide the page from side to side or up and down I think that gives the visitor a better experience. You have 7 images possibly stack them 3 on top of 4.


We are tying to fix this and if possible would like to keep the 7 images on one line.
The site is: http://kanidorcreations.com/

Trying to do the bottom navigation bar with thumbnails and title of each page listed under it's corresponding photo, coded as figure and figcaption. But the only way I could get this to display correctly is in a table.

Does anyone have any suggestions how to correct this without having to go to multiple rows on the images?

Thanks,
Peggy
User 187934 Photo


Senior Advisor
20,267 posts
Online Now

I don't have any scroll issues with it.
I'm on 1600X900 Res.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 120663 Photo


Registered User
60 posts

Just for giggles I changed the screen res on our monitor from 1440 x 900 to 800 x 600 and was able to see the issue but again not sure how to fix it unless we go to smaller pixels which could be worse (folks would have a hard time seeing it). The other option is too leave well enough alone but it would have been nice to figure it out.....I think

Steven & Peggy
User 2287960 Photo


Ambassador
580 posts

Eric

I think the problem is the 2 images outside the main area of the site.

There is a lot of space around the images but I can not work out what is causing it, does not appear to be anything in css that is causing it.

Many of styles are inline in HTML and not in css file. div id footer is within div id container. But can not put my finger on what is causing it.

Keith
User 2287960 Photo


Ambassador
580 posts

What is causing the large spaces is <figure>, if you remove them they close up. Not sure what <figure> is.

You will then have to add some css to space out.

New tag in HTML5 http://www.w3schools.com/html5/tag_figure.asp

Keith
User 38401 Photo


Senior Advisor
10,951 posts

Figure is an HTML5 tag representing something similar to what you'd find in a book showing you an example "figure 2.35" with a caption about the image or photo or example etc.

My guess is that has some internal settings for padding and margin at default for that tag that maybe you need to reset to zero or choose a different tag for that.
User 187934 Photo


Senior Advisor
20,267 posts
Online Now

Why not drop the table and add some float properties with the css.
<div class="thumbnail"> Your image code here</div>

.thumbnail
{
float: left;
width: 100px;
margin: 0 15px 15px 0;
}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 120663 Photo


Registered User
60 posts

Eric,
My main problem has been using a photo and needing to add a caption for that photo and get it centered under the picture.

This is what it was:

<!-- <table>
<tr>
<td><a href="index.html" title="Home Page"><figure><img src="images/tn_picnic_3404.jpg" width="100" height="66" alt="Home page" title="Home Page"/><br><figcaption>Home</figcaption></figure></a></td>
<td><a href="about.html" title="About Us"><figure><img src="images/tn_IGP3848.jpg" width="100" height="67" alt="About Us" title="About Us" /><br><figcaption>About Us</figcaption></figure></a></td>
<td><a href="atcd.html" title="Agility Tabletop Course Designer"><figure><img src="images/tn_regular_box_cover.jpg" width="100" height="77" alt="Agility Tabletop Course Designer" title="Agility Tabletop Course Designer" /><br><figcaption>Tabletop Designer</figcaption></figure></a></td>
<td><a href="our%20dogs.html" title="Our Dogs"><figure><img src="images/tn_P_K_R_2214.jpg" width="60" height="90" alt="Our Dogs" title="Our Dogs"/><br><figcaption>Our Dogs</figcaption></figure></a></td>
<td><a href="jewelry.html" title="Custom Jewelry"><figure><img src="images/tn_IGP4201.jpg" width="100" height="64" alt="Custom Jewelry" title="Custom Jewelry"/><br><figcaption>Custom Jewelry</figcaption></figure></a></td>
<td><a href="recipes.html" title="Favorite Recipes"><figure><img src="images/tn_Receipe3397.jpg" width="100" height="67" alt="Favorite Recipes" title="Favorite Recipes"/><br><figcaption>Favorite Recipes</figcaption></figure></a></td>
<td><a href="links.html" title="Favorite Links"><figure><img src="images/tn_IGP3989.jpg" width="100" height="67" alt="Favorite Links" title="Favorite Links"/><br><figcaption>Favorite Links</figcaption></figure></a></td>
</tr>
</table> -->


Changed the code to this: (and it works?:D)

<table>
<tr>
<td><a href="index.html" title="Home Page"><img src="images/tn_picnic_3404.jpg" width="100" height="66" alt="Home page" title="Home Page"/><h4>Home</h4></a></td>
<td><a href="about.html" title="About Us"><img src="images/tn_IGP3848.jpg" width="100" height="67" alt="About Us" title="About Us" /><h4>About Us</h4></a></td>
<td><a href="atcd.html" title="Agility Tabletop Course Designer"><img src="images/tn_regular_box_cover.jpg" width="100" height="77" alt="Agility Tabletop Course Designer" title="Agility Tabletop Course Designer" /><h4>Tabletop Designer</h4></a></td>
<td><a href="our%20dogs.html" title="Our Dogs"><img src="images/tn_P_K_R_2214.jpg" width="60" height="90" alt="Our Dogs" title="Our Dogs"/><h4>Our Dogs</h4></a></td>
<td><a href="jewelry.html" title="Custom Jewelry"><img src="images/tn_IGP4201.jpg" width="100" height="64" alt="Custom Jewelry" title="Custom Jewelry"/><h4>Custom Jewelry</h4></a></td>
<td><a href="recipes.html" title="Favorite Recipes"><img src="images/tn_Receipe3397.jpg" width="100" height="67" alt="Favorite Recipes" title="Favorite Recipes"/><h4>Favorite Recipes</h4></a></td>
<td><a href="links.html" title="Favorite Links"><img src="images/tn_IGP3989.jpg" width="100" height="67" alt="Favorite Links" title="Favorite Links"/><h4>Favorite Links</h4></a></td>
</tr>
</table>
User 2287960 Photo


Ambassador
580 posts

Looking good now but to make it tidy I would make images same height so it all lines up.

Keith
User 464893 Photo


Ambassador
1,611 posts

I agree with Kieth. What a difference. I know the pictures are of different size but straight away the effect is so much pleasing. A bit of tweaking and I think you have it nailed. Congratulations. Tell me you are not pleased with that.

One thing, I love the scenery and will come back to see more later. One thing you mentioned WA & PA now I realise it is aimed at Americans but I am an Aussie and would like to know where those places are.
If you are going to let the world in you have to let them have all the details.

Great site, I have saved it for return. Can't afford to visit so love to see peoples patch, more pictures up soon please :)
The Guy from OZ



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.