I want to keep several divs at one place and want to show them on clicking on the respective buttons but they are coming in a row format. Actually I want to keep then overlapping each another.
You have to use absolute positioning and z-index to put one on top of the other.
Check this example, and modify z-index to see how it changes:
http://jsfiddle.net/Pizzicato/LgN9z/
You can do it with absolute CSS positioning. Here is tutorial on this topic with examples. Overlapping of HTML elements is done through z-index CSS property.
Related
CSS is still fairly new to me. I have a div element and want to define a button element that would be placed right of the div element. However, I want to do this without modifying any of the styling of the div element. Is this possible? Edit: If yes, please show me an example :)
You can use position:absolute for that element and align it using right/left and top/bottom css rules, this will align the element relative to the entire webpage (or nearest position:relative parent), but what you're looking for is usually done by making both elements float:right/left or display:inline-block. Note that the '/' in my answer indicate your choices, not actual css directives.
Simple add the
float:left
or
float:right
to style it will work fine and display after one and other.
so what I'm trying to do basically is have the HTML document extend vertically as I add more text, and at the moment it's just giving me some really weird problems, such as:
The body won't extend downward as I add more text
The footer isn't displaying at all at this point
There are some weird symbols being inserted into the document
The only way I know how to position things is absolute, and I don't know if this is causing some problems (such as getting text under the "Home" image?)
Here's the jFiddle: http://jsfiddle.net/9nYgb/
Any help is appreciated greatly, thank you!
Absolute positioning does tend to cause problems like that. Relative positioning is simple ... instead of using the top-left corner of the document as the origin for reference, the top-left corner of where the element was supposed to be is used as a reference. So <div style="position:relative;top:10px;"> will result in the element being 10px below where it would have been had no style information been provided.
When you position elements absolutely, you take them out of the document flow. This means that other elements will act as if they aren't there. It's good for placing a modal popup div on top of a page, but it's not good for laying out a whole page.
In general, when it comes to laying out a page, I try to stick to a series of divs with height and width set. You can use margin and padding to adjust layout, and float to make items stack up horizontally to one side or the other. Sometimes I also need to set a div's display to inline or inline-block to get them to appear next to one another and act like inline elements. You can also place divs within divs to group elements together and treat them as one by manipulating the outer container(s).
In general I don't find much need for absolute positioning in a page layout.
I have a html layout done using absolutely positioned div elements and a backgroung image. I want to keep the layout the same vertically (each individual part/page representing a data set). I do not wan't to change the div positioning from absolute as this messes up things and I am running out of time for this.
I realize I can have multiple body tags each for every data set and as this html will finally be generated from xml using xslt this is not a problem.
The issue is that as the div elements are absolute they do not appear in the subsequent body tag (only background image appears). I tried changing to relative and the div actually moves to 'next page' (body element), but as there are several divs, when all are laid out they get misaligned.
I will be grateful for some advice on how to tackle this either by fixing my html in some way that will not be too time consuming or by using a tool that can combine several html content in to one flowing page. Any other piece of advice is also very welcome.
From what you've posted, which could really use some of your HTML as an example of what you're trying to do exactly, you should be able to simply wrap each of your "pages" in a div with the position: relative CSS style.
The inner content will then be positioned absolutely from the boundaries of its parent wrap. You would then want to move most of the styles you currently have applied to your body element (like a background image) to the wrapper divs.
Basic example: http://jsfiddle.net/AsWCN/2/
Basically, I have a form, outside of that form in this random space on my page I want to position a div (containing two buttons). I've looked at using absolute positioning. However, it is positioning it outside of the page wrapper.
How can I get the positioning to be specified from the corner point of the actual page and not the window?
How can I get the positioning to be
specified from the corner point of the
actual page and not the window?
You need to add position: relative to the element you would like the top and left values to be offset from.
That might be your form, or it might be your #container/#wrapper element.
See here for details and a visual: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Looks like you have your answer by now. But ill post this anyways.
A simple and short example which shows how relative positioning to parent is done.
http://jsfiddle.net/EadXw/
If you want it positioned top:0;left:0 on the page, place it immediately after the <body> tag.
If it is wrapped in anything the containers may change it's position. Make sure it is independant and not influenced by any containers.
Sounds like you should read up a bit on the flow of the DOM.
Positioning with CSS and HTML
Make sure your <form> element wraps your whole "page" and that the <div> with the buttons is the first child of <form>.
When you do this you can add the rule position:relative to the form and position:absolute to the <div> and move it around with top and left.
Another option is to have no position rule on the form and have position:relative on the <div>. This is more compatible with iPad and iPhone devices, which don't like absolute positioning. When you go for this approach be sure to have a fixed height for the <div> and a negative margin-bottom of the same size.
How positioning can save our time if we use in place of float on some place in layout coding?
How we can judge where positioning would give better result?
For example (i added just for example) if this is a design
So far i only use float + margin + padding, now if i can mix positioning and save time and get pixel perfection easily then float.
Guide me
Thanks in advance.
Update 1:
these are common elements of website. should i use positioning for any of them?
The Header
---logo
---serch box
---The Navigation Menu
---top links
---Breadcrumbs
The Text Area
---Paragraphs
---images( left , right or center align)
---Tables
---vertical ordered and unordered list
The Sidebar
---vertical ordered and unordered list
The Footer
---copyright
---Important Links (horizontal list)
Form elements
Update 2:
Does positioning have any
Compatibility issue(including IE6) than float?
Is positioning is only good for fixed
width design or it's good for both
liquid and fixed?
For that layout, you don't need to use nothing else than floats, margins and paddings. Positioning (relative, absolute, fixed) should be used only in 'special occasions', eg. when you want to lift an element out of the document flow and place it somewhere it would be otherwise hard to place.
You won't save any time and won't get any more 'pixel perfect' results with positioning. You should be able to do that using traditional methods.
The only reason you should use absolute positioning in that layout is because of the RSS icon, that's a 'special occasion' I was talking about.
Looking at the design there is minimal need to using positioning, the only I can see it may be need is t give the overlapping effect on the RSS icon but even then you could do some trickery with background images to give the effect that it is overlapping.
On my sites I use position if I need to give the user the experince that elements overlap outside of the box model. Otherwise you should be fine floating, padding and using margins.
One tip howerver if you are using position:absolute; make sure the parent element has position:relative;