UnknownPlayer Posted December 2, 2010 Share Posted December 2, 2010 Can someone help me to make this with CSS or somehow, but i need for every article to put text where are these red lines ? Or anoher way like something with image that can put text in x, y position ? Photo: Thanks.. Quote Link to comment Share on other sites More sharing options...
The Letter E Posted December 5, 2010 Share Posted December 5, 2010 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 Quote Link to comment Share on other sites More sharing options...
fortnox007 Posted December 7, 2010 Share Posted December 7, 2010 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.