SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    UK
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive UL lists

    Hi,
    I'm a newcomer to web development & design and I'm having a spot of bother with creating a responsive ul list.

    The site I'm working uses the 1140 grid and has a ul in the footer. In particular I'm having difficulty centring the ul and getting it to stay centre when the browser is resized and it eventually overlaps the resized div.

    An example of the code I have been experimenting with is attached below. Does it just need a few tweaks or are there any better solutions? Any advice is gratefully received!!!


    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Rugby Player Positions</title>
    
    
    
    <style type="text/css">       
    
    
    h1{
        padding-left:120px;
    	font-size: 1.5em; /* 25px/16px */
    }
    #content        
    {   
        background-color:#CCC;
        font-size: .75em; /* 12/16 */
        max-width: 1140px; 
        text-align: left; 
        margin: 0px auto; /*auto centers the container */
        padding: 3.27251308901%; /* 25/1140 */
    }
    /*CSS3 multiple columns.*/
    /* Get em size for colums: 232/16 */   
    .columns
    {    
        padding-left: 120px;
        -moz-column-width: 14.5em; /* Firefox */
        -webkit-column-width: 14.5em; /* webkit, Safari, Chrome */
        column-width: 14.5em; 
    }
    /*remove standard list and bullet formatting from ul*/
    .columns ul 
    {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    /* correct webkit/chrome uneven margin on the first column*/
    .columns ul li:first-child
    {
        margin-top:0px;
    }
    
    </style>
    </head>
    <body>
    <div id="content">
        <h1>Rugby Player Positions</h1> 
         <div class="columns">
             <ul>
                <li>Looose Head Prop</li>
                <li>Hooker</li>
                <li>Tight Head Prop</li>
                <li>Lock</li>
                <li>Lock</li>
                <li>Blindside Flanker</li>
                <li>Number 8</li>
                <li>Openside Flanker</li>
                <li>Scrum Half</li>
                <li>Fly Half</li>
                <li>Left Wing</li>
                <li>Inside Centre</li>
                <li>Outside Centre</li>
                <li>Right Wing</li>
                <li>Full Back</li>
               </ul>          
         </div> 
    </div>
    </body>
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Hm, that example seems to do what you want in Chrome at least. What browser are you testing this in?

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    UK
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works in Safari and Chrome. As Firefox can be squashed in more than Safari, it gives me the impression that the ul wouldn't look good when viewed on a phone.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by designclash View Post
    it gives me the impression that the ul wouldn't look good when viewed on a phone.
    Mobile design is a bit more complex than that. By default on an iPhone, for example, if you don't do anything specifically for mobile you will essentially get the desktop view (I tested it, and it appeared very small, with 4 columns). You need things like @media rules to change the display on a mobile device (or at least a smart phone).


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
  •