Here https://jsfiddle.net/pzdcjtfo/38/ is whole example.
Initial code is this:
.append_section {position: relative;}
.append_section::before {
content:'Before';
background:white;
color:green;
position: absolute;
top: 0px;
display:block;
width:100px;
height:20px;
border:1px solid red;
}
.resizable_div {
resize:both;
overflow:auto;
}
div{
border:1px solid #ccc;
width:250px;
}
<div class="resizable_div append_section" contenteditable>
Some text before which i want to show some element or content <br/>
</div>
I want to show content before .append_section. But it shows nothing. If i remove overflow:auto; and inside .append_section insert some element (div, span), then all works.
But i need to keep div resizable and do not want to insert any elements inside .append_section.
Can anyone advice how to get all this to work.
Edit Thanks to #Temani Afif corrected and all works.
Related
I have divs wherein they are positioned one after another, and they need to be adjacent to each sibling. Simultaneously, there is a button/tab that belongs to this div, and is "welded" to the top of its parent div, like pictured below:
How would I create this effect, given that my primary goal is to have the (stroked) borders of the div in question serve as the border between sibling elements?
just absolute position the button
div{
width:200px; height:120px;
border:2px solid red;
position:relative;
}
.tab{
position:absolute;
height:20px; width:50px;
top:-20px; right:-2px;
background:red;
border:2px solid red;
}
div:nth-child(2){
border-color:blue;
}
div:nth-child(2) .tab{
background:blue;
border-color:blue;
}
/*just to make space in this snippet*/
div:first-child{
margin-top:20px;
}
<div>
<button class="tab"/>
</div>
<div>
<button class="tab"/>
</div>
to add element to outside of div, you can use jQuery.
you can try this example
<style>
.bg-green {
width: 100px;
height:100px;
background: #0f0;
margin: 10px;
}
</style>
<button onclick="appendElement()">Click To Appent to Outside The Element</button><br><br>
<div id="example" class="bg-green"></div>
<script>
function appendElement(){
$('#example').after('<div class="bg-green"></div>')
}
</script>
i hope this can help
You can use z-index for your blue div in the picture that has some value that is greater of the red bordered box and position it to overlap with red div box element. For example for your blue div filled box :
.blue-filled-div {
position: absolute;
left: 100px; // replace the values according to red box
top: 150px;
z-index: 10;
}
z-index will give 'depth' to your blue div and place it in front of red box div.
I am trying out forms in HTML.
Fiddle
For the div #status, the CSS rules are-
#status{
margin:auto;
width:50%;
border:2px solid red;
background:white;
height:40%;
}
But I cannot understand why the height of divison does not get altered by height rule in the CSS. More over If I try out-
#status{
margin:auto;
width:50%;
border:2px solid red;
background:white;
height:40px;
}
JSFiddle
This leaves the text on the bottom while div is placed at some random place.
Could some help with placing this division below E-mail ID field so that text appears inside it?
Also, which rule in my CSS is responsible for this positioning of div.
You're inserting the div under elements that are floating. You need to add clear: both to your #status CSS rules:
#status {
margin: auto;
width: 50%;
border: 2px solid red;
background: white;
height: 40%; /* or 40px, which will look slightly different. Your choice. */
clear: both;
}
Updated Fiddle
I am puzzled by nested DIV's with Position set to absolute, perhaps someone could guide me :)
My goal is: 1 navbar with 2 div's for points and life, both containing text and 1 icon, i want to absolute position the div's so i can later manipulate them via jQuery.
my problem is, when i nest elements within my points and life div, they go all bananas for me, the overlap and top/right does not seem to have any effect, also the elements within the div's does not comply to my position:absolute, i've tried all sort of combinations with relative, absolute, display:block etc. but without any result.
i compiled a Fiddler to help visualize my problem:
Fiddler link
if i change the div's within points/life the icon seems to behave, but the h2 text is still giving me problems ?...
any idea/solution to my nested div chaos :D. .
<div class="gameWrapper">
<div class="navBar">
<div class="points">
<h2>points</h2>
<div class="imageClass"><div>
</div>
<div class="life">
<h2>life</h2>
<div class="imageClass"><div>
</div>
</div>
</div>
.gameWrapper{
position: absolute;
overflow:hidden;
width:100%;
height:100%;
background-color: #eee;
}
.gameWrapper .navBar{
position:relative;
overflow: hidden;
height:69px;
width:100%;
top:0;
left:0;
border: 1px solid #00f;
}
.gameWrapper .navBar .points,
.gameWrapper .navBar .life{
position: absolute;
overflow:hidden;
top:15px;
}
.gameWrapper .navBar .points .imageClass,
.gameWrapper .navBar .life .imageClass{
position: absolute;
top:0;
right:0;
width: 30px;
height:30px;
background: #fff url(http://drytech.dk/wp-content/uploads/2013/03/pdf-icon.png) no-repeat 0;
}
.gameWrapper .navBar h2{
position: absolute;
top:0px;
}
.gameWrapper .navBar .points{
right:140px;
width:150px;
height:30px;
border: 1px solid #0f0;
}
.gameWrapper .navBar .life{
right:50px;
width:80px;
height:30px;
border: 1px solid #f00;
}
I would start by closing your div tags for your imageClass elements.
Making the h2 tags inline would also help. You can either do this with display: inline; or changing them into a default inline element, like a span.
Here is the fiddle
Changing the h2 tags into span tags, like I did for the fiddle, removes some of the default styling. Something to consider if you choose that route.
I can't seem to centre align my div(title) which sits inside another div.
HTML
<div class="wrapper">
<div id="header">
<div class="title">Home</div>
</div>
</div>
CSS
#header {
position:relative;
width:1200px;
height:400px;
margin:auto;
border:1px solid red;
}
.title {
position:absolute;
width:1000px;
height:140px;
background-color:red;
margin:auto;
}
Remove position: absolute and it works perfectly.
Position: absolute is only necessary when you need very specific placement outside of the normal document flow. In this case, nothing special is needed apart from automatic left and right margins, which you already have.
you are mixing stuff.
Remove position absolute.
or if you want it to be absolute you can do this
.title {
position:absolute;
width:1000px;
height:140px;
left: 50%;
background-color:red;
margin-left:-500px;
}
I am working on a site where a 3rd party in-line HTML editor is being used (CKEditor). I have the editor control wrapped in a DIV that is relatively positioned and has a z-index that places is at the top of the visible stack. The problem is that on some pages there are images that are floating (float: right) on the right side. Some of the CKEditor styles are setting elements overflow property to hidden (overflow: hidden).
So although my containing DIV has a larger z-index than the floating image the CKEditor elements are not overflowing on top of the image. This creates the a result that looks as if the top right corner of the editor has been cut out.
Is there a way I can work around this without trying to edit CKEditor styles? Check out this example sinario:
http://jsfiddle.net/nmartin867/StHJA/
HTML
<body>
<div class="floating">
I'm floating!
</div>
<div class="container">
<div class="inner">
Why am I not overlapping?
</div>
</div>
CSS:
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:visible;*/ <--This would work
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
float:right;
}
You could do this but I am not sure if it applies to your situation.
.inner{
background-color:yellow;
position: absolute;
width:100%;
text-align: right;
}
Alternatively when you want to override third party styles but do not wish to edit them in the third party application you can recreate the same css class in your own stylesheet and force it to overwrite the third parties by using important! eg:
float: none !important;
Have you tried absolute positioning instead? Because you are floating a DIV that is not in the same container you want to overlap, it will position outside in the body itself. Also, you did not set the z-index for the floated DIV, so it will be layered behind because it is ahead of the other container in sequential order.
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:hidden;*/
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
/* float:right;*/
position:absolute;
top:0px;
right:0px;
z-index:2;
}
I am not sure if this is the effect you want to accomplish, but this will position the first container on the top.