1 reply [Last post]
randomname25
Offline
newbie
Last seen: 6 years 50 weeks ago
Timezone: GMT-6
Joined: 2010-12-02
Posts: 1
Points: 2

I've made a horizontal bar of links, and now I want to add a couple of lines of explanation to the right of the links, stacked on top of each other, but still in the bar. This is working fine except for one minor thing: I want both lines of text to start in the same place horizontally so they're both left-aligned. Currently they look like a centered paragraph.

In .explanation I tried using text-align: left but it had no effect.

My HTML:

<div class="bar">
	<ul class="barlist">
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">6</a></li>
		<li><a href="#">7</a></li>
		<li><a href="#">8</a></li>
		<li class="explanation">first line of explanation<br />second line</li>
	</ul>
</div>

My CSS:

div .bar {
	border-style: solid; 
	border-color: #000000;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-right-width: 0px;
	margin: 0px;
	padding: 6px 0px 1px;
	text-indent: 10px;
	width: 596px;
	background-color: #FFFFFF;
	font-family: verdana;
}
 
div .bar a {
	text-decoration:none;
	color: #000000;
}
 
ul .barlist {
	position: relative;
	margin: auto;
	padding: 0;
	list-style-type: none;
}
 
li {
	display: inline;
	float: left;
	position: relative;
	top: -25px;
	left: -25px;
	color: #000000;
	padding: 5px;
}
 
.explanation {
	font-size: 10px;
	position: relative;
	top: -28px;
	left: -10px;
}

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 18 weeks 6 days ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Please provide a link or at

Please provide a link or at the very minimum all of your HTML and CSS.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph