ul {
margin: 0;
padding: 0;
list-style: none;
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;
background-repeat: no-repeat;
background-position: 0% 80%;
}
ul li a {
padding-left:10px;
text-decoration:none;
outline:none;}
#email,#home, #tell, #contact, #register
{
background-image: url(bluelink1.jpg);}
#email:hover,#home:hover, #contact:hover, #information:hover, #register: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.
DDougles I ve tried your suggestion and Im sure Im doing something wrong as its not working
Ill show what Ive done
html, body
{
margin: 0;
padding: 0;
font-size: 100%;
color:#FFFFCC
}
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 */
text-align:center;
}
ul li a {
padding-left:10px; /* width of icon + whitespace */
text-decoration:none;
outline:none;
}
#email,#donate, #tell, #active, #vote
{ background-repeat: no-repeat;
background-position: 0% 80%;
background-image: url(bluelink1.jpg);}
#email:hover,#donate:hover, #tell:hover, #active:hover, #vote:hover
{background-image: url(pinklink1.jpg);}
the back-ground position - is that aligned? I need that position so that the text is above the link …thats the only way I figured the text would go on top of the graphic (otherwise it just shows in the middle of the graphic)
This is what im trying to achieve just so that Im making myself clear…
-> this is the text which is part of the same link
HELP and is above and centre of the graphic
888888888888 -> this is a rollover image link which has been added in the
css
Its a list that I have to manipulate with regards to distance from margins top and left, distance within the list and so on…
DDouglas you said that the coding didnt look right - Im not sure whats going on to be honast :splat:…
Any ideas as to the best way would be appreciated…thanking any suggestions in advance
As we can’t see your image there will be little chance of us knowing where the center of the image will be
If your image is a fixed width the you would size the list element to be the same width as the image and then use text-align:center to center the text within that set width.
Hi Paul - thanks for trying to help me out on this, but Ive probably not made myself clear…The text isnt going in the centre of the image - it is going at the centre point above the image not in the image…the image is a slim graphic length 125px width 9 px
-------- text-------- - part of link ie text highlights as link
8888888888888888888 - roll over link image
Did you mean in centre or above centre? Thanks in advance
If you want a graphic under some text then add padding bottom to the element concerned equal to the height of the graphic and apply the background image at background-position:0 100%;.
As Ray said then remove the line-height and it should work although you will still need to set a width otherwise the element will be 100% wide.
If that doesn’t work draw a picture so we can see what you want
Hi thank you both for the advice…Ive made the changes suggested that I understood!
I tried to follow what you said Paul and the padding worked but the text is still in the middle of the page rather rather then centre top of the image (the images are on the left side of the page) …and I have drawn a picture…it might be a bit squiggly
Thanking you in advance
html, body
{
margin: 0;
padding: 0;
font-size: 100%;
color:#FFFFCC
}
ul {
margin: 0;
padding: 0;
list-style: none;
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;
padding-bottom:9px;
}
ul li a {
padding-left:10px;
text-decoration:none;
outline:none;
}
#email,#donate, #tell, #active, #vote
{ background-repeat: no-repeat;
background-position: 0% 100%;
background-image: url(bluelink1.jpg); }
#email:hover,#donate:hover, #tell:hover, #active:hover, #vote:hover
{background-image: url(pinklink1.jpg);}
the text is still in the middle of the page rather rather then centre top of the image (the images are on the left side of the page)
Hi,
Since you have your images set as no-repeat then yse they will be on the left side of the page.
You have set your list items as display block so they are going to naturally fill the space available to them.
If you want the text to stay centered above the images you will need to set a width on your anchor that is the same width as your BG images. Then set the anchor as display:block or float:left so it cane take a width. Anchors are inline elements by default so theycan’t be given widths unless they are turned into a block level element.
Then you can center the text by setting text-align:center on the anchor.
I have not seen your BG images but from what I have gathered they are 9px tall. For the sake of testing I made some demo images that were 200px wide.
As you can see in my example above that only makes the clickable area of the anchor 200px wide.
If you wanted the anchor to be as wide as the list item you could set it’s width to 100% then nest the text in a floated <span> and set the image width and text-align:center on the span.
ul li [COLOR=Blue]a [/COLOR]{
[COLOR=Blue] float:left;
width:100%;[/COLOR]
text-decoration:none;
outline:none;
}
ul li a [COLOR=Blue]span[/COLOR] {
[COLOR=Blue]float:left;[/COLOR]
[COLOR=Blue] width:200px;
text-align:center; [/COLOR]
}
)