box confusion

[rusi]

Complete CSS noob here.

So thought I'd start with taking css layouts from recommendations on the web and then add my stuff and try to increase my understanding as I go along.

Now my question:
If I remove the word "mystery" from the attachment there is a small sliver of cream above the One,Two... ul-list and below the Headers.  Put back the "mystery" and the sliver is gone.

Any tips on how to approach/think about this?

[firefox: 22]

[Paul Scheltema]

Hi there, commnents below

On Wednesday, July 10, 2013 8:11:26 PM UTC+2, rusi wrote:

Complete CSS noob here.

gl :) 

So thought I'd start with taking css layouts from recommendations on the web and then add my stuff and try to increase my understanding as I go along.

for a moment i thought you ment some framework, like bootstrap, you could consider it or at least 960 grid

also less is something to consider using, it really helps with the cross-browser stuff, and it can do so much more, in this day and age you shouldnt be bothering with cross-browser stuffs as much anymore, most of it is standardised and/or fixed in the various frameworks

Now my question:
If I remove the word "mystery" from the attachment there is a small sliver of cream above the One,Two... ul-list and below the Headers.  Put back the "mystery" and the sliver is gone.

the ul has an inherited margin (top and bottom) from the browser's standard styling, add margin:0 on the ul and the space you refer to is gone.

you can check the "computed styles" box in the web-inspector (chrome, firebug in firefox), there you can see that the ul has this property

also (again chrome, ff) if you go to the console (F12) and gotoo the html view, if you hover an element you see it lightup in the viewport, including 2 extra colors for the padding and margin, so you can see this space for yourself. One thing to remember is that margin can go beyond the borders of (block-level) div's, and is only pushed back by (inline) text elements.dlocklevel

so reversing this, if you'd remove the texts from the header, the result would be the same, lining up the left and center div at the top.

Any tips on how to approach/think about this?

just a few things i noticed form your css/html

you could use a html5! doctype, then you can get rid of the html-tag's attributes also

its saver to use, especially on older browsers (think ie) if you make one mistake in a doctyped document (invalid tag, disallowed-tag, unclosed, whatever) ie will go to quirksmode, changing the way the css is interpreted, which means youll be dealing with more and more styling to fix all the different rendering styles. so validate your html (css doesnt matter actually) and make sure its valid for your doctype.

you can use margin: 0 auto instead of text-align:center, that way you can save yourself the headin div also

visually it looks like your div#center is right of the div#left but actually its overlapping the div#left

remove the height properties form div#left and cus half the text, and youll see what i mean, it works besause the text is in there and pushing away the div#center

if you were to put some block-level elements (for example) there instead of inline text the div#center would render over your left container.

so tip: design your templates without texts in them, and when that works, add text and dictate the behaviour of it (by using float for example)

it looks like you want a layout which adapts to the viewport width (div#center is as wide as the screen) id like to suggest to not start with such layouts, theyre so much harder, because you dont know the viewer's screen size and its hard to style the content of the center div for all possible sizes, just start with a fixed width (960px) layout,

and experiment with liquid layouts later

try using a seperate css and html page, and dont use inline-styling (eg. style=""...)

 

ending like i started, gl :)

[firefox: 22]

[rusi]

Hey Paul

Thats a thoughtful and detailed answer -- thanks!

Since I get some of what you say, half-get some, I hope you will permit me to rephrase your suggestions according to my understanding.

> try using a seperate css and html page, and dont use inline-styling (eg. style=""...)

Sorry for the inlines -- just part of my hacks to figure things out.
I thought when in total-hack mode, I'd keep css internal though not inline and then move it to another file when more stable/ready.

> visually it looks like your div#center is right of the div#left but actually its overlapping
> the div#left
> remove the height properties form div#left and cus half the text, and youll see what i
> mean, it works besause the text is in there and pushing away the div#center
> if you were to put some block-level elements (for example) there instead of inline text
> the div#center would render over your left container.

> so tip: design your templates without texts in them, and when that works, add text
> and dictate the behaviour of it (by using float for example)
>

Vow! Thanks to your firebug tip now I see what you are saying.
Ive tried to use the hover trick you refer to but I did not see that it covers margin and border. Speaking of firebug/debugging:
Is firebug better or web developer?  One thing I would like is some decent documentation -- cant seem to find.  Another thing: some help to debug my (mis)understandings of the box-model.  Found dom inspector plus but cant make sense of how to use it: https://addons.mozilla.org/en-us/firefox/addon/dom-inspector-dm/

> Use html5 doctype

Ok... In view of your other comment (cross-browser compatibility is less to be thought today) I guess I should just jump on that bandwagon!  I thought its too hot and bleeding edge for a noob like me!

At a high level, I gather you are suggesting bootstrap-framework?
Well earlier I had tried 960. And it did not quite work out.
Gathered I need to know basics of css and so better to start with the right scale of complexity.  So thought I'd start with 'guru-given' css, which worked out a layout and then play with the other aspects (colors,fonts etc) as I work out the mysteries of the box model, the cascade etc -- all the grand stuff I understand in theory but is woeful in practice.
I am a programmer, so concepts/syntax is not an issue usually, though chaos is!
 
Anyway those are my thoughts and if you are suggesting some other line I'd be pleased to hear

[Paul Scheltema]

Hi there,

On Thursday, July 11, 2013 6:28:07 PM UTC+2, rusi wrote:

Hey Paul

Thats a thoughtful and detailed answer -- thanks!

css is so immense to start with, and it totally makes no sense when starting with it. Even reading up about the box model you talk about bit later on, its still not logical, but hold on, it will make sense if you stick with it, 

Since I get some of what you say, half-get some, I hope you will permit me to rephrase your suggestions according to my understanding.

the only way to go 

> try using a seperate css and html page, and dont use inline-styling (eg. style=""...)

Sorry for the inlines -- just part of my hacks to figure things out.

sure, i figured that, just to let you know 

I thought when in total-hack mode, I'd keep css internal though not inline and then move it to another file when more stable/ready.

 but there my way differs, especially when using less (for example)

my "typical" project has a bunch of css (less) files

- site.less

      includes all the other css files i use, nothing more, this is the file i include in my html

- functions.less 

      http://lesselements.com/ for example, that stuff goes in this file, here's also where you solve your cross browser stuff, just have a function deal with it and keep your own css clean

- vars.less 

      sutff like colors, fonts paddings, margins maby box sizes go here

- holmes.css 

      just to make sure your html is valid, it wont do a thing otherwise

- base.less 

      contains the styling of always recurring elements, like header, footer, menu body and the basic container class, and some default element styles (h1,2.3,... ul li etc)

      but also popup box styline, message styling, error styling stuff like that, global recurring elements

- layout.less 

      for example the 960 grid, of your custom version of it, tho i always build upon the basics of 960, i just ignore their grid sizes and paddings, but the clearing and container stacking, pushing/pulling is nice

      layout also contains the box and container styles, but just their defaults no mention of red or blue versions there

- lists.less 

      styling of list headers, lists (ul, dl) list items (dd, li, dt), list footers (just different class name) etc.

- parts.less

      functionality is almost always contained in a box (div)  give it a base class name and just style its details prefixed with he base class name

- theme.less

      here go the variations of the default styles, like a red box instead of a blue one, so what goes here should be only refer to visual styling not structural.

sooo not just one file :) i use many many files, and if i include frameworks i put those in another nested folder and include them in my site.less

doing things this way you always know where to find some styling, files are slim and easy to read, you also create a basic styling you can include in other projects with this

great for just hacking up a fast site/app with default ok looking styling (like bootstrap does for you)

and best of all, you can see what css is not used anymore, go ask 20 ppl about their css, and theyll all tell you they have css rules that arent needed but theyre not sure if they can safely remove them

> visually it looks like your div#center is right of the div#left but actually its overlapping
> the div#left
> remove the height properties form div#left and cus half the text, and youll see what i
> mean, it works besause the text is in there and pushing away the div#center
> if you were to put some block-level elements (for example) there instead of inline text
> the div#center would render over your left container.

> so tip: design your templates without texts in them, and when that works, add text
> and dictate the behaviour of it (by using float for example)
>

Vow! Thanks to your firebug tip now I see what you are saying.
Ive tried to use the hover trick you refer to but I did not see that it covers margin and border. Speaking of firebug/debugging:

make some html file, and put a bunch of elements in it, (h1...6, p, ul, li, div, ...?)

open the file in chrome /ff, and press F12

on chrome: goto the left tab, elements and unflod some part of the html

if you click the ul, then on tie right part you can see some styling of it

the top is "computed style", its usefull to see the real active styling of the element, nice if it has a lot of properties inherited

the "styles" box tells you its style and its inherited styles from parents / css rules

the "metrics" box is a handy tool for you to see its measurements and their buildup

here you can see that your default unstyled ul has 16px top/bottom margin, and 40px left padding

if you hover the element in the left part of the debugger (elements tab) you can see it light up

using the same colorset as in the metrics box, salmon for maring, orange(?) for border, green for padding, blue for inner-size

Is firebug better or web developer?  One thing I would like is some decent documentation -- cant seem to find.  Another thing: some help to debug my (mis)understandings of the box-model.  Found dom inspector plus but cant make sense of how to use it: https://addons.mozilla.org/en-us/firefox/addon/dom-inspector-dm/

ok, so, i use ff and chrome both, i kinda always use chrome, just because its so much faster.

that being said, sure i had my preference of debugger in the past, but they all have their benefits/cons, and i can say that i just go for the default chrome's debugger and firebug when on ff.

i checked the screenshot of that dom inspector you mentioned, and it looks.. well clutterd, but maby that just takes some getting used to

> Use html5 doctype

Ok... In view of your other comment (cross-browser compatibility is less to be thought today) I guess I should just jump on that bandwagon!  I thought its too hot and bleeding edge for a noob like me!

well adding less to your starting setup and then also some framework maby sure will increase the learning curve a bit, but oh boy its so worth it!! after using a css processor (like less) you wont be able to imagine how you used to do things before

At a high level, I gather you are suggesting bootstrap-framework?

if you wanna learn things, then nope, they fixed way to much issues for you in the framework, you need to understand those first if you wanna be good at css 

Well earlier I had tried 960. And it did not quite work out.

same, i just use their method, push/pull etc etc. but not their metrics, i make boxes like box_123 for a box with 123px width, that way it works for every project

but you can still use things like push, alpha/omega clearfix etc. 

Gathered I need to know basics of css and so better to start with the right scale of complexity.  So thought I'd start with 'guru-given' css, which worked out a layout and then play with the other aspects (colors,fonts etc) as I work out the mysteries of the box model, the cascade etc -- all the grand stuff I understand in theory but is woeful in practice.

yes!, but... like the html file you posed in your origional question, its idea of a 2 column layout was probably copied from some example, however that example used text inside the boxes, and as i hope i explained a bit, the layout wont hold when you remove the texts, so be weary of things working in examples, many times they only work in those clean environments instead of working always and everywehere

I am a programmer, so concepts/syntax is not an issue usually, though chaos is!

then you're gonna love less's funcitons

 
Anyway those are my thoughts and if you are suggesting some other line I'd be pleased to hear

here are some of my most used less functions (its to create the 960 grid behaviour but my variation of it)

//useable for both liquid and fixed layouts :), add width for fixed, add min-width if needed for liquid

.box() {

  padding:@padding-box;

  margin:@margin-box;

  display:inline-block;

  overflow:hidden;

  position:relative;

  float:left;

  //width: 1px; //:P just to make sure youll set the width

  width: 100%;

}

.row (@width: 100%) {

  float:left;

  display:block;

  clear:both;

  width:@width;

}

//NOTE!! columns allow for overflows, sometimes you will have the need to position a column's content outside of the column itself

//with negative margins (for example), this wont be possible if it captures its contents like a box

//eg. always use .box() types inside a column

.column(@width) {

  width: @width - 2* @margin;

  float:left;

  padding:@padding-box;

  .box {

    margin:0 0 2*@margin 0;

  }

}

the vars (prefixed with a @) come from vars.less

so if i wanted to make a box-based style

.box_contact {

  .box();

  background-color:red;

}

boxes are always 100% width, so they will adapt to the column theyre in, which is really awesome, cus that way it works like a component

sorry this mail is as big as the last one, theres so much to be said

gl again

 

[Rustom Mody]

On Fri, Jul 12, 2013 at 2:25 PM, Paul Scheltema <paulsc...@gmail.com> wrote:

Hi there,

On Thursday, July 11, 2013 6:28:07 PM UTC+2, rusi wrote:

Hey Paul

Thats a thoughtful and detailed answer -- thanks!

css is so immense to start with, and it totally makes no sense when starting with it. Even reading up about the box model you talk about bit later on, its still not logical, but hold on, it will make sense if you stick with it, 

Thanks. LOTS of stuff to think/try/explore.
Need to do that before saying more...

Just one small question for now -- resets.
I really have no much sense of what a reset is. However I gather there is some religious war going on -- resets are good vs resets are bad.
Now in my original case I guess if I had reset all margins default to 0 then that problem would not have occurred (or showed up?).

So what's the good advice for using resets?

[Paul Scheltema]

just like you said, many pro's and cons for sure.

I generally dislike those "pure"reset css sheets myself, but some ppl can work with them just fine.

Just consider the use-case of the resulting layout.

Like when someone was to add some content to your layout with an editor, or just simple html tags, in such a case youll want the ul-li etc. to have their default margins paddings, the same with h1...6 p, span etc.

so when resetting make sure your default text-tags still render as expected and provide a good basis for the content to be readable.

preferably someone can just use the default tags with no additional classes to create an "article" trough an editor or just in plain text. Bootstrap is strong in that regard.

And with useing all those less files i normally do, you can make everything class-name based. 

so like in your example when resetting an ul-li id use a class named "list" and add 

.list {margin...} .list li, .list dh, .list dd {margin...}

to my styles, that way you can just appoint something to be of the list-type and it will have the styling you mean it to have. 

my style of html/css is more declarative. i have general and specific css classes and in the html i can at every point tell it how i want it to display.

just take a look at the html/css of facebook to see what something like that looks like. they use many many class names in the html and usually only 1 css rule per selector.

that way youll hardly ever have unused css and can make any design in html without going back to the css. also when you ahve good designers theyll design a house/site-style and you can just implement that in css.

So what's the good advice for using resets?

well my advice would be not to reset html elemetsn but use class names for it, leaving you with choise wether to use it at a certain point in the design or not.

be carefull adding css to html tags.

a good example is h1,2,3 tags, youll generally use them to denote some content, but sometimes its wiser seo-wise to use a h2 instead of a h1 at a certain location. if youd used class names you could just tell the h2 to behave as your h1 by giving it the appropriate class name.

/paul