This is my html code :
<div id="d1" class="division">
<input type="button" value="one" class="division">
</div>
<div id="d2" class="division">
<input type="button" value="two" class="division">
</div>
This is my css code
.division
{
top:50px;
left:100px;
display: none;
}
But my div element part is not at all changing its top and left position.If its not the right method then How to change the location of a element using its class?
display: none will make the element invisible.
Try this instead:
.division
{
top:50px;
left:100px;
position: relative;
}
You would need to define is position like so:
position: relative;
or
position: absolute;
Depending on how exactly you want to position the elements. Also using .division will position both elements.
Use the following if you want to just position one:
#d1 { ... }
(Assuming display:none is an initial setting modified by jQuery, for example. Otherwise, you won't see the element at all.)
You need to explicitly use position:relative (or similar, depending on the rest of your CSS) for the browser to render the position offsets.
Related
I have a little problem with set the positin of my input element. I have some code and I cant understand why my element is outside my div in my view. Please look at this:
https://jsfiddle.net/yzhL69fa/3/
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" id="panel-title"> Is Super </h3>
</div>
<div class="panel-body">
<input class="star-checkbox" type="checkbox" id="isSuper" name="isSuperCheckbox">
</div>
</div>
When I remove class="star-checkbox" from my input elements I can see checkbox input in correct place(custom checkbox, but I need this as a star). But when I add this class, my element go outside my div "panel-body".
Also when I add to my class: "star-checkobox" one think: display: inline-grid; then my checkobx go inside my "panel-body" but this is still out of position.
My goal is to have this checkbox which look like star but in center of my "panel-body". I dont want to padding and margins there. The best would be if my checkbox just look like star and appear in the center of my div with auto margin and auto padding. Can anyone help me with this?
You can add position : relative to the before class, to position the star element. JSFiddle.
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.star-checkbox {
visibility:hidden;
font-size:60px;
cursor:pointer;
}
.star-checkbox:before {
color:#FF912C;
content: "\2605";
visibility:visible;
position:relative;
font-size:30px;
top:-40px;
}
.star-checkbox:checked:before {
color:black;
content: "\2606";
}
I am trying to move my radio buttons by using positioning but it doesn't seem to work. I have added an id for each radio option and trying to style it that way. The whole thing is in a class called ticket…
I have added an id to the input but it doesn't work:
echo '<tr><th>Has this been Resolved?</th><td><input type="radio" name="resolve" value="Yes" id="yes">Yes<input type="radio" name="resolve" value="No" id="no">No</td></tr>
<tr><th></th><td><textarea name="reply"></textarea></tr></td>
<tr><th>Add Reply/Message</th><td><input type="submit" name="submit" value="Reply"></tr></td>
This is my CSS:
.ticket input[type="radio"] {
position: relative;
right: 55em;
}
First, your HTML is a bit messed up. Second, don't use tables to position elements. Tables are for tables full of data -- at least, since about 1998 or so. Use div and span elements.
The way to easily position elements specifically requires three steps:
Put the elements inside a div.
Set the div's position to relative.
Set all of the elements' position to absolute.
I've put an example together here.
You'll notice that I put your radio buttons inside a span element, and targeted those with the CSS. This allows the captions to be positioned along with the radio buttons; you position the span instead of the input element. If you target the input element, the captions won't be affected and will stay in their default positions.
Also, I just used first-child and last-child as selectors. You could assign each one an id if you want to, but I thought I would show you this as well.
Now, you position the buttons by changing the left and top values of the span elements that contain them.
#theRadios {
height: 100px;
position: relative;
}
#theRadios span {
position: absolute;
}
#theRadios span:first-child {
top: 10px;
left: 0;
}
#theRadios span:last-child {
top: 40px;
left: 0:
}
<div id="theHeader">Has this been Resolved?</div>
<div id="theRadios">
<span><input type="radio" name="resolve" value="Yes" id="yes">Yes</span>
<span><input type="radio" name="resolve" value="No" id="no">No</span>
</div>
<div>
<textarea rows=4 cols=50 placeholder="Add Reply/Message"></textarea>
</div>
<div>
<input type="submit" name="submit" value="Reply">
</div>
Hiding elements by offsetting the element beyond visible space is prone to errors and haphazard for someone else who looks at the code.
Nevertheless, you can fix it with other ways such as
Use display: none.
Use visibility: hidden.
Use opacity: 0.
Position it off the screen using position: absolute and an insanely big value
like left: -9999px.
I create the image button. The button should change on hover. I set the image with CSS, so there is no need to use src attribute in my code. Chrome, Safari works well, but Firefox 48 completely ignores sizes of the input. I tried both CSS and HTML way. Is it a bug? What is the correct way?
Fiddle:
https://jsfiddle.net/nyppzpqx/5/
Here is the view in firefox 48:
If you add display: block to the .btn-pay element, it works just fine. It may be something with custom browser styles.
Altough as Turnip said, it is better to avoid using img element without src attribute.
You can always restructure the way the html is written. This way you do not need the src attribute. The size is given to the outer div, and then the button is positioned on top of it with an image that spans the entire div:
<div class="btn-pay">
<input type="button" name="kind" value="test" class="btn-pay-input" >
</div>
and then update the styling:
.btn-pay {
width:135px;
height: 60px;
}
.btn-pay-input {
background: url(http://placehold.it/135x60);
color: transparent;
transition: all 0.3s;
width:100%;
height:100%;
text-align:center;
}
.btn-pay-input:hover {
background: url(http://placehold.it/135x60/fff000);
}
Here is the fiddle
Into a page I have the following
<div id="submitEventButtonDiv">
<div id="wwctrl_backButton" align="right">
<input id="backButton" type="submit" onclick="return clickSubmitButton();" value="Back">
</div>
<div id="wwctrl_submitEventButton" align="right">
<input id="submitEventButton" type="submit" onclick="return clickSubmitButton();" value="Submit">
</div>
</div>
As you can see there is an external div having id="submitEventButtonDiv" that contains 2 divs containing in turn 2 input fields.
Obviously when the 2 input field are displayed appear one below the other (because they are contained into a div that is block element).
How can I display one beside the other? (I can't delete the div that contains each input field because it is automatically rendered by a tag library that I am using, this that I have post is the rendered HTML obtained from a page that us Struts 2 tag library that wrap HTML following its logic, so in this case I can only work on CSS to do it)
Tnx
Just display the child elements inline.
#submitEventButtonDiv > div {
display:inline;
}
codepen here http://codepen.io/anon/pen/jEmaed
Depending on your cross browser needs, use flexbox:
#submitEventButtonDiv {
display: flex;
}
Will make all of the children flex items, which by default, stack horizontally, like you want.
If you float them both they'll be positioned next to each other. Adding
#submitEventButtonDiv > div {
float:left;
display:inline;
}
To your css should position them both to the left of the page next to eachother.
If the inner div IDs are always same, then you can add the following styles in your css:
div#wwctrl_backButton {
display: inline-block;
width: 50%;
}
div#wwctrl_submitEventButton{
display: inline-block;
width: 50%;
}
This generates the desired effect.
#submitEventButtonDiv > div {
display:inline;
float:right;
}
Somewhere in a page, how to make div-a2 position above div-a1? Of course, I cannot make div-a2 above div-a1 in the layout below.
<div id=a>
<div id=a1> something here
</div>
<div id=a2> show this part first
</div>
</div>
still looking for better solution. thanks
You can achieve this with pure css. Write like this:
#a{
display:-moz-box;
display:box;
display:-webkit-box;
-moz-box-direction:reverse;
box-direction: reverse;
-moz-box-direction:reverse;
-webkit-box-direction:reverse;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
box-orient:vertical;
}
'
Check this http://jsfiddle.net/ASVtx/1/
You will need to give the elements absolute position css, and then position them appropriately depending on the content size of each like:
#a1,#a2{position:absolute;}
#a2{ top: 0; }
#a1{ top: 200px;}
OR, within the parent:
#a1,#a2{position:relative;}
#a2{ top: 0; }
#a1{ top: 200px;}
Or, a perhaps better alternate is to change the layout order (but I assume that is not possible for some reason not stated).
Here is an example: http://jsfiddle.net/MarkSchultheiss/CRCvU/
See this updated example where I used em instead of px for the position, gave the parent a border so you see its scope, and added stuff around the parent. http://jsfiddle.net/MarkSchultheiss/CRCvU/1/
Just in case you want to go that way, here is the jQuery code to do this:
var ah1 = $('#a1').height();
var ah2 = $('#a2').height();
var ah = $('#a').height();
var relpos = {float:"left",
display: "inline-block",
position: "relative",
clear: "both"
};
$('#a').css({
height: ah
});
$('#a1, #a2').css(relpos);
$('#a2').css('top', -ah1);
$('#a1').css('top', ah2);
Working scripted example here: http://jsfiddle.net/MarkSchultheiss/CRCvU/3/