I was wondering what would be the best way to create a feature strip of background in a website layout?
The approach that comes to mind, would be to create an absolute positioned div with a z-index of -1 and adjust top/height to match up behind a fixed layout.
Is this a good way to go about it? Or is there a better way?
Thank you for any help! :D
A div containing an image placed behind the content is probably the best way to make a scaling background.
I think CSS3 also supports background scaling, but it is not widely supported.
A more semantic approach would be to apply the background strip to an element on the page -- in the case of your example, the "slideshow" element. This element's outer constraint (whether that be a div, a ul, or something else) can then be stretched to 100% of the width of the page, and the content of the element centered (or positioned as desired).
This approach would be more maintainable than some other approaches -- content could be added before the element without breaking the layout, the strip could be changed without much effort, etc.
Background scaling could be taken care of in several ways:
Make your background big enough that it isn't likely to ever be a problem.
Use a tile-able background.
Use CSS3 background-size property. A jsfiddle example is here. (Not supported in <=IE8, but with a little creativity could degrade gracefully.)
Put the image inside your div (or similar) and then use CSS to position absolutely, set the z-index to force below the content, and stretch the image to the width and height of the element. Here's a jsfiddle example. (Note: UNSEMANTIC! Reduces maintainability, etc. But does have better support than CSS3 background-size...)
Number of websites "cheat" : the site's background image already have the strip on it
It's simple and painless but it's static.
Related
I am trying to float divs horizontally, however its falling into a new line.
http://jsfiddle.net/nyCrY/4/
It works only if I set width of the #holder higher than its content.
Is there a way to do this without setting the fixed width on #holder?
Thank you!
Not really with pure CSS.
You can use a static width (which you don't want to do), you can use floats + whitespace (which is unreliable), or you can dynamically calculate the necessary width with javascript and set the style's width to that number.
According to this tutorial: http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
I spent some time playing with the float property and the white-space
property to see if I could find a way to fight browser auto-wrapping,
but I didn't have much luck. Page elements which are floated but do
not have a width exhibit a property where they expand to the width of
the content inside them. I thought perhaps if I put a bunch of float
elements inside of that, it might just keep expanding beyond the width
of the browser window. No dice. There is also a white-space: nowrap;
property in CSS which I thought might be able to be exploited to fight
the auto-wrapping, but it only works for text elements, not blocks or
just any old thing you set to inline. Oh well.
So, he basically is saying, no its not possible with just css.
But he goes on to say that you can do some javascript magic to achieve it:
JavaScript clearly has the ability to manipulate page elements and do
calculations on-the-fly.
I find myself placing a lot of divs, images and content in general with position:relative to stick to the design I'm following.
For example if I wanted to place a form closer to the top I'd put in :
.form_class{
position:relative;
bottom:150px;
}
Since the element keeps its position in the flux, I'd then have to put every other element upwards of 150px with position:relative as to keep the gap closed.
I feel like this is sloppy programming, how do real web integrators position their elements ?
Thanks in advance.
There is a potential problem with using relative positioning.
If you are using the relative positioning to circumvent a problem with a gap, the problem is still there in the background. If the gap comes from a margin for example, then the margin is still there. If you don't know where the margin comes from, you don't know if it's the same in all browsers, and you don't know if any seemingly unrelated changes in the markup might change the margin.
Also, as you mention, you are just moving the gap from the top of the element to the bottom of the element, so you have to keep adjusting all the elements that follow. With each adjustment you are potentially adding another level of insecurity, where the layout might break in another browser.
Most browsers have a developer tool, where you can inspect an element to see exactly what CSS is applied to the element, and what the margins and padding are. You can use that to find out where gaps come from, so that you can remove them at the source instead of circumventing them.
There are a lot of ways to position elements, from margins and paddings, absolute positioning, floats, parent containers, explicit widths and heights. Without seeing your markup it's hard to critic but usually there are better ways than relative positioning. If you want to post some markup try http://jsfiddle.net
I'm trying to do something like the min-height hack, but I have two floats that seem to be conflicting with it:
http://jsfiddle.net/redconservatory/vqFVU/1/
My "innercontainer" div is very short, I would like it take up as much as as possible (or at least, more space) without setting the height in pixels because my page content changes from page to page...
set overflow:auto instead of visible, so that .innercontainer expands to accommodate its contents.
demo at http://jsfiddle.net/gaby/vqFVU/2/
If you want a sticky footer as well look at http://www.cssstickyfooter.com/
http://jsfiddle.net/vqFVU/4/
javascript is the easiest way. You cant do that with pure CSS since every client can have a different size window.
Basically I have a parent div with height and width and overflow:hidden and then within that some more divs with it.
We are dealing with fluid content and some of the divs go over the corners so get hidden.
But one is half and half.
Is there a way to make that completely hidden?
CSS would be best.
I don't think you can know if a child from an overflow:hidden parent is in the hidden or visible section without using Javascript (I might be wrong here).
What I suggest is that you set all the child divs to a fixed dimension d and set the parent div to a multiple of d so every child is either completely visible of not.
This solution won't work if you fill your divs with different-length content
If I understand your post, you have a wrapping div that has overflow:hidden and you want to make any child element hidden unless it can be completely displayed within the wrapping div.
There may be a better way to do it, but I would use a CSS media query. If you're unsure of how they work this is a good place to start:
http://css-tricks.com/resolution-specific-stylesheets/
Using this method, you could determine how many blocks of each type should be displayed on any given set of resolutions. I'd be interested in seeing how it goes, or if you end up using a different approach. Best of luck!
Hi I am trying to learn CSS and have been looking at the source of websites to learn how it works in practice. I came across the 960 grid system the other day, and found a really beautiful site design that is using the 960gs framework >> OneHub
At this stage, I don't think it is very wise for me to use a CSS framework until I have a better understanding of CSS. So my question is in regard to how they have achieved a centered content box on the website whith a background that fills to expand to your browser width.
I have firebug installed and I can't figure out why the divs on their site eg. #gutter, #navigation will expand to fill the entire browser width. I don't see how these divs are calculating their width value, because it seems that none of the child elements are large enough or have a rule which would force these divs to become larger.
I don't understand how the width is 100%, I would have expected to see some margin auto rule or width 100% specified somewhere in the CSS but I can't find it. Other websites using the 960gs may be doing the same thing but I just used this site for reference since I think it has a nice design.
I hope my question makes sense and thank you for any help with this
DIVs, unstyled, will always fill 100% of the parent element. If that's the body, or another element that fills the browser window, it will fill 100%.
It's called a "block level" element. All block level elements behave this way: div, p, form, ul, etc.
If you specify no rule for width, the width is by default 100% -- that is, it expands to fill its parent element. In this case, the parent element is the body, which is also the full width of the viewport.
With the 960 grid system, when you say entire browser width, you mean 960px. Agree with rpflo, above.