Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Feb 2006
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    rounded corner and table styling?

    im not good at CSS/HTML but I need to be able to create this layout and not sure how to do it.

    I also need to know how to align the objects (image, text, button on the right) just like the page. its a mockup page in jpg.

    any ideas?
    Attached Thumbnails Attached Thumbnails rounded corner and table styling?-o2plusbb_shoppinglist02.jpg  

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    Quote Originally Posted by firehawk View Post
    any ideas?
    http://www.w3schools.com/html/default.asp
    http://www.w3schools.com/css/default.asp

    should be a good starting place.

  • #3
    New Coder
    Join Date
    Feb 2006
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks but not quite what im looking for or what i meant.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Useful sites here.

    Frank

    Use the search facility. single words often the best.

    One selection here.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    For the rounded-corners you can use CSS3 look at the link below
    http://www.css3.info/preview/rounded-border/

    However you can do the same effect through JavaScript as CSS3 isn't mainstream yet.
    http://www.curvycorners.net/

    I use CurvyCorners.net in my site at the moment until CSS3 becomes mainstream.

    Andy

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by ahayzen View Post
    For the rounded-corners you can use CSS3 look at the link below
    http://www.css3.info/preview/rounded-border/

    However you can do the same effect through JavaScript as CSS3 isn't mainstream yet.
    http://www.curvycorners.net/

    I use CurvyCorners.net in my site at the moment until CSS3 becomes mainstream.

    Andy
    My website** and Sources** programs are using it. It degrades successfully in IE8 etc.

    In my signature**
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    Yeah it works in 'modern' browsers. But because you have to use prefixes to select the mozilla and webkit engines it doesn't currently pass W3C validation and isn't recommended by W3C as half of the selectors are in the working draft stage.

    I use the border-radius CSS command in the beta version of my website so that when CSS3 becomes mainstream i can transfer over easily.

    But i have found the Javascript very helpful for older browsers such as, IE 6,7,8.

    Andy

  • #8
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    829
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Rounded Corners (Online Tools):

    http://www.spiffybox.com/
    http://tools.sitepoint.com/spanky/
    http://www.spiffycorners.com/
    http://www.spiffycorners.com/index.p...=b20000&sz=5px
    http://www.ezroundedcorners.com/
    http://www.makeuseof.com/dir/rounmyc...-image-editor/

    CSS:

    http://malsup.com/jquery/corner/
    http://www.css3.info/preview/rounded-border/
    http://www.cssjuice.com/25-rounded-c...ques-with-css/
    http://kalsey.com/2003/07/rounded_corners_in_css/
    http://www.html.it/articoli/nifty/index.html

    JavaScript:

    http://www.ruzee.com/blog/ruzeeborders/

    CSS 3.0:

    http://www.htmlgoodies.com/beyond/cs...le.php/3876516

    Extra, and hopefully, good info:

    How to Make a Webpage:

    Full Web Building Tutorials: http://www.w3schools.com/
    The Web Book (free): http://www.the-web-book.com/index.php
    Beginner's HTML Tutorial: http://www.htmlbasix.com/
    How to Create a Webpage: http://www.make-a-web-site.com/
    http://www.w3schools.com/site/default.asp

    So, you want to make a Web Page!: http://www.pagetutor.com/html_tutor/index.html
    Getting started with HTML: http://www.w3.org/MarkUp/Guide/
    Basic HTML Code / Tags For Simple Web Page: http://www.ibdhost.com/help/html/
    HTML Examples: http://www.w3schools.com/html/html_examples.asp

    Choosing Dimensions for Your Web Page Layout:

    http://www.elated.com/articles/choos...b-page-layout/
    How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
    In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/

    Care With Font Size: http://www.w3.org/QA/Tips/font-size

    CSS Tutorials:

    http://www.w3schools.com/Css/default.asp
    http://www.csstutorial.net/
    http://www.echoecho.com/css.htm
    http://www.html.net/tutorials/css/
    http://www.w3.org/Style/Examples/011/firstcss

    http://htmldog.com/guides/cssbeginner/
    http://www.davesite.com/webstation/css/
    http://www.htmlcodetutorial.com/char...msupp_193.html
    -----------------------------------------------------
    Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design
    Why tables for layout is stupid: http://www.hotdesign.com/seybold/
    How to convert manually your HTML tables to CSS: http://www.table2css.com/articles/co...-tables-to-css
    Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Ima...ysterious_Gaps
    Why inline CSS and JavaScript code is such a bad thing: http://robertnyman.com/2008/11/20/wh...h-a-bad-thing/

    I know. It's probably overkill.
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •