...

View Full Version : ul's or Tables, side-by-side



comport9
11-14-2012, 04:36 PM
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!

niralsoni
11-14-2012, 04:54 PM
Try this...


<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

Excavator
11-14-2012, 05:09 PM
Hello comport9,
This really looks like a good place to use Definition List (http://www.w3schools.com/tags/tag_dl.asp).


<!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>

comport9
11-14-2012, 05:19 PM
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...)

comport9
11-14-2012, 05:59 PM
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:



<!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:



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

Excavator
11-14-2012, 06:05 PM
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.

comport9
11-14-2012, 06:29 PM
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?

felgall
11-14-2012, 06:44 PM
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.

Excavator
11-14-2012, 06:59 PM
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:

a valid DocType
an element with a width
that elements right/left margins set to auto

comport9
11-14-2012, 08:09 PM
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?

felgall
11-14-2012, 08:38 PM
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.

comport9
11-14-2012, 11:15 PM
I think this'll be the last time I post about this. (hopefully...)

But here's my latest code;

HTML


<!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


.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? :(

Excavator
11-14-2012, 11:45 PM
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.

Excavator
11-14-2012, 11:47 PM
... 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.

Excavator
11-14-2012, 11:58 PM
Why is this so difficult? :(
Isn't this fun :D

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,
.ul {
width: 400px;
height: 250px;
margin: 0 auto;
border: 1px solid red;
}


Maybe you're looking for something more like this (http://nopeople.com/CSS%20tips/thumbnail%20presentation/index.html)?

comport9
11-15-2012, 05:22 AM
I believe your link directs me to what I want. Thanks! I'll have to check the source out later. I'll let you know how it goes. :)

BTW, what are floats used for exactly? I remember reading somewhere that I should avoid them, but it seems like all the code I come across has them in...

Excavator
11-15-2012, 09:18 AM
BTW, what are floats used for exactly? I remember reading somewhere that I should avoid them, but it seems like all the code I come across has them in...

Floats are how you place two elements beside each other. No reason to avoid them, there are just a few basics you need to know to use them. The box model (http://www.w3.org/TR/CSS2/box.html) and clearing floats (http://www.quirksmode.org/css/clearing.html) would be the most important.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum