I'm trying to absolutely position a child div element relative to the bottom limit of its parent div so that the it would be maintained at the bottom and will continue to assume the width of its parent even if its parent get re-sized dynamically. The problem is that if I set the parent div position to relative using css from head of document it doesn't seem to accept the positioning made and the child div gets positioned to the body instead breaking the layout.
You can check my code here Broken div
CSS:
#player {
width: 640px;
height: 360px;
background-color: #aaa;
border: 1px solid #555;.
position: relative;
}
#player div.controls {
width: 100%;
height: 26px;
line-height: 26px;
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
background-color: #222;
opacity: 0.5;
}
#player span.control {
padding-left: 10px;
padding-right: 10px;
margin-right: 5px;
cursor: pointer;
}
#player span.control:hover {
background-color: #555;
}
#player span.control:first-child {
margin-left: 5px;
}
HTML:
<div id="player">
<div class="controls">
<span class="control playpause" title="play/pause"></span>
<span class="control volume" title="volume"></span>
<span class="control resize" title="maximize/restore"></span>
</div>
</div>
The extra . (dot) on the following statement (line 5) is the problem:
border: 1px solid #555;.
The Browser simply ignores the position: relative that follows it.
Related
In below program why margin-right value (+ve/-ve) has no impact on the tooltiptext? The margin-left works fine but margin-right has no impact? Thanks
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
top: 100%;
margin-right: 100px;
}
<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
By default HTML elements are aligned to top left corner of their parent element which in this case is .tooltip. Adding a margin-right would push the elements on the right away. However there are no elements after .tooltip thus no effect.
I have a css tooltip which is triggered by hovering over a link, the tooltip text is then populated from the span element hidden in the link text.
fiddle https://jsfiddle.net/70wxxhne/
However I now need to have other html elements within the popup so ideally I would like to load the tooltip content from another div (note1 in the fiddle), is this possible with css alone?
<--css-->
.ktooltip {
position: relative;
display: inline-block;
}
.ktooltip .ktooltiptext {
visibility: hidden;
background: #fff;
width: 150px;
text-align: center;
border-radius: 6px;
padding: 5px 5px;
top: -5px;
left: 105%;
border:2px solid grey;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.ktooltip:hover .ktooltiptext {
visibility: visible;
}
<p>Here is some text with a note here
<sup class="ref">
<a href="#note1" id="note1" class="ktooltip">Tooltip
<span class="ktooltiptext">Current Tooltip text</span>
</a>
</sup>
that continues on here too.
</p>
<div id="note1" class="ktooltip2"><p>wannabe <b>tooltip</b> with alink</p></div>
As of HTML5, you can use block elements, i.e. div, inside an anchor, so no worries about not getting that validated properly anymore, so simply replace your span with your div.
If your div contains a link/anchor, you need to wrap them both (nested links is not valid) and make the div a sibling, here done with the existing ref
Note, to also be able to actually click on the link in the tooltip, I changed its left position to 99%, so it does not disappear when hovering the tooltip itself.
.ref {
position: relative;
}
.ktooltip {
display: inline-block;
}
.ref .ktooltip2 {
visibility: hidden;
background: #fff;
width: 150px;
text-align: center;
border-radius: 6px;
padding: 5px 5px;
top: -5px;
left: 99%;
border: 2px solid grey;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.ref:hover .ktooltip2 {
visibility: visible;
}
<div>Here is some text with a note here
<sup class="ref">
Tooltip
<div id="note1" class="ktooltip2">
<p>wannabe <b>tooltip</b> with alink</p>
</div>
</sup> that continues on here too.
</div>
I'm developing a responsive site and I have an issue that I've never tought I could have It xD
I have an image inside a div wrapper... and just want to put an icon font with :after selector when that wrapper/img has one class...
Trouble comes on z-index, for z-index works I need to "absolute" that img, but if I do that wrapper's height not contains img... and I can not put my :after element relative to img or wrapper well
I have this issue here: http://codepen.io/MrViSiOn/pen/VYpedg
* {
box-sizing: border-box;
}
div {
float: left;
width: 24%;
height: auto;
margin-right: 1em;
border: 1px solid blue;
padding: 1em;
position: relative;
overflow: visible;
}
img {
max-width: 100%;
border-radius: 50%;
padding: 15px;
border: 1px solid #aaa;
z-index: 10;
position: absolute;
}
div:after {
content: "\e60c";
position: absolute;
color: #234;
font-family: "Nubelo";
bottom: 0;
left: 45%;
font-size: 2em;
z-index: 1;
}
<link rel="stylesheet" href="http://i.icomoon.io/public/temp/d53e6aab62/Nubelo/style.css">
<div>
<img src="http://assets.worldwildlife.org/photos/2090/images/hero_small/Sumatran-Tiger-Hero.jpg?1345559303" />
</div>
<div>
<img src="http://assets.worldwildlife.org/photos/2090/images/hero_small/Sumatran-Tiger-Hero.jpg?1345559303" />
</div>
Thank you, If you need more information, just tell
Thanky you Marcel Burkhard...
I didn't know that using position:relative enables z-index.
That's the answer!
I have a set of progress bars displaying different values in real time. My only problem is that I can't seem to figure out how to keep the number value in the center of the bar, as well as on top at all times. Right now it's being pushed 'ahead' of the blue bar, and disappears when it goes outside the right side of the bar.
Here's how it looks:
Markup:
<td class="gridTableCell">
<div style='position: relative' class='progress progress-info'>
<div class='bar' id='signalRdepthRangePercentage-#:ViewUnitContract.ConveyanceId #' style='width: #: DepthRangePercentage#%'>
</div>
<span class='gridSpan' id='signalRdepth-#:ViewUnitContract.ConveyanceId #'>#: ViewUnitContract.CurrentRun.LatestWellLogEntry.Depth#</span>
<span class='hidden' id='signalRMaxDepthRange-#:ViewUnitContract.ConveyanceId #'>#: MaxDepthRange#</span>
<span class='hidden' id='signalRMinDepthRange-#:ViewUnitContract.ConveyanceId #'>#: MinDepthRange#</span>
</div>
</td>
And my css 'gridSpan':
.gridSpan {
position: absolute;
top: 0px;
z-index: 2;
text-align: center;
color: #676767;
width: 100%
}
The first of the three spans is the one that displays the number value inside the bar.
Any suggestions how I can keep this centered at all times, and not pushed in front of the blue filler with a huge margin?
Do something like the following:
FIDDLE
The outer element has text-align:center
The gridSpan element has display:inline-block (not absolutely positioned)
The inner element (with the blue % progress) needs to be absolutely positioned, so as not to be effected by the text-align:center.
Markup:
<div class="outer">
<span class="inner"></span>
<span class="gridSpan">9048.343</span>
</div>
CSS
.outer
{
width: 70%;
margin:20px;
height: 30px;
border: 1px solid gray;
overflow: hidden;
border-radius: 15px;
position:relative;
text-align: center;
}
.inner
{
background: aqua;
display:inline-block;
position:absolute;
left:0;
width: 20%;
height: 30px;
}
.gridSpan {
display:inline-block;
margin-top: 5px;
color: #676767;
position: relative;
z-index:2;
}
Alternatively, if you knew the width of the value you could do this by adding display:block;left:0;right:0 and margin:0 auto to your class:
.gridSpan {
display:block;
position: absolute;
margin: 0 auto;
top: 0px;
left:0;
right:0;
z-index: 2;
color: #676767;
width: x px; /*(width of value)*/
}
Actually, I finally figured this out based on this fiddle:
http://jsbin.com/apufux/2/edit (Wonder why I've never seen this post before!?)
Seems that I was missing some style overrides to the .bar and .progress part:
.progress {
position: relative;
}
.bar {
z-index: 1;
position: absolute;
}
.progress span {
position: absolute;
top: 0px;
z-index: 2;
text-align: center;
color: #676767;
width: 100%
}
Anyways, thanks for your effort! :)
I have a div block that overlays on top of its parent div, but when the window is resized, the child div moves around like crazy. How can I prevent that from happening. Here is the link to my site: http://raider.grcc.edu/~ryanduffing/recordstore/
Here is the relevant CSS code, and HTML code:
<div id="overlayDescription" class="my_corner">
<span id="overHeader"><span id="chevron">ยป</span>THE CORNER</span>
<span id="overHeader2">RECORD SHOP</span>
<p id="overContent"></p>
</div>
<div id="pictureBox">
<img src="img/storefront.jpg" />
</div>
#pictureBox{
margin-top: 10px;
margin-left:auto;
margin-right:auto;
width: 940px;
height: 420px;
position: relative;
z-index: 1;
}
#overlayDescription{
font-size: 11px;
position:absolute;
top: 290px;
right: 489px;
height: 265px;
border: 1px solid #FFFFFF;
width: 240px;
color: #FFFFFF;
background-color:rgba(0,0,0,.9);
z-index: 2;
border-radius: 100px 0 0 0;
}
#overlayDescription span#overHeader{
font-family: Arial Narrow;
position:relative;
font-size: 25px;
left: 80px;
top: 10px;
}
#overlayDescription span#chevron{
position:relative;
left: -5px;
font-family: Arial Narrow;
font-size: 35px;
color: yellow;
}
#overlayDescription span#overHeader2{
font-family: Arial Narrow;
color: yellow;
position:relative;
top: 10px;
left: 80px;
font-size: 25px;
}
#overlayDescription p#overContent{
position:absolute;
padding-left: 25px;
}
You have to make the child's absolute position relative to its parent.
#content {
position: relative;
}
#overlayDescription {
top: 140px;
right: 327px;
/* rest of the styles for this element */
}
It's because you give your child div absolute position means that this element is positioned relative to the first parent element that has a position other than static.
But as I can see from your website, all parent divs of your #overlayDescription div are static positioned element since static is the default position value.
So currently, your div are positioned according to your html element which is your window so you need to give one of its parent another position method rather then static then you'll be fine, for example:
#content {
position: absolute;
}
Set position: relative; on div.content.
Then set right: 0px; on #overlayDescription and adjust the top value to get it to sit in the right spot vertically.