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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts

    ul's or Tables, side-by-side

    Sorry for the title, what I'm trying to do is have several unordered lists, with maybe 10 - 15 items within them, span across the users screen side-by-side. I want the number of columns across to change based on the users screen size, with those "pushed off" to be placed underneath the lists.

    So, imagine I have 3 unordered lists. If the users screen is wide enough I want them displayed as such:

    Title 1 Title 2 Title 3
    stuff stuff stuff

    However, if the users screen isn't wide enough, I want the third column to be displayed underneath the first:

    Title 1 Title 2
    stuff stuff

    Title 3
    stuff

    I'm eventually going to be having these tables/columns/unordered list (whatever) generated dynamically with PHP as the number required will be user dependent. But I first need to know the proper HTML and/or CSS to generate the code.

    Any help is much appreciated!

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    Try this...
    Code:
    <style type="text/css">
    	.containerDiv .contentDiv {
    		float: left;
    		width: 200px;
    		display: block;
    		border: 1px solid red;
    	}
    </style>
    
    <div class="containerDiv">
    	<div class="contentDiv">
    		<span>content 1</span>
    		<ul>
    			<li>stuff 1</li>
    			<li>stuff 2</li>
    		</ul>
    	</div>
    
    	<div class="contentDiv">
    		<span>content 2</span>
    		<ul>
    			<li>stuff 3</li>
    			<li>stuff 4</li>
    		</ul>
    	</div>
    
    	<div class="contentDiv">
    		<span>content 3</span>
    		<ul>
    			<li>stuff 5</li>
    			<li>stuff 6</li>
    		</ul>
    	</div>
    
    	<div class="contentDiv">
    		<span>content 4</span>
    		<ul>
    			<li>stuff 7</li>
    			<li>stuff 8</li>
    		</ul>
    	</div>
    </div>
    Hope this may help you out...

    Regards,
    Niral Soni

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello comport9,
    This really looks like a good place to use Definition List.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	width: 80%;
    	min-width: 210px;
    	margin: 0 auto;
    	background: #999;
    }
    dl {
    	width: 200px;
    	margin: 5px;
    	float: left;
    	border: 1px #333 solid;
    }
    </style>
    </head>
    <body>
        <div id="container">
        	<dl>
            	<dt>Title 1</dt>
                	<dd>stuff 1</dd>
                    <dd>stuff 2</dd>
            </dl>
            <dl>
            	<dt>Title 2</dt>
                	<dd>stuff 3</dd>
                    <dd>stuff 4</dd>
            </dl>
            <dl>
            	<dt>Title 3</dt>
                	<dd>stuff 5</dd>
                    <dd>stuff 6</dd>
            </dl>
            <dl>
            	<dt>Title 4</dt>
                	<dd>stuff 7</dd>
                    <dd>stuff 8</dd>
            </dl>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Oct 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks. That actually worked perfectly. Only one minor problem is if a list is shorter, as in, fewer li elements, the column moves underneath that one instead... this won't be as issue for me as I'll make sure all elements have the same number. Can I specify a height to fix the problem? (Yes it does)

    As for definition lists, why should I use them in place of ul's? Thanks!

    Follow up question: how do you center the columns? (Not the text inside...)
    Last edited by comport9; 11-14-2012 at 05:22 PM.

  • #5
    New Coder
    Join Date
    Oct 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry to post again, but I'm having difficulties getting the columns to be centered horizontally. When I do get them centered, then the far right column doesn't move when the screen is resized. (Well, it does eventually move, but not the moment the screen is smaller than the column, so what happens is some of the column is off screen...)

    Here's current code:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<link rel="stylesheet" href="test2.css" />
    </head>
    <title>
    test
    </title>
    <body>
    	<div id='news_wrapper'>
    		<ul class='news_ul'>Title One
    			<li class='news_link'>One</li>
    			<li class='news_link'>One</li>
    			<li class='news_link'>One</li>
    			<li class='news_link'>One</li>
    		</ul>
    		<ul class='news_ul'>Title Two
    			<li class='news_link'>One</li>
    			<li class='news_link'>One</li>
    			<li class='news_link'>One</li>
    			<li class='news_link'>One</li>
    		</ul>
    		<ul class='news_ul'>Title Three
    			<li class='news_link'>One</li>
    			<li class='news_link'>One</li>
    		</ul>
    		<ul class='news_ul'>Title Four
    			<li class='news_link'>One</li>
    			<li class='news_link'>One</li>
    			<li class='news_link'>One</li>
    			<li class='news_link'>One</li>
    		</ul>
    		<ul class='news_ul'>Title Five
    			<li class='news_link'>One</li>
    			<li class='news_link'>One</li>
    			<li class='news_link'>One</li>
    			<li class='news_link'>One</li>
    		</ul>
    	</div>
    </body>
    </html>
    And style:

    Code:
    .news_ul {
    	float: left;
    	width: 400px;
    	height: 250px;
    	border: 1px solid red;
    	}
    	
    #news_wrapper {
    	}
    Yes, news_wrapper is empty because nothing I put in it really works. But I'm assuming I have to put something in there...
    Last edited by comport9; 11-14-2012 at 06:04 PM.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    A dl is handy because it includes a built-in title element that suits your needs. Saves putting a class on a ul to style seperately.

    Your snippet you've posted is invalid, several errors there. See the links about validation in my signature line.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Oct 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Not interested in validation ATM. Just testing out concepts and processes (This isn't the HTML that will be on my site...). Are you saying I can't center the div because my html isn't properly validated?
    Last edited by comport9; 11-14-2012 at 06:41 PM.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,478
    Thanks
    0
    Thanked 635 Times in 625 Posts
    Invalid HTML can easily stop the CSS from working properly. When the CSS doesn't work as expected the most obvious thing to check first is to make sure that the HTML is valid.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by comport9 View Post
    Not interested in validation ATM. Just testing out concepts and processes (This isn't the HTML that will be on my site...). Are you saying I can't center the div because my html isn't properly validated?
    No, I'm saying your ul lists are not formed correctly.
    Your div is not centered because you haven't told it to be.

    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Oct 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks. I'll work on that right now. I've set my div's margin's to auto before, however, I can't set the width to 100% and have everything aligned. I have to specify an exact width. Which kinda defeats the purpose of what I'm trying to do.

    My doctype should be valid for HTML5 no? Or is it because I haven't properly validated my code? I'll check on that too.

    Ok, I fixed my code so that I don't have text within the ul's. Was using it because it worked... so as an aside, how do you get a title for the ul's?
    Last edited by comport9; 11-14-2012 at 08:23 PM.

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,478
    Thanks
    0
    Thanked 635 Times in 625 Posts
    Quote Originally Posted by comport9 View Post
    My doctype should be valid for HTML5 no?
    There isn't anything HTML 5 specific in your code so an HTML 4 strict doctype could be used.

    HTML 5 doesn't have a doctype of its own as it currently just uses the short version of the HTML 2+ doctype.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #12
    New Coder
    Join Date
    Oct 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I think this'll be the last time I post about this. (hopefully...)

    But here's my latest code;

    HTML
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<link rel="stylesheet" href="test2.css" />
    	<title>
    	test
    	</title>
    </head>
    <body>
    	<div id='wrapper'>
    		<ul class='ul'>
    			<li class='link'>One1</li>
    			<li class='link'>One2</li>
    			<li class='link'>One3</li>
    			<li class='link'>One4</li>
    		</ul>
    		<ul class='ul'>
    			<li class='link'>One5</li>
    			<li class='link'>One6</li>
    			<li class='link'>One7</li>
    			<li class='link'>One8</li>
    		</ul>
    		<ul class='ul'>
    			<li class='link'>One9</li>
    			<li class='link'>One10</li>
    		</ul>
    		<ul class='ul'>
    			<li class='link'>One11</li>
    			<li class='link'>One12</li>
    			<li class='link'>One13</li>
    			<li class='link'>One14</li>
    		</ul>
    		<ul class='ul'>
    			<li class='link'>One15</li>
    			<li class='link'>One16</li>
    			<li class='link'>One17</li>
    			<li class='link'>One18</li>
    		</ul>
    	</div>
    </body>
    </html>
    Style
    Code:
    .ul {
    	float: left;
    	width: 400px;
    	height: 250px;
    	border: 1px solid red;
    	}
    Works just how I want it to, except that the boxes aren't centered. If I put in a width for the wrapper, then the columns don't shift appropriately. Same thing if I add padding or margin... I don't want any part of the columns disappearing off the side of the screen.

    Why is this so difficult?

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by comport9 View Post
    Thanks. I'll work on that right now. I've set my div's margin's to auto before, however, I can't set the width to 100% and have everything aligned. I have to specify an exact width.
    You can't center a 100% width element. It takes the full width of it's container.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by comport9 View Post
    ... so as an aside, how do you get a title for the ul's?
    Scroll up and see what I said about Definition Lists.

    If your locked in to using a ul, you can put a class on the li that contains your title and style it differently than the other li's.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by comport9 View Post
    Why is this so difficult?
    Isn't this fun

    They don't center because you have them floated left. Your original question asked how to line them up and drop them to the next line when the screen narrowed...that's how floats act.

    If you want them centered,
    Code:
    .ul {
    	width: 400px;
    	height: 250px;
    	margin: 0 auto;
    	border: 1px solid red;
    	}

    Maybe you're looking for something more like this?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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