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,722
    Mentioned
    11 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.)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  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,722
    Mentioned
    11 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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  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,722
    Mentioned
    11 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 .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  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
  •