9 Replies - 655 Views - Last Post: 26 February 2014 - 03:15 PM

#1 ishkabible  Icon User is offline

  • spelling expret
  • member icon




Reputation: 1622
  • View blog
  • Posts: 5,709
  • Joined: 03-August 09

Horizontally place multiple lists

Posted 24 February 2014 - 04:03 PM

Ok so I can't seem to find this online because all every time I try goggle I get results for a single list split up into multiple columns. I want multiple lists (scrolable lists if it matters; I figured I'd get to that next though) to be side by side and NOT vertical. not vertical is of quite a bit of importance. I know I've seen tables for this kind of thing before but I've always how abusive it can be to use tables just to align items for formatting reasons and not to display tabular information.

How can I do this?

Is This A Good Question/Topic? 0
  • +

Replies To: Horizontally place multiple lists

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3480
  • View blog
  • Posts: 11,875
  • Joined: 12-December 12

Re: Horizontally place multiple lists

Posted 24 February 2014 - 04:09 PM

Could you provide a screenshot or mock-up of some kind?

Would it be like:

o Item of list1    o Item of list2    o Item of list3
o Item of list1    o Item of list2    o Item of list3
o Item of list1    o Item of list2    o Item of list3
o Item of list1    o Item of list2    o Item of list3

Was This Post Helpful? 1
  • +
  • -

#3 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3480
  • View blog
  • Posts: 11,875
  • Joined: 12-December 12

Re: Horizontally place multiple lists

Posted 24 February 2014 - 04:15 PM

Which would be:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="uft-8">
    <title>Page Title</title>
    <meta name="description" content="The Description">
    <meta name="author" content="Andrew">
<style>
    ul {
        display: inline-block;
        width: 250px;
        height: 400px;
        float: left;
        outline: 1px solid green;
    }
</style>
</head>
<body>
<ul>
    <li>Item of List 1</li>
    <li>Item of List 1</li>
    <li>Item of List 1</li>
    <li>Item of List 1</li>
</ul>
<ul>
    <li>Item of List 2</li>
    <li>Item of List 2</li>
    <li>Item of List 2</li>
    <li>Item of List 2</li>
</ul>
<ul>
    <li>Item of List 3</li>
    <li>Item of List 3</li>
    <li>Item of List 3</li>
    <li>Item of List 3</li>
</ul>
</body>
</html>

Was This Post Helpful? 2
  • +
  • -

#4 ishkabible  Icon User is offline

  • spelling expret
  • member icon




Reputation: 1622
  • View blog
  • Posts: 5,709
  • Joined: 03-August 09

Re: Horizontally place multiple lists

Posted 24 February 2014 - 05:32 PM

Perfect! That is what I wanted.

I was able to do the same thing with div tags to add in a header.

Thanks!
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3480
  • View blog
  • Posts: 11,875
  • Joined: 12-December 12

Re: Horizontally place multiple lists

Posted 24 February 2014 - 05:33 PM

No worries ;)
Was This Post Helpful? 0
  • +
  • -

#6 ishkabible  Icon User is offline

  • spelling expret
  • member icon




Reputation: 1622
  • View blog
  • Posts: 5,709
  • Joined: 03-August 09

Re: Horizontally place multiple lists

Posted 24 February 2014 - 10:07 PM

ok now I can't seem to get things to show up under these columns. everything prints to the side of the columns. The following is written in django template language.

<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
    #wrapper
    {
      width: 100px;
      height: 220px;
      float: left;
    }
    ul
    {
      overflow: scroll;
      height: 200px;
      list-style-type: none;
      outline: 1px solid green;
    }
    ul li {
        margin-left: -25px
    }
  </style>
</head>
<body>
{{file_id}}
<form>
{% for col in columns %}
	<div id="wrapper">
        <select>
        {% for v in columnTypes %}
            {% if col.guess == v %}
                <option id="col{{ forloop.counter }}" value="{{v}}" selected="selected">{{v}}</option>
            {% else %}
                <option id="col{{ forloop.counter }}" value="{{v}}">{{v}}</option>
            {% endif %}
        {% endfor %}
        </select>
        <ul>
          <left>
	  {% for v in col.rows %}
	    <li>{{v}}</li>
	  {% endfor %}
          </left>
	</ul>
        </div>
{% endfor %}
<input type="submit">
</form>
{{data}}
</body>
</html>


I cant get the submit button and the data printed out by {{data}} to be below the lists.
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3480
  • View blog
  • Posts: 11,875
  • Joined: 12-December 12

Re: Horizontally place multiple lists

Posted 24 February 2014 - 11:55 PM

Post the resulting HTML as well. A screenshot could help as well.

This post has been edited by andrewsw: 24 February 2014 - 11:57 PM

Was This Post Helpful? 0
  • +
  • -

#8 ishkabible  Icon User is offline

  • spelling expret
  • member icon




Reputation: 1622
  • View blog
  • Posts: 5,709
  • Joined: 03-August 09

Re: Horizontally place multiple lists

Posted 25 February 2014 - 11:40 PM

Posted Image

see how the submit button is along side the drop down menus. I'd like it to be below.
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3480
  • View blog
  • Posts: 11,875
  • Joined: 12-December 12

Re: Horizontally place multiple lists

Posted 26 February 2014 - 03:02 PM

The Django isn't relevant to your question, you should just post the css and resultant html. Once the issue is solved it will be up to you to modify your Django to implement the solution :)

Anyways, your div is floated-left and the submit button is outside this div, so will pop-up aside the floated doubry.

Try adding clear: both (or left) to the submit button, or perhaps put this button in a label with display: block.
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3480
  • View blog
  • Posts: 11,875
  • Joined: 12-December 12

Re: Horizontally place multiple lists

Posted 26 February 2014 - 03:15 PM

BTW The outline css-rule should be removed, it is only a debugging tool ;) .. and I am not sure that you actually need to float the div to the left, particularly as you don't want anything (the submit button) sitting beside it.

Do you really need to use li, if you are going to remove the bullets..? However, I appreciate that this is often done to create menus.

And I would probably set the gap on their left by changing the padding-left of the ul which defaults to 40px, rather than using a negative margin. It doesn't matter though.. I'm just particular - or peculiar, if you prefer ;)

This post has been edited by andrewsw: 26 February 2014 - 03:30 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1