Align Multiple In A Line

[Stormy Para]

Hello all, I am trying to align all the images in a row. But right now, the image with the drop down buttons function drops down to another row.

Here is the link

How do I align it to be link this?

I have tried using the float left but it still does not work.

Here are my codes:

Page

<img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Header.jpg" alt="" title="" width="825" height="85" class="alignnone size-full wp-image-615" />
<img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Left.jpg" alt="" title="" width="167" height="30" class="alignnone size-full wp-image-609" /><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_AboutDenso.jpg" alt="" title="" width="82" height="30" class="alignnone size-full wp-image-24" /><img  src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_News.gif" alt="" title="" width="47" height="30" class="alignnone size-full wp-image-12" /><ul class="dropv"><li><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Products.gif" alt="" title="" width="60" height="30" class="alignnone size-full wp-image-13" /><ul><li><a href="http://insurancecommissionrefund.com/testwebsite/general-purpose-boat/">General Purpose Boat</a></li>
      <li><a href="http://insurancecommissionrefund.com/testwebsite/accommodation-work-boats/">Accommodation Work Boats</a></li>
      <li><a href="http://insurancecommissionrefund.com/testwebsite/work-barge/">Work Barge</a></li>
      <li><a href="http://insurancecommissionrefund.com/testwebsite/seismic-support-vessels/">Seismic Support Vessels</a></li>
      <li><a href="http://insurancecommissionrefund.com/testwebsite/supply-vessels/">Supply Vessels</a></li>
      <li><a href="http://insurancecommissionrefund.com/testwebsite/others/">Others</a></li>
      </ul>
    </li>
   </ul><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Recruitment.gif" alt="" title="" width="78" height="30" class="alignnone size-full wp-image-16" /><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Contact.gif" alt="" title="" width="57" height="30" class="alignnone size-full wp-image-17" /><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Sitemap.gif" alt="" title="" width="60" height="30" class="alignnone size-full wp-image-18" /><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Right.jpg" alt="" title="" width="274" height="30" class="alignnone size-full wp-image-29" />

CSS

.dropv, .dropv ul {padding: 0; margin: 0; list-style: none;list-style-type: none;position:relative;z-index:99}
.dropv a {display: inline; width: 180px;list-style-type: none;}
.dropv li {float: left; padding: 0px 0px 0px 0px 0px 0px;list-style-type: none; margin-bottom:0 }  /* all list items */
.dropv li li{margin-bottom:1em}
.entry img {vertical-align:top}
.dropv li ul {position: absolute; background: #46558a;opacity:0.8;
filter:alpha(opacity=80); padding: 0px 0px 0px 0px; width: 180px; 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;font-size: 14px; font-weight:bold; 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;}

Thank you for any help rendered in advance.

[RyanReese]

Can you give us the page? It makes it easier to debug. Especially because most of your code is just images (which we don't have access to.)

[Stormy Para]

Hi Ryan,

Here is the page link, thank you so much!

[RyanReese]

You have a really awkward setup for the HTML. Not really possible as it stands.

Could you move the images on the first part of the navigation, into the same <ul> where the rest is? That would be the easiest/best solution . I don't know why you have those two parts separated right now.

[Stormy Para]

You have a really awkward setup for the HTML. Not really possible as it stands.

Could you move the images on the first part of the navigation, into the same <ul> where the rest is? That would be the easiest/best solution . I don't know why you have those two parts separated right now.

Hi Ryan,

Sorry, I do not get what you are trying to say here

[RyanReese]

You have this (just two examples)

<img src="http://insurancecommissionrefund.com...AboutDenso.jpg" alt="" title="" width="82" height="30" class="alignnone size-full wp-image-24" /><img  src="http://insurancecommissionrefund.com...4/Nav_News.gif" alt="" title="" width="47" height="30" class="alignnone size-full wp-image-12" />

That depicts the top part of the navigation (before the drop). Just go into the <ul><li> stuff and turn the above code, into more of that.

So the above code would basically be...

<li><a href="about.php"><img src="http://insurancecommissionrefund.com...AboutDenso.jpg" alt="" title="" width="82" height="30" class="alignnone size-full wp-image-24" /></a></li>
<li><a href="news.php"><img  src="http://insurancecommissionrefund.com...4/Nav_News.gif" alt="" title="" width="47" height="30" class="alignnone size-full wp-image-12" /></a></li>

Place in the dropdown accordingly (it'd be at the start of the list. Since it appears first).

I feel like I explained that bad, but the code examples should have you understand what I mean .

[tom8]

Great info Ryan!

@Stormy, try the code I got below and see if this is what you are looking for:

<html>
<head>
   <title>Align Multiple In A Line</title>
   <style>
      .dropv, .dropv ul {padding: 0; margin: 0; list-style: none;list-style-type: none;position:relative;z-index:99}
      .dropv a {display: inline; width: 180px;list-style-type: none;}
      .dropv li {float: left; padding: 0px 0px 0px 0px 0px 0px;list-style-type: none; margin-bottom:0 }  /* all list items */
      .dropv li li{margin-bottom:1em}
      .entry img {vertical-align:top}
      .dropv li ul {position: absolute; background: #46558a;opacity:0.8;filter:alpha(opacity=80); padding: 0px 0px 0px 0px; width: 180px; 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;font-size: 14px; fontont-weight:bold; 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;}
   </style>
</head>
<body>

<img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Header.jpg"
     alt="" title="" width="825" height="85"
   class="alignnone size-full wp-image-615" />

<ul class="dropv">
   <li>
      <img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Left.jpg"
       alt="" title="" width="167" height="30" class="alignnone size-full wp-image-609" />
   </li>
   <li><a href="#">
      <img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_AboutDenso.jpg"
       alt="" title="" width="82" height="30" class="alignnone size-full wp-image-24" /></a>
   </li>
   <li><a href="#">
      <img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_News.gif"
        alt="" title="" width="47" height="30" class="alignnone size-full wp-image-12" /></a>
   </li>
   <li><a href="#">
       <img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Products.gif"
        alt="" title="" width="60" height="30" class="alignnone size-full wp-image-13" /></a>
    <ul>
       <li><a href="http://insurancecommissionrefund.com/testwebsite/general-purpose-boat/">General Purpose Boat</a></li>
       <li><a href="http://insurancecommissionrefund.com/testwebsite/accommodation-work-boats/">Accommodation Work Boats</a></li>
       <li><a href="http://insurancecommissionrefund.com/testwebsite/work-barge/">Work Barge</a></li>
       <li><a href="http://insurancecommissionrefund.com/testwebsite/seismic-support-vessels/">Seismic Support Vessels</a></li>
       <li><a href="http://insurancecommissionrefund.com/testwebsite/supply-vessels/">Supply Vessels</a></li>
       <li><a href="http://insurancecommissionrefund.com/testwebsite/others/">Others</a></li>
    </ul>
   </li>
   <li><a href="#">
      <img
       src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Recruitment.gif"
       alt="" title="" width="78" height="30"
   class="alignnone size-full wp-image-16" /></a>
   </li>
   <li><a href="#">
      <img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Contact.gif"
       alt="" title="" width="57" height="30" class="alignnone size-full wp-image-17" /></a>
   </li>
   <li><a href="#">
      <img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Sitemap.gif"
   alt="" title="" width="60" height="30" class="alignnone size-full wp-image-18" /></a>
   </li>
   <li><a href="#">
      <img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Right.jpg"
       alt="" title="" width="274" height="30" class="alignnone size-full wp-image-29" /></a>
   </li>
</ul>

</body>
</html>