Learn VBA & Macros in 1 Week!

CSS - Aligning Text Within A Large <a> Tag

Full Excel VBA Course - Beginner to Expert

Aligning Text Within A Large <a> Tag	View Content

I have a menu that I'm working on which uses <A> elements for the menu items. I've given these A elements height and width dimensions and background images which works pretty well -- except the text in these A elements is top-aligned. I've tried adding a vertical-align directive in my CSS but this doesn't seem to do anything at all.

I'd also like to add a bit of space around the text. Is this possible?

here's a bit of my CSS:
Code:

ul.menu li a {
  width: 295px;
  height: 59px;
  background: url(button_bg.jpg) no-repeat;
  display: block;
  padding: 0px;
  margin: 0px;
  border: none;
}

Full Excel VBA Course - Beginner to Expert

Aligning Text Please Help!

Similar Tutorials

View Content

Ok well im new to these forums and ive been looking pretty much everywhere for help, so heres my problem. I bought a joomla template from a company, i got it then installed it, but im having one huge issue i cant seem to fix. The news is piling up next to each other instead of each new news post going above the older one in a nice neat line one post after another. Instead they just moosh together after the first post. I emailed the company and they said i had to edit the css and thats all the help i got. I have no knowledge of css and have no idea how to fix the issue. Any help would be greatly appreciated. A link to my site is below as well as the template css. Please someone help me with this problem.

http://almostfinite.info/pku

Code:

/*------------------------------------------------------------------------
# JA Sanidine II for Joomla 1.5 - Version 1.0 - Licence Owner JA98631
# ------------------------------------------------------------------------
# Copyright (C) 2004-2008 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
# @license - Copyrighted Commercial Software
# Author: J.O.O.M Solutions Co., Ltd
# Websites:  http://www.joomlart.com -  http://www.joomlancers.com
# This file may not be redistributed in whole or significant part.
-------------------------------------------------------------------------*/

/* COMMON STYLE
--------------------------------------------------------- */
html, body, form, fieldset {
	margin: 0;
	padding: 0;
}

body {
	background: #FFFFFF;
	color: #000000;
	font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
	line-height: 1.5;
}

body#bd {
	color: #333333;
	background-color: #CCCCCC;
	background-attachment: fixed;
        background-repeat: no-repeat;
	background-position: center top;
}

body.contentpane {
	color: #000000;
	font-size: 12px;
	line-height: 1.3em;
	margin: 0;
	margin: 1em 2em;
	width: auto; /* Printable Page */
}

body.fs1 {font-size: 10px;}
body.fs2 {font-size: 11px;}
body.fs3 {font-size: 12px;}
body.fs4 {font-size: 13px;}
body.fs5 {font-size: 14px;}
body.fs6 {font-size: 15px;}

/* Normal link */
a {
	color: #D58400;
	text-decoration: none;
}

a:hover, a:active, a:focus {
	color: #D58400;
	text-decoration: underline;
}

a img {
	border: none;
}

/* Title text */
.contentheading, .componentheading, .blog_more strong, h1, h2, h3, h4 {
	line-height: normal;
}

/* Small text */
small, .small, .smalldark, .article-meta, .modifydate, .img_caption p, .site-slogan, #ja-login,
a.readon, #ja-botnav, #ja-pathway, #ja-subnav, #ja-contentsl1, #ja-contentsl2, #ja-footer, #ja-col1, #ja-col2, #ja-botsl {
	font-size: 92%;
}

img {
	margin: 0;
	padding: 0;
}

.img_caption img {
	border: 1px solid #CCCCCC;
}

.img_caption p {
	text-align: center;
	color: #666666;
}

.img_caption.left, .img_caption.right {
	margin-top: 3px;
}

.no-caption {
	margin: 3px 0 3px 5px;
	border: 1px solid #CCCCCC;
}

/* Heading */
h1 {font-size: 200%;}
h2 {font-size: 175%;}
h3 {font-size: 150%;}
h4 {font-size: 125%;}

p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 {
	margin: 1em 0;
	padding: 0;
}

ul {
	list-style: none;
}

ul li {
	background: url(../images/bullet.gif) no-repeat 20px 6px;
	padding-left: 30px;
}

ol li {
	margin-left: 35px;
}

th {
	font-weight: bold;
	padding: 7px 8px;
	text-align: left;
}

fieldset {
	padding: 7px 5px 5px !important;
	border: none;
	margin: 1em 0 0;
	background: url(../images/sep.gif) repeat-x top;
}

fieldset legend {
	font-weight: bold;
	background: #FFFFFF;
}

fieldset a {
	font-weight: bold;
}

fieldset.input {
	padding: 0;
	background: none;
}

hr {
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
	border-top: 1px solid #CCCCCC;
	height: 1px;
}

br {
	height: 1px;
	font-size: 1px;
}

td, th, div {
	font-size: 100%;
}

/* FORM
--------------------------------------------------------- */
form {
	margin: 0;
	padding: 0;
}

form label {
	cursor: pointer;
}

input, select, textarea, .inputbox {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 100%;
}

textarea, textarea.inputbox {
	background: #FFFFFF;
	color: #333333;
	border: 1px solid #DDDDDD;
}

.inputbox {
	padding: 3px 2px;
	border: 1px solid #DDDDDD;
	background: url(../images/input-bg.gif) repeat-x top #FFFFFF;
	color: #333333;
	font-size: 100%;
}

.button {
	padding: 3px 8px 2px;
	border: 1px outset #CCCCCC;
	background: url(../images/grad-1.gif) repeat-x top #D58400;
	color: #FFFFFF;
	text-transform: uppercase;
	font-size: 92%;
	font-weight: bold;
}

.button:hover {
	border: 1px inset #CCCCCC;
}

select#ordering, select#limit {
	background-image: none;
}

* html .button { /*IE 6*/
	padding: 2px 5px !important;
}

*+html .button { /*IE 7*/
	padding: 2px 5px !important;
}

/* JOOMLA STYLE
--------------------------------------------------------- */
.article_separator, .article_seperator {
	clear: both;
	display: block;
	height: 30px;
	margin: 0;
	background: url(../images/sep.gif) repeat-x center;
}

.column_separator {
	padding: 0 25px;
}

/* content tables */
.sectiontableheader {
	background: url(../images/grad-2.gif) repeat-x top #373737;
	border: 1px solid #DDDDDD;
	padding: 6px 8px;
	color: #FFFFFF;
	font-weight: bold;
}

.sectiontableheader a,
.sectiontableheader a:hover,
.sectiontableheader a:active,
.sectiontableheader a:focus {
	color: #FFFFFF;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
	padding: 8px;
	background: url(../images/sep.gif) repeat-x bottom;
}

table.contentpane {
	border: none;
	width: 100%;
}

table.contentpaneopen {
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
}

table.contenttoc {
	margin: 0 0 10px 10px;
	padding: 0;
	width: 30%;
	float: right;
}

table.contenttoc td {
	background: url(../images/bullet.gif) no-repeat 12px 8px;
	padding: 1px 5px 1px 20px;
}

table.contenttoc th {
	background: url(../images/sep.gif) repeat-x bottom;
	padding: 0 0 3px;
	text-indent: 5px;
}

table.poll {
	border-collapse: collapse;
	padding: 0;
	width: 100%;
}

table.pollstableborder {
	border: none;
	padding: 0;
	text-align: left;
	width: 100%;
}

table.pollstableborder img {
	vertical-align: baseline;
}

table.pollstableborder td {
	border-collapse: collapse;
	border-spacing: 0;
	padding: 4px !important;
	background: none;
}

table.pollstableborder tr.sectiontableentry1 td {
}

table.searchintro {
	padding: 10px 0;
	width: 100%;
}

table.searchintro td {
	padding: 5px!important;
}

.blog_more {
	margin: 15px 0 0;
	padding: 15px 0 0;
	background: url(../images/sep.gif) repeat-x top;
}

.blog_more strong {
	display: block;
	margin: 0 0 5px;
	text-transform: uppercase;
}

.blog_more ul {
	margin: 0;
	padding: 0;
}

.blog_more ul li {
	background: url(../images/bullet.gif) no-repeat 4px 8px;
	margin: 0;
	padding: 0 0 0 12px;
}

.category {
	font-weight: bold;
}

h1.componentheading, .componentheading {
	font-size: 250%;
	margin: 0 0 15px;
	padding: 0;
	color: #D58400;
}

.contentdescription {
	padding-bottom: 30px;
}

h2.contentheading, .contentheading {
	margin: 0;
	padding: 0;
	font-size: 200%;
	color: #008EBF;
}

table.blog .contentheading {
	font-size: 135%;
}

a.contentpagetitle,
a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus {
	color: #008EBF;
}

a.readon {
	font-weight: bold;
	text-transform: uppercase;
}

a.readon:hover, a.readon:focus, a.readon:active {
}

table.contentpaneopen td, table.contentpane td {
}

table.contentpaneopen, table.contentpane, table.blog {
	width: 100%;
}

.moduletable {
	padding: 0;
}

ul.pagination {
	margin: 20px auto;
	padding: 20px 0 0;
	color: #666666;
}

ul.pagination li {
	background: none;
	display: inline;
	margin: 0;
	padding: 0;
}

ul.pagination li span {
	padding: 2px 5px;
}

ul.pagination a {
	padding: 2px 5px;
	text-decoration: none;
	background: url(../images/grad-4.gif) repeat-x top;
	color: #666666;
	border: 1px solid #DDDDDD;
}

ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus {
	background: #D58400;
	color: #FFFFFF;
}

.pagenavbar {
	background: url(../images/icon-pages.gif) no-repeat center left;
	font-weight: bold;
	padding-left: 14px;
}

.pagenavcounter {
	background: url(../images/icon-pages.gif) no-repeat 0 11px;
	font-weight: bold;
	padding: 8px 14px 0 14px;
}

.smalldark {
	text-align: left;
}

div.syndicate div {
	text-align: center;
}

.pollstableborder tr.sectiontableentry1 td,
.pollstableborder tr.sectiontableentry2 td {
	background: none;
}

ul.latestnews a, ul.mostread a {
}

/* META
--------------------------------------------------------- */
.article-toolswrap {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	position: relative;
}

.article-tools {
	display: block;
	padding: 0 10px 0 0;
}

.article-meta {
	width: 70%;
	float: left;
	margin-top: 3px;
	color: #666666;
}

.createby {
	font-weight: bold;
}

.createdate {
	padding-right: 6px;
	margin-right: 5px;
	background: url(../images/vline.gif) no-repeat right;
}

.createdate-icon { /*for clendar style*/
	margin: 0 10px 0 0;
	display: block;
	float: left;
	width: 40px;
	height: 38px;
	text-align: center;
	border: 1px solid #CCCCCC;
	background: #F8F8F8;
	color: #666666;
}

.ja-date {
	font-size: 15px;
	font-weight: bold;
}

.ja-month {
	color: #666666;
	font: 9px/14px Arial, Helvetica , sans-serif;
	text-transform: uppercase;
	display: block;
	letter-spacing: 1px;
	background: url(../images/grad-4.gif) repeat-x top #999999;
	border-bottom: 1px solid #CCCCCC;
}

.modifydate {
	width: 100%;
	display: block;
	color: #D58400;
	margin: 15px 0;
}

.article-section {
	padding-left: 6px;
	margin-left: 5px;
	background: url(../images/vline.gif) no-repeat left center;
}

.article-section a {
	color: #666666;
}

.article-category a {
	color: #666666;
}

div.buttonheading {
	position: absolute;
	top: 0;
	right: 10px;
}

.buttonheading img {
	margin: 0 0 0 5px;
	border: 0;
	float: right;
}

/* MAIN LAYOUT DIVS
--------------------------------------------------------- */
#ja-wrapper {
	width: 950px;
	margin: 0 auto;
	clear: both;
	background: url(../images/wrapper-bg.png) repeat-y center;
}

.narrow #ja-wrapper {
	width: 750px;
	background: url(../images/wrapper-bg-n.png) repeat-y center;
}

#ja-container {
	padding: 5px 20px;
}

#ja-mainbody {
	width: 70%;
	float: left;
}

/* PRIMARY COLUMN
--------------------------------------------------------- */
#ja-content {
	clear: both;
	display: block;
	float: right;
	width: 70%;
	background: url(../images/content-center3.gif) repeat-y center #FFFFFF;
}

#ja-content-top {
	background: url(../images/content-top3.gif) no-repeat center top;
}

#ja-content-bot {
	background: url(../images/content-bot3.gif) no-repeat center bottom;
}

.narrow #ja-content {
	background: url(../images/content-center3-n.gif) repeat-y center #FFFFFF;
}

.narrow #ja-content-top {
	background: url(../images/content-top3-n.gif) no-repeat center top;
}

.narrow #ja-content-bot {
	background: url(../images/content-bot3-n.gif) no-repeat center bottom;
}

#ja-current-content {
	padding: 20px;
	margin: 0;
}

/* COLUMNS
--------------------------------------------------------- */
#ja-col1 {
	float: left;
	overflow: hidden;
	width: 30%;
}

#ja-col1 div.ja-innerpad {
	padding-right: 5px;
}

#ja-col2 {
	float: right;
	overflow: hidden;
	width: 30%;
}

#ja-col2 div.ja-innerpad {
	padding-left: 5px;
}

/*common style for column*/


/* COLLAPSIBLE LAYOUT
--------------------------------------------------------- */
#ja-containerwrap,
#ja-containerwrap-fr,
#ja-containerwrap-fl,
#ja-containerwrap-f {
	clear: both;
}

/*content + left*/
#ja-containerwrap-fr #ja-mainbody {
	width: 100%;
}

#ja-containerwrap-fr #ja-col1 {
	width: 22%;
}

#ja-containerwrap-fr #ja-content {
	width: 78%;
	background: url(../images/content-center2.gif) repeat-y center #FFFFFF;
}

#ja-containerwrap-fr #ja-content-top {
	background: url(../images/content-top2.gif) no-repeat center top;
}

#ja-containerwrap-fr #ja-content-bot {
	background: url(../images/content-bot2.gif) no-repeat center bottom;
}

.narrow #ja-containerwrap-fr #ja-content {
	background: url(../images/content-center2-n.gif) repeat-y center #FFFFFF;
}

.narrow #ja-containerwrap-fr #ja-content-top {
	background: url(../images/content-top2-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-fr #ja-content-bot {
	background: url(../images/content-bot2-n.gif) no-repeat center bottom;
}

/*content + right*/
#ja-containerwrap-fl #ja-content {
	width: 100%;
	background: url(../images/content-center.gif) repeat-y center #FFFFFF;
}

#ja-containerwrap-fl #ja-content-top {
	background: url(../images/content-top.gif) no-repeat center top;
}

#ja-containerwrap-fl #ja-content-bot {
	background: url(../images/content-bot.gif) no-repeat center bottom;
}

.narrow #ja-containerwrap-fl #ja-content {
	background: url(../images/content-center-n.gif) repeat-y center;
}

.narrow #ja-containerwrap-fl #ja-content-top {
	background: url(../images/content-top-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-fl #ja-content-bot {
	background: url(../images/content-bot-n.gif) no-repeat center bottom;
}

/*full*/
#ja-containerwrap-f #ja-mainbody {
	width: 100%;
}

#ja-containerwrap-f #ja-content {
	width: 100%;
	background: url(../images/content-center1.gif) repeat-y center #FFFFFF;
}

#ja-containerwrap-f #ja-content-top {
	background: url(../images/content-top1.gif) no-repeat center top;
}

#ja-containerwrap-f #ja-content-bot {
	background: url(../images/content-bot1.gif) no-repeat center bottom;
}

#ja-containerwrap-f #ja-current-content {
	padding-left: 20px;
	padding-right: 20px;
}

.narrow #ja-containerwrap-f #ja-content {
	background: url(../images/content-center1-n.gif) repeat-y center;
}

.narrow #ja-containerwrap-f #ja-content-top {
	background: url(../images/content-top1-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-f #ja-content-bot {
	background: url(../images/content-bot1-n.gif) no-repeat center bottom;
}

/* MODULE
--------------------------------------------------------- */
div.moduletable h3 {
	margin: 0 -8px 10px;
	padding: 0 0 0 30px;
	font-size: 100%;
	height: 28px;
	line-height: 28px;
	color: #333333;
	background: url(../images/h3-bg.gif) no-repeat left;
	text-transform: uppercase;
}

div.moduletable h3 span {
	display: block;
	height: 28px;
	background: url(../images/h3-bg.gif) no-repeat right;
}

div.moduletable {
	margin: 0;
	padding: 0 15px;
}

div.module h3,
div.module_text h3,
div.module_menu h3,
div.module_hilite h3,
div.ja-box-br h3 {
	margin: 0 -6px 10px;
	padding: 0 0 0 30px;
	font-size: 100%;
	height: 28px;
	line-height: 28px;
	color: #FFFFFF;
	background: url(../images/h3-bg.gif) no-repeat left #333333;
	text-transform: uppercase;
}

div.module h3 span,
div.module_text h3 span,
div.module_menu h3 span,
div.module_hilite h3 span,
div.ja-box-br h3 span {
	display: block;
	height: 28px;
	background: url(../images/h3-bg.gif) no-repeat right;
}

div.module,
div.module_text,
div.module_menu,
div.module_hilite,
div.ja-box-br {
	padding: 0;
	float: left;
	clear: both;
	width: 100%;
	background: url(../images/box-br.gif) no-repeat bottom right #FFFFFF;
	overflow: hidden;
	margin-bottom: 5px;
}

div.module div,
div.module_text div,
div.module_menu div,
div.module_hilite div,
div.ja-box-bl {
	margin: 0;
	padding: 0;
	background: url(../images/box-bl.gif) no-repeat bottom left;
}

div.module div div,
div.module_text div div,
div.module_menu div div,
div.module_hilite div div,
div.ja-box-tr {
	padding: 0;
	margin: 0;
	background: url(../images/box-tr.gif) no-repeat top right;
}

div.module div div div,
div.module_text div div div,
div.module_menu div div div,
div.module_hilite div div div,
div.ja-box-tl {
	padding: 15px 20px 15px;
	background: url(../images/box-tl.gif) no-repeat top left;
}

div.module div div div div,
div.module_text div div div div,
div.module_menu div div div div,
div.module_hilite div div div div {
	margin: 0;
	padding: 0;
	background: none;
}

/* mis */
div.banneritem_text {
	padding: 5px 0 !important;
}

div.advs {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}

div.moduletable li,
div.moduletable_menu li,
div.moduletable_text li,
div.module li,
div.module_menu li,
div.module_text li {
	padding-left: 15px;
	background-position: 5px 7px;
}

/* HEADER
--------------------------------------------------------- */
#ja-header {
	line-height: normal;
	position: relative;
	padding: 0;
	margin: 0 10px;
	z-index: 999;
	height: 127px;
	background: url(../images/header-bg.gif) repeat-x 0 19px #FFFFFF;
	border-top: 1px solid #CCCCCC;
	border-bottom: 3px solid #D58400;
}

h1.logo, div.logo-text {
	margin: 0 20px;
	padding: 0;
}

h1.logo {
	width: 330px;
	height: 70px;
	position: absolute;
	top: 10px;
}

h1.logo a {
	width: 330px;
	height: 70px;
	display: block;
	background: url(../images/logo.png) no-repeat center;
}

h1.logo a span {
	position: absolute;
	top: -1000px;
}

div.logo-text {
	outline: none;
	position: absolute;
	top: 20px;
}

div.logo-text h1 {
	font-size: 250%;
	font-weight: bold;
	letter-spacing: 2px;
	margin: 0;
	padding: 0;
}

div.logo-text h1 a {
	color: #333333;
}

.site-slogan {
	color: #666666;
	margin: 0;
	padding: 0;
}

#ja-topnav {
	position: absolute;
	top: 10px;
	right: 40px;
}

#ja-topnav ul {
	margin: 0;
	padding: 2px 0;
}

#ja-topbar {
	background: url(../images/grad-3.gif) repeat-x top #2F2F2F;
	height: 25px;
	margin: 0 10px;
	position: relative;
}

/* MAIN NAVIGATION
--------------------------------------------------------- */
#ja-mainnav {
	height: 40px;
	position: absolute !important;
	bottom: 0px;
	left: 0;
	z-index: 999;
	width: 100%;
	background: url(../images/mainnav-bg.gif) repeat-x bottom;
}

#ja-mainnav a, #ja-subnav a {
	outline: none;
	line-height: normal;
}

#ja-subnav {
	clear: both;
	background: url(../images/subnav-bg.gif) repeat-x bottom #D58400;
	margin: 0 10px;
	padding: 0 10px;
	height: 30px;
}

#ja-subnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#ja-subnav li {
	background: none;
	margin: 0;
	padding: 0;
	display: inline;
}

#ja-subnav a {
	display: block;
	float: left;
	outline: none;
	padding: 0 15px;
	line-height: 30px;
	text-decoration: none;
	color: #FFFFFF;
}

#ja-subnav a:hover,
#ja-subnav a:active,
#ja-subnav a:focus {
	color: #FFFFFF;
	background: url(../images/subnav-hover.gif) no-repeat center bottom;
	text-decoration: none;
}

#ja-subnav li.active a {
	color: #FFFFFF !important;
	font-weight: bold;
	background: url(../images/subnav-hover.gif) no-repeat center bottom;
	text-decoration: none;
}

/* breadcrumbs */
#ja-pathway {
	padding-top: 3px;
	color: #999999;
	text-indent: 15px;
}

#ja-pathway strong {
	margin-right: 5px;
}

#ja-pathway img {
	margin: 1px 5px;
}

/* Default Joomla! Menu */
ul.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}

ul.menu li {
	display: block;
	background: url(../images/sep.gif) repeat-x bottom;
	margin: 0;
	padding: 0 0 2px;
	line-height: normal;
}

ul.menu li a {
	display: block;
	outline: none;
	padding: 8px 2px;
	margin: 0;
	text-decoration: none;
	color: #333333;
	font-weight: bold;
}

ul.menu li a:hover,
ul.menu li a:active,
ul.menu li a:focus {
	color: #D58400;
	text-decoration: underline;
}

ul.menu li.active a {
	font-weight: bold;
}

ul.menu li ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.menu li li {
	border: none;
	background: none;
	padding: 0;
}

ul.menu li li a {
	border: none;
	padding: 2px 5px 8px 15px !important;
	text-transform: none;
	font-weight: normal !important;
	background: url(../images/arrow.png) no-repeat 8px 6px !important;
	color: #333333;
}

ul.menu li li a:hover,
ul.menu li li a:active,
ul.menu li li a:focus {
	color: #D58400;
	text-decoration: underline;
}

ul.menu li li.active a {
	color: #D58400;
	font-weight: bold;
}

ul.menu li li li a {
	color: #333333 !important;
	font-weight: normal !important;
	padding-left: 25px !important;
	background: url(../images/arrow.png) no-repeat 18px 6px !important;
}

ul.menu li li li.active a {
	font-weight: bold !important;
}

/* SPOTLIGHT
--------------------------------------------------------- */
/* Spotlight Box Style */
.ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right {
	float: left;
	overflow: hidden;
}

.ja-box-left div.module, .ja-box-center div.module {
}

/* Top spotlight */
#ja-topsl {
	clear: both;
	margin: 0 10px;
	padding: 0;
	height: 310px;
	background: url(../images/topsl-bg.gif) repeat-x bottom #1D1D1D;
	overflow: hidden;
}

#ja-topsl1 {
	float: left;
	width: 70%;
	overflow: hidden;
}

#ja-topsl1 div#ja-slideshowwrap {
	margin: 20px 10px;
}

#ja-topsl2 {
	float: right;
	width: 30%;
	overflow: hidden;
}

#ja-topsl2 div.moduletable h3, #ja-topsl2 div.moduletable h3 span {
	background-image: url(../images/h3-bg-d.gif);
}

#ja-topsl2 div.moduletable {
	margin: 20px 0 0;
}

/* Content spotlight */
#ja-contentsl1 {
	clear: both;
	width: 100%;
	padding: 0 0 5px;
}

#ja-contentsl2 {
	clear: both;
	margin: 0;
	padding: 5px 0;
}

#ja-contentsl1 div.module, #ja-contentsl2 div.module {
	margin: 0;
}

#ja-contentsl1 div.module h3, #ja-contentsl1 div.module h3 span,
#ja-contentsl2 div.module h3, #ja-contentsl2 div.module h3 span {
	background: none;
	color: #333333;
	height: auto;
	line-height: normal;
	padding-left: 4px;
}

#ja-contentsl1 ul.latestnews, #ja-contentsl1 ul.mostread {
	margin: 0;
}

#ja-contentsl1 li.latestnews a, #ja-contentsl1 li.mostread a {
	background: url(../images/icon-pages.gif) no-repeat left center;
	padding-left: 15px;
}

#ja-contentsl1 li.latestnews, #ja-contentsl1 li.mostread {
	background: url(../images/sep.gif) repeat-x bottom;
	padding: 4px 2px 6px;
}

#ja-contentsl1 li.latestnews a, #ja-contentsl1 li.mostread a {
	background: url(../images/icon-pages.gif) no-repeat left center;
	padding-left: 15px;
}

/* Bottom spotlight */
#ja-botsl {
	clear: both;
	margin: 0 10px;
	padding: 15px 5px;
	background: url(../images/grad-2.gif) repeat-x top #373737;
	border-top: 1px solid #1D1D1D;
	border-bottom: 1px solid #1D1D1D;
	color: #999999;
}

#ja-botsl div.moduletable h3, #ja-botsl div.moduletable h3 span {
	background: none;
	color: #FFFFFF;
	height: auto;
	line-height: normal;
	padding-left: 4px;
}

/* FOOTER
--------------------------------------------------------- */
#ja-footer {
	clear: both;
	position: relative;
	padding: 8px 20px;
	margin: 0 10px;
	color: #666666;
	text-align: center;
	border-top: 1px solid #1D1D1D;
}

#ja-footer small {
	font-size: 100%;
}

#ja-botnav {
	background: #1D1D1D;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	clear: both;
	margin: 0 10px;
	padding: 5px 0;
	text-align: center;
}

#ja-botnav ul {
	margin: 0;
	padding: 0;
}

#ja-botnav li {
	margin: 0;
	padding: 0 10px;
	background: url(../images/vline.gif) no-repeat left center;
	display: inline;
}

#ja-botnav li a {
	color: #999999;
}

#ja-botnav li a:hover, #ja-botnav li a:active, #ja-botnav li a:focus {
	color: #FFFFFF;
}

/* MISCELLANOUS
----------------------------------------------------------- */
ul.accessibility {
	position: absolute;
	top: -100%;
}

li.ja-firstitem {
	background: none !important;
}

.padding-none ul.film li {
	margin-left: 0;
}

#ja-tabs {
	margin: 0 0 10px 0;
	padding: 0;
}

#ja-tabs div {
	margin: 0;
	padding: 0;
}

#ja-tabs div.module {
	background: url(../images/box-br-w.gif) no-repeat bottom right #FFFFFF;
}

#ja-tabs div.module div {
	background: url(../images/box-bl-w.gif) no-repeat bottom left;
}

#ja-tabs div.module div div {
	padding: 0;
	background: url(../images/box-tr-w.gif) no-repeat top right;
}

#ja-tabs div.module div div div {
	background: url(../images/box-tl-w.gif) no-repeat top left;
}

#ja-tabs div.module div div div div {
	background: none;
}

/* Login */
#ja-login {
	position: absolute;
	right: 30px;
	top: 25px;
	color: #666666;
}

label.ja-login-user span,
label.ja-login-password span {
	display: block;
	width: 25px;
	height: 24px;
	float: left;
	text-indent: -5000px;
}

label.ja-login-user span {
	background: url(../images/icon-user.png) no-repeat;
}

label.ja-login-password span {
	background: url(../images/icon-key.png) no-repeat;
}

#ja-login label {
	float: left;
}

#ja-login form #mod_login_username,
#ja-login form #mod_login_password {
	width: 100px;
	margin: 2px 0 0 5px;
	font-size: 11px !important;
	border: 1px solid #CCCCCC;
}

#ja-login form #mod_login_password {
	margin-right: 5px;
}

#ja-login form .button {
	margin-top: 2px;
}

.ja-login-links {
	display: block;
	clear: both;
	padding: 6px 0 0;
	font-size: 92%;
}

.ja-login-links a {
	padding: 0 5px;
	color: #666666;
}

/*usertools*/
#ja-usertools {
	position: absolute;
	right: 10px;
	top: 8px;
}

#ja-usertools ul {
	margin: 0;
	padding: 0 10px 0 0;
	display: inline;
}

#ja-usertools ul li {
	margin: 0;
	padding: 0 2px;
	float: right;
	background: none;
}

/* Search */
#ja-search {
	background: url(../images/search-bg.gif) no-repeat left;
	position: absolute;
	right: 0;
	top: 0;
	height: 25px;
	padding-left: 35px;
	font-size: 11px;
}

#ja-search .inputbox {
	margin: 3px 3px 0 0;
	width: 150px;
	background: transparent;
	border: none;
	color: #999999;
}

#ja-search .button {
	font-size: 11px;
}

/*others*/
#ja-banner {
	padding: 5px 0 0;
	text-align: center;
	overflow: hidden;
	width: 100%;
	clear: both;
}

div.back_button a,
div.back_button a:hover,
div.back_button a:active {
	background: none!important;
	display: block;
	margin: 10px 0;
	text-decoration: none!important;
}

.clr {
	clear: both;
}

.hasTip img {
	border: none;
}

div.ja-innerdiv {
	padding: 8px 0 10px !important;
	background: url(../images/sep.gif) repeat-x bottom !important;
}

div.ja-innerdiv img.border {
	padding: 2px;
	border: 1px solid #CCCCCC;
	margin-right: 10px;
}

div.ja-innerdiv img {
	margin: 5px 0 0 5px;
}

div.module blockquote {
	margin: 0;
	padding: 0;
}

div.module span.title {
	font-weight: bold;
	display: block;
	margin: 5px 0;
}

/* Tooltips */
.tool-tip {
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
	float: left;
	max-width: 200px;
	padding: 5px;
	z-index: 999;
	color: #333333;
}

.tool-title {
	background: url(../../system/images/selector-arrow.png) no-repeat;
	font-size: 100%;
	font-weight: bold;
	margin: 0;
	margin-top: -15px;
	padding: 0;
	padding-bottom: 5px;
	padding-top: 15px;
}

.tool-text {
	font-size: 100%;
	margin: 0;
}

#system-message dd.message ul,
#system-message dd.error ul,
#system-message dd.notice ul {
	margin: 0 10px;
	padding: 0;
}

#system-message dd.message ul li,
#system-message dd.error ul li,
#system-message dd.notice ul li {
	background: none;
	color: #FFFFFF;
	margin: 0;
	padding: 5px;
}

/* System Standard Messages */
#system-message dd.message ul {
	background: #333333;
	border: none;
}

/* System Error Messages */
#system-message dd.error ul {
	background: #CC0000;
	border: none;
}

/* System Notice Messages */
#system-message dd.notice ul {
	background: #D58400;
	border: none;
}

/* Clearfix */
.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

* html > body .clearfix {
	display: block;
	width: 100%;
}

* html .clearfix {
	height: 1%;
}

Text Aligning...

Similar Tutorials

View Content

Aligning Text Vertically Within A <div> Using Css

Similar Tutorials

View Content

I have a navigation bar that contains four images (side by side) as well as three text links. They all live within a <div> with the following properties:

#gNav {
width:768px;
height:19px;
text-align:left;
vertical-align:middle;
}

i need for the three text links to line up directly in the middle (vertically) of that <div>.

To achieve this in IE6 and NN+, I attach the following style to the text.

.nookum {
font-size:.9em;
vertical-align: 25%;
color:#FFFFFF;
}

I just learned that the vertical-align property is not recognized by IE5 and IE5.5, so in those versions, the text aligns at the bottom of the <div>.

Anyone know of any workarounds or other methods of vertically aligning text that will work in these two versions of IE?

Need Help Aligning Picture With Text

Similar Tutorials

View Content

the text on the left of the picture goes "in" a little bit to the image as can be seen he in firefox.
http://www.925-sterling-silver-jewe...ls.php?id=sl211

in IE its ok but its in middle! and yeah i know my css is lacking but i plan to do it all in css once i finish my implementation (php)

PHP Code:
<div style="float:left; position: relative; width: 255px; height: 215px; z-index: 1; left: 5px; top: 5px" id="layer1">
    <img border="0" width="255" height="215" src="images/<?php echo $product; ?>.jpg" > </div>
       <h2><span style="text-indent:0.5in">Detailed Information</span></h2>
       <b>Weight:</b> <?php echo $row['weight']; ?>
       <br/><?
       if($row['category'] == Anklets) { ?>
             <b>Diameter:</b><?php echo $row['diameter'];
       } else if($row['category'] == Bracelets) { ?>
             <b>Diameter:</b><?php echo $row['diameter']; ?>
             <br/>
             <b>Width:</b><?php echo $row['width'];
       } else if($row['category'] == Necklaces) { ?>
             <b>Width:</b><?php echo $row['width']; ?>
             <br/>
             <b>Length:</b><?php echo $row['length'];
       } else if($row['category'] == Sets) { ?>
              <b><span style="color:red">not sure</span> <?
       }

Vertical Aligning Text

Similar Tutorials

View Content

How do you go about vertically aligning text in a <div> tag that is 200px in height?

Aligning Text Over An Image .. Ff Vs Ie Help

Similar Tutorials

View Content

I currently have been trying to align an h1 tag over top of a css background image. I have tried a whole bunch of things but have returned the code back to its most basic form

My external css div looks as follows:

#content_funny{
width: 315px;
height: 51px;
background-image:url(images/funnyvideos1.gif);
background-repeat:no-repeat;
float:left;
clear:left;
margin:0px 0px 0px 0;
display:inline;
}

My index file is as follows

<div id="content_header"><div id="content_funny"><a href="http://www.tokenhumor.com/categories/7/funny_videos.html"><h1>Funny Videos</h1></a></div>

For some reason the text in its natural state is laying differently for IE and FF, preventing me from using any positioning lines within my external style sheet.

Any help with this is much appreciated, I m pulling my hair out

Image Not Aligning With Text?

Similar Tutorials

View Content

Hi all, I have a pesky little problem that I can not seem to figure out on my own.

I have a set up like this

PHP Code:
<span class='navitem'><a href='index.php'>
<img src='myimage.gif'>Go Home</a></span>

My Css Code is

PHP Code:
#leftnavcontent .navitem {
    border-bottom:1px dotted #DADADA;
    font-size:12px;
    font-weight:normal;
    line-height:16px;
}

#leftnavcontent .navitem img {
    margin-right:5px;
    border:none;
}

My problem is that the image is not aligning with the text. As in there is just a slight maybe 1 or 2 pixel border bottom from the image that makes it dip just above the navitem box which makes it look a little funky.

Any ideas?

List Aligning Some Text To The Right

Similar Tutorials

View Content

Code:

<ul>
<li>Some text<div class="right">right</div></li>
<li>Some text<div class="right">right</div></li>
<li>Some text<div class="right">right</div></li>
</ul>

I would like to alight the above divs to the right.

I tried to do something like:

.right
{
float:right;
width: 48%;
}

But that makes them seem to fall down one line and the stack funny.

I also tried to do something line:
Code:

<ul>
<li><div class="left">left</div><div class="right">right</div></li>
<li><div class="left">left</div><div class="right">right</div></li>
<li><div class="left">left</div><div class="right">right</div></li>
</ul>

And
Code:

.left
{
float:left;
width:48%;
}
.right
{
float:right;
width: 48%;
}

But they all sorta did wierd things I didn't understand.

Then I thought perhaps the LI weren't block elements and so that's why they were getting screwed up. So i wrapped a div around both right and left, but that didn't seem to work either.

TIA, Mark

Aligning Text To The Left Of A Div

Similar Tutorials

View Content

How does one align the text to the left of a div? I have "text-align:left;" specified, however the text is centered when it is too narrow to fill the screen.

The URL of the page in question is http://what-is-what.com . If you type an illegal character, such as "=", in the Ask box then the narrow text that is returned appears centered.

Other narrow pages on the same site do the same, of course. Tested in Firefox 1.5.0.7 on Ubuntu.

Text Aligning With Image

Similar Tutorials

View Content

I'm trying to figure out how to align the text with the text so that it text starts up and to the top right of the image. And I"m talking about the top middle div.

http://kansasoutlawwrestling.com/v3/index.html

Aligning Text To Top and Bottom Of A Div

Similar Tutorials

View Content

I'd like to have a container, a row, really. And I'd like text aligned to the top of the div, and then some more text aligned to the bottom of the div, like this:

------------------------------------------
Top text

Bottom text
------------------------------------------

The thing is, I can't use tables, so if someone knows how to accomplish in a completely tableless way, I'd appreciate it!

I did try the following, but it didn't work:

Code:

.mainDiv{
	position: relative;
	float: left;
	width: 150px;
}

.mainDiv .upper {
	top: 0;
	position: absolute;
}

.mainDiv .lower {
	bottom: 0;
	position: absolute;
}

Aligning Text In Columns

Similar Tutorials

View Content

Aligning Text To Bottom Of Div

Similar Tutorials

View Content

hey all,

here's my test page
http://www.pyesnflpool.com/

at the top...
Im trying to get the two links (Register & Recover Your Password) to be beside the arrows and Email Pye beside the mail image

it is running off two scripts, one for the links (snippetSideLine)and the other is holding together the header (elementTopPage)

As you can see on side-b I was making some effort to align them to the bottom with no success, my thoughts were to align to the bottom and than do a padding-bottom: 15px; or whatever, because I tried padding-top:120px to side-a which put the links in the right spot but left the rest of the page all over the place

any help is much appreciated, thanks

Code:

<!-- snippetSideLine -->
	
	<div>
	
	<?php
	
	if (isset ($this->User) && !empty ($this->User)) {
	
		if ($this->User->Type == 1) {
		
	?>
	<a href="../admin/index.php">Admin Panel</a>
	<?php
		
		}
		
	?>
	<a href="../members/myaccount.php">My Account</a>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="index.php?Logout">Logout</a>
	<?php
	
	}
	else {
	
	?>
	<a href="../members/register.php">Register</a>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="../members/forgotten.php">Recover Your Password</a>
	<?php
	
	}
	
	?>
	
	</div>
	
<!-- End: snippetSideLine -->

Code:

<!-- start: elementTopPage -->
<style type="text/css">
#wrapper {
	text-align: left;
	vertical-align: text-bottom;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 850px;
}


#side-a {
	float: left;
	width: 458px;
	height: 167px;
	background: url('../images/top_left.jpg') no-repeat;
}

#side-b {
	float: right;
	width: 168px;
	height: 167px;
	vertical-align: text-bottom;
	vertical-align: baseline;
	background: url('../images/top_right.jpg') no-repeat;
}

#content { 
	float: left;
	width: 224px;
	height: 167px;
	background: url("../images/top_bg.jpg") repeat;
}


</style>


<!-- elementTopPage -->
</head>

<body>


 
 <div id="wrapper">

	<div id="container">
		<div id="side-a">
			<?php
   	
				$this->Snippet ('SideLine');	
			?>
		</div>
		
		<div id="content">
			
		</div>

		
		<div id="side-b">
			email pye
		</div>
	</div>
</div>

<!-- End: elementTopPage -->

Aligning Text And Image In An <li>

Similar Tutorials

View Content

I have a line item where I'm pulling in text and an image from a dB. I would like the text to align at the top and not sure how to do it.
Code:

<li>Song name&nbsp;<img src="beatles.jpg">&nbsp;Artist

Test page:
Played songs
I have tried margins but then the image moves and the text is always aligned at the bottom of the image.
Thanks for your help!

Bg Atop Bg, Text Inside, Not Aligning

Similar Tutorials

View Content

Hi all,

I am attempting something new (to me at least). I have added two new images that will be backgrounds in my center content area.

The first is this one . Everywhere that WAS white, I want to be this.

Then, on TOP of that, and encapsulating the text itself, I want this one .

Now, I thought I had this right, but it all isn't working.

In FF, the first image isn't showing up at all. In IE, it shows up but is overlapping the tan area on the left by a pixel or two.

In addition, all of this is way down south! I think the float: left is screwing things up, but I couldn't get anything right so I left it alone.

Any help would, as always be greatly appreciated!

Chris

PS. URL is http://www.bartlett-family.net/BBCON/index3.html & CSS is at http://www.bartlett-family.net/BBCON/main3.css

Aligning An Image To The Right Side And Getting Text Around It

Similar Tutorials

View Content

hey all, i have a page that has text on it and i am trying to add another div with a photo in it so that i can place the photo on the right had side and get the text to wrap around it. buti am having probs. the text doesn't wrap around the photo ... so the photo just ends up at the bottom of the text on the right...

here is the code i am currently using for it
Code:

#rightphoto {position: absolute; right: 10px; border: 1px solid #ccc; padding: 2px 2px 2px 2px;}

i have had various ideas but none have worked,,,,this is the latest...

any ideas??

thanks

RF

Aligning Text On A Graphic Background

Similar Tutorials

View Content

Hi,

can anyone help me with this problem? I using a graphic with individual boxes on it for links. I want to place text in the boxes describing the link. When I set the padding-top and line - height properties. The text aligns prefect with the graphic. The problem I am having is the padding-top property lowers the graphic placing it below the rest of the table elements. Below is the code for the table cell and the css style.

<td height="261" valign="top"><table width="198" height="410" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="198" height="410" valign="top" class="td_1"><a href="#">Home</a> <br />
<a href="neoceram.php">Design</a> <br />
<a href="pyroceram.php">Development</a> <br />
<a href="patterns.php">Management</a> <br />
<a href="drilling.php">Portfolio</a> <br />
<a href="tints.php">Contact Us</a> <br /></td> </tr>

.td_1 {
background-image:url(nav_bar.gif);
background-position:left;
background-repeat:no-repeat;
background-color: transparent;
padding-top: 66px;
width: 154;
font-size: 12px;
font-weight:600;
line-height: 21px;
position: absolute;
font-family:Arial, Helvetica, sans-serif;
}

Thanks for all your help,

mdh2000

Vertical Aligning Text In Nav Boxes

Similar Tutorials

View Content

Here is my development site:
http://www.pursuedbybear.com/sunwashed/

Is there any way to vertically center the links in the left hand nav inside their orange boxes without resorting to a table? I've tried vertical-align: middle and padding-top the #nav ul li a element, but neither works.

I've done some searching here and the results haven't been encouraging - anyone have something different I could try? I mean really, this isn't exactly a super-complicated or obscure thing I'm trying to do, you'd think CSS could handle it.

Any advice?

Aligning Text/image Inside Css Box

Similar Tutorials

View Content

Hi,

I need some help for aligning text inside a css box. let me first say, that i am using a wysiwyg editor and i am aware of this being a red flag for some folks ....

to make my problem better understandable, please see following picture - this is how i want it to be:

the area of interest is a 3 column box (left and right are fixed widths, middle column is variable), the middle box (highlighted in blue) is the box, which has a background picture ('Melanie Wanders') on the top/left .... then it has some text (one looong line) and also a picture to the right (alignment: right).
what i wanted is, that when the user resizes the window, that the text is able to wrap around the image on the top right - and it does exactly that (you can also view the online version here)

well, what happens is this:

my problem:
when i try to use the 'p' tags to enter a paragraph, it messes up the appearance in FF (completely) and it still shows the text right on the top, above the background image. I also tried to align the text line to the bottom of the box, but it wouldn't do so.

i did also try to have the image ('Melanie Wanders') as an actual image aligned Top/Left, but it wouldn't wanna work for me with the other image next to it. i might get it to work, if this is my only option ....

finally, here the code used (you will also find the code online, if you follow the above link)
Code:

.inner_middle_content_row { width: 100%; height:300px ; }
	.inner_middle_content_row_left { background-image: url(images/inner_table/left.png); background-repeat: repeat-y; background-position: right 0; width:125px; height:300px; float:left; }
	.inner_middle_content_row_right { background-image: url(images/inner_table/right.png); background-repeat: repeat-y; width:20px; height:300px; float:right; }
	.inner_middle_content_row_middle { background-color: white; background-image: url(images/about_us/melanie_title.jpg); background-repeat: no-repeat; background-position: left top; width:auto; height:300px; margin-left:125px; margin-right:20px; }

Code:

<div class="inner_middle_content_row">
	<!--agl:cssobject id="inner_middle_content_row" type="Column Middle Scale" /-->
	<div class="inner_middle_content_row_left">
		<p class="submenu_brown">Melanie Wanders</p>
		<p><a class="submenu_gray" href="wilhelm%20wanders.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Wilhelm Wanders</a></p>
		<p><a class="submenu_gray" href="philosophie.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Philosophie</a></p>
		<p><a class="submenu_gray" href="history.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">History</a></p>
		</div>
		<div class="inner_middle_content_row_right"></div>
		<div class="inner_middle_content_row_middle">
		<img src="images/about_us/melanie_portrait.jpg" alt="" width="160" height="180" align="right" border="0" />Chef Melanie Wanders received her Culinary Arts and Management degree .... their own hand-made chocolate company - Wanders Artisan Chocolaterie.</div>

it would be great to find a solution to this - the easy way out would be to just skip the background image and have the text start right on top left .... but i like the idea of having a nice title like this - please tell me your opinion though

another thing i realize is, that the whole alignment is off in IE ... this is an issue i think i have read before and it has to do with this 3px or 5px off thing in IE right? i think i will look into this some other time.
Thanx for reading this - please bare with me, as my mother-language is not english and i might have expressed myself not clearly

Problems With Aligning Text Within An Element

Similar Tutorials

View Content

Hi guys,

I just wanted to say that I think devshed is a kick butt place for getting help with all sorts of CSS problems... always seems whenever I post that someone really helpful ends up helping me solve the problem in a way I hadn't thought of...

So here's the issue: I need to put two elements into a div, one aligned on the left side and one aligned on the right

Now what I'm looking at is the section where I have the Home text and the Quick News.

So I've put the design into XHTML and CSS he

But I can't seem to get the news line to move over properly. Any suggestions? I have used float:right but it just doesn't seem to work. I tried putting a div in and align=right but that pushes the element onto the next line which I don't want. Any ideas guys?

There simply has got to be an easy way to align text within a div that I'm missing somehow.

Thanks!

CSS - Aligning Text Within A Large <a> Tag

Aligning Text Within A Large <a> Tag

Similar Tutorials

Aligning Text Please Help!

Text Aligning...

Aligning Text Vertically Within A <div> Using Css

Need Help Aligning Picture With Text

Vertical Aligning Text

Aligning Text Over An Image .. Ff Vs Ie Help

Image Not Aligning With Text?

List Aligning Some Text To The Right

Aligning Text To The Left Of A Div

Text Aligning With Image

Aligning Text To Top *and* Bottom Of A Div

Aligning Text In Columns

Aligning Text To Bottom Of Div

Aligning Text And Image In An <li>

Bg Atop Bg, Text Inside, Not Aligning

Aligning An Image To The Right Side And Getting Text Around It

Aligning Text On A Graphic Background

Vertical Aligning Text In Nav Boxes

Aligning Text/image Inside Css Box

Problems With Aligning Text Within An Element

Aligning Text To Top and Bottom Of A Div