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
Related
I have been searching for an answer to this for some time.
i want to add space to the bottom of my web page, as content sits too close to edge.
I have tied 'padding-bottom' in wrapper tag, in body tag and in style tag.. not working.
any help on this appreciated..
thanks,
Keith.
http://www.reddogonline.eu/av.html
you have a serious design problem.
all your elements are relatively position with top offset, that cause the wrapper and body to be actually smaller then you think. because this offset is not taken in consideration when determining the wrapper height. (so the height of the wrapper is only the sum of his children height, without the offset between them)
when you add padding-bottom to the wrapper or the body, it works (of course), but you don't see it. because your elements overlaps the wrapper..
you will be able to see that I'm right by setting overflow:hidden; to the wrapper (or inspecting your site with a tool). suddenly, half of your content disappears..
you need to remove the position:relative; from your elements, and use margin-top instead of top to make the desired space between the elements.
That way: the wrapper and body height will be set right, and the padding will work as you expect it.
You're positioning relatively all your elements. That's causing the padding/margin problems too. Why would you position your elements like this?
Try removing relative positioning and add top/bottom margins to your elements. The results will be the same in terms of visual effect.
It will also be much simpler adding new sound boxes, as you don't have to calculate a top positioning for each one.
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 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.
I've seen this behavior for years. Checkboxes and radios buttons can not be covered by DIV elements. No matter what z-index use.Is there some solution?
Besides, I am using simpletip (can't use qtip). If you know about another jquery tooltip ready to use that work around this... I have my wallet open. THX
Ok, now we can work.
First off: This probably has nothing to do with your problem, but it can lead to other problems: Your HTML is riddled with errors:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fnomikos.info%2Fprivate%2Fwp%2Foptions-general.php.html
Most importantly a span may not contain a block element such as a div. Most of the errors is because you are using HTML syntax instead of XHTML syntax. It maybe easier just to use a HTML DOCTYPE, than fixing all the XHTML errors.
Your actual problem is that z-index only applies to elements that are positioned (absolute, relative, fixed) and since your "tooltip" isn't z-index has no effect.
You'll need to explain what you want it to do. Until then I can just give general suggestions:
You could make sure that the "tooltip" doesn't become wider than the surrounding span. Currently it's 300px wide and since the spans are flexible it spills out, when the spans become too small.
Or you give the "tooltip" position: absolute and smaller top and left values (BTW the current top and left values are currently useless, because they also only apply to positioned elements) and it's parent span position: relative.
Has anyone else ever ran across this? This is the second time it's come up in as many years and I am not sure the "correct" way to solve it.
I can achieve the same results with padding in the child, but it just makes no sense.
Testing in Safari/FF.
I usually solve this problem by setting display: inline-block on outer div. It'll make outer div to occupy exactly the space necessary to display its content.
An example, showing the difference.
It is called margin-collapse. When a top and bottom margin are directly touching (not separated by anything, like a border or line break) the margins collapse into a single margin. This is not a bug. Read more about it here at SitePoint.
Sounds like margin collapsing which is natural behaviour. This is a good read:
http://www.andybudd.com/archives/2003/11/no_margin_for_error/
There are number of ways to get round margin collapsing issues. One way is to add a border
or 1px of padding around the elements so that the borders are no longer touching and so no
longer collapse.
Another way to stop margins collapsing is to change the position property of the
element.The CSS2 Specs explain that margins of absolutely and relatively positioned boxes
don't collapse. Also if you float a box it's margins no longer collapse. It's not always
appropriate to change the position properties of an element but in some situations if
you're having problems with unwanted margin collapsing, this may be an option.