Killersites.com Homepage Welcome Guest   |   Register  |  Login
Login Name Password
  Search  
  Index  | Recent Threads  | Unanswered Threads  | Who's Online  | User List  | Help


Quick Go »

No member browsing this thread
Thread Status: Active
Total posts in this thread: 13
Posts: 13   Pages: 2   [ 1 2 | Next Page ]
[ Jump to Last Post ]
Post new Thread
Author
Previous Thread This topic has been viewed 7742 times and has 12 replies Next Thread
Male sparrow
Advanced Member




Joined: Sep 21, 2005
Post Count: 221
Status: Offline
Reply to this Post  Reply with Quote 
sad bullet points in 2 columns

Hi

I am trying to make bullet points in 2 columns like this

<div class="column1">
<ul class="orange">
<li><div style="color:black;">this is a ?</div></li>
<li><div style="color:black;">this is b</div></li>
<li><div style="color:black;">this is c</div></li>
<li><div style="color:black;">this is d</div></li></ul>
</div>

<div class="column2">
<ul class="orange">
<li><div style="color:black;">this is f</div></li>
<li><div style="color:black;">this is g</div></li>
<li><div style="color:black;">this is h</div></li>
<li><div style="color:black;">this is i</div></li></ul>
</div>

CSS code.....

#column1 {
float left;
width 200px;
}

#column2{
float right;
width 200px;
}

But it all all bullets up in one column, how do you make into 2 columns?

Thanks

[Feb 11, 2008 1:01:07 PM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male Wickham
Advanced Member
Member's Avatar

UK
Joined: Sep 17, 2007
Post Count: 590
Status: Offline
Reply to this Post  Reply with Quote 
Re: bullet points in 2 columns

Float: left in both divs will make them sit side by side:-

<div class="column1" style="float: left;">............</div>
<div class="column2" style="float: left;">............</div>

or put the float: left; in the class styles.

Edit:- you have the second as float: right which should be OK; with either code make sure a containing div or page is wide enough for the two divs or the second will show below.

Edit 2:- I've just seen your real error; the styles are for an id but the markup is for a class. The styles should be
.column1 {.........}
.column2 {.........}
----------------------------------------
Code downloaded to my PC will be deleted in due course.
WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768.
IE6 on W98 with 800*600.
----------------------------------------
[Edit 3 times, last edit by Wickham at Feb 11, 2008 1:17:39 PM]
[Feb 11, 2008 1:11:59 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male newseed
Advanced Member
Member's Avatar


Joined: Apr 2, 2005
Post Count: 2139
Status: Offline
Reply to this Post  Reply with Quote 
Re: bullet points in 2 columns

You can make one list into multiple columns:

HTML:

<div class="orange">
<ul>
<li>this is a ?</li>
<li>this is b</li>
<li>this is c</li>
<li>this is d</li>
<li>this is f</li>
<li>this is g</li>
<li>this is h</li>
<li>this is i</li>
</ul>
</div>

CSS code.....

.orange ul {
float left;
width 400px;
}

.orange ul li {
float left;
width 200px;
}

The first properties is giving the <ul> list an overall width whereas the second properties <li> is divided equally to how many columns you desire. In this case, you want two columns and so you give the <li> half the value of the overall <ul> width.


On a seperate note: You were using classes and ID's wrong. This is the correct way:

class="name" (html) - - - .name { } (css)

id="name" (html) - - - #name { } (css)

Use ID's for layouts and use classes if something has to be reused again on the same page.

EDIT: If you want to color your text just add color: black; to .orange ul li
----------------------------------------
Success is based on how much you spend. If it's not money, then the alternative is your time.
The Kasper Group

----------------------------------------
[Edit 1 times, last edit by newseed at Feb 11, 2008 1:21:47 PM]
[Feb 11, 2008 1:18:46 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Female lm
Advanced Member
Member's Avatar


Joined: Oct 27, 2004
Post Count: 2550
Status: Offline
Reply to this Post  Reply with Quote 
Re: bullet points in 2 columns

i didnt check i yet myself but isnt it so that if you float all li left and dont give a height to ul ( = the height of the first column), all li will be postitioned in one column on a left side?

I'd rather write HTML with 2 ul's for 2 columns and assign one class for both uls with ul and li floating left.
----------------------------------------

My blog

[Feb 11, 2008 1:35:52 PM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male Wickham
Advanced Member
Member's Avatar

UK
Joined: Sep 17, 2007
Post Count: 590
Status: Offline
Reply to this Post  Reply with Quote 
Re: bullet points in 2 columns

I've just checked Newseed's solution; it's a neat alternative to two divs with float: left;
BUT
he left out the : in the styles so it didn't work at first.

.orange ul {
float: left;
width: 400px;
}

.orange ul li {
float: left;
width: 200px;
}

and of course it isn't suitable if you want the second list to float: right with a large space in between the columns.

Another thing about Newseed's code is the the li items go
a on the left, b on the right
c on the left, d on the right, etc.
which isn't the order they were coded.
----------------------------------------
Code downloaded to my PC will be deleted in due course.
WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768.
IE6 on W98 with 800*600.
----------------------------------------
[Edit 1 times, last edit by Wickham at Feb 11, 2008 1:56:43 PM]
[Feb 11, 2008 1:48:42 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male newseed
Advanced Member
Member's Avatar


Joined: Apr 2, 2005
Post Count: 2139
Status: Offline
Reply to this Post  Reply with Quote 
Re: bullet points in 2 columns

i didnt check i yet myself but isnt it so that if you float all li left and dont give a height to ul ( = the height of the first column), all li will be postitioned in one column on a left side?

I'd rather write HTML with 2 ul's for 2 columns and assign one class for both uls with ul and li floating left.


Why don't you try it and see? biggrin

Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>Two-column List</title>
<style type="text/css">

ul#two-column {
float:left;
width: 300px;
margin: 5px 0 10px 35px;
padding: 0;
}

ul#two-column li {
float:left;
width: 150px;
margin: 5px 0 0 0;
padding: 0;

}
</style>
</head>

<body>
<ul id="two-column">
<li>Fort Walton Beach</li>
<li>Destin</li>
<li>Niceville</li>
<li>Navarre</li>
<li>Crestview</li>
<li>Defuniak Springs</li>
<li>Freeport</li>
<li>Santa Rosa Beach</li>
<li>Panama City Beach</li>
<li>Panama City </li>
</ul>
</body>
</html>

----------------------------------------
Success is based on how much you spend. If it's not money, then the alternative is your time.
The Kasper Group

----------------------------------------
[Edit 2 times, last edit by newseed at Feb 11, 2008 2:46:02 PM]
[Feb 11, 2008 2:44:20 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Female lm
Advanced Member
Member's Avatar


Joined: Oct 27, 2004
Post Count: 2550
Status: Offline
Reply to this Post  Reply with Quote 
Re: bullet points in 2 columns

not today biggrin but i would be glad to see your test page.
----------------------------------------

My blog

[Feb 11, 2008 2:48:55 PM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male newseed
Advanced Member
Member's Avatar


Joined: Apr 2, 2005
Post Count: 2139
Status: Offline
Reply to this Post  Reply with Quote 
Re: bullet points in 2 columns

Another thing about Newseed's code is the the li items go
a on the left, b on the right
c on the left, d on the right, etc.
which isn't the order they were coded.

If the order is not an issue then it's the proper ideal way to created multi-column list. Otherwise, yes he would have to seperate them into different list and place them divs to so that they appear in the order he desires.

@Im: - (newseed acting like a little child) I donwanna doit! Ya doit! tongue

biggrin
----------------------------------------
Success is based on how much you spend. If it's not money, then the alternative is your time.
The Kasper Group

----------------------------------------
[Edit 1 times, last edit by newseed at Feb 11, 2008 3:00:03 PM]
[Feb 11, 2008 2:59:17 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Female lm
Advanced Member
Member's Avatar


Joined: Oct 27, 2004
Post Count: 2550
Status: Offline
Reply to this Post  Reply with Quote 
Re: bullet points in 2 columns

well it is already 10 pm so all i can do is to give some( free) advices and stare on screen laughing
----------------------------------------

My blog

[Feb 11, 2008 3:01:31 PM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male newseed
Advanced Member
Member's Avatar


Joined: Apr 2, 2005
Post Count: 2139
Status: Offline
Reply to this Post  Reply with Quote 
Re: bullet points in 2 columns

well it is already 10 pm so all i can do is to give some( free) advices and stare on screen laughing

My 'free advise' are a buck a piece! Of course I end up giving it all to my wife! I'd always say..."Happy Wife...Happy Life!"
----------------------------------------
Success is based on how much you spend. If it's not money, then the alternative is your time.
The Kasper Group

[Feb 11, 2008 3:04:23 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Posts: 13   Pages: 2   [ 1 2 | Next Page ]
[ Jump to Last Post ]
Show Printable Version of Thread  Post new Thread