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.
Related
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'm trying to overlap images in css. They are both aligned in the center but one is below the other one. I tried z-index'ing which is fine with position: absolute; but if I do that then I lose my centering.
Issue:
The dots are supposed to be over the phone.
My HTML:
<div class="content-top"><div class="cwrap">
<motto>Become Famous On Vine.</motto>
<img id="phone" src="./images/phone.png">
<img id="dots" src="./images/dots.png">
</div></div>
My CSS:
.cwrap {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.content-top {
background-color: #00b589;
height: 650px;
width: 100%;
}
.content-top motto {
display: block;
width: 100%;
text-align: center;
padding-top: 15px;
color: #FFF;
font-size: 60px;
font-family: "Source Sans Pro ExtraLight";
}
.content-top motto {
display: block;
width: 100%;
text-align: center;
padding-top: 15px;
color: #FFF;
font-size: 60px;
font-family: "Source Sans Pro ExtraLight";
}
#phone {
z-index: 999;
}
#dots {
z-index: 1000;
}
.content-top img {
margin-left: auto;
margin-right: auto;
position: relative;
display: block;
}
Try this. position: absolute;, top: 0;, left: 0;
The the red div is semi-transparent to reveal the blue div below.
Now, if you want to center these in the middle of the page, <div class="container"> use css: margin: 0 auto;.
Link to example: jsFiddle
Use on #phone and #dots elements these css attributes: position, z-index, top, and left.
Use position: absolute the upper layer, and the top and left to place the upper layer to the correct location. Use z-index to specify the layer, lower value is backer, bigger value is upper.
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'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.
I want a div to go under another div. In this example I want the #under to go under #box. I've played a bit around with z-index, but I can't get it to work, I suppose it has to do with the way my markup is arranged.
My question is - is it possible to make #under go under #box without changing the markup?
You can check out my example here: http://jsfiddle.net/timkl/hrsHY/
This is my HTML:
<div id="main-content">
<div id="box">
<h2>box</h2>
</div><!-- /box -->
</div><!-- /main-content -->
<div id="under">
<h2>under</h2>
</div><!-- /under-->
<div id="footer">
<h2>footer</h2>
</div><!-- /footer -->
This is my CSS:
#container {
font-family: Helvetica;
color: #ccc;
font-weight: bold;
}
#main-content, #box, #footer, #under {
padding: 16px;
}
#box {
background: #F3F3F1;
height: 200px;
}
#under {
height: 40px;
background: orange;
margin-top: -100px;
z-index: -10;
opacity: .7;
color: brown;
}
#footer {
background: #F3F3F1;
}
Z-index only works with absolute positioning.
#container {
font-family: Helvetica;
color: #ccc;
font-weight: bold;
position: absolute;
}
#under {
height: 40px;
background: orange;
margin-top: -100px;
z-index: -10;
opacity: .7;
color: brown;
position: absolute;
}
When you desire them to be positioned relative (as in postion: relative;) You can position them absolute within a surrounding div which you position relative to acquire relative positioning of the two div's combined.
Your z-indexed elements need to have a position for the z-index to apply. Try adding position: relative to each div with a z-index.
#under {
height: 40px;
background: orange;
margin-top: -100px;
z-index: -10;
opacity: .7;
color: brown;
position: relative;
}