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

Thread: Web 2.0 Design

  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Web 2.0 Design

    I'm learning web design right now for fun. I can make okay looking websites but I want to make something spiffy like:
    http://wigitize.com/

    Is there anyway to hand code a website design like that? With just a background and a box in the middle with rounded corners? Thanks.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    What a question… of course there’s any way to hand code this. And the simplest thing to do is to look at their source code and learn how they have done it.

    You shouldn’t look at that site in any browser other than Netscape/Firefox/Mozilla, though, as they have used proprietary (non-standard) and not yet supported CSS 3 properties to achieve that which will only be visible in Firefox so far.

    Code:
    .box .spin_div_container {
      -moz-border-radius: 12px;
      border-radius: 12px;
    }
    However, search for “rounded corners CSS” and you’ll get numerous results explaining you how to do it cross browser compatible.

  • #3
    New Coder
    Join Date
    Jul 2007
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for replying quickly.


    Another question:
    How do I make a text box in the middle of the page?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Use a block element (a div might be the most appropriate in this case), apply a width and margin: auto; to it and there you go. As I said: If you come across websites that you like look at the source code and how they did the things you like and want, too. Then, the best thing to learn it is just copying the stuff they did, i.e. recreating that site or feature by hand yourself.

  • #5
    New Coder
    Join Date
    Jul 2007
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I'm in Firefox, how do I view the CSS stylesheet of a site?

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    @MindTheGap
    well you could assign an 'id' or a 'class' (id if once on page, class if >once ),
    and assign the attributes.

    #textbox {
    width : 150px;
    margin-left : 50px;
    etc
    }

    the values used would be relative to the div which the textbox is within.

    @VIPStephan

    when you say Proprietary/nonstandard css 3 proprerties is it dafe yet to build on the basis that they will become standard. I am interested because if they were likely to become standard, I ('speaking' personally), would use them from now anyway and state clearly on my site that a better experience could be had using FF. not to start an ff -v- ie dabate but it is clear that with NoScript (and other stuff), there is an advantage to be gained by selecting a certain browser. I want to edumacate my visitors and let them have the choice.

    bazz

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Quote Originally Posted by MindTheGap View Post
    If I'm in Firefox, how do I view the CSS stylesheet of a site?
    Well, you could do it in any browser by viewing the source code of the site and searching for a link to the stylesheet(s) which is/are usually in the head section of the document. Pressing Ctrl + U (Cmd + U on Mac) in Firefox will bring up the source code, and for example the head section of this website looks something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" lang="en">
    <head><title>CodingForums.com - Reply to Topic</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta name="generator" content="vBulletin 3.6.8" />
    <meta name="keywords" content="javascript, php, cgi, xml, css, asp, mysql help, database, webmaster, dhtml" />
    <meta name="description" content="Web coding and development forums. Get help on JavaScript, PHP, CGI, CSS, XML, and more." />
    <link rel="shortcut icon" href="favicon.ico" />
    <!-- CSS Stylesheet -->
    <link rel="stylesheet" type="text/css" href="clientscript/vbulletin_css/style-d9fa637d-00001.css" id="vbulletin_css" />
    Do you see the link to the stylesheet there (I made it bold)? You can just copy that path in the href attribute and paste it in the address bar of your browser (i.e. http://codingforums.com/clientscript...637d-00001.css), and POW! …you have the stylesheet there. This also works with JavaScript files.

    Of course, there are simpler ways as some smart guys have developed a small programm to extend your Firefox which is called Web Developer Toolbar. There you can view CSS, JS, many things with one click.

    Quote Originally Posted by bazz View Post
    when you say Proprietary/nonstandard css 3 proprerties is it dafe yet to build on the basis that they will become standard. I am interested because if they were likely to become standard, I ('speaking' personally), would use them from now anyway and state clearly on my site that a better experience could be had using FF.
    Proprietary was only referring to the -moz-border-radius property which Mozilla introduced for their browsers, and are not part of the CSS specifications. However, the W3C is developing the specs on the most used/requested features by developers and browser vendors, and the border-radius will be part of the CSS 3 specification. It isn’t yet and using it won’t have any effect yet but you can use it in anticipation of it being supported in near or far future.

    The proprietary properties can be used as well but don’t whine about CSS validation errors.
    Last edited by VIPStephan; 01-15-2008 at 01:11 AM.

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    thank you VIP.

    bazz


  •  

    Posting Permissions

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