Not able to get this link alligned properly

Question

Edit: I'm not an Html pro.

I want to add this text :

AIM -> Historian

AIM -> AIM

AIM -> PI

Historian -> PI

Perfectly aligned like the ones above in the picture. It is one link with all this text. Print Screen

I have tried <p style ="text-indent:5em; and I have also tried to make a <ul style ="text-indent:5em; but the spacing is still weird an not what I want. As you can see there is an empty space above which is unneeded and the Text alignment is not proper.

The Code

<div class="tabContentBorders">
<div id="tab1">
<p><strong>Data Acquisition and Reporting</strong></p>
<p>        <a href="IOM_AssetPerformanceManagement.html">High-Speed Data Acquisition</a></p>
<p>        <a href="IOM_RealTimeBusinessIntelligence.html">Custom Driver Development</a></p>
<p>        <a href="IOM_Real-TimeProfitOptimization.html">Custom Reporting Solutions</a></p>
<p><strong>15)  Historian Migration</strong></p>
<p style ="text-indent:5em;">        <a href="IOM_EnterpriseControl.html"></a><br>AIM -> Historian<br>AIM -> AIM<br>AIM -> PI<br>Historian -> PI</p>
<p><strong>Custom Windows Application</strong></p>
<p>        <a href="consultingandservices_solutionconsulting_regulatorycomplianceconsulting-2.html">SOE/TRA Suite</a></p>
<p>        <a href="ConsultingandServices_SolutionConsulting_SafetyLifecycleServices.html">TCP Time-Sync</a></p>
<p>        <a href="IOM_ProductionEnergyManagement.html">Power Calculations</a></p>

</div>

Style Sheet

body { background: #000 url("../images/background.jpg") no-repeat center top; }
body, h1, h2, h3, h4, h5, h6, ol, ul, li, p, td { font-family: Verdana, Geneva, Tahoma, sans-serif; color: #fff; font-weight: normal; }

.frame { z-index: 10; margin-left: auto; margin-right: auto; width: 970px; margin-bottom: 20px; position: relative;}

/*  CSS grid credit 960 Grid System http://960.gs  */
/*  Must declare this for all containers with widths in the layout grid so they properly align alongside of each other  */
.leftCol, .rightCol, .headerBox, .shadedBox ul, .rightSplitCol
    { display:inline; float:left; margin-left:0; margin-right:0; }

.topBox { display: block; height: 82px; background: url("../images/header.jpg") no-repeat left top; margin-bottom: 18px; }
.topNav { margin:0; padding:0; float: right; position: relative; top: 10px; right: 10px; text-align: right; font-size: 13px; }
.topNav a:link, .topNav a:visited { color: #fff; text-decoration: none; } .topNav a:hover { text-decoration: underline; }

.leftCol { width: 515px; } 
.leftCol .box { margin: 15px 20px !important; }
.rightCol { width: 435px; margin-left: 20px; } .rightSplitCol { width: 232px; margin: 5px 0 0 0; } .splitColspace { margin-left: 10px;}
.rightSplitCol p { font-size: 13px !important; padding: 0 0 5px 0; }

.mission { padding: 10px 0 0 10px;}
.headerBox { color: #000; margin-bottom: 5px; padding: 5px 20px 5px 10px; font-size: 18px; } .headerBoxPink { color: #000; margin-bottom: 10px; padding: 5px 20px 5px 10px; font-size: 15px; background-color: #d81c3f; }
.boxBlue { background-color: #00b9e4;} .boxOrange { background-color: #e87511;} .boxGreen { background-color: #c3cf21;}

.shadedBox { background: url("../images/bkgrdBox.png") repeat; }  .venue { margin-bottom: 9px; padding: 7px !important; } .boxMargin { padding: 7px;}
.shadedBox a:link, .shadedBox a:visited { color: #c3d603; } .shadedBox a:hover, .shadedBox a:visited:hover { text-decoration: none; }
.shadedBox ul { list-style: disc; padding: 7px 0 5px 10px; font-size: 13px;  } .shadedBox li { padding-bottom: 0.75em; line-height: 1.4em;}
ul.leftSide { width: 200px; margin-left: 15px; margin-right: 0;}  ul.rightSide { width: 210px; margin-left: 18px; margin-right: 0;}
.shadedBox p { font-size: 14px; line-height: 1.2em; }  .venue p { line-height: 1.3em !important; }

.small{ color: #ccc; font-size: 12px; }  .big { font-size: 26px; padding-top: 5px;}
.button { float: right; }
.iconSubscribe { float: right; padding: 25px 0 0 5px;}  .iconOpen { float:left; padding: 0 10px 0 0;}
a.whiteLink { color: #fff !important; } 


.footer { background: url("../images/footerDots.png") no-repeat left top; margin: 10px 0 10px 20px;}
.footer p { font-size: 11px; margin-top: 20px;}
.brands { background-color: #636466; display:inline; float:right; color: #000; padding: 5px 10px; font-size: 13px;}
.brands a:link, .brands a:visited { color: #000; text-decoration:none; }  .brands a:hover, .brands a:visited:hover { text-decoration:none; }

/*  960 Grid System: Clear style used with various floated containers  */
html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear {background:none;border:0;clear:both;display:block;float:none;font-size:0;list-style:none;margin:0;padding:0;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after {clear:both;content:'.';display:block;visibility:hidden;height:0}
.clearfix {display:inline-block}
* html .clearfix{height:1%}
.clearfix {display:block}

Can you post any related stylesheets? It would really help to figure out where the padding it coming from. Also, if you have leeway to change the markup and stylesheet, I have some suggestions to make your code more semantic/better suited to what you want to do. — meustrus, Oct 02 '12 at 15:40
I've added a style sheet but im not sure if its the right one. — Conrad C, Oct 02 '12 at 15:48
The Website from aspx, I don't think I have access to the style sheet. — Conrad C, Oct 02 '12 at 15:55
That wasn't it. If it's a live web page it would help to have a link. Otherwise, try using Firefox's or Google Chrome's "Inspect Element" context option (right click the text) to see where the padding is coming from (the same option exists in Safari if Developer Mode is on). — meustrus, Oct 02 '12 at 16:07

score 1 · Accepted Answer · answered Oct 02 '12 at 15:43

I'd suggest a simple rewrite of the base-code. Here, I use an H3 for the headers, and target the paragraphs. Unless you use white-space:pre white-space will always collapse to the width of one space.

The code can be cleaned up more, with less paragraph tags, but here's a quick idea.

http://jsfiddle.net/Ufx58/1/

HTML

<div class="tabContentBorders">
<div id="tab1">
<h3>Data Acquisition and Reporting</h3>
<p>        <a href="IOM_AssetPerformanceManagement.html">High-Speed Data Acquisition</a></p>
<p>        <a href="IOM_RealTimeBusinessIntelligence.html">Custom Driver Development</a></p>
<p>        <a href="IOM_Real-TimeProfitOptimization.html">Custom Reporting Solutions</a></p>
<h3>15)  Historian Migration</strong></h3>
<p style ="text-indent:5em;">        <a href="IOM_EnterpriseControl.html"></a><br>AIM -> Historian<br>AIM -> AIM<br>AIM -> PI<br>Historian -> PI</p>
<h3>Custom Windows Application</h3>
<p>        <a href="consultingandservices_solutionconsulting_regulatorycomplianceconsulting-2.html">SOE/TRA Suite</a></p>
<p>        <a href="ConsultingandServices_SolutionConsulting_SafetyLifecycleServices.html">TCP Time-Sync</a></p>
<p>        <a href="IOM_ProductionEnergyManagement.html">Power Calculations</a></p>

</div>

CSS

h3{
    font-weight:bold;
    font-size:1.2em;
}

#tab1 p{
    padding-left:2em;
}

The Website from aspx, I don't think I have access to the style sheet. — Conrad C, Oct 02 '12 at 15:55
Thank you, but how do I add the css code the the main.css? i.e. Where do I add it? can I add it anywhere in the main.css? — Conrad C, Oct 02 '12 at 17:39
Well there's a possibility that my simple styles may conflict against what is already present, but yes. You can add it anywhere, assuming there isn't a cascade (or stronger inheritance defined). You may need to namespace it a bit (either through classes in the code, or a more specific selector). — MetalFrog, Oct 02 '12 at 19:17

score 0 · Answer 2 · answered Oct 02 '12 at 17:56

This is how I did it and it works

<p><strong>Data Acquisition and Reporting</strong></p>
<p style="padding-left : 2em;"><a href="IOM_AssetPerformanceManagement.html">High-Speed Data Acquisition</a></p>
<p style="padding-left : 2em;"><a href="IOM_RealTimeBusinessIntelligence.html">Custom Driver Development</a></p>
<p style="padding-left : 2em;"><a href="IOM_Real-TimeProfitOptimization.html">Custom Reporting Solutions</a></p>
<p><strong>Historian Migration</strong></p>
<p style="padding-left : 2em;"><a href="IOM_EnterpriseControl.html">
AIM -> HistorianAIM -> AIM<br>
AIM -> PI<br>
Historian -> PI<br>
</a>
</p>
<p><strong>Custom Windows Application</strong></p>
<p style="padding-left : 2em;"><a href="consultingandservices_solutionconsulting_regulatorycomplianceconsulting-2.html">SOE/TRA Suite</a></p>
<p style="padding-left : 2em;"><a href="ConsultingandServices_SolutionConsulting_SafetyLifecycleServices.html">TCP Time-Sync</a></p>
<p style="padding-left : 2em;"><a href="IOM_ProductionEnergyManagement.html">Power Calculations</a></p>

You should definitely try to shift focus from inline styles like this. It quickly becomes unmanageable if you do it everywhere. — MetalFrog, Oct 02 '12 at 19:20
I entirely agree with you, but as I said, this site is originally aspx , now html. I'm sorry if I didn't make it clearer that I needed a quick fix and didn't want to play with the css file which I do not know the location. Also sorry if i'm a bit of a noob. — Conrad C, Oct 02 '12 at 19:45
`Right click`, `view source`, search for `.css`. It's not that much different to make a fix the right way than adding in a "quick" hack. :) — MetalFrog, Oct 02 '12 at 20:03

Not able to get this link alligned properly

2 Answers2

HTML

CSS