I need some advices on how to create a website in a way that it will keep its size on every resolution.
I've tried in many ways but I never made it work, and it's hard to understand responsive web design because I can't find it in my language. I just want some brief advices, and simple explanations about how to keep resolutions of content divs on different resolutions in CSS/HTML
Here's what I've tried until now but it didn't work:
There are just the codes without images, its just a way to see what I did wrong and what I should do.
Check this piece of code and play with it to get a basic idea: http://jsfiddle.net/Hx5Xn/1/
Furthermore I would advise you to check some online tutorials.
Check
http://www.w3schools.com/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
Related
Recently i heard about css sprite is a good technology, can reduce the browser downloads, faster web speeds, how does it achieve ?
check this out it will help you alot...
http://spritegen.website-performance.org/
also this for techniques...
http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
I'm currently developing a professional website and I have reached around 750 lines of CSS for around 4 pages, the bulk going into the homepage. I have curly braces in separate lines. I could probably reduce it a bit by going through it again.
But I was just wondering, what would you consider as being too much css?
Regards,
I think there isn't a limit at all. Just write the code you need, and when you've finished try to optimize it.
A gotcha on this (not directly related to the OP, but for others who might come here) ...
IE9 and below only recognizes the first 4096 selectors in a CSS file. Everything after that is merely silently ignored.
How large is your CSS File? Sure, you have to worry about hard the browser has to work in terms on load when interpreting the CSS.. is it efficient, are you over working it?
Keep your size as low as possible is a given, but there are quite a few factors to think about. You can always minify, gzip compression when your done to save some time. Take a look at a testing tool http://tools.pingdom.com/
There's plenty of articles on this so I won't bother reeling off my personal opinion, so check these out
http://css-tricks.com/efficiently-rendering-css/
https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-US&redirectslug=Writing_Efficient_CSS
http://speckyboy.com/2011/03/08/website-speed-part-1-write-more-efficient-css/
Assuming your home page doesn't have tens of nested components that have different roles/looks, you're probably being a bit non-clever with your CSS. There are two things to worry about here:
Bandwidth: If your CSS file's size is more than 50KBs or so, some of your clients with low connection speeds/bandwidth might experience
some notable lag.
Rendering: It's possible that your CSS file is complex enough to force the client's layout/rendering engine to make some extra effort while
rendering.
Both the issues would reduce your website time-efficiency. What to do?
The simplest example on how to optimize your CSS file is to collect rules that you use for many elements in one class. There are many other tips to help reduce the size of your CSS file; the other answers already link you to some articles with helpful tips, but if you want to give programs that automate the process a try, take a look at CSS Tidy (and an online tool based on CSS Tidy).
I hope that helped!
It depends on what is your website supposed to do. If it is a small blog and you need, say, 3000 lines of CSS, that is probably too much. If it is an online store with multiple sections and a complicated layout, it might not be enough. It depends on your needs.
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.
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.
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.