Place the div to the center and overlap with container div - html

I have a .footerdot div, which lies at the bottom of page with a bluedot image aligned to center of the page and overlapping the container div. I'm attaching the image for better understanding how the layout should looks like.
Here is the code:
<div class="footerdot">
<div class="dot">
<img src="images/bluedot.png" alt="bluedot"/>
</div>
</div>

From the image I understand that you are trying to create a slider. The footerdot acts as the slider base and the dot is used to slide over it.
This includes overlapping the dot over footerdot. So to overlap a div over another div, we need to place both footerdot and dot inside another parentdiv with position: relative.
Now both the child divs are relayively positioned to their parentdiv. The flow will be normal here.
In order to place dot over footerdot, i.e we are not altering the position of footerdot but the dot. So we need to position the dot absolutely to it's parent. Add position:absolute to dot. Now dot overlaps the footerdot. Give dot a fixed width and height. eg: height: 20px; width: 20px.
But dot is still not centered on the footerdot. Instead it lies on the top left corner. In order to achieve that we need to add a dotparent div to the dot, which takes the width of the footerdot and we can center the dot inside it. But again we also need to shift the property position: absolute from dot to dotparent. And add left: 0; right: 0 to dotparent, so that it occupies the whole width of the parent from left to right. Now the width of dotparent is same as footerdot. dot can be centered inside the dotparent by applying margin: 0 auto on dot.
Finally the Html structure:
<div class='parentdiv'><div class='footerdot'></div><div class='parentdot'><div class='dot'></div></div></div>

Related

Positioning elements on a webpage

I have included a link to a picture to help explain my question: http://i.gyazo.com/b1e319cda4b7c21a5072156f5bd7c590.png
Im trying to position the red div exactly below the blue one. The problem is that the top container which you can see at the top of the picture, has a height of 100%. The blue div then has a height of 300px and is positioned with top:100%.
How can I get the red div exactly under the blue one? I almost just need to be able to do: top: 100% + 300px;
Thanks!
Well you could do top: calc(100% + 300px); ?
Put both the red div and the blue div in a single div container.
Apply the absolute positioning to the outer container, and keep the inner divs static (as in, remove absolute positioning).
Remove margins between divs with margin: 0;

how to show background image(multiple) if out of current div

containerdiv has two images, I make them display left and right:
.container {
background-image: url('img/left.png'),url('img/right.png');
background-position: left,130px;
overflow: visible;//this line doesn't work
}
currently, right.png is out of the right boundary of the container div and is hidden behind another named div2 which is at the right side of the container div.
How to make right.png image display on top of div2?
see below structure:
[left.png------ 'I am container div'--------- ][right.png-----I am div2 -------]
for some reason, it is not possible to change the css of div2, so I am wondering if it is possible to set some attribute inside container div then right.png can show up.
see below I draw a picture: I set right.png 125px to show, ideally, it would cover the grey triangle.
Can not add padding to the container, can not change position of div2 (because there are other menus share this part, whole part of container div would turn grey if other menu was clicked.)
Is div2 positioned absolute? If so, you can only place .container higher by positioning it absolute as well and setting the z-index higher than div2, or by placing .container after div2 in the DOM.

CSS: relative positioninig of bottom right

The floating element has following structure:
<a>The_button</a>
<div style="position:absolute">
<div style="position:relative" class="inner-box">
Content
Content
Content
Content
Content
</div>
</div>
The content of multiple inner-box controls has variable length, so the inner-box'es have variable height. I want to define CSS class .inner-box (without JavaScript) so that the lower right corner of the inner-box will be positioned in relation to upper-left corner of the link. Is this possible?
Target browsers are IE8+, Firefox, Chrome, Opera, Safari.
Links have always the same height and width.
The only solutions I could come up with so far are:
http://jsfiddle.net/fmVz6/ - this requires a height and width to be defined on the "outer-box", not the inner-box (the inner must be absolutely positioned too).
Working on a second one at the moment ...
http://jsfiddle.net/fmVz6/1/ - this one does not require a height or width specified, it simply needs something inside the parent div (e.g. a space) to see the effect, otherwise the background doesn't appear.
Okay, to have it appear top-left of the link, http://jsfiddle.net/H5G8r/1/ (Requires some rearrangement of your HTML).
This one requires no width to be defined, and doesn't break the words onto multiple lines:
http://jsfiddle.net/H5G8r/2/
Take your pick :-)
You've got the right idea, but backwards. The parent element needs position: relative, and the inner element position: absolute, since the inner element is absolutely positioned relative to its parent (technically, its offsetParent. Specifying position: relative on the parent makes it the offsetParent of all of its child elements).
Next: to align the top-left corner of the parent element with the bottom-right corner of the absolutely positioned child, specify right: 100%; bottom: 100% in the child's CSS. This puts the child <100% of the parent's width> away from the right edge of the parent, and <100% of the parent's height> away from the bottom.
HTML
<div class=outer-box>
The Button
<div class=inner-box>
</div>
</div>​
CSS
.outer-box {
position: relative;
}
.inner-box {
position: absolute;
/* align bottom-right with offsetParent's top-left */
bottom: 100%;
right: 100%;
width: 100px; /* fixed width, else contents will shrink */
}
Also in a jsFiddle: http://jsfiddle.net/ryanartecona/g344W/2/
When you get those aligned, you may want to put another box inside the .inner-box and make it position: relative to make any position adjustments, like sliding it a fixed distance over the button, etc.

Float: left breaks container div?

I have a modal box where I'm trying to put two columns beside each other, and I did that by assigning float: left to one div (.center-columnb) and a float: right to .map-column.
What happens, however is that 'center-columnb' breaks the container div with the grey gradient background as if this div was placed UNDER that container div (notice the rounded edges on the bottom of the grey part, that was meant to be at the bottom of the div.
When I remove float: left from centercolumnb from style.css, everything is ok except that the column on the right does not stay there anymore. Does anyone have any alternatives that could help me? Thanks :)
You have a parent div of #contentholder but it's not containing the floats within it at this point. A floated element, by default, is taken out of the document flow and any parent div will collapse. To make it contain the floats within, you need to give it an overflow property. This should do the trick:
#contentholder {
overflow: auto;
}
Another way is to clear at the bottom of the Question container. For a full cross browser compliant solution, just add before the closing div:
<div style="clear:both"></div>

Div just not playing ball and going where i want it

the div with the word test it in, just will not go up the top right..... despite me floating right and specifying top 0
http://www.e-fluential.com/offline/
HELP!!
Thanks in advance
You should give the element the following properties:
position: absolute;
top: 0;
right: 0;
This will make the element go to the top right corner. If you want the element to go to the top right corner of its parent you should give the parent the following property:
position: relative;
This will position the element relative to its parent.
Another solution would be to wrap the elements on the left with a wrapper, which you will then need to give a width and a float: left;, do the same with the elements that should go right but instead of floating it left give it a float: right;. The total width of both wrappers should not extend the width of the parent.
You'll probably want to go with the second solution because you don't need to give your elements absolute coordinates that way.
Positioning elements
Floating elements