|
HTML - How Can I Add A Custom Image Border Around An Iframe?
my website
http://www.Avalon-Press.com you see the I Frame in the Middle, i think it would look cool to have like a cool little border around it because its a little plain.. can anyone tell me how i can do this? and maybe where to go to to find some borders? i kinda want something similar to this websites. http://www.thenewaddiction.com/ or if you have any other suggestions to my website, i would totally appricate it. - Mike Perez http://www.Avalon-Press.com Similar TutorialsHi all. I'm making a webpage based around tables and iFrame(which i beleive is an awful idea, but i couldn't be bothered doing it any way else ) Anyway, i want my iframe border to be 0, so that the 1px table border takes care of the border. I've tried various methods, but none of them worked. Here's my code. Code: <html> <head> <title>.: Welcome! :.</title> <link rel = "StyleSheet" href = "css\table.css" type = "text/css"> <link rel = "StyleSheet" href = "css\general.css" type = "text/css"> <link rel = "StyleSheet" href = "css\scrollbar.css" type = "text/css"> </head> <body bgcolor = "#111111"> <center> </br> <table width = "856" style = "border-bottom: none" height = "150" cellpadding = "0" cellspacing = "0"> <tr> <td align = "center"><img src = "images\banner.png" width = "856" height = "150"></td> </tr> </table> <table bgcolor = "#E5E5E5" height = "430" width = "856"> <tr> <td><iframe name = "links" frameborder = "0" width = "150" height = "430" scrolling = "auto" src = "left.html"></iframe></td> <td><iframe name = "body" frameborder = "0" width = "700" height = "430" scrolling = "auto" src = "body.html"></iframe></td> </tr> </table> </center> </br> </body> </html> The contents of my stylesheets are as follows: Code: table.css:
table
{
border: 1px solid #999999;
}
general.css
*
{
margin: 0px;
padding: 0px;
color:#cccccc;
}
scrollbar.css
body
{
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}
Please Help me! I am trying to make a quick fruit machine for the company I am on placement with. (see pic below) It is to be use for a one day show and I only have 20hrs to complete it. (15 already used) I'm using a table (mainly for speed) 5x3 the top and bottom center cells span 3 columns and the middle row has the usual 5 td tags 1st and 5th are for the side images and the 3 in the middle contain Iframes to display the relevent info for each reel. the functionality of the game works fine but the borders ruin the look of the page. It's not finished yet but as you can see the borders trash any looks. the ifames are set with: frameborder="0" marginheight="0" marginwidth="0" scrolling="no" and the table is set using css with: border-collapse: collapse; the border-collapse: collapse; gets rid of all the table borders perfectly without the Iframes but the once the iframes are placed in the td's it seems they extend the cell by one pixel. Does anyone know of a way to get rid of them? thanks for looking. Below is the page code if it helps. Code: <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Fruit Machine</title>
<!--<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />-->
<meta name="robots" content="noindex,nofollow" />
<meta name="author" content="www.custompages.co.uk" />
<style type="text/css" media="all">@import "./include/admin.css";</style>
</head>
<body style="background:#FFFFFF;">
<style type="text/css">
.game {
/*background:#000000;*/
/*border: thick solid rgb(128,128,128);*/
border-collapse: collapse;
border: none;
width:960px;
}
td {
background:#FFFFFF;
border-collapse: collapse;
}
.frame {
border-collapse: collapse;
margin:0;
padding:0;
}
</style>
<table align="center" class="game">
<!--row 1 score panel -->
<tr>
<td width="240px;" ><img src="images/topl.gif"></td>
<td align="center" width="480px;" colspan="3"><img src="images/score.gif"></td>
<td width="240px;" ><img src="images/topr.gif"></td>
</tr>
<!--row 2 reels -->
<tr>
<td><img src="images/midl.gif"></td>
<td class="frame"><iframe name="f1" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src=f1r.asp?val= width="160px;" height="300px;"> </iframe></td>
<td class="frame"><iframe name="f2" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src=f2r.asp?val= width="160px;" height="300px;"> </iframe></td>
<td class="frame"><iframe name="f3" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src=f3r.asp?val= width="160px;" height="300px;"> </iframe></td>
<td><img src="images/midr.gif"></td>
</tr>
<!--row 5 play/result button -->
<form name="play" method="post" action="play.asp">
<tr style="text-align:center;">
<td><img src="images/botl.gif"></td>
<td colspan="3" style="background:url('images/button.gif');"><input type="Submit" style="width:300px; background:#0000FF; color:#FFFFFF; font-size:26px;" name="play" value="PLAY" javascript:onkeyup="play.form.submit();" ></td>
<td><img src="images/botr.gif"></td>
</tr>
</form>
</table>
</body>
</html>
Hi, Explaining Scenario: In an iFrame I am loading a website e.g. http://google.com Now I want my iFrame with no borders, but the Page I am calling has an iFrame with Border. How can I override the formatting settings of the website i am calling inside the iFrame ? The other website is not in my control so I can not make changes on that HTML. Regards, Chinmay Hi all! I need some help with an IFRAME, which content is loaded with some strange borders in Opera and IE6, but not with Firefox. This is what it happens in the 3 browsers: This is the code of the page: Code: <html> <body bgcolor="#96c600"> <iframe style="background-color:#96c600;" scrolling="no" frameborder="0" height="190" width="170" id="meteo" src="http://www.meteodirect.com/vignette/md_vignette.php?params_meteo=terrestre&langue=fr&fond=000000&texte=FFFFFF&saisie_met eo=TENDE"></iframe> </body> </html> A test page to give example is online at: http://testroya.100webspace.net/test.html I already tried to: - Set the width and heigt of IFRAME to match exactly the content size. - Set a green background to IFRAME - Set a green background to the table containing the IFRAME Anyway white borders are always here in Opera and IE6, but not in FF! What should I do to get rid of this awful borders? Thank you very much Does anybody know a script that allows a user to type several values into form fields, and for the inputted values they typed to be 'embedded' into a picture? For example, I have a blank image, which is kind of like a profile card. I'd like users to be able to type some information about themselves, which will appear on the card. They then have their own personalized image with their data on, that they can have in a forum signature etc. So, anybody has any ideas? I'm working on a site for my in-laws: shiversbbq.com I made the header and sidebar using slices with photoshop but I want to continue the wood border into the right and bottom of the main content. What is the best way to do this? Thanks!_______________________________ i am trying to add a border to the image in the following html <div class="text-box"><div class='ecwid-Product'><form> <div style='text-align: center; padding-bottom: 0px;'><script type="text/javascript" src="http://app.ecwid.com/script.js?1059002" charset="utf-8"/></script><script type="text/javascript">xProductThumbnail('productid=10048302');</script></div> <div class='ecwid-productBrowser-head' style='text-align: center; padding-bottom: 0px; font: normal 17px tahoma, geneva, verdana, sans-serif'>725 Originals Blue King of Clubs T-Shirt X Large</div> <div class='ecwid-productBrowser-price' style='text-align: center; padding-bottom: 0px' id='ecwid-price-10048302'>$6.50</div> <table align='center' border='0'><tr><td align='left' class='ecwid'></td></tr></table><div style='text-align: center'><script type="text/javascript" src="http://app.ecwid.com/script.js?1059002" charset="utf-8"></script><script type="text/javascript">xAddToBag('productid=10048302');</script></div> </form></div> i have not been able to get it to work i have added a background color to the html but the image border is giving me problems-any ideas ? ps i dont know html or css code really well so hopefully someone can teach me something new I'm working on a site for my in-laws: shiversbbq.com I made the header and sidebar using slices with photoshop but I want to continue the wood border into the right and bottom of the main content. What is the best way to do this? Thanks! ____________________ Hi, I'm new here, and even new to coding websites. Well, it's going pretty well this far I think, but I have one problem now. I have placed a picture/logo which I have turned into a link. It's working very well and looks great, in Google Chrome! But in IE there's a "border" which is blue, and with mouse over it's red. Like all the other links on my site. But I don't want this "border" to be there, just like in Chrome. I have tried almost everything to remove it, but I can't. And I can't even figure out why it's there. Can somebody help me? Thank you. Best regards Thomas. I am not sure if this goes here or not but here it goes. I have a image I created in Fireworks and it is png but I have tried this as jpg. Anyways, the image as a border around it and I am not sure why and why I can not get rid of it. ON fireworks it doesn't show a border but it does on the site and don't know why. Here is the code for the image. Code: <img src="images/contestHeader.png" border="0" width="570" alt="2008 Sarazen Dr Decorating Contest" /> Here is the page for the image. http://www.mesquitechristmas.com/contest.html Anyone have an idea why this is happening? BTW I am using FF -Thanks Hi, I'm trying to make a border with a 50x50px image repeated around it this is the code I have so far; <html> <head> <title>div test</title> <style type="text/css"> #outer { background-image: url(http://i890.photobucket.com/albums/a...oxBorder.jpg); background-repeat: repeat; background-color: #cccccc; width:100%; padding: 3em; } #inner { background-color:#ffffff; padding: 2em; } p {margin: 0px;} </style> </head> <body> <div id="outer"> <div id="inner"> <p> Blah blah blah </p> </div> </div> </body> </html> I want the image around the border to be showing the same as it does at the top, at the bottom. And i want the size of the table to be increased when new text is added into it each time. Can somebody please help me? Thankkksss. Hello I'm new to this forum so I hope I'm posting this in the correct pace. I'm not even sure its possible but I would like to assign an image to a border. The main idea is that I can then use some gradiant images to create a gradient border. Does anyone know if this is possible in HTML? If not how do I acheive this affect. I've seen it on other pages and really like the look of it. Thanks Paul I'm curious how to add color around a image border using html. For example, here is my code: <center><a><img src="http://riverview.topcities.com/ajohn15_10.jpg" border="20" bordercolor="burgundy"></a></center> don't work any help would be appreciated and if anyone knows how i can add a oval frame around using html that would be really nice or link to a tutorial, i have yet to find exactly what i am looking for. Thanks in advance for your help. Hi guys Just joined and hoping someone can offer some advice on an issue. I want a black border around images which show up jsut fine in IE but some reason the border does not appear in FF. The below is an example of what i am doing. <IMG STYLE="position:absolute; TOP:110px; LEFT:610px; WIDTH:180px; HEIGHT:190px" src="Optimized-027edited.jpg" style="border-style: solid; border-color: black;"/> Does anyone have any advice on where what I can do to make the border show up in both browsers? Any help appreciated. Cheers At this guys website he has his "My Personal 100% Money-Back Customer Satisfaction Guarantee" that I'm trying to recreate. It's halfway down the page. www.thecopydoctor.com this is the URL to the certificate image border: http://www.thecopydoctor.com/images/certBorder.gif I'm just getting into HTML and my best guess is he made a div tag and used that little image as the top,right,bottom & left border. He got it to repeat all around the inside of the div. When I try this in Dreamweaver I can only get the image to go along the left or the top of the div's border. Can someone help me recreate this? Hi All, Not sure if this is the ideal place for this because im just looking for advice..... But here it goes Im currently in the process of re-designing my works websitebecause the pleb that done it before obviously had no idea what he was doing... w3c - 96 Erros and 1 warning! on the landing page :-O........ im sticking to the current back ground as that goes with the branding of the company the page im working on is the "Apply Now" page, where the user will fill in all details regarding them self and then goes on to the insurance details...(See attached image) im currently using a gradient which is designed in CSS no Repeat of images lol!! im just trying to think of what sort of back ground color or even maybe not a background color just a border? which will look after all the texts/DropDown boxes etc... I wanna bring the site in to 2011!! not leave it how it is! the background im using is the Gradient attached image. Any advice or maybe some images of designs or techniques to achieve a good looking form whilst keeping a professional site would be highly appreciated. I refuse to use a gray BackGround!!!! :-) p.s the company is an Insurance Company <MAP NAME=mymap> <AREA HREF="/reference/" ALT="HTML and CSS Reference" COORDS="5,5,95,195"> <AREA HREF="/design/" ALT="Design Guide" COORDS="105,5,195,195"> <AREA HREF="/tools/" ALT="Tools" COORDS="205,5,295,195"> </MAP> <IMG SRC="sitemap.gif" ALT="Site map" USEMAP="#mymap" WIDTH=300 HEIGHT=200> I want to show black border arround each area and also show hover effect How can I do this. I tried to add border to style attribute of area tag. but to no result Okay. I'm trying to make it so when you mouseover a players "avatar" the border color changes from grey to red. The following code works PERFECT in IE, but FF, the border doesn't show up at all. CSS Coding: Code: img.avatar {
border-color : #CCCCCC;
border : 1px
}
img.avatar:hover {
border-color : #ff0000;
border : 1px
}
img.avatar:visited {
border-color : #CCCCCC;
border : 1px
}
img.avatar:hover {
border-color : #ff0000;
border : 1px
}
HTML Coding: Code: <TD align=middle width=104> <DIV align=center><A href="Link"><IMG class=avatar height=75 alt="" src="Image URL" width=75></A></DIV></TD> |
|||||||