...

View Full Version : Web 2.0 Design



MindTheGap
01-15-2008, 12:58 AM
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.

VIPStephan
01-15-2008, 01:05 AM
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.



.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.

MindTheGap
01-15-2008, 01:17 AM
Thanks for replying quickly.


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

VIPStephan
01-15-2008, 01:45 AM
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.

MindTheGap
01-15-2008, 01:49 AM
If I'm in Firefox, how do I view the CSS stylesheet of a site?

bazz
01-15-2008, 01:50 AM
@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

VIPStephan
01-15-2008, 02:09 AM
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:


<!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/vbulletin_css/style-d9fa637d-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 (https://addons.mozilla.org/de/firefox/addon/60). There you can view CSS, JS, many things with one click.



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 (http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius). 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. ;)

bazz
01-15-2008, 02:11 AM
thank you VIP.

bazz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum