Creating layout within ordered list

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Creating layout within ordered list

Post by nigma »

I'm trying to use ordered lists to display a list of reservations made for various shared research instruments and I'm having trouble formatting the list so that it displays as I want. My markup looks like:

Code: Select all

<h4>Instrument Title</h4>
<ol>
<li>Reservation 1 details</li>
<li>Reservation 2 details</li>
<li>Reservation 3 details</li>
</ol>
I'd like to use CSS to place the heading to the left of the reservation times such that it is horizontally and vertically centered. The main issue I'm having is with the vertical and horizontal centering, as I am able to place the heading to the left with the float property. I've attached a small image of the desired effect. I would greatly appreciate any advice on how to accomplish this.
Attachments
How I'd like the information to be displayed
How I'd like the information to be displayed
List format.tiff (20.73 KiB) Viewed 2856 times
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Creating layout within ordered list

Post by social_experiment »

Got something similar with the css below; the width value determines how close the list is to the heading; Tested it in FF something, IE and Chrome

Code: Select all

h4 {
	float: left;
	width: 20%;			
}
ol {			
	position: relative;
	top: 0;		
	list-style: none;
}
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
Post Reply