positioning | 易学教程

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=

CSS dropdown nav causing html content to move

阅读更多关于 CSS dropdown nav causing html content to move

问题 my first question on SO, hope it's up to scratch, should be a simple solve for somebody well versed in the art of css... The problem im having is that the dropdown sections of my css-driven navigation are causing the content below it to shift to the right. I have found similar-ish questions posted but I have tried all provided solutions and nothing seems to get it working..... The closest I have managed to get is to add position:absolute; to the #nav li:hover ul tag, and this does stop the

Relatively position an element without it taking up space in document flow

阅读更多关于 Relatively position an element without it taking up space in document flow

How can I relatively position an element, and have it not take up space in the document flow? What you're trying to do sounds like absolute positioning. On the other hand, you can, however, make a pseudo-relative element, by creating a zero-width, zero-height, relatively positioned element, essentially solely for the purpose of creating a reference point for position, and an absolutely positioned element within that: <div style="position: relative; width: 0; height: 0"> <div style="position: absolute; left: 100px; top: 100px"> Hi there, I'm 100px offset from where I ought to be, from the top

How to make inner div use window scroll bar?

阅读更多关于 How to make inner div use window scroll bar?

问题 I'd like to use a div within my page that does not take up the whole screen use the scroll bars on the edge of the screen when its content overflows. I know that sounds confusing, so here's an example: http://www.csszengarden.com/?cssfile=/202/202.css&page=1 I would have posted code, but I'm not sure where to start on that. Could someone point me in the right direction with the HTML & CSS? 回答1: One trick is to overlay one or more static images or boxes and fix their position, then resize the

css “left” not working

阅读更多关于 css “left” not working

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/ You need to set position to absolute or relative : #inner { width: 400px; height: 300px; background-color: #090; position: absolute; left: 50%; } NullPoiиteя CSS left only works with positioned

How to evenly space many inline-block elements?

阅读更多关于 How to evenly space many inline-block elements?

问题 Is it possible to evenly space many elements in a div with changeable width. Here's not working example. If we use text-align:center; elements will be centered, but margin:0 auto; is not working. I want to accomplish something like justify+center: |..<elem>..<elem>..<elem>..<elem>..| // for one container width |..<elem>..<elem>..<elem>..| // for smaller container width |....<elem>....<elem>....| // even smaller container Container will be user resizable. One picture is worth a 1000 words:

sizing div based on window width

阅读更多关于 sizing div based on window width

问题 I have kind of a weird question. On my page I have a main image of a planet in some heavy duty nebula. I have it set up so the min width is 1000px and max is 1500px. I have the sides fading out and this looks great with larger screens. What I'd like to try to do is when you're looking at it on a mobile device for example and it's cutting off the width at 1000 pixels, I'd like the image say 1300 pixels wide, centered and 150 pixels is cut off each side so you can't see the fade out at all, but

How to horizontally center a floating element of a variable width?

阅读更多关于 How to horizontally center a floating element of a variable width?

How to horizontally center a floating element of a variable width? Edit: I already have this working using a containing div for the floating element and specifying a width for the container (then use margin: 0 auto; for the container). I just wanted to know whether it can be done without using a containing element or at least without having to specify a width for the containing element. Assuming the element which is floated and will be centered is a div with an id="content" ... <body> <div id="wrap"> <div id="content"> This will be centered </div> </div> </body> And apply the following CSS:

In jQuery how can I set “top,left” properties of an element with position values relative to the parent and not the document?

阅读更多关于 In jQuery how can I set “top,left” properties of an element with position values relative to the parent and not the document?

问题 .offset([coordinates]) method set the coordinates of an element but only relative to the document. Then how can I set coordinates of an element but relative to the parent? I found that .position() method get only "top,left" values relative to the parent, but it doesn't set any values. I tried with $("#mydiv").css({top: 200, left: 200}); but does not work. 回答1: To set the position relative to the parent you need to set the position:relative of parent and position:absolute of the element $("

Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6

阅读更多关于 Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6

问题 I have a simple (absolutely positioned) image slide-show that consists of a few images that rotate every few seconds. To have different areas of the changing image click-able, I also have an unordered list containing the different links, relatively positioned in order to use z-index. This works just fine in Firefox (3.6), Safari (windows) and Chrome (windows). However, the links seem to disappear behind the images in IE8 and IE7 (I haven´t even tried it in IE6 yet...). How can I bring the