[Design with CSS 3789] Re: box confusion

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]

--
--
--
You received this because you are subscribed to the "Design the Web with CSS" at Google groups.
To post: css-design@googlegroups.com
To unsubscribe: css-design-unsubscribe@googlegroups.com
---
You received this message because you are subscribed to the Google Groups "Design the Web with CSS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to css-design+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.