Help with Aligning all images with drop down function side by side

HTML & CSS
1

Hello all, this is Chris here. I am just starting my hands on learning CSS and has a problem that has been bugging me for days now. I hope I am able to get a solution to my problem here, thanks to all who help in advance.

I am currently using Wordpress to setup my website. This is the Website

I am trying to get the 6 images in the same line, the main logo(Nautika) with some space away from the 5 other images(all the 5 images should be side by side with no space in between). As of right now, the images are not on the same line, is anyone able to enlighten on this issue?

CSS

.dropv, .dropv ul {padding: 0; margin: 0; list-style: none;list-style-type: none;}
.dropv a {display: inline; width: 170px;list-style-type: none;}
.dropv li {float: left; padding: 0px 0px 0px 0px 0px 0px;list-style-type: none; }  /* all list items */
.dropv li ul {position: absolute; background: #46558a;opacity:0.8;
filter:alpha(opacity=80); padding: 0px 0px 0px 0px; width: 170px; left: -9999px;list-style-type: none;} /* second-level lists */
.dropv li:hover ul {left: auto;list-style-type: none;} /* nest list under hovered list items */
.dropv li ul li a {color: #ffffff; text-decoration: none; display: block;list-style-type: none;}
.dropv li ul li a:hover {background:#272364;opacity:0.9;
filter:alpha(opacity=90);list-style-type: none;}

Page Code

<table>
<tbody>
<tr>
<td style="vertical-align: top;" width="195"><a href="http://shedtheweightonline.com/NautikaWebsite/"><img class="alignnone size-full wp-image-70" title="" src="http://shedtheweightonline.com/NautikaWebsite/wp-content/uploads/2012/03/Home_logo.jpg" alt="" width="178" height="67" /></a></td>
<td><a href="http://shedtheweightonline.com/NautikaWebsite/?page_id=35"><img class="alignnone size-full wp-image-110" title="" src="http://shedtheweightonline.com/NautikaWebsite/wp-content/uploads/2012/03/Home_Master.jpg" alt="" width="123" height="67" /></a><ul class="dropv"><li><img class="alignnone size-full wp-image-148" title="" src="http://shedtheweightonline.com/NautikaWebsite/wp-content/uploads/2012/03/HomePage_NautikaFleet.jpg" alt="" width="123" height="67" /><ul>
      <li><a href="#">General Purpose Boat</a></li>
      <li><a href="#">Accommodation Work Vessels</a></li>
      <li><a href="#">Work Barge</a></li>
      <li><a href="#">Seismic Support Vessels</a></li>
      <li><a href="#">Supply Vessels</a></li>
      <li><a href="#">Others</a></li>
      </ul>
    </li>
   </ul><ul class="dropv"><li><img class="alignnone size-full wp-image-149" title="" src="http://shedtheweightonline.com/NautikaWebsite/wp-content/uploads/2012/03/HomePage_GroupOfCompanies.jpg" alt="" width="123" height="67" /><ul>
      <li><a href="#">Novo Crew</a></li>
      <li><a href="#">GCE Anti-corrosion Technology</a></li>
      </ul>
    </li>
   </ul><a href="http://shedtheweightonline.com/NautikaWebsite/?page_id=4"><img class="alignnone size-full wp-image-150" title="" src="http://shedtheweightonline.com/NautikaWebsite/wp-content/uploads/2012/03/HomePage_QualityStandard.jpg" alt="" width="123" height="67" /></a><a href="http://shedtheweightonline.com/NautikaWebsite/?page_id=162"><img class="alignnone size-full wp-image-151" title="" src="http://shedtheweightonline.com/NautikaWebsite/wp-content/uploads/2012/03/HomePage_Contact.jpg" alt="" width="123" height="67" /></a></td>
</tr>
</tbody>
</table>

2

You mean like this:
http://w-cms.info/test/ddimg.html

3

Hi Tom8, thank you for the prompt reply. Yes it is almost what I want but the remaining of the 3 images is not on the same level as the first 2 image.

4

Your page includes awful lots of CSS codes. I’m just started learning it so I could not provide you with a solution till I understand what all those codes mean. Maybe other members here could come up with a fix for you.

5

Hello :).

Ignoring the extremely weird HTML (how you mark up that list of images), to fix this, you just need to float the first anchor in that list. Here is that specific anchor. Just assign a class to it and float it :).

<a href="http://shedtheweightonline.com/NautikaWebsite/?page_id=35" style="
    float: left;
"><img class="alignnone size-full wp-image-110" title="" src="http://shedtheweightonline.com/NautikaWebsite/wp-content/uploads/2012/03/Home_Master.jpg" alt="" width="123" height="67"></a>

You have a number of other issues, unrelated to the problem, that I could talk about, but here is the specific fix you want.

6

Here is how it looks with the change as suggested:
http://w-cms.info/test/dropdown.png

No change if placing it in the img tag.

7

I didn’t say to place it on the image tag ;).

8

Hi RyanReese, thanks for the reply. I have implemented your style float left code and it works great except one thing, please look at the image. The remaining 3 images are not aligned compared to the rest of the images.

9

Is it my browser issue, the image looks more worse in my first initial one.

10

I know you didn’t. The image that I linked to was using float:left in the anchor tag, just as you have suggested; so I put it in the img tag to see if it will work but see no changes. Any other suggestions?

11

It worked for me. And also it worked for the OP ;).

I have to wait for the image to be approved since it’s an attachment, though I don’t notice any real difference in Chrome.

12

Hi, thanks again. Here is the link to the image if you are currently unable to view it via the attachment.

http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/Untitled_2.jpg.

13

His attachment shows it still has the same original problem.

14

No it doesn’t. The original never had them all on the same line. It was on a separate line.

I see that in Chrome too, and I don’t see what the problem with that image is?

15

Please take a closer look. I highlighted with an underline:

As you can see, it is very subtle.

This is what the OP is looking for:

16

Again, recoding your structure to have that list as one entity would be best, although the stuff not lining up is because on “div.post ul, div.page ul” you have a bottom margin of 6px set as default. That’s causing the inconsistant vertical alignment. Set it to 0 for those two <ul>'s in there.

17

Hi Ryan, I have finally achieved what I wanted through your margin bottom 0px, thanks for that. Can you care to enlighten me on that how did you know it is set to 6px default in the first place?

Thanks a million for the help rendered so far.

18

Because in your CSS you have all <ul>s (basically all) set to have that bottom margin. From there it was obvious that that was the cause of it :).

If you don’t have “firebug” installed for firefox on your machine (or use Chromes “inspect element” (available via right click)), then I recommend starting to use/have it. Helps loads.

But that aside, that kidn of spacing had to be from a margin/padding or something along those lines :).

19

Hi Ryan, I will try and learn “Firebug” as you have recommended. I have one last question.

I would like to add a big banner picture right below the Navigation Menu but right now, there is some white spacing between, how do I remove them?

You can look at them here –> http://insurancecommissionrefund.com/testwebsite/

Best Regards,
Chris.

20

Hi,

The spacing underneath the menu is caused by the bottom margin on the list element and the gap under the inline image.

Add This:



.dropv li{margin-bottom:0}
.dropv li li{margin-bottom:1em}
.entry img {vertical-align:top}

I realise you are just starting out but your use of tables just complicates the whole thing and you don’t need any tables at all in there. The menu should be one parent ul with nested lists and not separate ul parents. Don’t add inline rules and don’t use deprecated presentational attributes either.

The page design you have is very simple but made extremely complex by you and wordpress.:slight_smile:

Never do this:


<p>&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />

Non breaking spaces and breaks are not there to make space. Use margins or padding to do that on existing elements and don’t add unnecessary elements to do this.

Your heading structure is incorrect:


<div id="header">
						<div id="logo">
								<h4><a href="http://insurancecommissionrefund.com/testwebsite" title="Home">Nautika | Your preferred quality marine operator since 1992</a></h4>

That h4 should be an h1 and then other headings should follow logically down the page. If you don’t have an h1 then you can’t have an h2, h3 etc either because it would be nonsense. The logo div as a wrapper would be superfluous also as all styles can be applied direct to the h1 element anyway. If you were doing image replacement techniques then use the Gilder/levin approach.

(I don’t do wordpress so someone else will have to help you with specific wordpress issues and tidying up.)