SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    centre text link on graphic link - same link

    Hello!

    Please guide through murky waters...

    This is the html:
    Code:
    <ul> 
    <li id="email"><a href="/email/">Send an Email</a></li> 
    <li id="donate"><a href="/home/">Donate Money</a></li> 
    <li id="active"><a href="/contact/">Get Active</a></li> 
    <li id="tell"><a href="/tell/">information</a></li> 
    <li id="vote"><a href="/vote/">Register</a></li> 
    </ul>
    This is the css:
    Code:
    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.

    Would really appreciate any advice...

    Thanks in advance...

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    little lever
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to align your background image position and set it to no repeat within your #email and #home etc.....align your text to center within the ul li

    remove the background position and repeat from ul li.

    I think maybe you should try a different approach to this. Doesnt quite look right to me.
    Manchester Free Ads - Free classifieds, only in manchester.
    Best web hosting

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Text align center on the <li> should center the anchor unless I'm misunderstanding something .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for getting back to me on this

    RyanReece would that go in the html?

    DDougles I ve tried your suggestion and Im sure Im doing something wrong as its not working

    Ill show what Ive done

    Code:
    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 ...

    Any ideas as to the best way would be appreciated...thanking any suggestions in advance

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    No my suggestion would go in the CSS .
    Code:
    ul li{text-align:center;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    No my suggestion would go in the CSS .
    Code:
    ul li{text-align:center;}
    thanks for getting back - Ive tried that...(in above code)... no joy...

    (thats an impressive rubix cubic time )

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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.

  8. #8
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    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

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You should be able to just set a height on your "li" and set the BG image as no-repeat bottom.

    Then remove that 55px line-height you have to let the text rise back up to the top.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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&#37;;.

    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

  11. #11
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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




    Code:
     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);}
    Attached Images Attached Images

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

    See if this is what you are trying to do.
    http://www.css-lab.com/test/nav-test.html

    Here is the test images that go with the code below.





    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Nav Test</title>
     
    <style type="text/css">
     
    body {
        background: #fff;
        font-size:100%;
        margin:0;
        padding:0;
        color:#FFFFCC;
    }
    #wrapper {
        width:800px;
        margin:0 auto;
        overflow:hidden;/*establish margin clearance and contain inner floats*/
        background:#EEF;
    }
    ul {
        margin: 0;
        padding: 0;
        list-style:none;
    }
    ul li {
        overflow:hidden;/*contain inner floats*/
        display:block;
        margin:50px 24px 100px 50px;
        padding:10px 0 9px 0;
        font-weight:normal;
        font-size:1.2em;
        font-family:arial, helvetica, sans-serif;
    }
    ul li a {
        float:left;
        width:200px;
        text-align:center;     
        text-decoration:none; 
        outline:none;
    }
    #email,#donate,#tell,#active,#vote { 
        background:#CDF url(blue.jpg) no-repeat 0% 100%;
    }
     
    #email:hover,#donate:hover, #tell:hover, #active:hover, #vote:hover {
        background:#CCC url(pink.jpg) no-repeat 0% 100%;
    }
    </style>
    </head>
    <body>
     
    <div id="wrapper">
        <ul> 
            <li id="email"><a href="/email/">Send an Email</a></li> 
            <li id="donate"><a href="/home/">Donate Money</a></li> 
            <li id="active"><a href="/contact/">Get Active</a></li> 
            <li id="tell"><a href="/tell/">information</a></li> 
            <li id="vote"><a href="/vote/">Register</a></li> 
        </ul>
    </div>
     
    </body>
    </html>

  13. #13
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

    Like this -
    http://www.css-lab.com/test/nav-test2.html
    Code:
    ul li a {
        float:left;
        width:100%;    
        text-decoration:none; 
        outline:none;
    }
    ul li a span {
        float:left;
        width:200px;
        text-align:center;    
    }
    Code:
        <ul> 
            <li id="email"><a href="/email/"><span>Send an Email</span></a></li> 
            <li id="donate"><a href="/home/"><span>Donate Money</span></a></li> 
            <li id="active"><a href="/contact/"><span>Get Active</span></a></li> 
            <li id="tell"><a href="/tell/"><span>information</span></a></li> 
            <li id="vote"><a href="/vote/"><span>Register</span></a></li> 
        </ul>

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Good work Ray - I think that covers all bases

  15. #15
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Rayzur, I really appreciate the time you have put into this, thanks ...it works!!

  16. #16
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Your welcome! Glad I could help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •