SitePoint Sponsor

User Tag List

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

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

    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

    Code:
    .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
    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. #2
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You mean like this:
    http://w-cms.info/test/ddimg.html

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tom8 View Post
    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. #4
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    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)
    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 .
    Code:
    <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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    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)
    I didn't say to place it on the image tag .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

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

    Untitled_2.jpg

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tom8 View Post
    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.
    Is it my browser issue, the image looks more worse in my first initial one.

  10. #10
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I didn't say to place it on the image tag .
    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. #11
    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)
    Quote Originally Posted by tom8 View Post
    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?
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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.
    Hi, thanks again. Here is the link to the image if you are currently unable to view it via the attachment.

    http://insurancecommissionrefund.com...Untitled_2.jpg.

  13. #13
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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.
    His attachment shows it still has the same original problem.

  14. #14
    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)
    Quote Originally Posted by tom8 View Post
    His attachment shows it still has the same original problem.
    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?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #16
    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)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

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

    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. #18
    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)
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #19
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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 .
    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. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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:

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

    Never do this:
    Code:
    <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:
    Code:
    <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.)

  21. #21
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stormy Para View Post
    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.
    I see you have fixed it, with Ryan helps of course. I did make an attempt of doing what he has suggested but looking at all those CSS codes I was overwhelmed. Instead of having him to come back and tell you how to remove the white spacing, you should try to find out how to do it yourself. You might learn something else too along the way and getting the satisfaction of doing it yourself. If you don’t have the time, a donation to him would be nice gesture.

  22. #22
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I did not see Mr. Guru’s post when I was adding mine. Wordpress indeed making it difficult. I’m trying to learn CSS but looking at all those codes just makes my head spin. Hey Chris, there is your answer right there.

  23. #23
    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)
    Quote Originally Posted by tom8 View Post
    If you don’t have the time, a donation to him would be nice gesture.
    Call me stupid, but don't send me free money. Not needed .

    Looks like Paul took care of your question. Should be all set.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  24. #24
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You are far from stupid. How about just hire you instead?

    You guys are the greatest. Wish I have discovered this forum sooner but better than never.

  25. #25
    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)
    Quote Originally Posted by tom8 View Post
    You are far from stupid. How about just hire you instead?

    You guys are the greatest. Wish I have discovered this forum sooner but better than never.
    I never say no to clients . Glad we could help.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •