1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Putting Content Inside a Graphical Border

Discussion in 'CSS' started by Jetheat, Nov 3, 2010.

0
  1. #1
    I have a blog and I want to put my text inside a border/wrapper.

    So I've made the border and sliced it up into 3 parts: top middle and bottom.

    I want to place the text content within the middle of this graphic and so I figure I need to make the sliced images as a background using css and then type whatever I want over it.

    So I did this but dont know what Im doing wrong:

    
<style type="text/css">
top {background: url('/images/t1.gif') ;}
middle {background: url('/images/t2.gif') ;}
bottom {background: url('/images/t3.gif') ;}

</style>


<div class="top" id="top"></div>

<div class="mid" id="mid">

 <div class="content" id="content">[COLOR="red"]Content Goes Here[/COLOR]</div>
  
</div>

<div class="bottom" id="bottom"></div>
    Code (markup):
    Any help is appreciated.

    JH
     
    Jetheat, Nov 3, 2010 IP
  2. flexluther

    flexluther Well-Known Member

    Messages:
    252
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    123
    Digital Goods:
    1
    #2
    Couldnt you use something like:
    <html>
    <head>
    <style type="text/css">
    top {background: url('/images/t1.gif') ;}
    middle {background: url('/images/t2.gif') ;}
    body {background-image:url('/images/t2.gif');}
    </style>
    </head>

    <body>
    <h1>Content Goes Here</h1>
    </body>
     
    flexluther, Nov 3, 2010 IP
  3. Jetheat

    Jetheat Well-Known Member

    Messages:
    260
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    140
    #3
    Can you use body in a wordpress page?
     
    Jetheat, Nov 3, 2010 IP
  4. MakingThisSucked

    MakingThisSucked Greenhorn

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #4
    I'm not sure why you had classes in each div along with IDs, but it is unneeded and you didn't have anything for them in CSS. Everything I changed i mentioned above where i did it in bold and underlined. See if that helps.
     
    MakingThisSucked, Nov 3, 2010 IP
  5. Jetheat

    Jetheat Well-Known Member

    Messages:
    260
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    140
    #5
    For some reason, only the middle image is showing up and not the top or bottom.

    Thanks,
     
    Jetheat, Nov 3, 2010 IP
  6. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #6
    Post a live url to preview may be. you'll surely get the issue solved.
     
    radiant_luv, Nov 3, 2010 IP
  7. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #7
    You need to set a height and width for the top and bottom divs, and maybe even use a float:left;
     
    GWiz, Nov 4, 2010 IP
  8. zzbomb

    zzbomb Peon

    Messages:
    57
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    zzbomb, Nov 5, 2010 IP