I have the following HTML:
<div id="Container">
<input type="button" value="button" id="button1" />
<div id="text1">
some text here
</div>
<div id="TheButtons">
<input type="button" value="button" class="MyButtons" id="button2" />
<input type="button" value="button" class="MyButtons" id="button3" />
<input type="button" value="button" class="MyButtons" id="button4" />
<input type="button" value="button" class="MyButtons" id="button5" />
</div>
</div>
And the following CSS:
#Container{
background:red;
width:500px;
height:50px;}
#button1{
margin:7px;
float:left;}
#text1{
margin:7px;
text-align:center;
float:left;}
#TheButtons{
float:right;
margin:7px;}
.MyButtons{
margin:0px 3px;
float: left;}
As you can see in the JsFiddle here, the text is aligned to the left. The buttons on the right will have different text for different languages so I can't explicitly define the width of the third div TheButtons. How can I get the text to be centered between button1 and TheButtons?
Thanks.
Place the theButtons div before the text1 div in your HTML. Then remove the float from text1 and add overflow:auto to your Container div.
jsFiddle example
Related
I have to display both these buttons in single line.
I tried adding style="{display:block-inline;}"> in form element as suggested somewhere but that too didn't help me. Any idea how to do it ?
<html>
<body>
<div>
<form >
<input type="submit" value="Button1" />
</form>
<form >
<input type="submit" value="Button2" />
</form>
</div>
</body>
</html>
Put both forms in their own div and use float in your css.
See fiddle example:
<body>
<div>
<div id=form1>
<form >
<input type="submit" value="Button1" />
</form>
</div>
<divid=form2>
<form >
<input type="submit" value="Button2" />
</form>
</div>
</div>
</body>
#form1{
float:left;
}
#form2{
float:left;
}
https://jsfiddle.net/5mcffrv9/
Inline-block works perfect. Take a look here. Demo
HTML
<form >
<input type="submit" value="Button1" />
</form>
<form >
<input type="submit" value="Button2" />
</form>
CSS
form { display: inline-block; }
HTML
Add
<div class="name">
</div>
to your forms each one.
Then in css add
.name{
float: left;
}
or
.name{
display:inline-block;
}
Check this fiddle
https://jsfiddle.net/kb86veLk/1/
Displaying with inline block
like so
https://jsfiddle.net/kb86veLk/2/
is probably the best way though.
You just need to do this:
CSS
form{display:inline;}
DEMO
I want to put margins/spacing between each of these four Buttons. I am struggling a bit with the css. The following code does not give me space between each Button. Does anyone know what I need to change?
practice.html
<div>
<input type="button" id="button0" style="color:black; width:100px; height: 50px" />
<input type="button" id="button1" style="color:black; width:100px; height: 50px" />
<input type="button" id="button2" style="color:black; width:100px; height: 50px" />
<input type="button" id="button3" style="color:black; width:100px; height: 50px" />
</div>
practice.css
.button{
margin: 20px;
}
.button is responsible for class. You should write
button {margin: 20px;}
Thats all :). Remember that button should have display: block or display: inline-block, so the element can render margin property properly.
Example of different CSS selectors:
button {} // <button>
.buttonclass {} // <button class="buttonclass">
#buttonid {} // <button id="buttonid">
add class="button" for each button:
<input class="button" type="button" id="button0" style="color:black; width:100px; height: 50px" />
.button is a class selector and you have no classes set. button as a selector won't work with the given HTML as the element is input. The correct css would be
input[type="button"]
{
margin:20px;
}
input[type="button"] {
color: black;
width: 100px;
height: 50px;
margin: 20px;
}
<div>
<input type="button" id="button0" />
<input type="button" id="button1" />
<input type="button" id="button2" />
<input type="button" id="button3" />
</div>
From your comments it sounds like there is another style being applied from somewhere. You may need to make a more specific selector.
Try
div input[type="button"]
{
margin:20px;
}
Also use Chrome Developer tools or Firebug for Firefox to inspect the buttons to see what styes are being applied to your buttons. Don't forget to flush your cache as well (ctr +f5) as CSS is cached by the browser.
More info on getting started with CSS Selectors
i have html form and css, to side my button side by side. but im not able to give space between the buttons.
here is my code:
<html>
<body>
<div class="custom-buttons">
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" style="float:left;color:#fff" value="paste2"/></form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" style="float:left" value="colSplit"/>
</form>
<p style="clear:floats"></p>
</div>
</body>
</html>
In this instance, you want to set the form elements to float. From there, you can add a margin to the first form element.
<html>
<body>
<div class="custom-buttons">
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank" style="float: left; margin-right: 5em;">
<input type="submit" value="paste2"/>
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank" style="float: left;">
<input type="submit" value="colSplit"/>
</form>
</div>
</body>
</html>
The easiest way is to add margin to one of the inputs.
Style="margin-right:30px;"
You may see your code with the 30px space between inputs here: http://jsfiddle.net/d6g66/
A jsfiddle or something to show it in action would be good or at least the css, but you should look into http://necolas.github.io/normalize.css/ for clear fix and without seeing your css, you should be able to use margins or padding.
Give the custom-button class a width and change the second button to float:right
http://jsfiddle.net/v85sH/
The width can be pixel, percentage, anything you like and the two buttons will be spaced evenly to the left & right.
CSS
.custombuttons {
width:100%;
}
.firstbutton {
float:left;
color:#fff;
}
.secondbutton {
float:right;
}
HTML
<div class="custom-buttons">
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" class="firstbutton" value="paste2" />
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" class="secondbutton" value="colSplit" />
</form>
<p style="clear:floats"></p>
</div>
I want to display 3 buttons on the same line in html. I tried two options:
This one:
<div style="width:500px;">
<div style="float: left; width: 130px"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></div>
<div style ="float: none; width: 130px"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></div>
<div style ="float: right; width: 130px"><button class="msgBtnBack">Back</button></div>
</div>
And this one:
<p style="float: left; width: 130px"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></p>
<p style ="float: none; width: 130px"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></p>
<p style ="float: right; width: 130px"><button class="msgBtnBack">Back</button></p>
For the second option I used a styling for the paragraph:
<style>
p {display:inline}
</style>
Sadly, none of them were ok, and I can't seem to find out any other option. The first and second button are displayed on same line, but the third is displayed lower...
Can you help me?
Here is the Answer
CSS
#outer
{
width:100%;
text-align: center;
}
.inner
{
display: inline-block;
}
HTML
<div id="outer">
<div class="inner"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></div>
<div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></div>
<div class="inner"><button class="msgBtnBack">Back</button></div>
</div>
Fiddle
Do something like this,
HTML :
<div style="width:500px;">
<button type="submit" class="msgBtn" onClick="return false;" >Save</button>
<button type="submit" class="msgBtn2" onClick="return false;">Publish</button>
<button class="msgBtnBack">Back</button>
</div>
CSS :
div button{
display:inline-block;
}
Fiddle Demo
Or
HTML :
<div style="width:500px;" id="container">
<div><button type="submit" class="msgBtn" onClick="return false;" >Save</button></div>
<div><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></div>
<div><button class="msgBtnBack">Back</button></div>
</div>
CSS :
#container div{
display:inline-block;
width:130px;
}
Fiddle Demo
This will serve the purpose. There is no need for any divs or paragraph. If you want the spaces between them to be specified, use margin-left or margin-right in the css classes.
<div style="width:500px;">
<button type="submit" class="msgBtn" onClick="return false;" >Save</button>
<button type="submit" class="msgBtn2" onClick="return false;">Publish</button>
<button class="msgBtnBack">Back</button>
</div>
You need to float all the buttons to left and make sure its width to fit within outer container.
CSS:
.btn{
float:left;
}
HTML:
<button type="submit" class="btn" onClick="return false;" >Save</button>
<button type="submit" class="btn" onClick="return false;">Publish</button>
<button class="btn">Back</button>
If you are using bootstrap then call a simple btn-group class in the outer div
<div class="btn-group">
View
Edit
Delete
</div>
The following will display all 3 buttons on the same line provided there is enough horizontal space to display them:
<button type="submit" class="msgBtn" onClick="return false;" >Save</button>
<button type="submit" class="msgBtn2" onClick="return false;">Publish</button>
<button class="msgBtnBack">Back</button>
// Note the lack of unnecessary divs, floats, etc.
The only reason the buttons wouldn't display inline is if they have had display:block applied to them within your css.
I'm trying to get two divs to stick together at the bottom of the page using position:fixed. The problem is when I put padding on the #feedbackTab, it repeats the #feedbackTab from the bottom of the page to the place where I want it. How can I have #feedbackTab on top of #feedbackBody with both of them fixed to the bottom of the page?
#feedbackTab {
background-image:url(../img/feedback_12.png);
position:fixed;
bottom:0px;
padding-bottom:300px;
margin:0;
width:960px;
height:34px;
}
#feedbackBody {
background-image:url(../img/Feedback_bkg_14.png);
position:fixed;
bottom:0px;
width:960px;
height:292px;
margin:0;
}
<div id="feedback">
<div id="feedbackTab"></div>
<div id="feedbackBody">
<div id="comments">
<h2>Comments/Suggestions</h2>
<input class="commentsTxt" type="text" name="Comments"><br \>
<input id="commentsSubmit" type="submit" value="Submit">
</div><!-- end comments -->
<div id="problems">
<h2>Problems?</h2><br \>
<label id="email">Email:</label><input class="emailBox" type="text" name="Email"><br \>
<label id="problem">Problem: </label><input class="problemBox" type="text" name="Comments"><br \>
<input id="problemsSubmit" type="submit" value="Submit">
</div><!-- end problems -->
</div><!-- end feedbackBody -->
</div><!-- end feedback -->
I would put them in a container div to hold everything together like so:
CSS:
#tabContainer{
width:700px;
}
.tab{
width:100px;
text-align:center;
float:left;
margin-right:2px;
}
#feedbackTab{
background-color:red;
}
#tab2{
background-color:green;
}
#tab3{
background-color:yellow;
}
#feedbackBody{
clear:both;
width:100%;
height:500px;
background-color:blue;
}
HTML:
<div id="tabContainer">
<div id="feedbackTab" class="tab">FeedBack</div>
<div id="tab2" class="tab">Tab2</div>
<div id="tab3" class="tab">Tab3</div>
<div id="feedbackBody">
This is the feedback body
<br/>lorem ipsum
<br/>
<input type="button" value="button">
</div>
</div>
</body>
Unfortunately JSFiddle seems to be down right now so I can't mock it up or test it for you. I hope this helps though!
EDIT: I found a replacement test bed: http://cssdesk.com/y7Hb2