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
Related
I want to place a form field(div.invoer) in the left bottom of a div(div.content)
<body>
<div id="container" style="width:1280px";"height:800px">
<div id="header" style=;"background-color:#FFA500;""width:1280px";"height:200px">
<h1>EXPORT ZENDINGEN</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:600px;width:700px;float:left;">
</div>
<div id="content" style="background-color:#EEEEEE;height:600px;width:580px;float:right;">
<div id="invoer">
<form method="post" action="">
<label>Debiteur</label>
<input type="text" name="deb_nmr" />
<br />
<label>Klantnaam</label>
<input type="text" name="cost_name" />
<br />
<label>Aantal Pallets</label>
<input type="text" name="numb_pallets" />
<br />
<label>Totaal Gewicht</label>
<input type="text" name="tot_weight" />
<br />
<label>PB Nummers</label>
<input type="text" name="PB's" />
</form>
</div>
</div>
</div>
</body>
Used the following Css:
label{
display:inline-block;width:100px;margin-bottom:10px;
}
.content{
position: relative;
}
.invoer{
position: absolute;
bottom: 0px;
}
Used info from W3school but can't get in to work. Found some more information on stack overflow, like using position relative and absolute. But the form stays in the upper left of the content div.
content and invoer are ids not classes so the correct way to use them is #content ,#invoer not .Content , .content.
Everything is correct just replace the following css from this:
label{
display:inline-block;width:100px;margin-bottom:10px;
}
#content{
position: relative;
}
#invoer{
position: absolute;
bottom: 0px;
}
to this:
label{
display:inline-block;width:100px;margin-bottom:10px;
}
#content{
position: relative;
}
#invoer{
position: absolute;
bottom: 0px;
}
Here is the updated code.
label{
display:inline-block;width:100px;margin-bottom:10px;
}
#content{
position: relative;
}
#invoer{
position: absolute;
bottom: 0px;
}
<div id="container" style="width:1280px ; height:800px">
<div id="header" style=" background-color:#FFA500; width:1280px;height:200px">
<h1>EXPORT ZENDINGEN</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:600px;width:700px;float:left;">
</div>
<div id="content" style="background-color:#EEEEEE;height:600px;width:580px;float:right;">
<div id="invoer">
<form method="post" action="">
<label>Debiteur</label>
<input type="text" name="deb_nmr" />
<br />
<label>Klantnaam</label>
<input type="text" name="cost_name" />
<br />
<label>Aantal Pallets</label>
<input type="text" name="numb_pallets" />
<br />
<label>Totaal Gewicht</label>
<input type="text" name="tot_weight" />
<br />
<label>PB Nummers</label>
<input type="text" name="PB's" />
</form>
</div>
</div>
<div id="invoer">
But in css you tagged it as a class
.invoer{
position: absolute;
bottom: 0px;
}
However - change it to # and you should be able to style it.
#invoer{
//some css
}
This image probably explains best.
I have this chat functionality, very basic at the moment. When there's is enough text to overflow the page, it gives the behavior I want. The most recent message is just above the message input at the bottom. However, when there is only a few messages, the messages that exist are at the top and it leaves a big empty space between it and the message input.
Here is the relevant HTML. The text input is just position: fixed at the bottom of the screen and there's a bottom-margin on #message_outer_parent to keep it above it.
<div id="message_outer_parent">
<div id="message_content_parent"><div class="message_parent">
<span class="message_icon glyphicon glyphicon-user" style="color: #e21bcb" "=""></span>
<span class="message_username">whatever</span>
<span class="message_message">test text</span>
</div>
<div id="message_input_parent">
<form id="new_message" onsubmit="return submit_new_message()">
<input type="text" name="message_input" class="form-control" id="message_input" autocomplete="off" value="" placeholder="">
<!-- submit button positioned off screen -->
<input name="submit_message" type="submit" id="submit_message" value="true" style="position: absolute; left: -9999px">
</form>
</div>
</div>
I would like to have the messages just above the message input, even when there's only a few messages. How can I accomplish this?
Fixed position on the other div.
#message_input_parent {
position: fixed;
bottom: 5px;
}
#message_outer_parent {
position: fixed;
left: 0;
bottom: 30px;
max-height: calc(100vh - 30px);
overflow: auto;
width: 100vw;
padding: 5px;
box-sizing: border-box; /*padding and border won't increase height and width*/
}
<div id="message_outer_parent">
<div id="message_content_parent"><div class="message_parent">
<span class="message_icon glyphicon glyphicon-user" style="color: #e21bcb"></span>
<span class="message_username">whatever</span>
<span class="message_message">test text</span>
</div>
<div id="message_input_parent">
<form id="new_message" onsubmit="return submit_new_message()">
<input type="text" name="message_input" class="form-control" id="message_input" autocomplete="off" value="" placeholder="">
<!-- submit button positioned off screen -->
<input name="submit_message" type="submit" id="submit_message" value="true" style="position: absolute; left: -9999px">
</form>
</div>
</div>
Using flexbox
#message_input_parent {
position: fixed;
bottom: 5px;
}
#message_outer_parent {
height: 100vh;
width: 100vw;
padding: 5px 5px 30px 5px;
box-sizing: border-box;
display: flex;
align-items: flex-end;
}
*{margin: 0;}
<div id="message_outer_parent">
<div id="message_content_parent"><div class="message_parent">
<span class="message_icon glyphicon glyphicon-user" style="color: #e21bcb"></span>
<span class="message_username">whatever</span>
<span class="message_message">test text</span>
</div>
<div id="message_input_parent">
<form id="new_message" onsubmit="return submit_new_message()">
<input type="text" name="message_input" class="form-control" id="message_input" autocomplete="off" value="" placeholder="">
<!-- submit button positioned off screen -->
<input name="submit_message" type="submit" id="submit_message" value="true" style="position: absolute; left: -9999px">
</form>
</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>
Please don't judge me i just stared developing websites and this is my first one.
here is my website and no matter what i set position to i cant make form or images stay on there place. when using static position i cant place one image on another. so what can i do ?
<style type="text/css">
.position
{
position:Relative;
top:-40px;
left: 5px;
width:13%;
height:13%;
}
.WidthFull
{
position: static;
z-index: 0;
width: 99.4%;
}
.FormPosition
{
position: Relative;
top:-80px;
right:-1070px;
}
</style>
</head>
<body>
<img alt="" class="WidthFull" src="img/main%20Head.png" />
<img alt="" class="position" src="img/Letters%20connic.png" />
<div class=FormPosition>
<form id="login" method="post" action="index.php">
<input type="text" placeholder="Your Email" name="email" autofocus/>
<input type="text" placeholder="Password" name="email" autofocus />
<button type="submit" style="width: 5%; height: 25px; border: 0;background: #209cf8; border-radius:5px"><font size="3.0";><b>Login</b></font>
</button>
<span></span>
</form>
</div>
</body>
</html>
Use like this
outer side div property will be relative and inner image/div property will be absolute
which one you want to show up side
<style type="text/css">
.position-relative{
position:relative;
}
.position-absolute{
position:absolute;
top:10px;
left:10px;
z-index:10;
}
</style>
</head>
<body>
<div class="position-relative">
<img alt="" class="WidthFull" src="img/main%20Head.png" />
<img alt="" class="position-absolute" src="img/Letters%20connic.png" />
</div>
</body>
</html>
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.