positioning

Instead of scrolling down the page to view a bunch of divs, I would like them to overlay in the same place-- one stacked on top the next -- when you scroll. So, you would scroll down, but the page would not go down. Instead, the next div would overlay the first and so on and so forth. Not sure how to do this? Here is what I have: UPDATE .container { width:100%; height:100%; position:relative; } .container1 { display:block; position:fixed; margin-top:690px; width:100%; height:500px; z-index:1; background:#333; } .container2 { display:block; position:absolute; margin-top:1190px; width:100%;

It's been a mess to show a DialogBox at the center of its parent form. Here is a method to show a dialog. I am positioning its parent to center but not able to center the DialogBox private void OpenForm(Object point, Object height, Object width) { FormLoading frm = new FormLoading(); Point temp = (Point)point; Point location = new Point(temp.X + (int)((int)width) / 2, temp.Y + (int)((int)height) / 2); frm.Location = location; frm.ShowDialog(); } private void btnView_Click(object sender, EventArgs e) { try { ThreadStart starter= delegate { OpenForm(currentScreenLocation, this.Height, this.Width

Does anyone know how to make jQuery masonry stack from the bottom up? I wrote some rudimentary JS to stack things from bottom up but it couldn't do masonryish stuff like stacking the next brick on the shortest column and bricks that span multiple columns. Since I'm not good with Math, looking at the source code just makes me dizzy. Anyone want to try? You're going to laugh at how easy this is to do, but you will need to modify the plugin ( demo ). Basically, I changed line 82 - 85 from this (all that needed changing was top to bottom but I added both so you can switch back and forth): var

I would like to position a <h1> in the middle of any user's page. I have been searching the internet and they all position it in the incorrect place. Thank you! UPDATE: I mean vertical and horizontal! In the exact middle! ALSO: There is nothing else on the page. Try this CSS: h1 { left: 0; line-height: 200px; margin-top: -100px; position: absolute; text-align: center; top: 50%; width: 100%; } jsFiddle: http://jsfiddle.net/wprw3/ Here's a method using display:flex : .container { height: 100%; width: 100%; display: flex; position: fixed; align-items: center; justify-content: center; } <div class

I need this because I want to make a menu (which is made from a HTML list) appear horizontally. I prefer not to use absolute positioning since it might become messy when I start changing the layout of the page. I would like also to remove the indenting of the sub-lists. Is it possible? Ravia You will have to use something like below #menu ul{ list-style: none; } #menu li{ display: inline; } <div id="menu"> <ul> <li>First menu item</li> <li>Second menu item</li> <li>Third menu item</li> </ul> </div> quite simple: ul.yourlist li { float:left; } or ul.yourlist li { display:inline; } Using display

Here is my example: <div id="mainContainer"> <div id="itemIWantToCenter"></div> <div id="itemIwantFloatedRight"></div> </div> The mainContainerwidth width is set to 100%. The itemIwantFloatedRight width is set to 300px. Let's say that the itemIWantToCenter has a width of 200px. How would I center that div while floating the other within the container? Thanks! You should use a linked stylesheet ofcourse... <div id="mainContainer" style="width:100%; border:solid 1px red;"> <div id="itemIwantFloatedRight" style="width:300px; border:solid 1px green; float:right"> right </div> <div id=

So I was working on this site and I had the displaying how I was wanting. After working on a lower page banner all of a sudden everything disappeared and all I was left with was the background Image in the Body. Can you figure out why the topImage id does not display? It is frustrating as hell to see it work one second and then not the other: <style> body { background-image:url("images/Background.gif"); background-repeat:repeat-y; background-attachment:fixed; background-position:center top; } #topImage { position:absolute; background-image:url("images/Top-Banner.gif"); background-repeat:repeat