curving boxes?

windows

Guest
hi all - i pretty neb with sites - basically i conjure up good graphics<br />
<br />
take a look<br />
<br />
<!-- m --><a class="postlink" href="http://www.gibnynex.gi/home/sailinggibraltar/layout.htm">http://www.gibnynex.gi/home/sailinggibraltar/layout.htm</a><!-- m --><br />
<br />
now i could do with some help in curving those lines to stop it from being so......boxy <br />
<br />
also how to stop the table border from being double lined would help too - still dont kno how to do that<br />
<br />
<br />
any help given would be greatly appreciated. <br />
<br />
just asking is stefan huzics still around i remember him for the really old forums :P<!--content-->Stefan's around somewhere.<br />
<br />
You can't make input boxes curved, but you could give them a background image so that they appear curved.<!--content-->cool so i would set the cell border to 0 but put the bg image with the curve........ hmm that in itself presents a problem in the sensse that you have to make the bg image the exact same size because otherwise it tiles it <br />
<br />
a tiles images with curves in the middle lol :S<!--content-->Originally posted by da_bomb <br />
now i could do with some help in curving those lines to stop it from being so......boxy <br />
<br />
<br />
CSS 3 will bring with it curved borders, but since the specs are not final yet the implementations in browsers are sparce and experimental in nature.<br />
<br />
You can get it working in eg Mozilla by prefixing the CSS3 properties with -moz-, eg <br />
{-moz-border-radius-topright: 10px;}<br />
<br />
Here is a site that uses it (obviously you will only see it in a gecko browser)<br />
<!-- m --><a class="postlink" href="http://www.grayrest.com/moz/">http://www.grayrest.com/moz/</a><!-- m --><br />
<br />
<br />
also how to stop the table border from being double lined would help too - still dont kno how to do that<br />
<br />
<br />
The easiest is of cource to stop abusing <table> for general page layout ;) That is sure to remove the borders :D<br />
<br />
Alternativly you can use CSS to only remove the table borders.<!--content-->well, i know, tables is not what u should use to layout your site but for me it is easier to sort out all the pages in my folder with all my images and stuff - plus i use dreamweaver 6 mx which makes tables really easay to use and to use as a layout. But officially i know i should not be using them.<br />
<br />
:P<br />
<br />
Stefan i asked if u were around because on the old forums - my nick used to be patrick_caruana and u were constantly helping me with everything i needed - THANKS LOADS!<br />
<br />
anyways off to make site<!--content-->hi,<br />
ok before i tell you how i have round corner i would just like to say, you will be abusing the table tag:rolleyes: .<br />
<br />
I make up very small jpeg corners one for each corner you want rounded. Make sure its the same colour your going to use for the background colour of the table.<br />
Insert a table with 1 row and 3 colums and set everything to 0 (borders, cell spacing etc.). Insert your top left corner image in the first lefthand, and possible set to align top and left. Do the same with the righthand corner. Set the background colour for the table to the same colour as your images.<br />
Now in sert a 1 row 1 colum table under your first table and set all atributes to 0 and colour background same colour.<br />
Put in a 3rd table with 3 coloums 1 row and do the same as the first table. Once you have that you just need to make up a CSS file to change your table borders to solid and coloured.<br />
<br />
Hope this helps you abuse tables, lol.<!--content-->Just thought I should add, you don't need to abuse tables to get rounded corners with images. Simple CSS 1 & 2 works nicely too.<br />
<br />
Here is an example I made a while ago for someone. It only has 1 rounded corner, but the principle works for 4 corners too.<br />
<br />
<!-- m --><a class="postlink" href="http://hem.bredband.net/b103277/layoutremake/index.html">http://hem.bredband.net/b103277/layoutremake/index.html</a><!-- m --><br />
<br />
One could also use floated images with negative margins to cover up the square corners.<!--content-->
 
Back
Top