|
HTML - Tile .png In Table With Rounded Corners, Possible?
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 Similar TutorialsHi 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 It's hard to explain, but basically I want to achieve creating a smaller file looking portion of my site, with a larger around and tabs. Basically this: I currenty just have the outer red table, using .gif's to round the corners. I tried copying the code again to place in the middle of the red table code and it doesn't work. Any help to achieve this effect would be great. Here is the code I am using: PHP Code: <table width="450" cellpadding="0" cellspacing="0" border="0" style="background-color: #086591"> <tr> <td width="14"><img src="images/top_left.jpg" width="14" height="14" border="0" alt="..." /></td> <td width="172"></td> <td width="14"><img src="images/top_right.jpg" width="14" height="14" border="0" alt="..." /></td> </tr> <tr> <td></td> CONTENT HERE <td></td> </tr> <tr> <td><img src="images/bottom_left.jpg" width="14" height="14" border="0" alt="..." /></td> <td></td> <td><img src="images/bottom_right.jpg" width="14" height="14" border="0" alt="..." /></td> </tr> </table> Thanks for any help. 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, 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 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, 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 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. 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 . 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 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 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. 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 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 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? In some sites there are nicely rounded borders. How do they make them? With images of course, but is there any easier way? Hi all ; Does anyone know how to make a rounded rectangle fields like here in htmlforums . (look at the sponsored ads ) . I can make it via background tags but there is a problem when the size of the table changes the picture repeats itself 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 All, Iv been browsing and browsing the internet to try and figure this one out and sadly i cant find a solution, Im trying to do a rounded corners effect in CSS for a button and im using IE7(due to where i work) and the rounded corners effect doesnt seem to wanna happen, can anyone tell me or link me to a document on the net that will give me the effect below is the main button you can see i have put a mox border radius and webkit border radius but doesnt seem to work in IE7 HTML Code: .BtnRaiseTask
{
-moz-box-shadow:inset 0px 1px 16px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 16px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8f002b), color-stop(1, #b20939) );
background:-moz-linear-gradient( center top, #8f002b 5%, #b20939 100% );
background-color:#8f002b;
-moz-border-radius:19px;
-webkit-border-radius:19px;
border:2px solid #c2c2c2;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:21px;
font-weight:bold;
padding:10px 28px;
text-decoration:none;
}
Can some one please help me its driving me insane. 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 |
|||||||