crmamx Posted May 6, 2011 Share Posted May 6, 2011 Well it's finally finished and ready for critique. For those of you that don't know my history and that look at this tutorial, my story is recapped on the first page. I made this tutorial for beginners with no experience with CSS, as I was when I started. I hope it turns out to be a useful document. I would appreciate any and all suggestions and critiques. http://bayarearcsociety.com/tutorial/css_tutorial1.php Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/ Share on other sites More sharing options...
spiderwell Posted May 6, 2011 Share Posted May 6, 2011 lesson 13 The id selector is used to specify a style for a single, unique element and is defined with a pound sign "#". think you will find thats called a hash still reading....... Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1211224 Share on other sites More sharing options...
spiderwell Posted May 6, 2011 Share Posted May 6, 2011 am enjoying the float section, its a well written out site and makes it very easy to understand css. good work Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1211226 Share on other sites More sharing options...
crmamx Posted May 6, 2011 Author Share Posted May 6, 2011 Many thanks... I had such a hell of a time learning CSS ( and I am still far from an expert ) that I thought there had to be a better way. So I tried to put something together for the beginner who is probably only going to do one site. It definitely is not intended for the advanced programmer. A lot of the format and content was derived from reading the questions on the CSS forum. Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1211237 Share on other sites More sharing options...
crmamx Posted May 6, 2011 Author Share Posted May 6, 2011 lesson 13 The id selector is used to specify a style for a single, unique element and is defined with a pound sign "#". think you will find thats called a hash still reading....... It's called many things. A Google search will produce, among others: An id selector is defined in CSS using the "#" sign /* All id selectors are defined with a pound symbol (#) before their name */ In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by a hash character (#). The id selector is then defined with a hash- or pound-sign (#) before the id name. ID is specified by including a number sign (#) before the selector name. Number sign is a name for the symbol #, which is used for a variety of purposes including, in some countries, the designation of a number (for example, "#1" stands for "number one"). The symbol is in Unicode as code point U+0023 # number sign (35decimal); it is also present in ASCII with the same value. In the United States, the symbol is usually called the pound sign, and the key bearing this symbol on touch-tone phones is called the pound key. In Canada, this key is most frequently called the number sign key. In most English-speaking countries outside North America, the symbol is usually called the hash, and the corresponding telephone key is the hash key. Beginning in the 1960s, telephone engineers have attempted to coin a special name for this symbol, with variant spellings including octothorp, octothorpe, octathorp, and octatherp.[1] None has become universal or widely accepted. In non-English speaking nations, other names for this symbol are also used. Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1211296 Share on other sites More sharing options...
spiderwell Posted May 6, 2011 Share Posted May 6, 2011 well i will state that anyone in europe, and definately in the UK, will probably say what i said since our money is pound sign £££££ and so when i saw that I was like WTF? lol dont take this the wrong way, buy why does america have to change everything to suit them and ignore things that have been in place for years. i cried when i discovered they got sulphur changed to sulfur, bad day for science. the pound was very well established long before computers or perhaps before the name hash came around, at least when refering to that symbol, rather than the drug of course! ok rant done, but since you are going to be offering this site globally (hey it is the internet after all), perhaps its worth stating its also known as hash, but will be refered to as pound herein. so readers get to know about both, i quite like octathorp myself! Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1211353 Share on other sites More sharing options...
crmamx Posted May 6, 2011 Author Share Posted May 6, 2011 perhaps its worth stating its also known as hash, Good idea, will do. But since when I call in a prescription and she says "Please enter your prescription number and when you finish, press the pound key" I will call it the pound sign.".. Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1211392 Share on other sites More sharing options...
cssfreakie Posted May 8, 2011 Share Posted May 8, 2011 looks good Curtis! you already got my review Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1212305 Share on other sites More sharing options...
QuickOldCar Posted May 8, 2011 Share Posted May 8, 2011 "WampServer is the only packaged solution that will allow you to reproduce your production server." But you are thinking that everyone is going to be using windows. So why not list the AMP versions : LAMP - Linux - Download and installing ubuntu server is most likely the best and easiest way. http://www.ubuntu.com/download/server/download otherwise this tutorial covers it pretty well http://www.lamphowto.com/ CentOS using YUM: Download a copy of CentOS Linux and install it - http://www.centos.org/ Once your CentOS is installed. Open a terminal and type yum install httpd and follow on screen instructions to install apache web server Once apache web server has been installed, type yum install php Once PHP installed successfully, type yum install mysql-server mysql Once everything is finished, type service httpd start to start your apache web server, the screen will show you if web server service successfully started type service mysqld start to start your mysql server LAMP now installed, visit http://localhost in browser AppServ - Windows - http://www.appservnetwork.com/ WAMP - Windows - http://www.wampserver.com/en/ WIMP - Windows with ISS versus Apache - http://www.wimpserver.com/ MAMP - Mac - http://www.mamp.info/en/index.html SAMP - Solaris - http://dlc.sun.com/osol/docs/content/OSDEV/gentextid-207.html OAMP - OpenBSD - http://www.devx.com/opensource/Article/40153 I think this post should get placed into CSS versus website critique. Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1212483 Share on other sites More sharing options...
cssfreakie Posted May 8, 2011 Share Posted May 8, 2011 Oh crmamx you might want to add a minimum height of say min-height: 210px; to your photo album otherwise smaller images flow around the bigger ones. this page: http://bayarearcsociety.com/tutorial/example_photo_album.html Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1212485 Share on other sites More sharing options...
crmamx Posted May 8, 2011 Author Share Posted May 8, 2011 quickoldcar "WampServer is the only packaged solution that will allow you to reproduce your production server." But you are thinking that everyone is going to be using windows. So why not list the AMP versions : LAMP - Linux - Download and installing ubuntu server is most likely the best and easiest way. http://www.ubuntu.com/download/server/download To be honest I included the mention of Wamp because my mentor has been urging me to install it. But since I have only the one site I do not want to go to the trouble. And being the tutorial is aimed at a CSS beginner, I have been thinking of removing the mention of Wamp server from the tutorial. What do you think? I think this post should get placed into CSS versus website critique. I will vote for that. Thanks for taking the time. Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1212532 Share on other sites More sharing options...
crmamx Posted May 8, 2011 Author Share Posted May 8, 2011 Oh crmamx you might want to add a minimum height of say min-height: 210px; to your photo album otherwise smaller images flow around the bigger ones. this page: http://bayarearcsociety.com/tutorial/example_photo_album.html I made them all the same height with my photo editor so do I still need to do that? Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1212534 Share on other sites More sharing options...
KevinM1 Posted May 9, 2011 Share Posted May 9, 2011 I think this post should get placed into CSS versus website critique. Eh, I think it can remain here. crmamx is looking for overall site critique, which includes, but is not limited to, critique on his content. The CSS board is for specific CSS questions, which isn't what crmamx is asking/looking for. Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1212762 Share on other sites More sharing options...
cssfreakie Posted May 9, 2011 Share Posted May 9, 2011 Oh crmamx you might want to add a minimum height of say min-height: 210px; to your photo album otherwise smaller images flow around the bigger ones. this page: http://bayarearcsociety.com/tutorial/example_photo_album.html I made them all the same height with my photo editor so do I still need to do that? You did indeed, but what you didn't do is give them all a caption, making some objects higher than others. by supplying min-height you can fix that. see image, what could happen on a different screensize [attachment deleted by admin] Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1212793 Share on other sites More sharing options...
crmamx Posted May 9, 2011 Author Share Posted May 9, 2011 Gotcha! Never would have had any idea what min-height was used for. By the way, want to apologize for using your picture in the Photo Album ( 3rd from left ). It was a mistake and I will remove it immediately.... Got to view my main site using IE6 at a hobby store yesterday. It is a total mess. Asked the owner why he didn't upgrade and he said he never used it except to look up parts. But I could care less. If you're so dumb you are still running IE6 you don't need to be looking at my site anyway. By the way, I removed the section on Wamp. Concluded that it had no business in a tutorial for absolute CSS beginners. Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1212799 Share on other sites More sharing options...
cssfreakie Posted May 9, 2011 Share Posted May 9, 2011 hehe crmamx, no need to apologize, it's not even my own monkey nor photo Just use it, it's fun! although i like the little monkey hanging on a branch more something that could be nice to know is that if you target ie6 if you use float you need to set an extra property called display:inline; Now that only counts for the first element that is floated either left or right, but it won't harm your site if you apply it too all things that are floated. if you used a reset.css most browser differences are gone. Anyway if you have loads of time left, use a conditional comments to give that display inline property to only ie6. more info on conditional comments here: http://www.quirksmode.org/css/condcom.html it could look like this: normal stylesheet: #columnleft{ float:left; width:400px; overflow:hidden; } stylesheet for ie6 #columnleft{ display:inline; /* because this element is floated */ } Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1212810 Share on other sites More sharing options...
cssfreakie Posted May 9, 2011 Share Posted May 9, 2011 crap i double posted Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1212812 Share on other sites More sharing options...
crmamx Posted May 9, 2011 Author Share Posted May 9, 2011 I understand what you are saying but then I am lost. This is my CSS: .thumbnail { float: left; margin:5px; text-align: center; background:#0055BB; padding:3px; border:1px solid #fff; margin:0px; color:#fff; width:170px; min-height: 210px; } and you say that for IE6 I need to add: #thumbnail{ display:inline; /* because this element is floated */ } But then is seems I have defined the same ID twice. And how and where and what in the HTML do I put this? <!--[if IE 6]> Special instructions for IE 6 here <![endif]--> The special instructions ought to be : Get a decent browser... Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1212902 Share on other sites More sharing options...
cssfreakie Posted May 9, 2011 Share Posted May 9, 2011 I mentioned 2 separate things. the minheight is for all browsers so just pput that in you original stylesheet. the second things was that you said in IE6 my site looks broken. A common cause for that is that someone didn't supply display:inline on floated elements. But if i were you I wouldn't bother really. the link i gave about conditional commets is pretty clear. You place those in between the <head></head> tag there you can either add some styletags, just for ie6 or a <link> to an external stylesheet have a look at http://eu.battle.net/wow/en/ and than view source. A clear example of targeting multiple browsers by using conditional comments. Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1212921 Share on other sites More sharing options...
crmamx Posted May 9, 2011 Author Share Posted May 9, 2011 I mentioned 2 separate things. 1. the minheight is for all browsers so just put that in you original stylesheet. 2. the second things was that you said in IE6 my site looks broken. A common cause for that is that someone didn't supply display:inline on floated elements. But if i were you I wouldn't bother really. 1. I did already. 2. Thank you, I won't. Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1212993 Share on other sites More sharing options...
crmamx Posted May 21, 2011 Author Share Posted May 21, 2011 Ok guys, site overhauled based on a lot of good critiques. Give it another whirl and let me know what you think. http://bayarearcsociety.com/tutorial/css_tutorial1.php Quote Link to comment https://forums.phpfreaks.com/topic/235655-css-tutorial-for-beginners/#findComment-1218306 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.