Css help? |
 Sep 13 2009, 03:25 AM
Post
#1
|
|
 Senior Member  Group: Member Posts: 164 Joined: May 2008 Member No: 647,219  |
Lmao, I'm sorry, I'm done coding domain lyts the way I normally do.
I really wanna go to Css. Is there ANY tutorials really that are good? The one on here makes no sense. Or can I atleast have someone message me? Etc. http://gippersnaplyts.com/ |
|
|
|
 |
Replies
|
Sep 14 2009, 05:19 AM
Post
#2
|
|
|
Senior Member Group: Member Posts: 1,237 Joined: May 2008 Member No: 648,123 |
 Here goes...a lot of reading. Get comfy. A dandy basic 3-column template: CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Title, no way</title> <style type="text/css" media="screen"> body { text-align:center; } #main { margin:auto; text-align:left; width:900px; } #left { float:left; width:150px; } #content { float:left; width:600px; } #right { float:right; width:150px; } #footer { clear:both; } </style> </head> <body> <div id="main"> <div id="left"> The left side bar </div> <div id="content"> The main content area </div> <div id="right"> The right sidebar </div> <div id="footer"> The footer </div> </div> </body> </html> Piece by piece: CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> This is the type of document you're delivering to a browser. In this case, XHTML 1.0 transitional - "transitional", meaning it supports some elements of HTML and some of XHTML. Because it's XHTML and not HTML, all tags need to be in lowercase. You can do HTML if you want; doesn't really matter.CODE <style type="text/css" media="screen"> Just for sake of simplicity, I put the stylesheet in the head. However, to save on bandwidth and load times, it's better to link to an external stylesheet. To do that, make a file called "style.css". Inside it, put all the styles, but without the <style> tags. Then, call it in the head of your document like this:selector { property:value; } </style> CODE <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> "text/css" tells the browser to deliver it as CSS. The 'media="screen"' part is to tell browsers that it's for computer monitors. There are other media available, like handheld (for small screens), print (for printing) and a few others. You should only have to deal with "screen". The parts of the stylesheet in my example: body { text-align:center; } - This centers everything on your page. It doesn't center elements like "div" or "table" in modern browsers, but it's a fix for old, stupid browsers like IE5 and IE6. #main { margin:auto; text-align:left; width:900px; } - margin:auto; centers elements in modern browsers. text-align:left; aligns all text inside the div with an ID of "main" to the left. width:900px; gives it a width of 900 pixels. It can be whatever you want; as long as you have that margin:auto; in there, it'll be centered. #left { float:left; width:150px; } - This is for the left sidebar. float:left; aligns it on the left margin of the "main" div. I've given it a width of 150 pixels. #content { float:left; width:600px; } - This is for the main content area. It also has float:left;, which will put it right next to the left sidebar. It has a width of 600 pixels. #right { float:right; width:150px; } - This is for the right sidebar. float:right; aligns it on the right margin of the "main" div. Again, a width of 150 pixels. (150 + 600 + 150 = 900) #footer { clear:both; } - Obviously for the footer. clear:both; just tells browsers that you want the sidebars and content areas to extend all the way down to the footer. I'd go more into detail with that, but it's not really necessary right now; all you need to know is that it works. Do the HTML, close the body, save the document, upload. |
|
|
|
Posts in this topic
Gippersnap Css help? Sep 13 2009, 03:25 AM
Gippersnap Okay, I tried doing some of the things it said.
An... Sep 13 2009, 04:34 AM Gippersnap How can it be the resolution if my site friend is ... Sep 13 2009, 05:42 AM Gippersnap So if I was to move it to -495px; or 495px on marg... Sep 13 2009, 06:05 AM Gippersnap CODE<head>
<meta name="description... Sep 13 2009, 06:34 AM Gippersnap Okay, the ad is taken out, any other idea on what ... Sep 13 2009, 06:38 AM Gippersnap But aren't I only doing positioning?
Because t... Sep 13 2009, 06:46 AM Gippersnap Idk what to do for the background -_-.
But for the... Sep 13 2009, 03:40 PM Gippersnap http://gippersnaplyts.com/Newdomainpractice.php
O... Sep 14 2009, 08:47 PM fixtatik Well, you kinda mutilated the example template I g... Sep 14 2009, 11:59 PM Gippersnap Jesus this is confusing -_- Sep 15 2009, 03:47 PM
fixtatik You're making this harder than it really is. Y... Sep 16 2009, 02:27 AM |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: