|
HTML - Transparent Corners
Hi,
I want to implement something like this into my website, with a single 'snipped-off' corner image on an otherwise square, bordered content surround. I'm really not sure what would be the best way to do it, though. Would you use divs or tables, and how exactly would you go about implementing it? ( example: ) P.S. the real layout isn't that hideous, thankfully--just clear colours so you can see what's going on. Any help would be greatly appreciated! J-L Similar Tutorialsi'm trying to put a transparent png img on a colored background, in IE6 the transparent part of the img appears as a color instead of transparent how can i fix that??? the attached imgs shows how it's appearing in IE6 and FF Hi, I am assigining 2 bg images to a div box that is 2.5in wide and 3in hight. The bgs are just to make the corners round. Would anyone please help me assiging this div the 2 bg images 1 to the left and 1 to the right IN A WAY that the bgs would AUTOMATICALLY resize to the correct height, because the bgs are 824px high and I don't want to worry about remaking the corners just becuase the div got a bit wider or taller. Thanks in advance. Hi Was wondering if there was a way of doing rounded corners for buttons etc using CSS/HTML. Any ideas? Is there a more effective way for accessibility? I'm new to CSS/HTML so please go slow Thanx Hi all, I currently have images for my corners and I'm trying to add corners via CSS. http://www.css3.info/preview/rounded-border/ I am struggling quite a lot. Could anyone look at the website I'm working on and just advise me on the code change please? It's really simple but I keep getting repeating images and all sorts. The website in question is http://www.karishmabhandari.com I would like white corners to blend in with the white content area. I've very much noticed this is in the wrong section if someone could move it for me please. Well, I finally applied my layout I've been designing for my site to my forums. ALl was going well until I tried to make rounded corners for the head of my tables. I was attempting this effect with nested divs, but instead of doing like it should (creating rounded corners), it went all over the place. Any help? Link to problem Link to CSS By the way, both the template HTML and CSS validates fine. Hi, I am trying to create a page with a large text box that has rounded corners. What do you suggest is the best way to accomplish this? 1) Using CSS and by: -moz-border-radius-topleft / -webkit-border-top-left-radius -moz-border-radius-topright / -webkit-border-top-right-radius -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius -moz-border-radius-bottomright / -webkit-border-bottom-right-radius 2) Using DIV tags on the top-left, top-right, bottom-left, bottom-right and css to add the image as a background? Best, E Hi I have made a rounded corners box with images, but the bottom line doesn't connect with the two side lines. Thanks for any help: <html><body dir=rtl> <Table CELLPADDING="0" CELLSPACING="0" > <TR> <TD valign=top align=right><IMG SRC="http://www.bkesher.co.il/bkesher/images/tr.png" WIDTH="16" HEIGHT="16"></TD> <TD><img src="http://www.bkesher.co.il/bkesher/images/hline200.png"></TD> <TD align=left valign=top><IMG SRC=" http://www.bkesher.co.il/bkesher/images/tl.png" WIDTH="16" HEIGHT="16"></TD> </TR> <TR style="margin-top:0px;margin-bottom:0px;"> <TD align=center> <IMG SRC="http://www.bkesher.co.il/bkesher/images/vline130.png" border="0" alt="" > </TD> <TD> <TABLE align=center border=2 style="font-size:10pt; border: 2px solid ;border-collapse:collapse;border-color:black"> <TH colspan=2>DDD</TH> <TR><TD width=70%> </TD><TD width=30%></TD></TR> <TR><TD> </TD><TD>AA</TD></TR> <TR><TD>BB </TD><TD>CC</TD></TR> <TR><TD>DD </TD><TD>EE</TD></TR> <TR><TD> FF</TD> <TD>GG</TD></TR> </TABLE> </TD> <TD align=center> <IMG SRC="http://www.bkesher.co.il/bkesher/images/vline130.png" border="0" alt="" > </TD></TR> <TR valign=top style="margin-top:0px;margin-bottom:0px;"> <TD valign=top align=right><IMG SRC=" http://www.bkesher.co.il/bkesher/images/bottr.png" WIDTH="16" HEIGHT="16"></TD> <TD valign=top><img src=" http://www.bkesher.co.il/bkesher/images/hline200.png"></TD> <TD align=left valign=top><IMG SRC=" http://www.bkesher.co.il/bkesher/images/bl.png" WIDTH="16" HEIGHT="16"></TD> </TR> </TABLE> </body></html> Hi, I'am newbe to this forum and I serach all arround but didn't find a solution. I created some html in order to create a box with rounded corners with <div>. The problem is that the result is ok in Firefox, but everything is scrambled up in IE. Can somebody help me in order to make this code work in IE and Firefox? Code: <!-- left-side -->
<div>
<div style="width:100%;margin:0px auto;background: url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/left.gif) repeat-y left top ".$roundtxtbg2.";">
<!-- top + topleft_corner-->
<div style=" width:100%;height:20px;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/topleft.gif) no-repeat left top;">
<!-- top-right -->
<span style=" display:block;position:relative; height:20px;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/topright.gif) no-repeat right top;"> </span>
</div>
<div style=" position:relative;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/right.gif) repeat-y right top; padding:1px 20px 1px 25px; margin:-1px 0 0 0;">
<div style=\" color:".$roundtxtcolor2.";\">***code***</div>
</div>
<div style=" width:100%;height:20px;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/bottomleft.gif) no-repeat left bottom;">
<span style=" display:block;position:relative;height:20px;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/bottomright.gif) no-repeat right top;"> </span></div></div>
</div>
Many thanks Hi guys, i am a new one on this forum, hope you will help me! So here is the problem, take a look at the screenshot, its like div.topRightCommBg doesn`t see negative margin In others browser it`s fine It happens in 6 and 7 IE, and i know that there is some problem with div.common_text if i delete it external block it goes fine with corners, don`t understand it! I did zoom: 1 but i ain`t helped, please do not advise to change structure of code, i want understand what wrong with it! cause i when i was making another site, it was great in the same situation, so is there any ideas? Hi, Just wondered if anyone has any opinions on this Rounded corners can be achieved either by using JavaScript on one div or by using a couple of nested html tags and CSS, Forgetting about cross browser issues and support for a minute, which way should be used when considering standards? Scott Hello all, I just need some help on table corners that is probably really easy. I've uploaded the files for you and the web page is located he http://www.emmaflewers.com/karishmabhandari/ I'm wondering why there is a white line underneath my table? I'm trying to create a white content area and just have four rounded corners. The corners are all even sizes, 20x20px. I am so close to sorting that out but I still can't get it working I usually just stick to square corners but I wanted to try something different this time. If anyone sees some code they don't like either, please let me know! Hi! Is it possible to tile a .png image in a table cell, and is it possible to make the illusion of rounded corners in a table cell? I want to make a webpage with a bg image, and have semi transparent textbox on top of this layer with rounded corners and have a text layer on top of the text box. I use Google sites, so my table content will be variable depending on the content put inside of the blog etc. I want to make a site that looks like a poster and not a website, without using Flash. Thanx, Knut Nordvik Hello HTML Forum, I've been looking everywhere for some solution to making a normal jump menu, like the one below: HTML Code: <form name="form1">
<select name="menu1" onChange="MM_jumpMenu('parent',this,0)">
<option value="#">unnamed1</option>
<option value="#">unnamed2</option>
<option value="#">unnamed3</option>
<option value="#">unnamed4</option>
</select>
</form>
- into something more attractive, with rounded corners for example. I've seen enough Nifty Corners Cubes and the sorts. Please help me out with some CSS. I'm stumped! By the way... I might've posted this in the wrong section, but there were more readers here.. I just realised that too... Sorry. hello , i have been trying to create a sort of image slideshow. the problem is that in firefox it displays correctly with rounded corners , but in chrome the rounded corners ( using css3 ) are being 'hidden' at the back although it is there . here's a demo of my work : http://anisa.me/work/ Any help would be highly appreciated . Hey everyone. Ok i am building a new site i have everything on the page but i think to finsih ti off it wud be nice to have like a simple drop shadow background wiv roundered corners at the bottom of the page. Much like the WordPress blogs .. round at the end. Has anyone have any ideas, advise or tutorials on how to do this. If you have iI would be very greatfull. Kind Regards, WhiteKnight Hi everyone Can you please help. I need to create a 3 column table, left column, content column and right column. I want the left column to have rounded corners. I am having a tough time doing this. Any help is appreciated Thanks Hey guys, basically i'm not great with html and i've been wracking my brains trying to figure these out. (nothing has helped so far) Anyways, heres my site If you scroll to the bottom you can see the footer box, It's the same color as the posts. I want to change the footer box to white, but everything I change doesn't effect it. I'm also wondering how to create rounded corners on the main blog posts, as i believe this will make the layout smoother. yet i've not found any code that works! Any help would be appreciated a billion Hi, I have to make my div transparent so that content(text and image) of container div donot become transparent. Attaching my code u can change image name. Code: <html>
<head>
<title>Image opacity script - www.designplace.org</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
.transparent{
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
}
.notTransparent{
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div style="width: 500px; height: 500px; background-color: red;" class="transparent">
<div class="notTransparent">
A
<span class="notTransparent">transparent</span> div.
<img id="tuxie" src="next.gif" width=254 height=46
style="-moz-opacity:30%;filter:alpha(opacity=30)">
</div>
</div>
</body>
</html>
Problem :-- In my case every thing in container div becomes transparent. How can I make sure that image and text does not becomes transparent however container div whose background color is red becomes transparent. Thanks I have a part in my site wherer if u go out of line, it will start a scrollin thing, ill show u how it is now. on the part where it is squared in red instead of that color can i get it transparent? also on the outside of the arrows! p.s. here is the codes: Catagory: Code: <!--Other :Other--> <td valign="top"> <div class="content" style="position:relative; overflow: auto; width:150px; height:100px; left:-95px; top:700px;"> <font face="verdana" size="2"> Other<br> <!--Search Form Starts--> <center><FORM action="/cgi-bin/htsearch" method="post"> <input type="hidden" name="restrict" value="http://www.spt.pcaworld.net"> <input type="hidden" name="exclude" value="/index.html"><p> Search: <input type="text" name="words" size=20 maxlength=20 value=""> <input type="submit" value="Search"><br> Match: <select name="config"> <option value="htdig">with Extensions <option value="exact">Exactly </select> </form> <!--Credit Starts--> <!--http://htdig.sdsu.edu by Andrew Scherpbier andrew@contigo.com--> <!--Credit Ends--> </center> <!--Search Form Ends--> <!-- Start Bravenet.com Service Code --> <center><script language="JavaScript" type="text/javascript" src="http://pub38.bravenet.com/counter/code.php?id=401896&usernum=3260284116&cpv=2"></script></center> </div> </td> here is the style: Code: <!--Style-->
<style type="text/css">
A:link { color: #000000; text-decoration: none; font-weight: italic;}
A:visited { color: #EC0010; text-decoration: none; font-weight: normal;}
A:hover { color: #000000; text-decoration: none; font-weight: normal;}
body
{
SCROLLBAR-FACE-COLOR: #D70018;
SCROLLBAR-HIGHLIGHT-COLOR: #D70018;
SCROLLBAR-SHADOW-COLOR: #D70018;
SCROLLBAR-3DLIGHT-COLOR: #D70018;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #FB0000;
SCROLLBAR-DARKSHADOW-COLOR: #FB0000;
BACKGROUND-COLOR: #000000;
}
.bgtable
{ border: 0px solid #000000; background-color: #EC0010; background-image:url("http://i12.tinypic.com/61n9q81.png"); width: 1007px; height: 802px;}
.content
{ border: 0px solid #000000; color: #000000;}
</style>
<!--/Style-->
plz help! |
|||||||