December 1, 200817 yr I have a section for my newly designed site, its not coded yet, but its going to change the portfolio image with every refresh of the page... I have a php script that will do this but, my problem is that i need the outer border to overlap the image.. here is the image of what i have I need to fit a square screenshot of a site into it like this so basically the image inside that border is under the border, obviously the image needs to be inside the html and I am at a loss on how to achieve it, anyone got any ideas ?... thank you
December 1, 200817 yr Author i wish it were that simple lol.. the problem is that because i want the image to change dynamically with each page refresh using the php script i have, the image code has to be in the xhtml, hence my problem lol
December 1, 200817 yr As long as the images are all the same size make a rounded edge image that fits inside the box with the border...... Border = background. image = image. Photoshop it until it fits nicely then your done.
December 1, 200817 yr Author I did think about that, but what I was hoping for was to be able to just upload the square shrunk down portfolio image without messing about... thanks
December 1, 200817 yr i wish it were that simple lol.. the problem is that because i want the image to change dynamically with each page refresh using the php script i have, the image code has to be in the xhtml, hence my problem lol If you have the dynamic image in an inline CSS class you can simply change the image name/location using your script?
December 1, 200817 yr Author meaning that I would have to create a new css style sheet for every image I upload and if the image is inline styled with the php included then it would not be valid because the images would be wrapped in style, that's if they were produced as background images. or did you mean something else ?
December 1, 200817 yr My way is probably the easiest way. Just make all the images the same size as the border set the border as the background and then put the image in the middle of the div..... worked for me.....
December 1, 200817 yr Author I dont mean to keep finding holes but that means i would have to shape the image around the tag on the left that you can just about see
December 1, 200817 yr Your script outputs an image link, right? Can you adapt it to do the following? - take out the link info from the image - add another image on top (z-index) and apply the link to it the top image would basically just be a transparent png with the white border and clear inner bit ::edit:: Other way would be to preprocess the uploaded image, which can be done server-side.. so you upload your plain image, the border gets added to it and then the image is served up by your current php script
December 2, 200817 yr ive done something like this before, what i did was something like this i placed both the image and the border image in a div together, the border image as transparent png. than i relatively placed the border image over the other image
December 9, 200817 yr Author just thought I would show you guys the solution given to me by Stu Nicholls ( cssplay.co.uk ) absolute genius http://www.cssplay.co.uk/web/glynn/pictureframe.html just in case the link gets broken, here is the code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> stu nicholls </title> <style type="text/css"> #holder {width:284px; height:315px; background:#f37538; position:relative; margin:100px auto; padding-top:10px;} #imageHolder {width:240px; height:210px; text-align:center; position:relative; margin:0 auto;} #imageHolder img {display:block; margin:0 auto; padding-top:8px;} #imageHolder div#frame {background:url(frame.png); position:absolute; left:0; top:0; width:240px; height:210px; z-index:500;} #holder div#tag {background:url(tag.png); position:absolute; left:-60px; top:-19px; width:150px; height:141px; z-index:500;} #holder p {padding:0 30px; margin:0; color:#ebec89; font-size:11px; font-family:tahoma, sans-serif; text-align:justify;} #holder h4 {text-align:left; font-size:17px; font-family:tahoma, sans-serif; color:#ebec89; margin:0; padding:5px 30px;} #holder h4 a {font-family:tahoma, sans-serif; color:#ebec89;} </style> <!--[if lte IE 6]> <style type="text/css"> #imageHolder div#frame { background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='frame.png', sizingMethod='crop'); } #holder div#tag { background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='tag.png', sizingMethod='crop'); } </style> <![endif]--> </head> <body> <div id="holder"> <div id="imageHolder"> <img src="image.jpg" alt="" title="" /> <div id="frame"></div> </div> <div id="tag"></div> <p>Some text about the current portfolio image so customers can see the site and also what the site is about below supply a link.</p> <h4><a href="#url">www.jonnorton.co.uk</a></h4> </div> </body> </html> thank you to all that answered
Create an account or sign in to comment