I'm trying to align a text area and a button on the same line. I've successfully managed to do so, the code is in the fiddle below (though for some reason the fiddle won't align them).
Problem: Whenever I insert a value in the button, the button will go something like 30px downwards, still on the same line but just lower than the text area. This will only happen when a value is inserted within the button.
All the code is in the fiddle: https://jsfiddle.net/13qy0acp
Code:
HTML
<div id="messagebox">
<p id="headings"><textarea name="msg" style="height:40px;text-align:center" id="message" placeholder="Insert message"></textarea></p>
<p id="button"><input type="button" value="Send" onclick="submitChat()" id="innerbutton"></p>
</div>
CSS
#headings {
text-align:center;
display:inline-block;
width:70% !important;
margin-top:20px;
}
#message {
width:100%;
}
#button {
text-align:center;
display:inline-block;
width:8%;
margin-top:-30px !important;
border:solid black;
height:50px;
}
#innerbutton {
width:100%;
height:20px;
text-decoration:none;
}
If you want to horizontally align two elements, use the float property and set a width that adds to no more than 100% of the width of the parent element.
example:
textarea {
width:90%;
float: left;
}
button {
width:10%;
float: left;
}
Related
I want my firstLabel to be just right side of the textfield on the same line.
//css
input[type="text"]{
display:block;
margin-bottom:10px;
width: 50px;
text-align:center;
float:center;
}
label {
float: right;
text-align:right;
color: white;
font:12;
}
//html
<label for="first">First Value</label>
<input type="text" value="93" id="firstTF"/><br/>
http://jsfiddle.net/x3gb6gcw/2/
html
<input type="text" value="93" id="firstTF"/>
<label for="first">First Value</label>
css
input[type="text"]{
display:block;
margin-bottom:10px;
width: 50px;
text-align:center;
display:inline-block;
}
label {
text-align:left;
color: #000;
font:12;
display:inline-block;
}
Try this-
CSS Code-
input[type="text"]{
display:inline;
margin-bottom:10px;
width: 50px;
text-align:center;
float:left;
}
label {
display: inline;
text-align:right;
color: white;
font:12;
}
Fiddle - http://jsfiddle.net/Ashish_developer/gjamenoy/
In fiddle, I have changed the color of label since fiddle's background is white, so giving white color to label will not show it. Just to show it in fiddle I have given color black to it.
Form controls are inline elements so if you just put your label tag after the textbox input control then they'll line up on their own(unless you set the width of the parent element too narrow for them both to fit naturally.
<input type="text" id="myText"/><label for="myText">My Label</label>
No need for CSS to position them this way, they float left by default.
I have a submit button inside a form-tag. This form tag has some css-propertys:
On Desktop it has a fixed with
On mobile devices it has a percentage-width
The problem is, that the submit button inside the form has width:auto; and margin:0 auto; so that it´s centered inside the form-tag. But webkit (mobile safari and safari) doesn´t understand that. In those browser the submit button is not centered but on the left side. So I wrote a jquery script which calculates the width and sets it to the submit button (instead of width:auto). That was the fix.
I made a research and now I know, that I could use display:table-cell; in the form tag, which will center the content (the submit button) BUT: that means that I can not center the form itself.
So my question is, how to modify the code below so that the form is centered inside the wrapper and the submit button inside the form?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrap{
width:1000px;
background:red;
}
form {
height:100px;
width:500px;
margin:0 auto;
display:table-cell;
border:1px solid black;
text-align:center;
vertical-align:middle;
-webkit-box-align: center;
}
form input[type=submit], form input[type="button"], form input[type="reset"], form button {
width:auto;
min-width:40%;
height:32px;
margin:20px auto;
line-height:14px;
padding:9px 15px;
background-color:#617798;
border:0;
font-size:14px;
color:#FFFFFF;
text-align:center;
vertical-align:middle;
-webkit-box-align: center;
/* Border-Radius */
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-khtml-border-radius:5px;
-o-border-radius:5px;
cursor:pointer;
display:inline;
/* iPad-Button-Reset:*/
-webkit-appearance:none;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Titel Blafasel</h1>
<form>
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
Just remove display:table-cell; inside form {} it should work.
I'm writing a CSS for a store. I need a div that sets the buy button to the left, and a Prev and View Next images to the right, which is working.
My real problem is that sometimes the "buy" button will be not present, because of the PHP.
When the buy button is not present images must be centered, because if they are not, it will be empty space to the left side (where the buy button was)
At first i think on margin:0px auto, but this will need a constant width set, right?
I really thought at the beginning this will be very simple. But i got stuck/
fiddle
Simplified to get the idea
I think im just missing something basic that i cant see know.
HTML:
<div id="comprarbtn">
<div id="wrappcomprarbtn">
<input class="comprarbtn commonButton" type="button" value="Buy Now" id="buynowlogin">
<div id="naviminicc"> <img src="images/navmini_01.png" class="navmini1">
<img src="images/navmini_02.png" class="navmini2" rel="#mies1"> <img src="images/navmini_03.png" class="navmini3">
</div>
</div>
</div>
CSS:
.comprarbtn { width:175px;
line-height:51px;
background-image:url(image.jpg);
border:0px;
font-size:12px;
padding-left:10px;
cursor:pointer;
overflow:hidden;
text-indent:0px;
z-index:10;
}
#comprarbtn {
float:left;
position:absolute;
width:321px;
text-align:center;
height:51px;
z-index:1000;
display:table-cell;
background-color:#f4f4f4;
}
#wrappcomprarbtn { margin:0px auto;}
#naviminicc { width:145px; float:right;}
#naviminicc a { margin:0px; padding:0px; }
.navmini1 { cursor:pointer; margin:0px; }
.navmini2 {cursor:pointer; margin:0px; }
.navmini3 {cursor:pointer; margin:0px; }
#navmini { width:135px; max-width:135px;}
I'm not sure what's going on with the CSS and HTML you posted, but to achieve what you want to do in theory:
Give the wrapping div a fixed width large enough to contain both the button and the images
Give it margin: 0 auto to center it and text-align: center.
Make the inner contents display: inline
css:
.wrapper {
width: 200px; /* Large enough to contain everything */
text-align: center;
margin: 0 auto;
}
.wrapper .buttons {
display: inline;
}
I have created a image with some text as shown in figure.
<span class="productname ">Excusite Beauty</span>
<img src="xy.jpg" data-attr="productimg" class="productimg " />
My css is
.productimg
{
float:right;
margin-top:15px;
height:120px;
margin-right:2%;
border:2px double #0ff;
width:150px;
right:0px;
position:absolute;
}
.productname
{
font-size:1.2em;
display:block;
float:left;
}
How can i protect the overlapping of text and put the text in next line if it is long.
How to do it using css...plz help
after removing position and right=0
You are absolutely positioning the product image. This takes it out of the normal "flow" of the document, and will cause this overlap.
Remove position: absolute from .productimg (you can go ahead and remove right:0px; as well) , and the text should wrap around the image properly. To allow the text to float around the image, you can either move it before .productname or float .productname and give it a width.
codepen
HTML
<div class="product">
<img src="xy.jpg" data-attr="productimg" class="productimg " />
<span class="productname ">Excusite Beauty</span>
</div>
CSS
.productimg {
float:right;
/* margin-top:15px; */
height:120px;
border:2px double #0ff;
width:150px;
}
.productname {
font-size:1.2em;
display:block;
width:150px
}
.product {
width:300px;
}
i have a form element- text input and a submit button- Im trying to get them to render inline with each, the submit button renders slightly above the input button- i tried wrapping the two in a div and making the maximum height the same still didnt work. Here's my code/css- the button has a height of 29px- they are both in line
<div class="submit_form">
<input type="text" name="unique_code" class="unique_code"/>
<input type="image" name="submit_btn" src="/imgs/submitbg.png"/>
</div>
.submit_form{
height:30px;
}
.unique_code{
background-color:#000;
border: 1px solid #e31e25;
width:250px;
height:25px;
color:#fff;
}
Change your CSS to this:
.submit_form *
{
height: 30px;
display: inline;
vertical-align: middle;
}
It should work now. Have tested it in IE and Chrome.
Simply add vertical-align to the textbox:
.unique_code{
vertical-align: top;
background-color:#000;
border: 1px solid #e31e25;
width:250px;
height:25px;
color:#fff;
}
Try this.
// css
.img_fix {
vertical-align: text-top
}
// html
<input type="image" name="submit_btn" class='img_fix' src="http://www.google.com/images/nav_logo29.png"/>