Unordered lists in columns (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

sticks464 -> Unordered lists in columns (10/25/2006 9:25:50)

I am looking for a way to put unordered list in columns with a subject header over each one. I want to use <div>s and not tables. Anyone know of an example I can look at?
It will look like a dropdown menu with the heading and dropdowns visible all the time.
Thanks Guys.



jaybee -> RE: Unordered lists in columns (10/25/2006 9:35:29)

In your css put 

.listdiv {float:left;border:1px solid;}


in the html put 

<div class="listdiv">
<p>Listing 1 Header Text</p>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
</ul>
</div>
<div class="listdiv">
<p>Listing 2 Header Text</p>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
</ul>
</div>
<div class="listdiv">
<p>Listing 3 Header Text</p>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
</ul>
</div>


The above will give you 3 columns that float next to each other, each has a heading above the list and a border round it.

You'll need to add more styles to it maybe to get rid of the bullets and pad out the text so it doesn't hit the borders.

I've used paragraphs <p> for the headings but you could change those to h1 or h2 or whatever.

If you want them to stack instead of float next to each other, take out the float in the css.

As it stands it looks like this:

[image]local://upfiles/9075/1545DE3A81F946579C51668D441F97F7.gif[/image]



sticks464 -> RE: Unordered lists in columns (10/25/2006 10:42:25)

Thanks jaybee, works good in IE but not so in FF. Here's my code, maybe a few hints as to what I have done wrong (not validated yet) that is making positioning so difficult on this one.
CSS
quote:

body {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:90%;
background-color:#33ccff;
}

a:link {
color: #fff;
background-color:#3cf;
text-decoration: underline;
}

a:hover {
color: #000;
background-color: #99ccff;
text-decoration: none;
}

#content {
margin-left:191px;
margin-right:50px;
}

#menu {
float:left;
width:191px;
height:500px;
background:url("../Graphics/navback.gif") no-repeat;
}

.header {
height:102px;
text-align:center;
margin:auto;
padding-top:20px;
padding-bottom:30px;
}

#navigation {
width:191px;
padding-top:10px;
}

#navigation ul
{
list-style-type: none;
padding: 0;
margin: 0;
}

#navigation ul li
{
margin-top: 6px;
}

#navigation ul li a
{
display: block;
width: 100px;
text-decoration: none;
color: #ffffcc;
font-weight:bold;
background: url("../Graphics/button-front.gif");
padding:3px 0;
text-align:center;
margin-left:30px;
}

#navigation ul li a:hover
{
color: #540020;
background-image: url("../Graphics/button-back.gif");
font-weight: bold;
text-decoration:none;
}

#extra {
position:absolute;
margin-top:500px;
width:181px;
height:430px;
background: url("../Graphics/background.gif");
background-repeat: repeat-y;
padding-left:10px;
padding-top:20px;
}

.warning {
border:6px ridge #12a;
text-align:left;
padding:10px;
margin:30px 100px 0 100px;
}

.textbox {
border:6px ridge #12a;
text-align:left;
padding:10px;
margin:0 100px;
}

h1 {
text-align:center;
}

h2 {
text-align:center;
}

.exit {
text-align:center;
}

#mainpicbox1 {
width:480px;
height:303px;
text-align:center;
margin:auto;
background:url("../Graphics/box-1.jpg") no-repeat;
}

#slidepicbox3 {
width:400px;
height:150px;
margin:auto;
text-align:center;
}

.free {
padding-top:50px;
color:#fff;
}

.somediv {
float:left;
width: 275px;
height:150px;
margin-top:30px;
margin-left:105px;
/*padding-left:100px;*/
border:1px solid #000;
}

.somediv .floatbox {
float: left;
width: 105px;
}

* html .somediv p { /* IE 3px jog hack*/
height: 1%;
}

.somediv p {
margin-top: 0;
margin-left: 110px;
font-size:90%;
}


.somediv1 {
float:right;
width: 275px;
height:150px;
margin-top:30px;
margin-left:5px;
margin-right:100px;
border:1px solid #000;
}

.somediv1 .floatbox {
float: left;
width: 105px;
}

* html .somediv1 p { /* IE 3px jog hack*/
height: 1%;
}

.somediv1 p {
margin-top: -150px;
margin-left: 110px;
font-size:90%;
}

.listdiv {
float:left;
margin-top:60px;
margin-left:150px;
}

.listdiv ul {
list-style-type: none;
padding: 0;
margin: 0;
}




html
quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Template 2</title>
<link href="CSS/gal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="menu">
<div id="extra"><img src="Graphics/leftside-banner.gif" alt="left banner" width="120" height="303" border="0" /></div>
<div id="navigation">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

</div>

</div>
<div id="content">
<p class="header"><img src="Graphics/page_ banner.gif" alt="banner" /></p>
<p class="textbox">DESCRIPTION GOES HERE. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. </p>
<h1>Model of the Month</h1>

<div class="somediv">
<div class="floatbox">
<img border="0" src="Gallery info pic/catss01.jpg" alt="Cats photo" /></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla.</p>
</div>
<div class="somediv1">
<div class="floatbox1">
<img border="0" src="Gallery info pic/miche001.jpg" alt="Michele's photo" /></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla.</p>
</div>

</div>
</div>
<div class="listdiv">
<p>Title goes here</p>
<ul>
<li>Name</li>
<li>Name</li>
<li>Name</li>
<li>Name</li>
<li>Name</li>
<li>Name</li>
</ul>
</div>
<div class="listdiv">
<p>Title goes here</p>
<ul>
<li>Name</li>
<li>Name</li>
<li>Name</li>
<li>Name</li>
<li>Name</li>
<li>Name</li>
</ul>
</div>
<div class="listdiv">
<p>Title goes here</p>
<ul>
<li>Name</li>
<li>Name</li>
<li>Name</li>
<li>Name</li>
<li>Name</li>
<li>Name</li>
</ul>
</div>




</div>


</body>
</html>



Thanks



Tailslide -> RE: Unordered lists in columns (10/25/2006 10:55:42)

Give the floated div a width and see if that helps. All floated items must have a specific width unless that item has an inherent width (like an image for instance).



jaybee -> RE: Unordered lists in columns (10/25/2006 11:17:41)

Yes sorry, I assumed you'd put your own width on it to fit in with your page.



sticks464 -> RE: Unordered lists in columns (10/25/2006 11:34:29)

When I give .listdiv a specific width it stacks the on the page. That's why I posted my css and html because I think something I have or haven't done is effecting how the page displays in browsers. Maybe it's the positioning of my div's in the html or something I'm not seeing with the css.



Tailslide -> RE: Unordered lists in columns (10/25/2006 11:43:06)

May be caused by giving the div too wide a div. Try around 200px.

It is normal float behaviour to wrap if there isn't enough room for the floats to sit next to each other either because the float themselves are too wide or because the overall page is fluid and ends up too narrow to fit the floats side by side.



sticks464 -> RE: Unordered lists in columns (10/25/2006 12:27:31)

Thanks Tail, that works ok with a width of 150px if I only use 2 ul's in the div. Each ul increases it's distance from the other when I use margin or padding to position them away from the left. In IE it positions away from the left of the page, in FF it positions away from the #extra on the left. That's why I think something is wrong with my code. But I'm only having these problems when I use a div for content. Would it help if I nested this div inside another and positioned it on the page? Then if I want my ul's to be closer together I can decrease the margin or padding.



Tailslide -> RE: Unordered lists in columns (10/25/2006 12:43:26)

Try to avoid using padding and margins together as you may run into problems with IE. Use margins only to space stuff out and it might be better.

There is an IE bug which doubles the width of margins of one div from another sometimes - if you run into this then add display:inline to the affected div. This can cause issues so only use it if you have to.

It may help you to nest the divs but I tend to try to avoid doing this as there's usually a way around it without adding the unecessary extra markup. You could look into using min-width on the main wrapper div to ensure the page doesn't go below a certain width (and cause the floats to wrap). This will only work in modern browsers - not IE6 though.



pmagas -> RE: Unordered lists in columns (10/26/2006 18:25:45)

I think I might be doing what you're looking for in the re-design on my site. You can see a sample page here:
test page I think the navigation bar on the left might be what you're looking for. If so, let me know and I'll send you my css file and the include file I use for that menu.

(I'm using an include file for the menu so that when the menu changes, I don't have to update every page.)

Cheers!



c1sissy -> RE: Unordered lists in columns (10/27/2006 14:39:13)

Nice job on the menu Penny, (sorry think Icalled you peggy before, apologize [8|])

I like how you have it set up.



pmagas -> RE: Unordered lists in columns (10/27/2006 14:58:07)

Thank you, Deb!! Now all I have to do is get the rest of the site going. [;)] I'm looking forward to having the site built in CSS - maybe it will be less than 6 years between designs now.

Cheers!



c1sissy -> RE: Unordered lists in columns (10/27/2006 15:00:23)

css is great, and i know you can do it!



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625