Guys … I am not the CSS guru at all, tho use it a lot. In fact hope to get some gaps filled when the CSS-Live course gets going. So I humble myself to show my ignorance!
However here’s the question … if as sometimes I have for instance, to do an inline <span> down and dirty coding, maybe font, style and weight etc … plus background … I then want to ''bring in ‘’ the full page width background color by using a width statement … but why oh why does this remove any attempt I had made to center the text and push it to left align!?
This happens with a <p> or <div> and also whether the text align is style commanded and /or center commanded within the tag itself.
Imagine a title text as an example … font perhaps 14pt, color set up and background maybe just #444 … but why does a width setting make it go left aligned?
Late edit … some web exploring found me an interesting site on css (http://css-tricks.com/) - within which was an intro video on “Compass” and “Sass” - supposedly smarter and more useful than straight css - just wondered of you had any thoughts on this. Seems tho it may have to run in a Ruby terminal - doesn’t sound very pretty!
I remember reading about sass. It let programmers add things they wished they had in CSS like variables and the ability to go back up the DOM tree.
Recently I was exposed to XLST v2 and Kernow and as it was unknown to me was basically impossible! Gobbledygook way to write css which then has to be compiled … ouch! Wondering if this Sass deal is any good, tho have yet to read up a bit more on it.
XSLT heh. Learn that and you’ve learned some Lisp : ) It was meant for styling XML but unlike CSS it’s practically its own programming language. While the typical front end dev doesn’t have to deal with XSLT (I mean people like me who just do HTML/CSS), it can be worthwhile to learn. It does much much more, is more flexible and specific in determining siblings/parents/elements with particular content or attributes, but I’m actually unsure how that works cross-browser (I’m wondering about IE).
My husband has some book on XSL and I was bored one night and flipped through it.
Eve nif the floated elements has a height set, the parnet won’t recognize it. Create a parent with a border, then inside place 2 floated images (with heights)
The border doesn’t go around them because the parent doesn’t see them. The heights don’t matter.
I believe that is Rayzurs site if I do believe so, I’m not quite sure. I could vouch for him, he does decent CSS
Recently I was exposed to XLST v2 and Kernow and as it was unknown to me was basically impossible! Gobbledygook way to write css which then has to be compiled … ouch! Wondering if this Sass deal is any good, tho have yet to read up a bit more on it.
Late edit .......... some web exploring found me an interesting site on css (http://css-tricks.com/) - within which was an intro video on "Compass" and "Sass" - supposedly smarter and more useful than straight css - just wondered of you had any thoughts on this. Seems tho it may have to run in a Ruby terminal - doesn't sound very pretty!
Recently I was exposed to XLST v2 and Kernow and as it was unknown to me was basically impossible! Gobbledygook way to write css which then has to be compiled .. ouch! Wondering if this Sass deal is any good, tho have yet to read up a bit more on it.
I ran some tests and indeed the margin statement is all-curing of the problem. Something really I should have remembered but as yet my selectors armory is not complete sometimes!
Thx too for clarification re the overflow - I think I see that! If however in a child I had for instance one or two floated images - these have a finite size and so surely would not cause any height collapse? I will have to read up a bit on this I think. It’s a bummer trying learn properly at retirement age!!!
FLoats cause the parents to collapse in height (it will be collapsed until a cleared element is in there).
So since the parent has no height because of hte floated elements, the parent needs to have a way to recognize the children and enclose them. Overflow:hidden does just that :). There are many ways to enclose floats, the clearfix technique, overflow (auto or hidden), a clearing element at the bottom of the parent…display:table, etc.
I realize I may have left out one vital aspect here (sorry) … I was referring to text alignment when in fact what I should have said is - the entire element shifts to left align when I want it all centered as an entity.
Thus, if I had for instance added a width:50%; then the element shrinks OK and text remains centered but, it refuses itself to center. My initial explanation was I am afraid too wrapped up with my text centering, and not as it should have been, element centering.
Because of the block element as you say filling 100% - the only way I think of to reduce width when I have text with a background added is a width statement in the style. IIRC, the only mechanism that can correct this seems to be <center> tags around it, which is of course a deprecated tag, or an ugly use of <blockquote> !
So - all boils down to, how to center the whole thing! That is the enigma.
BTW, I notice in your example the use of ‘overflow:hidden’ for child floats … can you say a word or two on that? I usually find my wrappers work OK but like as not I am missing something (brain cells! )
This happens with a <p> or <div> and also whether the text align is style commanded and /or center commanded within the tag itself.
Hi,
By default block elements are 100% wide, they fill the space that is available to them. If the block element has text-align:center set on it then the text will center regardless of the width set on an inline style. You can reset the text-align in the inline style though.
Bottom line is that inline styles carry more weight than styles in the css file. Inline styles should be avoided at all costs too, it makes future maintenance a nightmare and inline styles are not able to be cached in the browser prior to that page being loaded.
Imagine a title text as an example … font perhaps 14pt, color set up and background maybe just #444 … but why does a width setting make it go left aligned?
It shouldn’t, you may need to post an example of the code you are having problems with. This test case below shows the inline styles doing exactly as they are told to do.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: 100%/1.4 arial,helvetica,sans-serif;
background:#555;
}
#wrap {
width:980px;
margin:0 auto;
background:#FFF;
overflow:hidden;/*contain child floats*/
}
p {margin:1em;}
</style>
</head>
<body>
<div id="wrap">
<p>Lorem ipsum dolor sit amet consectetuer diam magna ac id a. Dolor vitae nonummy semper dui enim vel nunc nunc convallis id. Maecenas libero orci sapien dolor a vitae Vivamus nascetur tempus et. Ut pellentesque est Proin ipsum tellus dictumst tincidunt id pede Duis. Urna non pharetra dis nibh lacus quis pretium at montes consequat. Nullam sagittis dui penatibus nibh Maecenas Ut.</p>
<p style="width:500px; text-align:center; background:#EEF">Pretium cursus enim eget nonummy mus orci Sed pede euismod a. Libero id Nullam volutpat et Donec Integer lorem dictumst magnis Integer. Senectus ultrices lacus laoreet mollis Curabitur dolor sodales pharetra Praesent ipsum. Laoreet tellus condimentum eget Suspendisse Quisque auctor Phasellus tincidunt pede eleifend.</p>
<p>Dolor et ac Nunc metus ante tincidunt Donec nec justo quis. Netus feugiat interdum orci Phasellus quis enim dolor sem cursus faucibus. In fames purus Mauris nulla a tempus leo vitae tempus sapien. Sed vitae Curabitur sapien sagittis at mauris justo urna et ultrices. Fames egestas eros vel Pellentesque mauris congue dolor commodo dolor Nunc. Tortor accumsan et velit.</p>
</div>
</body>
</html>
