Hello!
Please advise through murky waters...
This is the html:
<ul>
<li id="email"><a href="/email/">Send an Email</a></li>
<li id="donate"><a href="/donate/">Donate Money</a></li>
<li id="active"><a href="/active/">Get Active</a></li>
<li id="tell"><a href="/tell/">Tell a Friend</a></li>
<li id="vote"><a href="/vote/">Register to Vote</a></li>
</ul>
This is the css:
ul {
margin: 0;
padding: 0;
list-style: none;/* removes bullets */
display:block;
}
ul li {
display:block;
margin: 50px 24px 100px 50px;
padding-top: 10px;
font-weight: normal;
font-size:1.2em;
font-family: arial, helvetica, sans-serif;
line-height: 55px; /* height of icon */
background-repeat: no-repeat;
background-position: 0% 80%;
}
ul li a {
padding-left:10px; /* width of icon + whitespace */
text-decoration:none;
outline:none;}
#email,#donate, #tell, #active, #vote
{
background-image: url(bluelink1.jpg);}
#email:hover,#donate:hover, #tell:hover, #active:hover, #vote:hover
{background-image: url(pinklink1.jpg);}
I dont understand all of it but I have been able to manipulate where the graphic link and text link go on the page (which is the same link).
I would like to centre the text on the centre of the graphic I tried text-align: centre - but the text went to the centre of the page rather then the centre of the graphic link which Ive positioned on the left hand side of the page.
Would really appreciate any advice...
Thanks in advance...
(please ignore the explanatory remarks in the code I have adapted what was an example on the internet and am using it for purposes of understanding before adding my text links)
