positioning

Position resizable circles near each other

由 时间秒杀一切 提交于 2019-12-22 03:54:06
问题 I am working on this browser-based experiment where i am given N specific circles (let's say they have a unique picture in them) and need to position them together, leaving as little space between them as possible. It doesn't have to be arranged in a circle, but they should be "clustered" together. The circle sizes are customizable and a user will be able to change the sizes by dragging a javascript slider, changing some circles' sizes (for example, in 10% of the slider the circle 4 will have

Div position shifts when adding content

由 試著忘記壹切 提交于 2019-12-21 19:44:53
问题 Following yesterday's issue ( DOM Equidistant divs with inline-blocks and text justify won't work when inserting through JS ) which @Snuffleupagus was kind enough to help me understand, I stumbled into another weird browser behaviour. Updated fiddle in here: http://jsfiddle.net/xmajox/NUJnZ/ When any kind of content is added (block or inline) to the divs they shift down. When all divs have content, they magically move back into their correct places. I tried starting them all with some dummy

Problem with position absolute in ie7, div moves 10px to the right

由 余生颓废 提交于 2019-12-21 04:22:07
问题 ive got a problem on my position absolute property on IE7. My div moves 10px to the right. Below is my code. IE8 and 9 works fine. id menu is the div Im referring. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{margin: 0 0 0 0; padding: 0 0 0 0;} #holder{width: 400px;

Reverse image archive : stacking images from bottom to top with CSS / Javascript?

由 眉间皱痕 提交于 2019-12-20 23:26:39
问题 Wondering if anyone has a solution for this. I would like to present an archive of thumbnail images oldest at the bottom and newest at the top. I would also like the flow itself to be reversed... something like this: The page should be right aligned, with future images added to the top of the page. I am creating the page dynamically with PHP pulling image filenames from a MySQL DB. The catch here is I would love this layout to be fluid, meaning most PHP tricks for counting images and building

CSS min-width property is not functioning

由 霸气de小男生 提交于 2019-12-20 11:14:15
问题 I have following problem: I have div containing other elements and I try to make its width dependent from the content. I also restrict maximum width of this div. I use min-width and max-width in CSS, but it seems that min-width is not working. The width of div is always the max-width value, no matter what the content is. Example: I'd like to have the white div (that is main div, I was talking about) strictly around the form that is in it, without empty spaces on the left and right side. I

CSS centering tricks [closed]

由 依然范特西╮ 提交于 2019-12-20 09:58:32
问题 As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Closed 8 years ago . My favorite equation for centering an xhtml element using only CSS is as follows: display: block; position: absolute; width: _insert

Position by center point, rather than top-left point

由 不想你离开。 提交于 2019-12-20 09:47:43
问题 Is it possible to tell the code to position by the center point of an element, rather than by the top-left point? If my parent element has width: 500px; and my child element has /*some width, for this example let's say it's 200px*/ position: absolute; left: 50%; one would assume that based on the 50% positioning, the child element will be in the middle of the parent, leaving 150px of free space on each side. However, it is not, since it is the top-left point of the child that goes to 50% of

Responsive DIV scaling within “background-size: contain” image

由 岁酱吖の 提交于 2019-12-20 02:31:34
问题 UPDATED 01/01/15 Problem: I have a centered background image that is scaling with background-size: contain . I would like to have DIVs (for links, etc.) that overlay on the background and also scale with said background whenever the browser is resized, but also stay positioned relative to that background's size. In the Fiddle provided below, the red border shows where the navbar should exist and the green border shows where the 'Home' button should be. Resize your browser window as far as you

Responsive DIV scaling within “background-size: contain” image

由 ╄→гoц情女王★ 提交于 2019-12-20 02:30:07
问题 UPDATED 01/01/15 Problem: I have a centered background image that is scaling with background-size: contain . I would like to have DIVs (for links, etc.) that overlay on the background and also scale with said background whenever the browser is resized, but also stay positioned relative to that background's size. In the Fiddle provided below, the red border shows where the navbar should exist and the green border shows where the 'Home' button should be. Resize your browser window as far as you

CSS Positioning Absolute within table cells not working in Firefox

由 这一生的挚爱 提交于 2019-12-19 16:50:08
问题 I cannot figure out this positioning problem in Firefox. It doesn't seem to follow the absolute positioning rule. Is there something I'm doing that shouldn't be done, but some browesers handle it and some don't? JS Fiddle: Original - http://jsfiddle.net/g9qzh/ Updated - http://jsfiddle.net/g9qzh/2/ Works in IE, Chrome, Safari, Opera Here's the actual code. Let me know if I'm not following some kind of standard I don't know about. HTML: <table> <tr> <td> <div id="three">Three</div> <div id=
订阅 positioning