positioning

问题 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? 回答1: 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> <

问题 I need to position div popup to the center of browser screen ( no matter what size the screen is). And I want to keep the position as absolute as I don't want to move the popup down when I scroll down the page. This div is displayed when button is clicked using Jquery. I tried setting margin-left to half of the width like mentioned in other posts but It isn't working for me. Here is my code CSS code: .holder{ width:100%; position:absolute; left:0; top:0px; display:block; } .popup{ width:800px

问题 Ok I need to be able to position a bunch of random sized absolutely positioned words on a page but I don't want any of the elements to overlap. The end goal is to have a fluid word cloud that responds to user interaction (remember the Google Balls Doodle?). I would really like to build this from scratch to develop my understanding of this type of development. Any help in this department would also be appreciated :) 回答1: I'm not sure if you also want to position the words randomly inside a

问题 I have 2 divs, parent and child, I want that child left side (left border) will in center of parent. Why this code not working? that is left: 50% for child, is not working. <div id="outher"> <div id="inner"> </div> </div> css: #outher { width: 1000px; height: 1000px; background-color: #ccc; } #inner { width: 400px; height: 300px; background-color: #090; left: 50%; } demo http://jsfiddle.net/vrse2/5/ 回答1: You need to set position to absolute or relative : #inner { width: 400px; height: 300px;

问题 I'm trying to make Divs to appear randomly anywhere on a webpage with javascript. So a div appears then disappears, then another div appears somewhere else on the page then disappears, then another div appears again in another random spot on the page then disappears, and so on. I'm not sure on how to generate random units in pixels or what technique to use to generate random positions. How do I do that? Here's my code: var currentDivPosition = myDiv.offset(), myDivWidth = myDiv.width(),

问题 I found this thread — How do you stretch an image to fill a <div> while keeping the image's aspect-ratio? — that is not entirely the thing that I want. I have a div with a certain size and an image inside of it. I want to always fill-out the div with the image regardless if the image is landscape or portrait. And it doesn't matter if the image is cut-off (the div itself has overflow hidden). So if the image is portrait I want the width to be 100% and the height:auto so it stays in proportion.

问题 In CSS, what is the difference between static (default) positioning and relative positioning? 回答1: Static positioning is the default positioning model for elements. They are displayed in the page where they rendered as part of normal HTML flow. Statically positioned elements don't obey left , top , right and bottom rules: Relative positioning allows you to specify a specific offset ( left , top etc) which is relative to the element's normal position in HTML flow. So if I have a textbox inside

问题 I have this problem with my CSS animation. I have an element position absolute centered in the middle of the page and when I put the animation on, it moves to the right and when the animation is finished it moves back to the middle of the page. Here's the code: @keyframes motto from opacity: 0 transform: translate3d(0, -100%, 0) to opacity: 1 transform: none #home .motto position: absolute top: 50% left: 50% margin-right: -50% transform: translate(-50%, -50%) animation-name: motto animation

问题 I have a CSS layout as in the attached picture. I'd like to achieve the following behaviour When part of the header is visible the positions (when scrolling) are as in the picture. When header is invisible (we're scrolling down more then header length), the positions of left, right and img should be fixed and the only scrollable part should be page content. So far fiddle link Liam suggested this link but javascript has error Uncaught TypeError: Property '$' of object [object DOMWindow] is not

问题 I want to layer 4 images on top of each other inside a table cell with css. Here is what I want the final image to look like: The 4 images are: The gray rounded corner rectangle with the red shaded triangle and the numbers The blue bar The lines on top of the bar The yellow triangular indicator All these images must be on top of each other within the a table-cell. The bar must be able to stretch (I would draw it with a css div with a variant width property if it's possible) and the triangle