|
| |
|
|
sticks464
Posts: 55
Joined: 10/16/2005
Status: offline
 |
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.
|
|
|
|
sticks464
Posts: 55
Joined: 10/16/2005
Status: offline
|
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
Posts: 6292
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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).
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
sticks464
Posts: 55
Joined: 10/16/2005
Status: offline
|
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
Posts: 6292
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
sticks464
Posts: 55
Joined: 10/16/2005
Status: offline
|
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
Posts: 6292
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
pmagas
Posts: 367
Joined: 3/26/2002
From: St. Louis MO USA
Status: offline
|
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!
_____________________________
Penny
humble webmaster of
We Sell St. Louis
http://www.WeSellStLouis.com
http://www.MarkSellsStLouis.net
http://www.St-Louis-Mo.info
http://www.NealSellsStLouis.com
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
) 
I'm looking forward to having the site built in CSS - maybe it will be less than 6 years between designs now. 