CSS - Images and Text

Discussion in 'CSS' started by bluemanteam, Jun 27, 2008.

0
  1. #1
    I have a wordpress theme that I am working on. In the header, the title is centered horizontally and to the left of it is a small background image.

    This works really well.

    The problem is that I will be releasing the wordpress theme. Someone can change the title from the Generic "Wordpress Theme" to whatever they want. If you change the title to more characters then the current title, it overwrites the image to the left of the title.

    Is there a way that to prevent this with CSS? Is there some sample code someone could provide if this is possible to prevent?

    Thank you
     
    bluemanteam, Jun 27, 2008 IP
  2. yankzilla

    yankzilla Peon

    Messages:
    159
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Do you have a sample url I can take a look at? You can PM the url and I can fix this.

    Thanks
     
    yankzilla, Jun 27, 2008 IP
  3. bluemanteam

    bluemanteam Peon

    Messages:
    169
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Here is a sample url http://bluemanteamtest.byethost9.com/

    Notice how the text overlaps the image. I know how to position the image if the text doesn't change, but with wordpress, anyone can change the title and if they change from the default, then the spacing gets messed up.
     
    bluemanteam, Jun 27, 2008 IP
  4. yankzilla

    yankzilla Peon

    Messages:
    159
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You can find your results here: h##p://csscharm.com/test/index.html

    I stripped out all but header info and made it adjustable so you can make it as big or small as you wish.

    Note: The padding in the ".header-title a" should be the same for left and right and be the size of your background-image.

    hope this works out good for you.
     
    yankzilla, Jun 27, 2008 IP
  5. bluemanteam

    bluemanteam Peon

    Messages:
    169
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks so much for your help, I'm going to look at the code a little more in the morning when I'm a bit more awake, but essentially, the only change I made on my theme was add one line:

    padding: 0 48px 0 48px;

    Everything works, regardless of the length of the blog title.

    To summarize, is that really the only change I need to make?

    Also, you mentioned that it needs to "be the size of your background-image"? Could you clarify what exactly that means and where in the code you made the change to meet this requirement.

    Thank you
     
    bluemanteam, Jun 28, 2008 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Actually, it's more code than you need ;) If the padding on each side is going to be the same, then you can just say padding:0 48px;

    But yeah, adding padding will likely prevent overwriting your image - I use padding this way a good deal when using a negative margin to position elements inside a heading like say... the date of a news item.
     
    deathshadow, Jun 28, 2008 IP