positioning | 易学教程

CSS: fit relative positioned parent to height of absolute positioned child

阅读更多关于 CSS: fit relative positioned parent to height of absolute positioned child

I am trying to build a simple slideshow. So far, the basic markup looks like this: <h1>My Slideshow</h1> <p>This paragraph behaves as expected.</p> <div class="slide-container"> <div class="slide"> <h2>First Slide</h2> <p>Some stuff on this slide…</p> </div> <div class="slide"> <h2>Second Slide</h2> <p>And some more stuff here…</p> </div> </div> <p>This paragraph will disappear beneath the stacked images.</p> This is the corresponding CSS: .slide-container { position: relative; } .slide { position: absolute; top: 0; /* just for the looks */ width: 20em; padding: 0 1em; border: 1px solid

jQuery colorbox : How can I change the position of the colorbox

阅读更多关于 jQuery colorbox : How can I change the position of the colorbox

问题 By default the colorbox appears centered both vertically and horizontally on the screen. Is there a way to change that, for example to 10% from top vertically and centered horizontally? 回答1: This will override the top position, and you can do the same with left etc: #colorbox { top: 100px !important; } 10% from top would be trickier, you'd have to implement your own positioning logic in an onload callback everytime the colorbox is shown, or extend colorbox's code, but no quick way to do that.

CSS - Placement of a div in the lower left-hand corner

阅读更多关于 CSS - Placement of a div in the lower left-hand corner

I wish I were a CSS smarty .... How can you place a div container in the lower left-hand corner of the web page; taking into account the users scroll-position? To position an element relative to the "viewport" (the window or frame it's in), and have it ignore how that viewport is scrolled, you can use the position: fixed; property value ( MDN documentation ). This has been supported by every browser since Internet Explorer 7. To position the element at the bottom-left of the window, we need to also specify that it should be positioned at 0 distance from the bottom and left : position: fixed;

CSS - Placement of a div in the lower left-hand corner

阅读更多关于 CSS - Placement of a div in the lower left-hand corner

问题 I wish I were a CSS smarty .... How can you place a div container in the lower left-hand corner of the web page; taking into account the users scroll-position? 回答1: To position an element relative to the "viewport" (the window or frame it's in), and have it ignore how that viewport is scrolled, you can use the position: fixed; property value (MDN documentation). This has been supported by every browser since Internet Explorer 7. To position the element at the bottom-left of the window, we

JavaFx GridPane - how to center elements

阅读更多关于 JavaFx GridPane - how to center elements

I have a GridPane filled with 1-letter-labels. Here is an image: Here is the code: int charSpacing = 1; int charsInWidth = 28; int charsInHeight = 16; double charWidth = 15; double charHeight = 20; GridPane gp = new GridPane(); gp.setAlignment(Pos.CENTER); Label[] tmp = new Label[charsInHeight*charsInWidth]; String text = "W"; int currArrPos = 0; for(int y = 0; y < charsInHeight; y++) { HBox hbox = new HBox(charSpacing); for(int x = 0; x < charsInWidth; x++) { tmp[currArrPos] = new Label(text); tmp[currArrPos].setTextFill(Paint.valueOf("white")); tmp[currArrPos].setMinHeight(charHeight); tmp

How can I position an element at the bottom of its container in Firefox?

阅读更多关于 How can I position an element at the bottom of its container in Firefox?

I have a table cell, and I want a div within it to always be at the bottom left corner. The following works fine in IE and Safari, but Firefox is positioning the div absolutely on the page, not within the cell (code based on the solution solution here ). I have tested both with and without the DTD, which put Firefox in Quirks mode and Standards mode, and neither worked properly. I'm stuck - any ideas? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title

how to position divs within another div

阅读更多关于 how to position divs within another div

I want to position divs within another div. Here's the relevant snippet of css ( full example on cssdesk ): .textblock-container { width: 500px; height: 500px; border: 1px solid red; } div.textblock { width: 100px; height: 100px; line-height: 100px; border: 1px solid black; position: absolute; text-align: center; background: rgb(0, 150, 0); /* Fall-back for browsers that don't support rgba */ background: rgba(0, 150, 0, .5); } and the relevant snippet of html: <div id='blockdiv1' class='textblock-container'> <div id='blockdiv2' class='textblock'><span>foo (NW)</span></div> <div id='blockdiv3'

How can I include the width of “overflow: auto;” scrollbars in a dynamically sized absolute div?

阅读更多关于 How can I include the width of “overflow: auto;” scrollbars in a dynamically sized absolute div?

(First question on Stack Overflow. Hope I'm doing it right.) I'm trying to create a floating menu that inherits its width from its content (since I don't know the width in advance, i.e. loaded from a URL). I can do this by having the menu div absolutely positioned without setting a width or height. The problem occurs when the content is tall enough to require scrolling. I set "overflow: auto;" so that it can be scrolled vertically, but the new scrollbar doesn't make the div wider. Instead, the div stays the same width, and the scrollbar juts into its previously nicely sized content, forcing

CSS: Position text in the middle of the page

阅读更多关于 CSS: Position text in the middle of the page

问题 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. 回答1: 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/ 回答2: Here's a method using display:flex: .container {

html <input> element ignores CSS left+right properties?

阅读更多关于 html element ignores CSS left+right properties?

I've noticed that the <input> element in HTML ignores the CSS pair of "left" and "right" properties. Same for the pair "top" and "bottom". See the sample code below: <html> <head> <style></style> </head> <body> <input type="text" id="someid" value="something"/> </body> </html> The <input> should take up almost all space in the browser (except a border of 10px around it). It works fine in Safari, but in FireFox and IE the <input> stays small in the top-left corner of the browser. If I use "left" and "width