Something that I was wondering while styling my latest HTML5/CSS3 baby: Do some elements inherit their sibling's parameter's values if we won't specirfy the parameters and values for these elements? Basically I had a situation in which 3/4 of the website's home page elements have been styled already in stylesheet and what was left was the footer section.
Last element that I've styled was a boxcontent with two columns. The columns have been styled with a float:left parameter and value. Upon that when I've reloaded the page, the footer section which is not styled like I've mentioned before, have moved up and to the extreme right from column2 of boxcontent section.
I'm wondering why the footer section has inherited some of the sibling's section's parameters and values if the footer is not even inheriting this data straight from it's parent element - that is body.
Children inherit parent's values, but siblings do not inherit each other's parameters. Your layout was changed, because you've used floating, which can affect positioning of elements that are below the floated blocks. When using floating for positioning it is a good idea to clear floats.
Elements don't inherit siblings styles, but do inherit their parent's styling. I've ran into layout issues that I've traced up many levels on a parent. Chrome's developer tools are a great way to inspect where styling is coming from for any selected element.
Related
In this series they all used a wrapper div.
MDN - CSS GRID Layout
Is this necessary, and if yes, why?
The purposes of wrappers are several, including:
to group elements semantically, for instance to separate page heading
from body text from sidebar from footer.
to group elements cosmetically, such as with a surrounding border or
a common background image or color.
to group elements in layout, such as to keep them all in the same
column when columns are floated next to one another.
to enable special positioning, as when a wrapper is given relative
positioning in order to contain child elements with absolute
positioning.
to make it more convenient to specify elements in CSS and JavaScript
by referring to their parent, without having to id or class each
child element.
(Note: the var above should all be on one line)
So in this case, i think they all used a wrapper div just to group elements in layout.
I'm looking for a general best practice for responsive design, when modules are nested in HTML. Are there standard properties like display and position that allow width/height/left/top/right/bottom properties to be passed onto children? Are float/clear used to provide fresh slates for children?
In my example, this would mean using percentage widths of the #main ancestor for each <img> inside an <a> tag. Right now, my percentage seems to be based on the sibling text width and corresponding CSS table cell width.
Thank you
Are there standard properties like display and position that allow width/height/left/top/right/bottom properties to be passed onto children?
You cannot pass parent properties to the children but you sure can inherit from the parent it, e.g. using position:inherit in the children element you can inherit whatever value the parent had for position.
Now for widths and heights you have to use percentage. In your case you are using display:inline-block on the anchor tag which behaves almost like using display:block with float:left; but I don't see you using any width property.
Try this:
#main-work .section{
display:inline-block;
width: calc(100%/3);
}
Is it possible to set z-index that only applies to a certain 'scope', such as only affecting children of a certain element.
I've got an containerDiv with z-index 0. It contains a bunch of circles which should be placed on top of eachother in various depths, but I don't want them to affect any other elements on the page.
I've got a bunch of other elements on the page (popups, dropdowns etc) which have z-index 1, and I would like them to be placed on top of the containerDiv and all of it's childelements.
Since I'm lazy I'd preferably want to avoid having to adjust these element's z-index values based on the circle with the highest z-index...
Much be awesome if there was some way that all other elements could view the containerDiv and all it's children as having the same z-index.
Is this possible to achieve with css?
The answer depends on whether or not your other elements are descendants of the containerDiv or not. To answer the question: Yes, it's almost certainly possible, given a bit of shuffling of the markup.
But what you need to understand is the concept of stacking context:
http://www.w3.org/TR/CSS2/visuren.html#layers
Stacking context is not inherited the way other properties are: "A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes." It's not like every element on the page with z-index:2 will be behind everything on the page with z-index:4. Z-index (combined with a position declaration) is typically (though not exclusively) used to resolve the stacking order when two elements share a containing element.
In many places I have put elmeents nested in other elements. I can't deduce when a child element causes the parent element to expand. I don't have any code to post as this is a general conceptual question so that I can design as needed.
The first thing that you should understand is the CSS Box Model. That will help you understand how properties of an element cause it to have the size and dimensions that it has. Another good resource is here.
To answer your main question in the most simple manner (and being very general):
Block level elements take up as much width as possible (obeying their CSS width rule). Their height is dependent on their content and the CSS height property.
Elements like div, p, and ul are all block.
These will generally cause your parent element to expand.
Inline level elements will continue to flow together in a line, filling up only as much width and height as necessary.
Elements like span, em, strong are all inline.
These will cause your parent element to expand only when there are enough of them on the same line to warrant another line.
There are many ways to tweak the display of elements with CSS.
Get firebug for firefox. You can browse the DOM (the HTML structure of the page) and it will highlight elements according to how the "browser's eye" sees them (versus how they look aesthetically).
A few general rules of thumb:
Children will expand their parent's height as long as they're not floated or absolutely positioned, but...
You can "clear" a series of floated images http://www.quirksmode.org/css/clearing.html to make the parent element expand
If you use top positioning for a relatively positioned child element, the browser will still see that element in the exact same place. In other words the height of the parent element will stay the same regardless of where the child is relatively positioned to.
Using positive or negative margins on a child that is display: block will add or subtract height from its parent
i have a div element (class "content") that contains 2 divs and a sibling of the first div that has bottom: 0px; attribute and fixed height and i wanted the div with the class "gallery" to expand as much as they don't flow over their parent div.
and also ... i saw that except the firefox browser, chrome, opera and safari shows the search input in the upper right corner 4-5 pixels upper than normal. why is that?
http://goaltod.iulianonofrei.com/
You have 2 questions here.
The first question is not clear, "contains 2 divs and a sibling of the first div", isn't the sibling of the first div - the second div? Also it is not clear what you want to do, in general it seems that you have everything global positioned, so you why not set the gallery div with the exact dimensions you want. For the content it contains you can use overflow:auto so it will create an internal scroller when needed.
For the second question, looks like the problem is in firefox. if you set the top and padding of the input element to 0, it still does align with the containing td element. This is a very odd usage of table elements and I would advise against it... You probably should use div elements instead.
Because you used height: 100% the content will match the height of it parent element. And the other elements push it down.
There are a few ways you could fix this:
Use a table base layout (fully supported, but frowned upon)
Use the new CSS 3 flex box layout (no old IE support)
Put the header and footer in the content, then position them absolute.
I would recommend the 3rd option which is demonstrated here: http://jsfiddle.net/tnRpR/