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