I am trying to add floating div tag which contains delete buttion. Its not working.
I am using struts1.X and tiles.
My web page build with 3 jsps: Menu.jsp, Body.jsp, Fotter.jsp. I am tring to add new floating delete buttion.
My CSS file, In my CSS I have added 2 floating styles.
div.floatingBtn {
width: 350px
position: fixed;
top: 90%;
left: 34%;
padding: 10px;
z-index: 100;
}
div.flating {
position: fixed;
border: 1px solid black;
paddding: 2px;
width: 400px;
height: 400px
z-index:100;
}
My body.jsp:
<div class="flating"><table align="center"><tr><td>
<button id="DELETE" class="btn" onclick="deleteDocs();" >Delete</button></td></tr></table>
</div>
I tried with both styles, but they don't work. Why?
The first CSS doesn't have any effect in your html, because your HTML doesn't contain anything in CSS-Class "floatingBtn".
Second, your CSS hasn't any float: rules. This is because you don't get any floating elements.
If you want fixed positioning - which is a very different thing as float! -, you had to set also its position (add a left: and top: to the div.flating rule as well).
Related
I am trying to implement a arrow-headed div. Below is the part of the code that is relevant to the post/question. I have been trying to figure out how to get this done for a while now but no success.
I have a grandparent div, a parent div with a child as follows
<div className="main-segment-container">
<div className="panel panel-default segment-select-box">
<div className="panel-header segment-select-box-header">MAIN SEGMENT</div>
<div className="panel-body segment-select-box-body">
<div className=has-subsegments'>
<input type="checkbox" className="form-check-input" value={checkedSegment.category_id} onChange={this.segmentChecked} />{' '}
<label className="form-check-label">{checkedSegment.name}</label>
</div>
</div>
</div>
</div>
Here is what I am trying to achieve (notice the arrowhead):
I am able to achieve this with this css:
.main-segment-container{
width: 100%
}
.has-subsegments{
background-color: #215C64;
width: 100%;
color: #fff;
position: absolute;
height: 30px;
}
.segment-select-box {
border-radius: 3px;
width: 100%;
/* max-height: 400px; */
/* overflow: scroll; */
position: relative;
}
.segment-select-box-body{
width: 100%;
max-height: 400px;
overflow: scroll;
padding: 0px;
display: inline-block;
}
.has-subsegments::after{
content: "";
margin-top: -15px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
position: absolute;
border-left: 21px solid #215C64;
width: 0;
height: 0px;
right: -20px;
top: 50%;
}
Problem:
When I use the css above, the .has-subsegments element seems to be at a fixed position when I scroll. Like this:
Question
How do I implement scroll without removing the element from the normal position?
Note:
When i remove scroll from .segment-select-box-body class, everything works perfect but the children list becomes very long, therefore a scroll is needed.
adding position: relative; to .segment-select-box-body class makes the :after pseudo-element invisible.
EDIT
See JSFIDDLE here : https://jsfiddle.net/uuwhndgu/16/
EDIT
Thanks for posting the jsfiddle. I don't think, what you're trying to achieve is possible the way you are trying to do it.
I updated the fiddle with a suggested workaround/fix: https://jsfiddle.net/uuwhndgu/34/
what I did, is giving the wrapping col a little more width (you probably would have to either increase the col to .col-md-3 or decrease the width of .segment-select-box a little. You probably need to do the latter anyway), a max-heightof 200px and a overflow-y: scroll;. I set the width of .segment-select-box to 90% and changed position: absolute;of .has-subsegments to position: relative;. I don't know if this helps you but I BELIEVE, that there aren't many ways to achieve what you are trying to achieve.
Original answer
I am not quite sure how you intend this thing to behave. But if the highlighted entry (the one with the arrow) just ought to stay where it was, I think you can simply replace position: absolute; with position: relative; in your .has-subsegments class. Now, I wasn't able to recreate this anything close to perfectly, because it's a react app, but still, you should get the idea:
with position: absolute; on .has-subsegments
with position: relative; on .has-subsegments
After my website was completed, everyday I am trying to modify things that would make it more responsive. It's made in Muse so don't expect much of "responsiveness".
I have an element with this class:
#labelstrong
{
z-index: 17;
width: 633px;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: fixed;
top: 1542px;
left: 164px;
}
Normally, the element is in the middle of the screen. But when I zoom out, the element maintains the same distance to the top of the screen (because of the top attribute of course). How can I define its position in a way that even if I zoom in or out it will still be in the middle of the screen.
UPDATE:
The problem is (and I forgot to mention it) that the position must be fixed as there is an horizontal scrolling feature for all elements ( they come from the right of the screen) and so they have to be on a fixed position.
UPDATE 2: Here is a live example. Imagine that the class is applied on each TAG (not the menu of course).
http://2323029s8s8s8.businesscatalyst.com/index.html
You can add for those big tags the following css:
.fixed-big-tag{
top: 50%;
transform: translateY(-50%);
}
Also as a counter measure, make sure the <body> and the <html> have 100% heights
Another idea would be to use the !important rule for the top property to overwrite what Muse outputs.(or any rule that needs to be overwritten)
If it works, you could probably add a new class on all these tags that need to be centered and overwrite it via css
Check it out, and let me know how it goes.
See this resource for techniques to centering elements using CSS: Centering in CSS: A Complete Guide
If you create a relatively-positioned parent container element, you can center your child element easily:
.parent {
position: relative;
}
#labelstrong {
z-index: 17;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: absolute;
width: 634px;
height: 40px;
top: 50%;
left: 50%;
margin: -20px 0 0 -317px;
}
Note that the margin offsets are half of the width and height.
Try using percentages instead of pixels, like:
top: 10%;
If you want to horizontally center, try setting the margin to auto:
margin: 0 auto;
Your code would look like this:
#labelstrong {
z-index: 17;
width: 633px;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: relative;
top: 10%;
margin: 0 auto;
}
Take a look at this example: http://jsfiddle.net/5a6fyb21/
jQuery would be your best bet.
I would just set your class to a fixed position then try using the following.
$(window).resize(function() {
var middle = $(window).height();
$('.middle').css('top', hello / 2);
});
The resize function is used so that it will remain in position if the window is resized.
Centered label over horisontally scrollable content:
http://jsfiddle.net/cqztf9kc/
.fixed {
margin: 50%;
position: fixed;
z-index: 1;
}
.content {
x-overflow: scroll;
height: 100%;
}
Most of my code in a jsFiddle:
http://jsfiddle.net/MilkyTech/suxWt/
The content should load on the first page in a white box, with overflowing content pushing the following sections of the page down. However, as can be seen the lower sections load over the top of the first page white box. I have tried changing the positioning/clears of the various sections but cannot seem to create the necessary movement.
<section class="page1">
<div class="huge-title centered">
<div id='detailsbox'>
<h1 id='eorvtitle'></h1>
<img id='eorvimage' src=''>
<div><p>lots of text lots of text
</div>
</div>
</section>
<section class="page2" id='page2'>
</section>
.page1 {
background: url('../img/bg.jpg')#131313;
background-size: cover;
height: 100%;
position: relative;
}
.huge-title {
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: 180px;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align:center;
position: absolute;
float: left;
clear: both;
}
Absolute Positioning does not push containers down. It places itself above or below them based on the z-indexing. You need to enclose your absolute contents inside a relative container to push other containers downwards similar to those in jquery sliders.
you need to change .huge-title and #detailsbox to position:relative;
you can probably get rid of background-size: cover;
also change .huge-title and #detailsbox to the following:
.page1 {
background: url('../img/bg.jpg')#131313;
height: 100%;
position: relative;
}
.huge-title {
position: relative;
top: 20%;
right: 0;
left: 0;
margin: auto;
height: 100%;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align: center;
position: relative;
float: left;
clear: both;
}
The proper function of an absolute position is to overlap content. If you want other content to automatically push down then use relative position.
The solution is to create an empty spacer div with float right or left. This would ensure there is space between the two.
Refer this answer
Absolute positioned elements are removed from the main flow of the HTML. That's why it's not pushing the elements below it down. It's now sitting on top of the elements before and after it rather than in between them.
You may want to check this out.
Whether or not absolute positioning makes sense in your case is hard to say without seeing the design you are trying to implement. Using default (aka "static") or perhaps relative positioning will push the other content down below the white box, but without a deign to look at it's hard to tell if that's the real solution.
You can add another empty section between page1 and page2 and give the css below
height: 100%;
Adding an empty div the size of the absolute entity between the absolute entity and other components may help.
let's say I have to place an image RIGHT in a proper spot, but I need its CENTER to be in that spot. I wanted to place an image in the top-left corner of a div, so I placed the image in the div, gave position: relative to the div and position: absolute to the image then set its top and left values to 0. It quite worked but I'd need the CENTER of that image to be right over the top left corner. I'd do it manually setting top: -xpx, left: -ypx BUT I don't have any specific value for the image size (which could vary a lot).
So is there any way to say something like: position: absolute-but-i'm-talking-about-the-center; top: 0px; left: 0px;?
Thank you very much indeed!
Matteo
You could use javascript yo get the size of the image and then set the css left value needed.
Be mindful of the way images are loaded though as they are asynchronous so will not necesserily be available when the document is ready. This means that unless you handle the images correctly you will end up with width and height dimensions of 0.
You should wrap the image in another block element and put a negative left position to the image.
Something like this:
<div id="something">
<div class="imagewrap">
<img>
</div>
</div>
Then give #something a relative position, .imagewrap an absolute, etc... And img should have a relative position with left:-50%. Same for the top.
have you tried;
name_of_div_with_image {
display: block;
margin-left: auto;
margin-right: auto }
give that a go.
No need to use Javascript, this can be done in CSS.
The required HTML: (you must change the div to an img obviously)
<div id="container">
<div id="imgwrapper">
<div id="img">Change this div-tag to an img-tag</div>
</div>
</div>
The required CSS:
#container
{
position: absolute;
left: 200px;
top: 100px;
height: auto;
overflow: visible;
border: 2px dashed green;
}
#imgwrapper
{
position: relative;
margin-left: -50%;
margin-top: -50%;
padding-top: 25%;
border: 2px dashed blue;
}
#img
{
display: block;
width: 200px;
height: 100px;
border: 2px solid red;
}
Click here for a jsFiddle link
The margin-left: 50%; obviously works when using the container div, because the width of the container will be exactly that of the content. (You might need to add width: auto;)
But margin-top: -50%; will not work because the height of the container div will change with it, thus you need yet another wrapper div in which you use this margin-top: -50%; and then you need to fix this error it makes by using a positive percentage based padding. Obviously there may be other solutions to fix this, but the solution should be something like this.
Probably one of the simplest solutions is to place the image in the upper left corner at position
left: 0px; top: 0px; and then use translate to move its center to this position. Here's a working snippet for that:
#theDiv {
position: absolute;
left: 100px;
top: 100px;
background: yellow;
width: 200px;
height: 200px;
}
#theImage {
background: green;
position: absolute;
left: 0px;
top: 0px;
transform: translate(-50%, -50%);
}
<div id="theDiv">
<image width=31.41 height=41.31 id="theImage"></image>
</div>
I'm working on a simple CSS and HTML website, trying stuff out.
I wanted to make an image float over a div. Something like so:
<div id="big_container">
<img id="img1" src="images/fun.png"/>
<div id="some_container"></div>
</div>
Here is the CSS for it:
#big_container{ width: 960px; height: 270px; margin-left: auto; margin-right: auto; margin-top: 42px;}
#some_container{ width: 100%; height: 198px; border: 1px solid #cccccc;}
#img1{ width: 69px; height: 200px; float: left; position: relative; left: 200px;}
What this does, is instead of placing the img over the some_container div, it places it FIRST and after the image, underneath it, it places the some_container div.
How can i get the image to float over the div? Firefox and Chrome display it correctly. IE8 does not.
EDIT
I tried removing relative and left, according to Kyle Sevenoaks. But it still displays it above the div, and does not overlap.
You can use position: absolute; to make it display over the div you require:
#img1{ width: 69px; height: 200px; position: absolute; left: 200px;}
http://jsfiddle.net/Kyle_Sevenoaks/dLnm7/
EDIT
I forgot to mention that with this you should add position: relative; to the parent div.
http://jsfiddle.net/Kyle_Sevenoaks/dLnm7/1/
Floating an element will not place it over the top of other elements within the same parent. You've also tried to use a "left" CSS value on a relatively positioned element. "float" works on relatively positioned elements, "left" works on absolute and fixed positioned elements.
Here is your CSS to position "img1" over the top of "some_container" (includes short hand for margin declarations). Note "position:relative;" applied to the parent "big_container".
#big_container{ width: 960px; height: 270px; margin: 42px auto 0; position:relative;}
#some_container{ width: 100%; height: 198px; border: 1px solid #CCC;}
#img1{ width: 69px; height: 200px; position: absolute; left: 200px; top:0px; }
You will now see that IE8 wasn't at fault here. Other browsers may have been kind to you and ignored any conflicting CSS declarations to give you the desired result. IE8, being less sophisticated, probably wasn't compensating and taking your CSS literally.