SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Align Multiple In A Line

    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
    Code:
    <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
    Code:
    .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.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan,

    Here is the page link, thank you so much!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You have this (just two examples)
    Code:
    <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...
    Code:
    <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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Great info Ryan!

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

    PHP Code:
    <html>
    <
    head>
       <
    title>Align Multiple In A Line</title>
       <
    style>
          .
    dropv, .dropv ul {padding0margin0; list-stylenone;list-style-typenone;position:relative;z-index:99}
          .
    dropv a {displayinlinewidth180px;list-style-typenone;}
          .
    dropv li {floatleftpadding0px 0px 0px 0px 0px 0px;list-style-typenonemargin-bottom:}  /* all list items */
          
    .dropv li li{margin-bottom:1em}
          .
    entry img {vertical-align:top}
          .
    dropv li ul {positionabsolutebackground#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 {leftauto;list-style-typenone;} /* 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


Bookmarks

Posting Permissions

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