I have single image and 5 buttons, I would like to position the at the top-right side of the image, the buttons should be one above the other. currently the buttons are at bottom right side of the image and placed in a row.
function pictureChange(imgId, path) {
document.getElementById(imgId).src = path;
}
p {
display: inline-block;
}
<img id="scene1" src="images/scene1/scene1-4dof.png">
<p>
<input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')">
</p>
<p>
<input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')">
</p>
<p>
<input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')">
</p>
<p>
<input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')">
</p>
<p>
<input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')">
</p>
function pictureChange(imgId,path) {
document.getElementById(imgId).src=path;
}
.sid {
display: inline-block;
vertical-align: top;
}
img {
width:200px;
height:200px;
}
.sid input {
display: block;
}
<img class="sid" id="scene1" src="http://via.placeholder.com/200x200">
<!---->
<div class="sid">
<input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')">
<input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')">
<input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')">
<input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')">
<input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')">
</div>
What I did is add display: inline-block; to the image and the div 'i added to contain the inputs'
This <!----> for inline behaviour in inline-block ' shows any spacing between elements '
also vertical-align: top; for the top part of top-right
This solution will scale according to the surrounding element. To show this I added an extra wrapper.
.wrapper {
position: relative;
/* width of the image here */
}
.wrapper .buttons {
position: absolute;
right: 3%;
top: 3%;
}
#scene1 {
width: 100%;
height: auto;
}
<div class="wrapper">
<img id="scene1" src="http://via.placeholder.com/350x150">
<div class="buttons">
<p><input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')"></p>
<p><input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')"></p>
<p><input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')"></p>
<p><input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')"></p>
<p><input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')"></p>
</div>
</div>
Pure Css :
1) Buttons on image:
div {
position: relative;
display: inline-block;
}
img {
width:300px;
border:1px solid #000;
}
.right {
position: absolute;
top: 0;
right: 0;
background-color: rgba(0,0,0,0.7);
text-align: center;
}
<div>
<img id="scene1" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
<div class="right">
<p><input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')"></p>
<p><input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')"></p>
<p><input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')"></p>
<p><input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')"></p>
<p><input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')"></p>
</div>
</div>
2) Buttons after image:
div {
position: relative;
display: inline-block;
}
img {
width:200px;
border:1px solid #000;
}
.right {
background-color: rgba(0,0,0,0.7);
text-align: center;
vertical-align: top;
}
<div>
<img id="scene1" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
<div class="right">
<p><input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')"></p>
<p><input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')"></p>
<p><input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')"></p>
<p><input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')"></p>
<p><input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')"></p>
</div>
</div>
function pictureChange(imgId,path) {
document.getElementById(imgId).src=path;
}
.img_con{
width:400px;
height:400px;
position: relative;
}
.sid {
position: absolute;
}
img {
width:400px;
height:400px;
}
.onTop{
position: absolute;
top:0;
right: 0;
}
.sid input {
display: block;
}
<div class="img_con">
<img class="sid" id="scene1" src="http://via.placeholder.com/400x400">
<div class="sid onTop">
<input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')">
<input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')">
<input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')">
<input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')">
<input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')">
</div>
</div>
Related
.form-control {
width: 30%;
float: left;
margin-left: 33%;
}
h1 {
margin-top: 2px;
}
.card-block {
padding-top: 3px;
border-left: 5px solid #CCC;
}
.card {
background: azure;
}
.container {
margin-top: 10px;
}
body {
background: lightgray;
}
#search {
padding-top: 13%;
}
<html>
<head>
<title>Wikipedia Viewer</title>
</head>
<body>
<div id="search">
<h1 class="text-center">Wikipedia Viewer</h1>
<input type="text" class="form-control" name="" placeholder="Search Wikipedia">
<button id="go" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
<button class="btn btn-primary">Random</button>
</div>
<script type="text/javascript" src="Wikipedia Viewer.js"></script>
</body>
</html>
How can I make that Random button to stay in the same line, even in small screens? It works fine with fontawesome icons but the text length makes it jump to the next line. Also, it would be nice if there is a way to add a fontawesome icon next to it and make it stay in the same line in smaller screens (not required).
Try this
Use btn-sm in button class
<button id="go" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-search"></span>
</button>
Wrap the controls in a container and use flexbox:
.container {
display: flex;
}
HTML
<div id="search">
<h1 class="text-center">Wikipedia Viewer</h1>
<div class="container">
<input type="text" class="form-control" name="" placeholder="Search Wikipedia">
<button id="go" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
<button class="btn btn-primary">Random</button>
</div>
</div>
JSFiddle demo: https://jsfiddle.net/9vev9esr/4/
make the position of button fixed:
button{
position:fixed;
}
This should solve your problem
If i edit the margin-left from 1 div, the form(div) moves also. How can i fix this? I want to have like 3 columns with some text.
#loginwrapper {
width: 240px;
height: 305px;
float: left;
margin-left: 25px;
background: #8FB0BF;
padding: 5px;
}
<div id="loginwrapper">
<div id="login" align="left">
<input name="naarlogin" type="button" id="loginn_btn" value="Klanten Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Registreren" />
<br></br>
<input name="naarlogin" type="button" id="loginn_btn" value="Instructeurs Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Instructeurs Registreren" />
<br></br>
</div>
</div>
If understand correctly, you want to edit each DIV individually?
in that case at the moment you can't as the div id="loginwrapper" is a div that controls all of your code. if you want to edit input manually give them a class and edit them in css
for example
#loginwrapper {
width: 240px;
height: 305px;
float: left;
margin-left: 25px;
background: #8FB0BF;
padding: 5px;
}
.input_one{ <----this is the class name of the input (this can be anything you like)
margin-right: 25px !important
}
<div id="loginwrapper">
<div id="login" align="left">
<input name="naarlogin" type="button" id="loginn_btn" value="Klanten Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Registreren" />
<br></br>
<input name="naarlogin" type="button" id="loginn_btn" value="Instructeurs Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Instructeurs Registreren" />
<br></br>
</div>
</div>
I am trying to create a simple page navigation consisting of three parts:
A few previous page numbers (if any)
The current page number (this must be centered)
A few upcoming page numbers (if any)
The important thing is that the current page number is always horizontally centered within the parent container. The other two parts should take up the remaining horizontal space evenly.
This JSFiddle illustrates my two attempts at solving this problem.
Solution 1: use text-align: center. This achieves the desired result but only if both sides are equal in width. If not the current page number will not be in the center.
HTML
<div class="container">
<input type="button" value="47">
<input type="button" value="48">
<input type="button" value="49">
<input type="text" size="5" maxlength="5" value="50">
<input type="button" value="51">
<input type="button" value="52">
<input type="button" value="53">
</div>
CSS
.container, input {
text-align: center;
}
Solution 2: use manually specified widths to distribute the horizontal space evenly. This effectively centers the current page number under all circumstances but it requires you to hardcode widths.
HTML
<div class="container">
<div class="left">
<input type="button" value="47">
<input type="button" value="48">
<input type="button" value="49">
</div>
<div class="right">
<input type="button" value="51">
<input type="button" value="52">
<input type="button" value="53">
</div>
<div class="center">
<input type="text" size="5" maxlength="5" value="50">
</div>
</div>
CSS
.left {
width: 40%;
float: left;
text-align: right;
}
.right {
width: 40%;
float: right;
text-align: left;
}
.center {
width: 20%;
margin-left: 40%;
}
Neither of these solutions really do what I want. Is there any way to have the current page number centered while allowing the other elements to align to its natural size, rather than to an arbitrary pixel or percentage width?
Try this CSS table layout follows.
.container {
width: 100%;
display: table;
border-collapse: collapse;
table-layout: fixed;
}
.left, .center, .right {
display: table-cell;
border: 1px solid red;
text-align: center;
}
.center {
width: 50px;
}
<div class="container">
<div class="left">
<input type="button" value="47">
<input type="button" value="48">
<input type="button" value="49">
</div>
<div class="center">
<input type="text" size="5" maxlength="5" value="50">
</div>
<div class="right">
<input type="button" value="51">
<input type="button" value="52">
<input type="button" value="53">
</div>
</div>
jsfiddle
You should use flex and float properties together, checkout my solution:
.container {
display: -webkit-flex; /* Safari */
display: flex;
}
.container, input {
text-align: center;
}
.container:after {
content:"";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 50%;
border-left: 2px dotted #ff0000;
}
.left {
display: inline-block;
flex: 1;
}
.left input {
float: right;
}
.right {
display: inline-block;
flex: 1;
}
.right input {
float: left;
}
.center {
display: inline-block;
}
<div class="container">
<div class="left">
<input type="button" value="48">
<input type="button" value="49">
</div>
<div class="center">
<input type="text" size="5" maxlength="5" value="50">
</div>
<div class="right">
<input type="button" value="51">
<input type="button" value="52">
<input type="button" value="53">
</div>
</div>
You can use the CSS property display with the value flex in the wrapper, and the property flex in the children.
To learn more about it, check the following resource: A Complete Guide to Flexbox
Here is an example:
.wrapper {
display: flex;
}
.wrapper > div {
text-align: center;
flex: 1;
border: 1px solid #000;
}
<div class="wrapper">
<div>
<button>1</button>
<button>2</button>
</div>
<div>
<button>3</button>
</div>
<div>
<button>4</button>
<button>5</button>
<button>6</button>
</div>
</div>
Here is a solution you might consider:
Use hidden buttons to always maintain the same number of tags on left and right side
<div class="container">
<input style="visibility: hidden" type="button" value="0">
<input style="visibility: hidden" type="button" value="0">
<input style="visibility: hidden" type="button" value="0">
<input type="text" size="5" maxlength="5" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
</div>
Instead of specifying the width in % you can use CSS calc to split the full width in 3 parts:
[50% - 25px][50 px][50% - 25px]
Then right-align the left part, left align the right part and you're done. When using SASS or LESS you only need to specify the width of the center part.
.container {
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.container > * {
display: inline-block;
}
.container .left {
width: calc(50% - 25px);
text-align: right;
}
.container > input {
width: 50px;
margin: 0px;
text-align: center;
}
.container .right {
width: calc(50% - 25px);
text-align: left;
}
<div class="container">
<div class="left">
<input type="button" value="48" />
<input type="button" value="49" />
</div>
<input type="text" maxlength="5" value="50" />
<div class="right">
<input type="button" value="51" />
<input type="button" value="52" />
<input type="button" value="53" />
</div>
</div>
I'm interested in having a textbox take up 100% width of the remaining space but without dropping the text "name" or the button to the next line:
<div style="width: 100%; padding: 20px; background-color: #c0c0c0">
<span>Name:</span>
<span><input type="textbox" style="width:100%" /></span>
<span><input type="button" value="Search" /></span>
</div>
http://jsfiddle.net/GP2nA/1/
How can I prevent the text and button from dropping to the next line?
Tested in IE7/8, Firefox, Chrome, Opera.
Live Demo
Live Demo (minus extra wrapper div)
CSS:
#search {
padding: 20px; background-color: #c0c0c0;
overflow: auto
}
#search div {
position: relative
}
.name {
float: left
}
.input {
position: absolute;
top: 0; right: 70px; left:55px;
}
.submit {
float: right
}
HTML:
<div id="search">
<div>
<span class="name">Name:</span>
<span class="input"><input type="input" style="width:100%" /></span>
<span class="submit"><input type="button" value="Search" /></span>
</div>
</div>
(You should have a form and a label tag in there)
UPDATED: http://jsfiddle.net/QaWMN/2/
Works in: ie7, ie8, ff, chrome
If you need ie6 read this: http://www.alistapart.com/articles/conflictingabsolutepositions/
html:
<div style="padding: 20px; background-color: #c0c0c0; position: relative;">
<span class="desc">Name:</span>
<div class="full">
<input type="textbox" class="tb" /></div>
<input type="button" value="Search" class="button" />
</div>
css:
span {position: absolute;}
.full {position: absolute; left: 60px; right: 100px; top: 8px;}
.desc {left: 10px; top: 8px; width: 100px;}
.tb {width: 100%; display: block;}
.button {right: 10px; width: 80px; top: 8px; position: absolute}
You could use something like the following:
<div style="padding: 20px; background-color: #c0c0c0">
<span style="width:10%;">Name:</span>
<span><input type="textbox" style="width:80%" /></span>
<span><input style="width:10%;" type="button" value="Search" /></span>
</div>
Where we simply give all elements (label, input and button) a percentage of the width to eat. Note that you will need to examine your form elements and adjust the 10% of labels to compensate for that of your widest label, and alter the 80% width of the input field accordingly too.
Also, as commented by another, extract your styles and place them in CSS classes as opposed to writing them inline.
It doesn't really quite work that way in css without fancy JavaScript. However, you CAN get the same look to happen with a slight reworking:
<div style="width: 100%; padding: 20px; background-color: #c0c0c0">
<div style="width: 10%; float:left;">
<span>Name:</span>
<span><input type="button" value="Search" /></span>
</div>
<div style="width: 90%; float:left;"</div>
<span><input type="textbox" style="width:100%" /></span>
</div>
<div style="clear:both;"></div>
</div>
Or easier:
<div style="width: 100%; padding: 20px; background-color: #c0c0c0">
<div style="width: 10%; float:left;">Name:</div>
<input type="textbox" style="width:80% float:left;" />
<input type="button" value="Search" style="width: 10%; float:left;" />
</div>
<div style="display: table; width: 100%">
<div style="display: table-row; padding: 20px; background-color: #c0c0c0">
<span style="display: table-cell;">Name:</span>
<input type="textbox" style="display: table-cell; width:100%" />
<span style="display: table-cell;">
<input type="button" value="Search" />
</span>
</div>
</div>
See updated fiddle.
Note: The advantage of using this method is that you won't have to set a width on the label or the button.
Here is my HTML:
<tr>
<td>
<div class="fileinputs">
<input type="submit" name="submit" class="submit" />
</div>
<div class="fileinputs">
<input type="file" class="file" name="uploadedfile" />
<div class="fakefile">
<img src="uf_btt.png" />
</div>
</div>
<div class="fileinputs">
<input type="reset" class="reset" />
</div>
<div class="fileinputs">
<input type="button" class="print" onclick="window.print()" />
</div>
</td>
</tr>
And here is my CSS:
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
As a result, the buttons are positioned vertically, one below the other. In IE only "Upload File" button is seen.
I need all the buttons to be positioned horizontally, one next to the other, and look consistent in all browsers.
How do I obtain that?
Thank you!
you might want to learn about CSS float. alternatively use SPAN instead of DIVS, or DIVs with 'display:inline' style