Jump to content

Recommended Posts

You can do this using css. I'm not going to write out a script for you, but I can point you in the right direction.

 

NOTE: This solution is for screen display only.

 

Create a DIV the same height and width of your article. Then use the image as a background for the DIV. What you've done is created a template to place information on top of the image. Now depending on your skill level, create input fields or echo out php variables onto the appropriate spaces. You can align each element by either creating a table or using floating divs.

 

If you are looking for a solution that can actually add to the image itself you would probably be better off with a technology like javascript, or there is probably a php class for altering images, I don't know of it though.

 

Hope this info was helpful.

 

E

this should help you, pretty sloppy code but it works and gives you the general idea:

html (between body tags)

<body>
            <div id="wrapper">
                <div id="left">                    
                    <div class="border">
                        <h2>left1</h2>
                        <p>fdsafdsafdsafdsafdsaf</p>
                    </div>                    
                    <div class="border">
                        <h2>left2</h2>
                        <p>fdsafdsafdsafdsafdsaf</p>
                    </div>                 
                    <div class="border">
                        <h2>left3</h2>
                        <p>fdsafdsafdsafdsafdsaf</p>
                    </div>
                </div>
                <div id="right">                    
                    <div class="border sub">
                        <h2>right1</h2>
                        <p>fdsafdsafdsafdsafdsaf</p>
                    </div>                    
                    <div class="border sub">
                        <h2>right2</h2>
                        <p>fdsafdsafdsafdsafdsaf</p>
                    </div>                    
                    <div class="border sub">
                        <h2>right3</h2>
                        <p>fdsafdsafdsafdsafdsaf</p>
                    </div>
                </div>
            </div>
        </body>

css

.border{
    border: 3px solid black;
    margin:5px;
}
h2{
    margin-left: 10px;
}
#left{
    width:45%;
    display:block;
    border: 1px solid blue;
    float:left;
    margin-right: 20px;
}
#right{
    width:45%;
    border: 1px solid red;
    float:left;

}
#wrapper{
    width:99%;
    margin: 0 auto;
}
.sub{
    width:180px;
    float:left;
}

 

good luck ::)

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.