SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text positioning over a bkg image

    I have text that I want to lay on top of that bkg img. Since it's centered, how do I keep the text in the same place, if the user decides to extend the width of their browser?

    I'm very new to CSS and all the positioning techniques and how they work are a bit overwhelming.

    Here is a link

    http://designingyours.com/undercon/

    I want to put all the contact information text aligned to the other text that's part of the bkg img

    Also how do I, in my CSS, get other the contact text to be different sizes, you'll see what i tried to do in my CSS file.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    If I am understanding you correctly , you want the text to go INSIDE the box, right?

    If this is the case, you want to put your list ( the contact info) INSIDE the id=img div.

    <div id="wrapper">
    <div id="img">
    <ul id="contact">

    <li class="title"><em><strong>K & M Medical, Inc.</em></strong></li>
    <li>333 S.Main Street, Suite 607B</li>
    <li>Akron, OH 44308</li>
    <li><span>Office/span> (877) 374-1414</li>
    <li><span>Fax/span> (330) 374-1633</li>

    <li><span>Email/span><a href="mailto:info@kmmed.com"> info@kmmed.com</li>
    </ul>
    </div>
    </div><!-- End Wrapper -->

    then you will want to push the list down away from the ::shudders:: image text... by doing this:
    #wrapper ul{ padding-top:360px; padding:left:92px /*rough measurements here*/}


    NOW.. that it should like what you want ...HERE IS WHAT WRONG WITH all of this. as a concept...


    1) if the viewer enlarges the fonts enough or if you ad more LIs to your contact info.. or just generally more content... it will eventually leak out of the box since your background image wont grow.

    2) Why the block of image text?! A user cant google it ( bad SEO) and should he/she/it be interested in copying and forwarding any or all part of the content text.


    You should really take the text out ot the bg, put it in a <p> inside the id="img" div, but before your UL , actually while you are at it use a <hx> tag for "K&M Medical">

    your CSS your css would then need to resemble this:
    #wrapper ul, #wrapper h1, #wrapper p{ padding:left:92px ;}
    #wrapper h1{padding-top:158px; padding-bottom:29px;}
    #wrapper p {padding-top:22px ; }
    #wrapper ul {padding-top:50px ; }

    This wont help the accessibility issue, but at least you'll bemove versatile ( if change the image) and you'll get better SEO

    BTW, I eyeballed my measurements so play with the px values +/-

    Hope that helps

  3. #3
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @dresden_phoenix thanks a lot for your input, I'm aware that the text in the img is bad SEO, I just wanted to throw a quick under construction page up and made the contact info real text incase people wanted to copy paste.

    You made some great pointers, thanks for them.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Glad to help.

  5. #5
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, check it out now, looks great!


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
  •