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 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    17
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Help Making Vertical Image/Text List to Horizontol w/ Two Rows

    Hi everybody,

    I've been trying to make a image list w/ text which is vertical by default into something that is horizontal and with two rows so that it can nicely fit into my content area (which has a width of 685 pixels)

    So this is my current code:

    Code:
    <ul>
    <li><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg">Pictures of Pizza</a></li>
    <li><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg">Pictures of Pizza</a></li>
    <li><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg">Pictures of Pizza</a></li>
    <li><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg">Pictures of Pizza</a></li>
    <li><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg">Pictures of Pizza</a></li>
    <li><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg">Pictures of Pizza</a></li>
    <li><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg">Pictures of Pizza</a></li>
    <li><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg">Pictures of Pizza</a></li>
    </ul>
    and I want it to look like this:




    to be a bit more clear, if I add another list item, it should create a third horizontal row automatically. so if I add the below code to the above code after the </li>...

    Code:
    <li><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg">Pictures of Pizza</a></li>
    it will create this result:




    thank you
    Last edited by computerfan; 03-09-2012 at 12:55 AM.

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    I'm usually against using tables but I think it's necessary here. I set the table width to 100% so it will stretch perfectly inside your content area.

    Code:
    <html>
    <head>
        <style type="text/css">
            .style1
            {
                width: 100%;
            }
        </style>
    </head>
    <title></title>
    <body>
    
        <table class="style1">
            <tr>
                <td>
                    <span><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg" alt="" /></a></span><br />
                    &nbsp;&nbsp;
                    <a href="http://www.google.com">Pictures of pizza</a></td>
                <td>
                    <span><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg" alt="" /></a></span><br />
                    &nbsp;&nbsp;
                    <a href="http://www.google.com">Pictures of pizza</a></td>
                <td>
                    <span><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg" alt="" /></a></span><br />
                    &nbsp;&nbsp;
                    <a href="http://www.google.com">Pictures of pizza</a></td>
                <td>
                    <span><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg" alt="" /></a></span><br />
                    &nbsp;&nbsp;
                    <a href="http://www.google.com">Pictures of pizza</a></td>
            </tr>
            <tr>
                <td>
                    <br />
                    <span><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg" alt="" /></a></span><br />
                    &nbsp;&nbsp;
                    <a href="http://www.google.com">Pictures of pizza</a></td>
                <td>
                    <br />
                    <span><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg" alt="" /></a></span><br />
                    &nbsp;&nbsp;
                    <a href="http://www.google.com">Pictures of pizza</a></td>
                <td>
                    <br />
                    <span><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg" alt="" /></a></span><br />
                    &nbsp;&nbsp;
                    <a href="http://www.google.com">Pictures of pizza</a></td>
                <td>
                    <br />
                    <span><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg" alt="" /></a></span><br />
                    &nbsp;&nbsp;
                    <a href="http://www.google.com">Pictures of pizza</a></td>
            </tr>
        </table>
    
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    17
    Thanks
    9
    Thanked 0 Times in 0 Posts
    thanks, that works! but i am looking for it to stay in list format. i would like to use a list and make it horizontal

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Quote Originally Posted by computerfan View Post
    thanks, that works! but i am looking for it to stay in list format. i would like to use a list and make it horizontal
    Oh that's no problem here:

    Code:
    <html>
    <head>
        <style type="text/css">
            .style1
            {
                width: 100%;
            }
        </style>
    </head>
    <title></title>
    <body>
    
        <table class="style1">
            <tr>
                <td>
                    <ul>
                    <li><a href="http://www.google.com">
                        <img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg"></a><br />&nbsp;&nbsp;
                        <a href="http://www.google.com">Pictures of pizza</a></li></ul></td>
                <td>
                    <ul>
                    <li><a href="http://www.google.com">
                        <img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg"></a><br />&nbsp;&nbsp;
                        <a href="http://www.google.com">Pictures of pizza</a></li></ul></td>
                <td>
                    <ul>
                    <li><a href="http://www.google.com">
                        <img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg"></a><br />&nbsp;&nbsp;
                        <a href="http://www.google.com">Pictures of pizza</a></li></ul></td>
                <td>
                    <ul>
                    <li><a href="http://www.google.com">
                        <img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg"></a><br />&nbsp;&nbsp;
                        <a href="http://www.google.com">Pictures of pizza</a></li></ul></td>
            </tr>
            <tr>
                <td>
                    <br />
                    <ul>
                    <li><a href="http://www.google.com">
                        <img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg"></a><br />&nbsp;&nbsp;
                        <a href="http://www.google.com">Pictures of pizza</a></li></ul></td>
                <td>
                    <br />
                    <ul>
                    <li><a href="http://www.google.com">
                        <img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg"></a><br />&nbsp;&nbsp;
                        <a href="http://www.google.com">Pictures of pizza</a></li></ul></td>
                <td>
                    <br />
                    <ul>
                    <li><a href="http://www.google.com">
                        <img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg"></a><br />&nbsp;&nbsp;
                        <a href="http://www.google.com">Pictures of pizza</a></li></ul></td>
                <td>
                    <br />
                    <ul>
                    <li><a href="http://www.google.com">
                        <img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg"></a><br />&nbsp;&nbsp;
                        <a href="http://www.google.com">Pictures of pizza</a></li></ul></td>
            </tr>
        </table>
    
    </body>
    </html>

  • #5
    New Coder
    Join Date
    Jan 2011
    Posts
    17
    Thanks
    9
    Thanked 0 Times in 0 Posts
    thanks 4 the effort sean3838, but that still isn't what i am looking for. i want to make it so if I was to add another list item a new row would start. i don't think that can be done with tables.

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Ok I didn't know you wanted to do that it wasn't in your first post initially. This should work.

    Code:
    <html>
    <head>
        <style type="text/css">
    		#navcontainer ul
    		{
    			margin: 0;
    			padding: 0;
    			list-style-type: none;
    			text-align: center;
    		}
    
    		#navcontainer ul li 
    		{ 
    			display: inline; 
    			float:left;  
    		}
    
    		#navcontainer ul li a
    		{
    			text-decoration: none;
    			padding: .2em 1em;
    		}
    
    		#navcontainer ul li a:hover
    		{
    			color: #000000;
    		}
        </style>
    </head>
    <title></title>
    <body>
    <div style="width:684px;">
    <div id="navcontainer">
    <ul>
    <li><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Pictures of Pizza</a></li>
    <li><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Pictures of Pizza</a></li>
    <li><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Pictures of Pizza</a></li>
    <li><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Pictures of Pizza</a></li>
    <li><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Pictures of Pizza</a></li>
    <li><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Pictures of Pizza</a></li>
    <li><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Pictures of Pizza</a></li>
    <li><a href="http://www.google.com"><img src="http://i3.ytimg.com/vi/F2LDhtA9h-I/default.jpg"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Pictures of Pizza</a></li>
    </ul>
    </div>
    </div>
    
    </body>
    </html>

  • Users who have thanked sean3838 for this post:

    computerfan (03-09-2012)

  • #7
    New Coder
    Join Date
    Jan 2011
    Posts
    17
    Thanks
    9
    Thanked 0 Times in 0 Posts
    beautiful, that is exactly what i needed sean3838! thanks a bunch this is really helpful!!!


  •  

    Posting Permissions

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