[Design with CSS 3789] Re: box confusion

Thursday, July 11, 2013

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.


Post a Comment

Note: Only a member of this blog may post a comment.

Copyright © 2010 Web Design | Free Blogger Templates by Splashy Templates | Layout by Atomic Website Templates

Vida de bombeiro Recipes Informatica Humor Jokes Mensagens Curiosity Saude Video Games Animals Diario das Mensagens Eletronica Rei Jesus News Noticias da TV Artesanato Esportes Noticias Atuais Games Pets Career Religion Recreation Business Education Autos Academics Style Television Programming Motosport Humor News The Games Home Downs World News Internet Design Entertaimment Celebrities 1001 Games Doctor Pets Net Downs World Enter Jesus Mensagensr Android Rub Letras Dialogue cosmetics Genexus lasofia thebushrajr wingshock tripedes gorduravegetal dainfamia dejavu-transpersonal jsbenfica republicadasbadanas ruiherbon iranianforaryans eaystcheyl fotosdanadir Só Humor Curiosity Gifs Medical Female American Health Madeira Designer PPS Divertidas Estate Travel Estate Writing Computer Matilde Ocultos Matilde futebolcomnoticias girassol lettheworldturn topdigitalnet Bem amado enjohnny produceideas foodasticos cronicasdoimaginario downloadsdegraca compactandoletras newcuriosidades blogdoarmario arrozinhoii