Hi for the last month I have started to learn CSS.Fist thing I did is read everything i could find on www.w3school.com , after that I started reading CSS Mastery 2nd edition.I have build a couple of my own websites with succes but I'm still not happy with what I know , I even practiced with the new CSS3 elements.
I've seen alot of cool stuff build using css especialy on http://www.cssplay.co.uk/ but the only problem is the source code is not displayed and I don't know how the bloody things are.A good example is this:
http://www.cssplay.co.uk/menu/tilt.html
And these is only one of the things that I've seen on this website and would like o learn how to build them.
So anyone know any other similar sites that ofer a good explanation on the more advanced stuff about css(not beginer stuff like building some drop down menus , rollover or hover efects )?Any advice is much apreciated thank you!
As already mentioned, tools like Firebug/Chrome Inspector are definite must haves.
I gained the most experience from real world problems with various different browsers. You make a site, it doesn't look so good in a particular browser. So you search on the internet. Find a solution and memorize it. I think that CSS in itself is a fairly simple tool, I class 'advanced' CSS as mastering the various techniques required to make sites work cross browser and in browsers like IE6/IE7+.
Also, Never give up with CSS, if you find a problem try and find an answer. Most of the time, there will be a simple solution.
In general, make sure your CSS is as simple as can be. I generally find that most complicated CSS can be replaced with relatively simple code, and find people get carried away and forget simple techniques to achieve similar solutions. One such problem, would be putting a button on the right hand side of a div, like below:
-----------------------------------------------
| Button |
-----------------------------------------------
You may see that some people will float the button right, adding more complexity than necessary. What ever happened to text-align:right? :-)
Finally, make sure you find a couple of blogs you like, for example http://csstricks.com and read them, taking note of new techniques. Try and master a '2 column layout', understand the difference between block/inline-block/inline, margin collapsing, tables, html forms, IE6/7 hasLayout, the list goes on. Most of which you will cover if you try and make a website template from scratch. Maybe start with an existing site and see if you can achieve the same layout.
I'm not sure with CSS how to learn it's pitfalls without encountering them mistakenly.
It looks like the stylesheet for the maze is located at: http://www.cssplay.co.uk/menu/candr/tilt.css. You can use that against the source code to figure it out.
One of my favorite is A List Apart. Great articles, not only about CSS like I linked, but about web design and more.
Also HTML Dog has some nice CSS entries.
Then, you can find great CSS resources on the w3 site.
Related
I am interested in improving my understanding of CSS. I have been making web pages for a while, but I am still constantly thwarted by bizarre behavior that I can't explain when I try to get things to look the way I want. I have a good bit of development experience and I have no trouble understanding the finer points of Javascript, PHP, or even C. But when it comes to CSS and HTML, I find I am always trying to "trick" my code into working.
This must betray a lack of understanding on my part about how web pages and CSS actually work. Are there any good books or resources I could look at toward the end of truly understanding what is going on under the hood? I always feel like I'm at a loss, but I suspect I could get over that if I just cracked down and did some good reading.
I find I am always trying to "trick" my code into working.
Yep. CSS is often about creating the illusion of the effect you intend, rather than actually doing what you intend.
That said, there are very specific rules, as specified by the W3C. Understanding the visual formatting model can do wonders for your understanding as well. These specs are dense, and often confusing, however, so figuring out specific properties and building knowledge step by step is often the easier way to go. Find tutorials (see links below), or just play with them and see what happens (that's how I learned float and clear).
Even though it's often dead, there are a few SO users who will check the CSS Chat Room regularly (myself included), so if you have general questions (inappropriate for an actual SO question), feel free to ask there, and someone will eventually ping you back.
Also, I've created a Useful CSS Links document with links to official documents, several tutorials, and other CSS resources.
You might be getting mesmerized by the pretty blinking lights and forgetting to watch how everything is connected together. Just like you can get too focused on how a node in the DOM is affected by your javascript, you can't forget about the parents and siblings and how they all fit together. Your biggest problems are probably positioning. Remember how all the elements are connected together and that will solve a lot of confusion.
I'm sure you've already been here, but just in case:
Learn CSS:
http://w3schools.com/css/default.asp
Learn CSS3:
http://w3schools.com/css3/default.asp
However, the best way to learn this stuff is by trial-and-error. HTML and CSS are unique in their forgiving approach to malformation/errors. This, along with the fact that no two browsers render HTML/CSS exactly alike, presents a certain ambiguity that even experienced HTML/CSS developers occasionally grapple with.
Still, learning this stuff is a blast, and really rewarding once you get a handle on it. Happy coding!
I am using SimpleViewer to show images on a website. It's a nice and elegant tool. But, as it is using Flash not all devices (e.g. iPad?) will/can show the images. Does anybody know about a non-Flash alternative? Maybe totally CSS cased?
I know this is an old question, but I found something that looks quite a bit like SimplerViewer called Gallerific. https://github.com/iamvery/galleriffic
If you check out the example 2 you'll see a layout that looks a lot like SimpleView
Well, I have checked under every rock and I can't find a good non-flash alternative to SimpleViewer (i'm really curious now to if there's one!). There are rumours about it soon being changed to HTML5 (a wise decision), but I don't know if you can wait that long.
I would say the best option is jQuery and CSS, you can personalise and style your gallery as you wish, but you will have to be at least a bit comfortable with html editing. It's not complicated at all, you should give it a try.
You can find lots of jQuery galleries and sliders tutorials here for example: http://vandelaydesign.com/blog/web-development/jquery-image-galleries/
Do some search engine research to get the best options, there are tons of different galleries.
Good luck!
They have now, see: this comment at the SimpleViewer Forum. It's called Universal Playback.
Short story: I frequently have to work on many different, rather small, web pages.
Most of them are layouted with pure CSS.
My Problem:
My job is to work on the code itself, on the functionality of the pages, not on the layout. However, due to the changes I make, I am often forced to make slight layout modifications and that soaks up my time like a black hole.
I end up spending as much as 10 times as long to do the slightest layout modifications as it takes me to add or rewrite routines.
We have a designer as well but it is just impossible to wait for him to redo layouts for every change I make (and often enough I have to change things multiple times).
So what I've searched for is a super basic and simple CSS WYSIWYG editor that isn't a complicated professional design tool. After trying a few tools I gave up, going back to editing by hand. In particular, the behavior of nested layout boxes just freaks me out every time.
Does anyone have some hints on this?
I'd appreciate any help,
Thank you
Two thoughts:
1) Adopt more of an agile process
The visual design (layout) and logic design should be built in tandem rather than one after the other. As you've found out, modifying things after the fact can be a real pain.
2) Adopt a CSS framework/OOCSS methods/Component Library
The idea behind all 3 of those is to create reusable CSS that follows a predictable structure. This takes a lot more up-front work, but results in a code base that should be a lot easier to maintain going forward.
twitter bootstrap
http://twitter.github.com/bootstrap/
looks really good from first impressions.
My rails expert keeps raving about it and I'm planning on trying it. Obviously free 'n all.
Basically we've felt your pain with this issue!
Bootstrap is good for real developers, a lot of it is basic layout via css tags and I think it'll make a lot of sense to you.
Even if it doesn't meet all your needs, it might be a great place to start with, as a standard for a development team. As much as developers often dislike being templated ;)
The actual direct github site is: https://github.com/twbs/bootstrap
Is it used much? Currently?...
Github Stats:
Watcher: 8682
Forks: 1383
Last Update: 10/10/2011
This post: 10/26/2011
Looks good! :)
I'm also a big fan of HAML - Ruby + HTML without the angle brackets(and more)!
... not sure if this will help, but yahoo grid builder works well for me. Of course there is a catch. The css selectors it generates are not very semantic, so you might have to do some re-factoring of them from withing the generated html page.
Github Stats: (for Blueprint suggested by Daniel below)
Watchers: 4556
Forks: 390
Last Update: 06/06/2011
This post: 10/26/2011
First of all I am not programmer nor web developer.
Someone made a website for me but can not contact him right now.
After 3 days of googling i decided to post this question.
How to enable gorizontal scrolling instead of menu and footer wrap on window resize?
I tried attributes such as: display:inline-block; white-space: nowrap (i think this is related to text only), some JavaScripts.
I might placed these elements in wrong place as it's hard to know that code.
This is index file:
http://slawgd.webpark.pl/index.rtf
and pls find CSS here:
http://slawgd.webpark.pl/style.css
Thank you very much for you help!!
Greg
CAUTION: I am sorry that my answer has no real solution so you can choose to ignore.
The followings are just my comment on your web page after I had analyzed it.
It would be slightly better if you copy the rendered code of HTML as we won't get your data in your SQL Database.
Simply right click the page in browser and find Source Code to get it.
Also, you might find a better answer from the someone who help you to produce it because he is the only one person familiarize your page most.
EDIT: Just a suggestion and not a solution.
After I looked at your page, it is suggested that to find the someone because the page was complicated designed.
It needs lots of effort to modify it without affecting other component.
Moreover, it is quite horrible to work out on cross-broswer compatibility because the code is not well designed.
In mainland China, users of Firefox might not have much, but there are still numbers of users using Maxthon which include WebKit engine.
Variant IE-based browser in mainland China also give a slightly different result of rendering so the code must be optimized.
Therefore, ask the website editor for cleaning the code (such as repeating CSS, malformed HTML structure, etc) and working hard on cross-broswer compatibility is considerable.
More personal comment:
In conclusion, if you find a worker for your website construction with money pay, it seems that it is a huge job to rewrite it and it is not easy to persuade him to help you.
Maybe you can ask someone to help you with a simpler basic structure and insert the original JS background slide effect and drop menu effect to your newer, simpler, and cleaner structure.
There are still a readable amount of unnecessary wrappers inside the page.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
As web based designer who has designed web sites using tables but never with css, how can a novice get started with css?
Related SO posts
SO - Css Book & website for CSS
SO - Css blog
Get started by reading tutorial web site first. This way, he will see how to create simple CSS and see the benefits.
http://www.w3schools.com/css/
http://www.echoecho.com/css.htm
http://www.csstutorial.net/
http://www.w3.org/Style/Examples/011/firstcss
http://www.westciv.com/style_master/academy/css_tutorial/
Than, I suggest since he knows how to design website to check other website source and see their CSS files. Zen Garden is a good start.
If he requires more information, he can always get a book (I do not think it's necessary but if he wants a book), he could try Core-Css.
Definitely get the Firebug plugin for Firefox. Go to a site you like and check out the CSS for it. Turn some off and on, change things, just get a feel for how it all comes together. Great learning tool.
Read CSS: The Definitive Guide, Third Edition by Eric A. Meyer. It's one of the best technical books I've read.
To all the other suggestions I would add Smashing Magazine's list of CSS articles.
I recommend Transcending CSS: The Fine Art of Web Design by Andy Clarke. It's less about the technical aspects of CSS and more about the mindset switch that needs to happen when moving from tables based design to separating content from design.
When I started learning CSS, I found myself coding pretty much the same way. Instead of tables and tds, I was using divs and spans. Still working from the outside (design) inward (toward the content) and designing my markup and contents around the look of the page, locking it into the design. Transcending CSS gets into the process of going from the inside (content and markup) out (design) leaving the site's appearance flexible.
Technical info is easy enough to find. I tend to frequent W3Schools.
I'm a big fan of reading tech books, so I learned from Beginning CSS Web Development: From Novice to Professional
I learned a lot from Eric Meyer on CSS and More Eric Meyer on CSS. The books take you through several examples step-by-step, starting with unstyled pages and explain the purpose for each step along the way. They would only be a starting point though, since they're a little bit dated. Sites like A List Apart will give you the most up-to-date information.
Start simple. Read a few sites like A List Apart and Position Is Everything.
Don't try to replace your whole site at once - change one piece at a time.
Keep testing it in different browsers - the earlier you find out it looks different in one (or all!) the better.
The book that got me started was Web Standards Solutions: The Markup and Style Handbook. by Dan Cederholm It is not a reference, but gives you a good start with real-world examples. Dan does a good job of holding your hand, taking it slow and not boring you. I bought it several years ago and still refer to it on occasion.
This is the only CSS book I own. I use the web as my CSS reference.
SitePoint have a large amount of tutorials and reference on this. They even have a book that sound like it would answer your question directly!
HTML Utopia: Designing Without Tables Using CSS, 2nd Edition
http://www.sitepoint.com/books/css2/
with 4 chapters available free
For French there is a good site : http://www.alsacreations.com/ there is tutorials on HTML, xHTML and CSS and many examples (how to create "pretty" menus etc...)
I learned a lot of CSS by downloading free site designs from http://www.oswd.org/ and trying to implement the same effects on my own. It also gave me some insights into ideas for site-wide design patterns in CSS.
I'm a fan of the brute-force approach. Learn a few basics then start trying to recode your HTML using pure CSS. Every time you need a new technique, google it. You may want to subscribe to the CSS-discuss mailing list or read the wiki.
http://www.w3.org/Style/CSS/#specs
Someone already listed a w3c link. This link goes to the specs which is how I learned what I know about css. Anyway, start with level 1 then move on to the other levels. Well, level 1 should get you most of what you'll use so you may just want to learn level 1 then google the other things you want to do as needed.
I have found that using a DreamWeaver template is a good first place to start when creating a new page. They have made some very simple templates that allow you add any formatting you want, you just need to know things like 2 or 3 columns or elastic or fixed. Before I started doing this, I was constantly trying to figure out how to position stuff, but this has helped a lot, at least giving me a start.
Also consider a reset CSS file. It really helps dealing with browser differences.
Along with this, of course read tutorials and search the net.
Have a look at the Web Design From Scratch website. It has been really useful to me.
One important concept that most references are missing is that the CSS attributes aren't independent or cumulative. The most important properties, 'display' and 'position' react to each other and even change the behavior of other attributes. They interact in such a way that any guide that tries to teach these attributes independently is fail.
Most people doing HTML/CSS don't understand this, and are stuck fiddling without a real clue.
The only book I've found that relates these attributes at all is "Pro CSS and HTML Design Patterns". Eric Meyers book might... Personally I hate the style "Pro CSS and HTML Design Patterns" is written in, but its still the most effective guide to CSS that I have found.
I wrote an overall intro guide including some good CSS links elsewhere (see the comments too)... might be useful.