Dumb CSS Questions
- Started
- Last post
- 13 Responses
- pinkfloyd
Ok, so I got the box model down for fixed sizes. The padding, border, and margin is added ON TOP of the div dimension.
What about working with percentages? If a div is 70%, are the paddings, border and margin added on top of the 70% or not?
- Xopher0
Stick this in your reset
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}Padding will not count towards width then.
- dmay0
http://www.w3schools.com/cssref/…
Depends how you define the box-sizing:
- border-box includes paddings and borders;
- content-box includes only content.
- ukit20
Yes it's the same for percentages. So an element with a width of 90% and left and right padding of 5% would take up 100% of the screen.
However there's a trick you can use to change this. Explained here:
- orrinward20
Paddings, border and margins are added after by default.
Box-sizing specification works too if you don't care for older browsers.
Xophers snippet means width is inclusive of Border and Padding, but not margin.
Margin should never be included in a specified width as margins are... permeable? Something with margin-right:20px next to something with margin-left:10px will mean they have 20px space between them. Wanting margins to behave like padding is misuse.
- padding is inside the box, marign is outside so not part of the width - its quite simplefadein11
- ukit20
Also for borders, you can use "outline" instead of border.
- pinkfloyd0
I didn't think of using % for margins, borders and paddings. That actually simplifies things for me. So a 70% width + 5% padding would create a total of 80%. Easy.
- pinkfloyd0
What's this "-webkit-box-" thing I keep seeing? I'm still learning CSS1 and CSS2. I'm not ready for CSS3 because lynda.com is a major cunt. I think i've also seen it in responsive design? Can responsive design be done in javascript? Why use CSS3 if javascripting would be more browser friendly?
- ukit20
@orrrinward
I don't think thats always true though is it? Doesn't it depend on the display type of the element?
Honestly, HTML is such a confusing system for layout. If you were designing it from scratch there are so many better ways you could do it.
- pinkfloyd0
I've been working at the same company for over 7 years and i'm regretfully behind on a lot of shit. So i'm studying HTML, CSS and Javascripting now. Later I plan on moving to CSS3, HTML5, canvas, UX and wireframing (The later two easy to learn right?). Anything else I should learn to be more marketable?
- ukit20
Depends what you want to do. If you want the ability to create websites on your own, you should probably learn some basic PHP and a CMS like WordPress.
With HTML5 and CSS3...there isn't a huge amount to learn in terms of practical use. The main thing would be responsive design and learning how to use media queries which are a feature of CSS3.
- pinkfloyd0
Recommendations of where you guys are learning (books, links). Thanks
- http://css-tricks.co…
http://www.smashingm…
also googling stuff mostly leads to knowledge.uan
- http://css-tricks.co…
- uan0
I wouldn't look at css1, css2 if you are learning now.
better you look at css3 from start on. so much things got easier and lots of great new things are possible (animations, masking, ...).css1,2 knowledge is only needed when you are forced to serve old browsers or maintain old sites. you still can learn that by googling the specific problem if needed.
- pinkfloyd0
CSS resets used a lot? Is it recommended or just a matter of preference?
- It's good to do it , will make things go faster (for you as you build your webpage)********
- It's good to do it , will make things go faster (for you as you build your webpage)