Jump to content

How Do I Vertically Align An <ol>

mboehler3

By mboehler3
in CSS

Recommended Posts

mboehler3 Member

mboehler3

Posted
Posted

Hi all, I am writing code to be placed into an e-commerce description. I uploaded the .html file of the code I am creating, which is provided below, as well as a link to the product description on the e-commerce siteHere is my code:http://healthnutsradio.com/xcart.htmlHere is the corresponding code on an e-commerce site:http://www.healthnutsradio.com/store/produ...=259&page=1There are two lists that do not look right on the e-commerce page. "The Vitamon B5, Vitamin C, etc." list that is near the top of the page, as well as the list more down the page that has "The Adrenals, Stress Response, etc." The problem is the list on the right isn't vertically aligned with the list on the left. The one on the right is a little higher up than the list on the left.It's weird because I don't see the problem on my own code, but only on the e-commerce site. IF any one has any suggestions I'm sure they will be most helpful! Thank you for your help and time.

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

I would remove the <div id="leftList">, since you can apply any CSS to the <ol> element itself.Actually, you have a lot of elements you don't need all over your page. For example:

<p><span class="boldWords">

You do not need that <span>, you can put the style on the <p> element:

<p class="boldWords">

Now, back to the actual problem:Since <ol> elements have a margin on the top and bottom, and you had put one of them into a floated <div>, one of the margins remained, while the other one was taken by the <div> holding it.This code should work for you:

<div class="items"><ol class="itemlist left"><li>Vitamin B5</li><li>Vitamin C</li><li>Potassium</li><li>Magnesium</li><li>Flavonoids</li><li>Whole Herb Extracts</li><li>Ashwagandha Root</li></ol><ol class="itemlist"><li>Cultivated Organic American Ginseng Root</li><li>Organic and Kosher Mushrooms</li><li>Reishi Antler Mushroom</li><li>Wild Blueberry</li><li>Lycopene</li><li>Amino Acid</li><li>Kelp and even more.</li></ol></div>

And use this CSS

.items { overflow: auto; } /* This line will make the margins inside it independent from the page flow */.left { float: left; }.itemlist { list-style-image: url(http://www.healthnutsradio.com/main-images/bullet.jpg); }

Link to comment
Share on other sites
jlhaslip Devoted Member

jlhaslip

Posted
Posted

Here is another method to acheive the same effect.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">	<head>		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />		<meta http-equiv="Description" content="File Description" />		<meta http-equiv="Author" content="jlhaslip, jlhaslip@yahoo.ca" />		<meta http-equiv="Title" content="Sample page" />		<meta http-equiv="Expires" content="never" />		<meta http-equiv="Keywords" content="list the page keywords here" />		<title>			Page Title		</title>		<style type="text/css">/*<![CDATA[*/		<!-- <link href="style.css" rel="stylesheet" type="text/css" /> -->		<!-- <link href="print_style.css" rel="stylesheet" type="text/css" /> -->  		/*]]>*/		</style>		<style type="text/css">/*<![CDATA[*/		body { margin: 0; padding: 0;  background-color: #fff; }		h3   { margin: .25em; font-weight: bold; }		p   { padding: .15em; background-color: #fff; }		#outer { width: 1000px; margin: .3em auto; background-color: #fff;   outline: 1px dotted #d11; }		.block { width: 1000px; margin: .3em auto;  background-color: #fff; }		.container2 {		float: left;		width: 50%;		text-align:left;		}		.box {		width: 95%;		margin: .5em auto;		height: 100px;		outline: 1px dotted #d11;		}		/*]]>*/		</style>	</head><!-- -->	<body>		<div id="outer">			<h2>				Equally Spaced Blocks			</h2>			<div class="block">				<h3>					Two Wide				</h3><!-- -->				<div class="container2">					<div class="box">					   					<ol >					<li>Vitamin B5</li>					<li>Vitamin C</li>					<li>Potassium</li>					<li>Magnesium</li>					<li>Flavonoids</li>					<li>Whole Herb Extracts</li>					<li>Ashwagandha Root</li>					</ol>								</div>				</div>				<div class="container2">					<div class="box">											<ol >						<li>Cultivated Organic American Ginseng Root</li>						<li>Organic and Kosher Mushrooms</li>						<li>Reishi Antler Mushroom</li>						<li>Wild Blueberry</li>						<li>Lycopene</li>						<li>Amino Acid</li>						<li>Kelp and even more.</li>						</ol>														 					</div>				</div>			</div><!-- end block 2 wide -->		</div>	</body></html>

Borders are there to assist with a visual representation of the CSS and HTML structure/code.Nice part about this layout is that it centres itself in the containing block automagically.See also: http://www.jlhaslip.trap17.com/sm/5wide/5wide.html

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted
Hey, I tried it on my e-commerce page and it looks good, accept there is a little run-over of text. See here:http://www.healthnutsradio.com/store/produ...=259&page=1do I need to set a width somewhere for the text not to overlap?
I think adding two things to the .itemlist class should fix it:list-style-position: inside; will put the bullets inside the element rather than sticking out of the left.padding-left: 0; Lists almost always start with some padding on the left, that's probably pushing the content of the left list further towards the right.
Link to comment
Share on other sites
mboehler3 Member

mboehler3

Posted
  • Author
Posted
I think adding two things to the .itemlist class should fix it:list-style-position: inside; will put the bullets inside the element rather than sticking out of the left.padding-left: 0; Lists almost always start with some padding on the left, that's probably pushing the content of the left list further towards the right.
Thanks a lot, that worked. Just one more question, is there any way I can increase the separation between the two columns? They are a little too close together and I'm not sure what to do in order to move the 2nd column a little further to the right.Thanks again,
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...