Example about the usage of file-select
<div class="bk-root" id="d767cfd5-1265-4adb-a0ce-f865e2640394" data-root-id="1001"> I need to remove this
<div class="bk myinput" style="position: relative; display: block; left: 0px; top: 0px; width: 300px; height: 22px; margin: 5px;"> and remove this
<input type="file" accept=".xer"> and keep this
</div>
</div>
I need to remove the surrounding tags with their styling and keep the control only
Thanks
Related
I have the following HTML code:
<div id="divFather" class="clsFather">
<div class="clsSon">
<img src="A.png">
<img src="B.png">
</div>
<div class="clsSon">
<img src="A.png">
<img src="B.png">
</div>
</div>
And this is the .css file:
.clsSon{
float: left;
width: 50%;
text-align: center;
position: relative;}
.clsSon img{
position: absolute;
top: 0px;
left: 0px;}
With this, I am trying to have two divs in one row, with two overlaped images in each div. But instead of that, I get four images overlaped in only one place. I want to get 2 + 2 overlaped images in one row of two divs. How can I get it?
like this?
.clsSon {
float: left;
height: 160px;
width: 160px;
text-align: center;
position: relative;
}
.clsSon img {
position: absolute;
top: 0px;
left: 0px;
}
<div id="divFather" class="clsFather">
<div class="clsSon">
<img src="http://source.unsplash.com/160x160">
<img src="http://source.unsplash.com/160x160/?mountain">
</div>
<div class="clsSon">
<img src="http://source.unsplash.com/160x160">
<img src="http://source.unsplash.com/160x160/?mountain">
</div>
</div>
Finally, I was able to do it in this way:
.clsSon{
float: left;
text-align: center;
position: relative;
height: 160px;
width: 50%;}
.clsSon img{
position: absolute;
margin: auto;}
I'm trying to get three paragraphs of text to float to the right of an image. However, the float: right; isn't working. Instead, the text and background-color (that I added for testing) is placed above the image, covering it completely.
What the heck am I missing?
<div style="width: 100%; max-width: 1200px; height: 500px; background-color: purple;">
<img src="url" style="max-width: 406px; width: 30%; height: auto; float: left; background-color: red; position: absolute;">
<div style="float: right; background-color: green; position: absolute; max-width: 790px; width:69%;">
<p> Text..... </p>
<p> More Text</p>
<p>Final Paragraph </p>
</div>
</div>
You are using position:absolute; as well as floats for the same elements. Try using just floats.
DEMO
position: absolute; - setting this in the "green" text does just that, absolute and thus the float is not "inline" with the image
<div style="float: right; background-color: green; max-width: 790px; width:69%;">
Fiddle with the change made: http://jsfiddle.net/mschultheiss/zghbz40p/
I'm having a rough time trying to position things in CSS. I understand padding,margin,height,width which to me seems like it should be enough to organize nested div boxes, but unfortunately it doesn't seem to be that easy for me.
Anyway, in my example below, the profile picture is bigger than the actual div it's contained in.
What am I doing wrong here?
CSS
.mailcontainer{
top: 40px;
width:600px;
height: 100%;
width: auto;
position: relative;
background-color:green;
}
.mail {
margin: 5px auto;
width: 700px;
height: 40px;
z-index: 100px;
overflow: hidden;
background-color: #d3d3d3;
position: relative;
border-radius: 6px;
}
.leftprofileimage img {
float: left;
max-height: 100%;
width: auto;
position: absolute;
border-radius: 90px;
}
.snippet {
float: right;
top: 10px;
width: 55%;
margin-left:26%;
position: absolute;
}
.sendername {
font-size: 1.0em;
width: 26%;
padding: 9px 0;
margin-left: 15%;
position: absolute;
}
HTML
<div class="mailcontainer">
<div class="mail">
<div class="leftprofileimage"><img src="https://s3.amazonaws.com/BodegaMagazine/StaffPhotos/Small/eric-small-profile-photo.jpeg" alt="" /></div>
<div class="sendername"><a href="/">Jeff
</a></div>
<div class="snippet">
Hello this is a test message</div>
<div class="delete"><p>DELETE</p></div>
</div>
<div class="mail">
<div class="leftprofileimage"><img src="https://s3.amazonaws.com/BodegaMagazine/StaffPhotos/Small/eric-small-profile-photo.jpeg" alt="" /></div>
<div class="sendername"><a href="/">Jeff
</a></div>
<div class="snippet">
Hello this is a test message</div>
<div class="delete"><p>DELETE</p></div>
</div>
http://codepen.io/pen/
Your profile picture is 40x40, and the nearest positioned parent is .mail, which is also 40px. The profile pics immediate parent (.leftprofileimage) was not explicitly positioned, so that's probably where the confusion lays. This codepen simply adds rules to .leftprofileimage to make it the element that profile pic conforms to:
http://codepen.io/sean9999/pen/xypBb
Here is the fiddle. I am making a grocery list web app, and I am making the top div a fixed position. When I do this, the div seems to overlap the rest of the page. I have tried using two positions in the css (position: relative; position: fixed) but this doesn't let the div stay fixed.
CSS (for the div):
#top {
width: 100%;
height: 40px;
background: #96f226;
text-align: center;
font-size: 30px;
color: #252525;
position: relative;
position: fixed;
}
HTML (for the div):
<div id='top'>Kitchen List</div>
Wrap your content with div and give it the margin-top to the same height as your fixed content.
SEE DEMO HERE
HTML
<div id='top'>Kitchen List</div>
<br />
<div class="container">
<input type='text' id='input'>
<button id='click'>Add</button>
<ol></ol>
<div id='error'>Please enter a grocery item
<br />
<button id='eb'>Close</button>
</div>
</div>
CSS
.container {
margin-top: 50px;
}
You need to add another div to wrap the content with a margin-top.
DEMO
http://jsfiddle.net/sZaxc/8/
HTML
<div id='main'>
<!-- inputs etc -->
</div>
CSS
#main {
margin-top: 50px;
}
I also added a z-indexand top: 0to your #top-div - just in case.
It's because you have two positions. Remove one and make it:
#top {
width: 100%;
height: 40px;
background: #96f226;
text-align: center;
font-size: 30px;
color: #252525;
position: fixed;
}
I finally figured out the cause of my problem, but I cannot determine a solution, so your help is needed!
I'm trying to style a button, and it looks great in FireFox and Internet Explorer, but not in Chrome! I'm using negative margins here, but the issue still exists even if they're positive margins.
Here's the code, simplified to illustrate the problem:
<div style="display: inline-block;">
<span style="display: block; margin: -20px; width: 100px; height: 100px;"> div </span>
</div> <!-- DIV works the same in all browsers -->
<button style="display: inline-block;">
<span style="display: block; margin: -20px; width: 100px; height: 100px;"> button </span>
</button> <!-- BUTTON ignores margins in Chrome only -->
Here's the expected result in FireFox:
And here's the issue I see in Chrome:
See it yourself: http://jsfiddle.net/ScottRippey/SZV45/13/
It seems to me like the margins are being ignored. However, I cannot seem to disable margin collapsing for the button!
I've tried: display: inline-block; position: absolute; margin: 1px; padding: 1px; border: 1px solid white;
Any ideas?
Discard the negative margin, move the width/height to .button (and adjust for margin), and use position instead (example):
<div class="button">
<span class="inner"> div </span>
</div>
<button class="button">
<span class="inner"> button </span>
</button>
.button {
display: inline-block;
background: rgba(255,0,0,0.5);
border: none;
padding: 0;
margin: 20px;
position: relative;
width: 60px;
height: 60px;
vertical-align: top;
}
.inner {
display: block;
background: rgba(0,0,255,0.5);
position: absolute;
top: -20px;
bottom: -20px;
left: -20px;
right: -20px;
}