Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    SOLVED: Align lists horizontally without using float.

    Hello, I seem to be having some trouble with horizontally aligning 3 unordered lists. Before I start, let me begin by saying I know I have depreciated tags and I am not worried about that right now. I need to fix the current problem at hand. I am currently using float method, however with different resolutions and zooming, the lists go either left or right and do not stay centered. Here is what I have currently.
    Code:
    <style>         
    ul { float:left;  margin:-50px -100px 10px 220px; }
    </style>
    
    <ul>
    <h3> Check Your Mail</h3>
    <li>
    <a href="http://www.mail.yahoo.com" target="_blank">Yahoo</a>
    </li>
    <li>
    <a href="https://login.comcast.net/login" target="_blank">Comcast</a>
    </li>
    <li>
    <a href="https://www.gmail.com" target="_blank">gMail</a>
    </li>
    <li>
    <a href="https://www.hotmail.com" target="_blank">Hotmail</a>
    </li>
    <li>
    <a href="http://mail.aim.com" target="_blank">AIM</a>
    </li>
    </ul>
    
    
    
    <ul>
    <h3> Social Networking</h3>
    <li>
    <a href="http://www.facebook.com" target="_blank">Facebook</a>
    </li>
    <li>
    <a href="https://www.tumblr.com" target="_blank">Tumblr</a>
    </li>
    <li>
    <a href="http://www.linkedin.com" target="_blank">LinkedIn</a>
    </li>
    <li>
    <a href="http://www.twitter.com" target="_blank">Twitter</a>
    </li>
    <li>
    <a href="http://www.formspring.me" target="_blank">Formspring</a>
    </li>
    <li>
    <a href="http://www.youtube.com" target="_blank">YouTube</a>
    </li>
    </ul>
    
    <ul>
    <h3> Games</h3>
    <li>
    <a href="http://www.newgrounds.com" target="_blank">Newgrounds</a>
    </li>
    <li>
    <a href="http://www.pogo.com" target="_blank">Pogo Games</a>
    </li>
    <li>
    <a href="http://www.shockwave.com" target="_blank">Shockwave Games</a>
    </li>
    <li>
    <a href="http://games.yahoo.com" target="_blank">Yahoo Games</a>
    </li>
    </ul>
    Now I found what appears to be a fix. When you zoom or there is a different resolution, the lists stay centered on the page, however I cannot get the lists all on the same line. This is my new code:
    Code:
    <style>     
    ul 
    {
    list-style-position: outside;
    margin: 0 auto;
    padding-right: 25em;
    padding-left: 0em;
    width: 300px;
    }
    
    
    .u2 
    {
    padding-right:0em;
    padding-left: 10em;
    }
    
    .u3 
    {
    padding-right:0em;
    padding-left: 45em;
    }
    </style>
    
    
    
    <ul class="u1">
    <h3> Check Your Mail</h3>
    <li>
    <a href="http://www.mail.yahoo.com" target="_blank">Yahoo</a>
    </li>
    <li>
    <a href="https://login.comcast.net/login" target="_blank">Comcast</a>
    </li>
    <li>
    <a href="https://www.gmail.com" target="_blank">gMail</a>
    </li>
    <li>
    <a href="https://www.hotmail.com" target="_blank">Hotmail</a>
    </li>
    <li>
    <a href="http://mail.aim.com" target="_blank">AIM</a>
    </li>
    </ul>
    
    
    
    
    
    <ul class="u2">
    <h3> Social Networking</h3>
    <li>
    <a href="http://www.facebook.com" target="_blank">Facebook</a>
    </li>
    <li>
    <a href="https://www.tumblr.com" target="_blank">Tumblr</a>
    </li>
    <li>
    <a href="http://www.linkedin.com" target="_blank">LinkedIn</a>
    </li>
    <li>
    <a href="http://www.twitter.com" target="_blank">Twitter</a>
    </li>
    <li>
    <a href="http://www.formspring.me" target="_blank">Formspring</a>
    </li>
    <li>
    <a href="http://www.youtube.com" target="_blank">YouTube</a>
    </li>
    </ul>
    
    
    
    
    <ul class="u3">
    <h3> Games</h3>
    <li>
    <a href="http://www.newgrounds.com" target="_blank">Newgrounds</a>
    </li>
    <li>
    <a href="http://www.pogo.com" target="_blank">Pogo Games</a>
    </li>
    <li>
    <a href="http://www.shockwave.com" target="_blank">Shockwave Games</a>
    </li>
    <li>
    <a href="http://games.yahoo.com" target="_blank">Yahoo Games</a>
    </li>
    </ul>
    So please, I have searched for hours through different forums trying to find a solution and I cannot find one. Thank you.
    Last edited by jbjoker; 07-27-2012 at 06:54 PM. Reason: SOLVED, just changing title

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by jbjoker View Post
    Hello, I seem to be having some trouble with horizontally aligning 3 unordered lists. Before I start, let me begin by saying I know I have depreciated tags and I am not worried about that right now...
    Welcome to the forums!

    If you're referring to your use of the "target" attribute on the anchor tags then I should mention that as of HTML5 (the spec is still not complete, mind you, but it's in use) that one is back on the menu. You haven't provided enough of your code to tell if you're using the HTML5 doctype or not, but you might as well use it at this point. If you're referring to anything else, then I don't see what deprecated tags you are using. The only other issues are with the lack of a "type" attribute on the style tag and the lack of <li></li> tags around your headings in the lists.

    And you SHOULD worry about those things, by the way. Invalid code is difficult to style reliably and since you're struggling with a style issue, it's pretty important to sort it out first. But anyway...I digress.

    Try something like this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>3-Column Lists</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    body{padding:10px;margin-top:50px;}
    #column_wrapper{
    	width:80%;
    	margin:0 auto;
    	overflow:auto;
    	border:1px solid #c4c4c4;
    }
    ul{
    	list-style-position:outside;
    	float:left;
    	width:33.33%;
    	background-color:#caa;
    }
    .u2{
    	background-color:#aca;
    }
    .u3{
    	background-color:#aac;
    }
    li{margin-left:20px;}
    li:first-child{list-style-type:none;border-bottom:1px solid #000;margin-left:0;padding-left:20px;}
    a{text-decoration:none;color:#000;font-weight:bold;}
    </style>
    </head>
    <body>
    <div id="column_wrapper">
    <ul class="u1">
      <li><h3> Check Your Mail</h3></li>
      <li><a href="http://www.mail.yahoo.com" target="_blank">Yahoo</a></li>
      <li><a href="https://login.comcast.net/login" target="_blank">Comcast</a></li>
      <li><a href="https://www.gmail.com" target="_blank">gMail</a></li>
      <li><a href="https://www.hotmail.com" target="_blank">Hotmail</a></li>
      <li><a href="http://mail.aim.com" target="_blank">AIM</a></li>
    </ul>
    <ul class="u2">
      <li><h3> Social Networking</h3></li>
      <li><a href="http://www.facebook.com" target="_blank">Facebook</a></li>
      <li><a href="https://www.tumblr.com" target="_blank">Tumblr</a></li>
      <li><a href="http://www.linkedin.com" target="_blank">LinkedIn</a></li>
      <li><a href="http://www.twitter.com" target="_blank">Twitter</a></li>
      <li><a href="http://www.formspring.me" target="_blank">Formspring</a></li>
      <li><a href="http://www.youtube.com" target="_blank">YouTube</a></li>
    </ul>
    <ul class="u3">
      <li><h3> Games</h3></li>
      <li><a href="http://www.newgrounds.com" target="_blank">Newgrounds</a></li>
      <li><a href="http://www.pogo.com" target="_blank">Pogo Games</a></li>
      <li><a href="http://www.shockwave.com" target="_blank">Shockwave Games</a></li>
      <li><a href="http://games.yahoo.com" target="_blank">Yahoo Games</a></li>
    </ul>
    </div>
    </body>
    </html>
    I whipped up that test in FF and it worked just fine. Test it for other browsers to be sure, but I think that's pretty much all you need. Might be even better to use the HTML5 table display settings to really make it shine if this method falls short... In any case, you have options.
    Last edited by Rowsdower!; 07-26-2012 at 02:06 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    jbjoker (07-27-2012)

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I think we are on the right track and I appreciate the code, however I still have the same issue. The issue is that when the page is zoomed in or out or there is a different resolution, the lists move to the left or the right instead of staying centered. The second code I posted earlier is what I want, but I need the other 2 lists on the same line as well. Floating seems to not be the answer which is why I have been trying to find an alternative. Maybe we can restrict the lists from moving?

  • #4
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The second code is perfect if we can just get the lists on the same line without using float. Any alternatives?

  • #5
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    SOLVED:

    After more hours of research and guess and testing, I have finally found a solution that will keep my lists horizontally aligned and will not move position when page is zoomed or resolutions are different. That solution is a table.
    Code:
    <CENTER>
    <table cellpadding="1">
    <col width="200" />
    <col width="200" />
      <tr>
        <td><b>Check Your Mail</b></td>
        <td><b>Social Networking</b></td>
        <td><b>Game Websites</b></td>
      </tr>
    
      <tr>
        <td>•&nbsp;<a href="http://www.mail.yahoo.com" target="_blank">Yahoo</a></td>
        <td>•&nbsp;<a href="http://www.facebook.com" target="_blank">Facebook</a></td>
        <td>•&nbsp;<a href="http://www.newgrounds.com" target="_blank">Newgrounds</a></td>
      </tr>
      <tr>
        <td>•&nbsp;<a href="https://login.comcast.net/login" target="_blank">Comcast</a></td>
        <td>•&nbsp;<a href="https://www.tumblr.com" target="_blank">Tumblr</a></td>
        <td>•&nbsp;<a href="http://www.pogo.com" target="_blank">Pogo Games</a></td>
      </tr>
      <tr>
        <td>•&nbsp;<a href="https://www.gmail.com" target="_blank">gMail</a></td>
        <td>•&nbsp;<a href="http://www.linkedin.com" target="_blank">LinkedIn</a></td>
        <td>•&nbsp;<a href="http://www.shockwave.com" target="_blank">Shockwave Games</a></td>
      </tr>
      <tr>
        <td>•&nbsp;<a href="https://www.hotmail.com" target="_blank">Hotmail</a></td>
        <td>•&nbsp;<a href="http://www.twitter.com" target="_blank">Twitter</a></td>
        <td>•&nbsp;<a href="http://games.yahoo.com" target="_blank">Yahoo Games</a></td>
      </tr>
      <tr>
        <td>•&nbsp;<a href="http://mail.aim.com" target="_blank">AIM</a></td>
        <td>•&nbsp;<a href="http://www.formspring.me" target="_blank">Formspring</a></td>
        <td>•&nbsp;<a href="http://www.addictinggames.com" target="_blank">Addicting Games</a></td>
      </tr>
      <tr>
        <td></td>
        <td>•&nbsp;<a href="http://www.youtube.com" target="_blank">YouTube</a></td>
        <td></td>
      </tr>
    
    </table>
    </center>
    I appreciate your help, thank you very much and hopefully this can help others who have a similar issue.


  •  

    Posting Permissions

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