Here is my code:
<div class="mycontent">
<div class="textarea" id="ingId" style="position:relative;">
<div id="idComm" style="position: absolute; z-index: 100; width: 450px; height: 151px; right: 18px; top: 1px;">
</div>
</div>
</div>
How to make them share the same scrollbar? I tried this
But it didn't work, since in the first div I have tinymce.
Related
Can someone explain why search icon is not on the top of input bar in the below code despite the fact that its absolutely positioned?
Thanks
<div style="position: relative;">
<input type="text" style="height: 32px; width: 100%">
<img style="position: absolute; right: 0; height: 32px" src="https://cms-assets.tutsplus.com/uploads/users/523/posts/27345/preview_image/search-icon-large.png" alt="">
</div>
position:absolute may cause some appearance/visibility problems. You can use the background-image option to add a search icon to the right of the input.
input {
background: url("https://cms-assets.tutsplus.com/uploads/users/523/posts/27345/preview_image/search-icon-large.png") no-repeat;
background-size: auto 32px;
background-position: right center;
height: 32px;
width: 100%;
border: 1px solid #4B89DA
}
<input type="text" placeholder="Enter keywords here..." />
It is working, but you need to also specify a top position:
<div style="position: relative;">
<input type="text" style="height: 32px; width: 100%">
<img style="position: absolute; top: 0; right: 0; height: 32px" src="https://cms-assets.tutsplus.com/uploads/users/523/posts/27345/preview_image/search-icon-large.png" alt="">
</div>
I have a site that is a 1 page with different sections. On the first section I am adding a blue overlay over the first section using the below code:
<header class="text-center" name="home">
<div class="cover blue" data-color="blue"></div>
<div class="intro-text">
<h1 class="wow fadeInDown">Site Header</h1>
</header>
Here is the css for .cover.blue:
.cover{
position: fixed;
opacity: 1;
background-color: rgba(0,0,0,.6);
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 0;}
.cover.blue{
background-color: rgba(5, 31, 60, 0.6);
In the 2nd section I want to use an orange overlay but when I apply the div for the overlay the overlay on the 1st section is going in front of my text, buttons, etc and the color is changing to orange.
2nd section html:
<div id="about-section">
<div class="container">
<div class="cover orange" data-color="orange"></div>
<div class="section-title text-center wow fadeInDown">
<h2>Section 2</h2>
<hr>
<div class="clearfix"></div>
<h4>Choose</h4>
</div>
</div>
</div>
</div>
Css for .cover.orange
.cover{
position: fixed;
opacity: 1;
background-color: rgba(0,0,0,.6);
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 0;}
.cover.orange{
background-color: rgba(37, 28, 5, 0.6);}
What am I doing wrong?
Thanks for any input.
If i corectly understand what you want to do, you try to add 1 overlay by section, which you want to cover only his own section.
To do taht, I would choose to add a container for each section (to help standardize behaviour with classes) a use "absolute" positionning rather than "fixed".
.container {
position: relative;
z-index: 1;
}
.cover{
position: absolute;
opacity: 0.5;
background-color: grey;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 3;
}
.cover.blue{
background-color: blue;
}
.cover.orange{
background-color: orange;
}
<header class="text-center" name="home">
<div class="container">
<div class="cover blue" data-color="blue"></div>
<div class="intro-text">
<h1 class="wow fadeInDown">Site Header</h1>
</div>
</div>
</header>
<div id="about-section">
<div class="container">
<div class="cover orange" data-color="orange"></div>
<div class="section-title text-center wow fadeInDown">
<h2>Section 2</h2>
<hr>
<div class="clearfix"></div>
<h4>Choose</h4>
</div>
</div>
</div>
Note: your HTML snippets have issues : in the first, you forgot to close div, and in the second you close the last div twice.
I have div as below:
<div id="divObservationInput" style="height: 55%; vertical-align: text-bottom;" class="sloInputBox">
<div id="divEnlargeTextarea" style="height: 97%; width: 99%">
<textarea onkeyup="txtobservationbox_onTextChanged();return false;" name="txtobservationbox" id="txtobservationbox" style="height: 100%; width: 100%; overflow: auto; font-size: 12pt;">#ViewBag.ObserverText</textarea>
</div>
</div>
And button div as:
<div id="DivShowInModal" style="background: rgba(0,0,0,0.8);">
<div>
<div style="padding-top: 1%; text-align: right; position: relative; width: 80%; height:2%">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
<div id="divModal" style="max-height: 500px; min-height: 500px;">
</div>
</div>
</div>
Its looking:
I want to shoft that close button to extreem right of div.
i.e. It should be extreem right to textarea.
Please help me.
I tried button setting its right padding to 100%.
But it didnt helped.
Change your '80%' 'width' to '100%' for this 'div'
<div style="padding-top: 1%; text-align: right; position: relative; width: 100%; height:2%">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
I guess you have to do
in HTML
<div class="relative">
<div class="button">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
<div id="divModal" style="max-height: 500px; min-height: 500px;">
</div>
</div>
In CSS
.relative { position: relative; } .button { position: absolute; top: 0; right: 0; }
use this code n try once
<div id="DivShowInModal" style="background: rgba(0,0,0,0.8);">
<div style="position:relative">
<div style="padding-top: 1%; text-align: right; position: absolute; width: 80%; height:2%;right:0">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
<div id="divModal" style="max-height: 500px; min-height: 500px;">
</div>
</div>
</div>
i have scaled it by position:absolute and right:0
You can use position absolute with right 0 for button. For that you need to give position relative for it's parent div.
[Demo](http://jsfiddle.net/Rj3Mh/)
I had a hard title coming up with a title. I'm having trouble with the twitter bootstrap overlay appearing on top of a modal window, I'm able to illustrate my problem with the below html. I've also provided a jsfiddle.
<div style="position: relative; z-index: 1;">
<div style="background: blue; position: fixed; z-index: 3;">
</div>
</div>
<div style="background: green; position: fixed; z-index: 2; top: 0">
</div>
How can I get the blue div to appear on top of the green div? Why is the green div on top of the blue div?
Hi now used to this demo http://jsfiddle.net/rohitazad/UnTvQ/5/
Define top div z-index
<div style="position: relative; z-index: 3;">
<div style="background: blue; position: fixed;">
</div>
</div>
<div style="background: green; position: fixed; z-index: 2; top: 20px; left:10px;">
</div>
Live demo
Learn more about How to work z-index link here
Here's the HTML
<div class="panel" id="Panel1">
<fieldset style="position: absolute; top:8px; left: 136px; width: 136px; height: 48px;">
<legend> </legend>
<div class="label" id="Label1" style="position: absolute; top:8px; left: 16px; width: 81px; height: 14px;">panel one</div>
</fieldset>
</div>
<div class="panel" id="Panel2">
<fieldset style="position: absolute; top:8px; left: 272px; width: 185px; height: 64px;">
<legend> </legend>
<div class="Label" id="Label3" style="position: absolute; top:8px; left: 64px; width: 64px; height: 14px;">panel two</div>
</div>
and here's the CSS
body {
background-color: white;
width: 100%;
}
.panel, Label, .fieldset {
font: 8px Arial;
border: 0px;
margin: 0px;
padding: 0px;
}
Panel one has left=136px and width=136px while panel two has left=372px but when I look at them in MS IE 8 they overlap. What gives?
A few points of info
Obviously, I am a relative CSS newbie.
This is part of a project to design a form in a Windows program and then view it in the browser. It has to be WYSIWYG, which is why I am giving precise coordinates, rather than allowing the browser to lay out the page.
But might it be that I would be better off with style="position: fixed; ?
I am not sure if I need positioning on both the divs and their contents, but, if only one, then which?
I made the example as simple as possible, but it must scale up to multiply nested fieldsets
I have no choice but to use MS IE, although I can recommend a (minumum) version.
Thanks in advance for any help
Your HTML is incorrect. The style definitions that are on your fieldset element, should be on your div elements for panel 1 and 2. Also your fieldset tag in panel2 is unclosed.
Try this HTML:
<div class="panel" id="Panel1" style="position: absolute; top:8px; left: 136px; width: 136px; height: 48px;">
<fieldset >
<legend> </legend>
<div class="label" id="Label1" style="position: absolute; top:8px; left: 16px; width: 81px; height: 14px;">panel one</div>
</fieldset>
</div>
<div class="panel" id="Panel2" style="position: absolute; top:8px; left: 272px; width: 185px; height: 64px;">
<fieldset >
<legend> </legend>
<div class="Label" id="Label3" style="position: absolute; top:8px; left: 64px; width: 64px; height: 14px;">panel two</div>
</fieldset>
</div>
As Strelok pointed out, there are mistakes in your HTML. I also notice that your css refers to elements with a class of fieldset did you want that to be on the fieldset itself?
if so, in the css remove the . before .fieldset
try putting relative on the surrounding div.
.panel{posistion:relative}