Excuse this basic question, but I couldn't find an answer that fit. I have this code in a view:
<div>
<h4> Irrelevant MVC code... </h4>
<button type="button" class="btn btn-success">Accept</button>
<button type="button" class="btn btn-warning">Deny</button>
</div>
I would like the 2 buttons to appear next to the heading, not below. How would I do this please?
Just add css property display: inline-block; to yours elements.
It's a method to display an element as a block while flowing it.
By default, your buttons are already inline, so you just need to display your h4 inline :
h4{
display: inline-block;
}
Try this :-
Because it is a block element, so your buttons come down.
h4{
display:inline-block;
}
Related
I'm trying to create a Navigation field for my website, and I would like my buttons to be underneath each other with a white line in between. I have managed to get this part working by adding two line breaks next to the button, as seen here:
<button id = "next" onclick="next()">
Volgende
</button><br><br>
I'm wondering if it's possible to have them show up like this, but if I hide the button, have the other buttons jump up, so they fill the gap and jump back down when the button becomes visible again.
Thanks in advance!
Don't use line breaks for layout. That's a misuse of their purpose, which is to break text.
Just put your buttons in block-level (or inline-block level) containers, like divs. Obviously you'd hide and show the containers, not the buttons.
.button-container:not(:first-child) {
border-top: 1px solid red;
padding-top: 4px;
margin-top: 4px;
}
<div id="next-btn-container" class="button-container">
<button id="next" onclick="next()">Volgende</button>
</div>
<div id="other-btn-container" class="button-container">
<button id="other" onclick="next()">Volgende</button>
</div>
<div id="another-btn-container" class="button-container">
<button id="another" onclick="next()">Volgende</button>
</div>
<br> is not a good practice for cross-browser perspective, kindly use the standard way by using margin and display:block property of css.
So your html will be like:
<button class="mb-20px d-block" id = "next" onclick="next()">
Volgende
</button>
And add below line in your css
.mb-20px { margin-bottom: 20px; }
.d-block { display: block; }
I have found how to make it work.
Instead of using
document.getElementById("button").style.visibility = 'hidden'
I have now used
document.getElementById("button").style.display = 'none'
This makes the buttons fill the gaps when they're hidden.
I am using w3.css in my codeiniter project and I want to put them next to each other.
Here is my code:
<a type="button" class="w3-btn w3-blue w3-pull-left" href="http://localhost/cblog/posts/ikkinchi-post">Tahrirlash</a>
<form action="http://localhost/cblog/posts/delete/2" method="post" accept-charset="utf-8">
<input type="submit" value="O`chirish" class="w3-btn w3-red">
</formm>
Why do you have type="button" attribute on your link?
To display the elements on one line change their style to:
display: inline-block;
Or if you don't need padding
display:inline;
So it will look like this
a,form{
display:inline-block;
}
You can take a look at the documentation for W3.css and see if there's a class that will make an element display inline and maybe use the classes designed for navigation bars. If there's not, then you can create a class yourself and assign it to the element you wish.
.displayInline { display: inline;}
I would like to know how to place 2 buttons horizontally with space between them.
Any simple html and css code snippet someone could share ?
I couldn't find any good example
There are multiple ways, here is a very simple example with floats:
https://jsfiddle.net/dbb8xk38/
<button class="button-1">Example</button>
<button class="button-2">Example 2</button>
button{
float: left;
}
.button-2{
margin-left: 15px;
}
I would strongly encourage you to go w3school CSS tutorial, it will teach you amazing things.
http://www.w3schools.com/css/default.asp
Note: In case with buttons you don't even have to float them, by default they will come next to each other. But with elements such as a div, you would need to float.
Depends on what you're trying to achieve with the rest of the page, in terms of layout and what styles you wish to apply to your other buttons and other HTML controls.
http://www.w3schools.com/css/css_margin.asp
HTML:
<button>Button 1</button>
<button>Button 2</button>
CSS:
button {
margin-left:20px;
}
The HTML/CSS above will place a 20 pixel margin at the left of EVERY button. If you simply need to apply it to one button, then you'll need a separate class or some inline style to do that.
E.g.
CSS:
.buttonSpaced {
margin-left:20px;
}
And then just apply this style to the 2nd button only.
HTML:
<button class="buttonSpaced">Button 2</button>
Or you could just do it inline, if it's not likely to be used again...
<button style="margin-left:20px;">Button 2</button>
I am using Bootstrap 3 in my project.
Here is my html page:
As you can notice, the star is not aligned in line with the view details button below.
Here is my html code
<div class="col-6 col-sm-6 col-lg-4">
<h3>2000 Cadillac Eldorado Esc (Prospect heights) $3500 </h3>
<p><small>clean eldorado only 123000 miles fresh tune up needs nothing adult driven extremely reliable and well taken care of for ... </small></p>
<p>
<a class="btn btn-default" href="/search/1799/detail/" role="button">View details »</a>
<button type="button" class="bookmark" id="1799" ><span class="
glyphicon glyphicon-star-empty "></span></button>
</p>
</div><!--/span-->
css file:
button.bookmark {
border:none;
background: none;
padding: 0;
}
The problem is, that the span with the star icon is already an inline-block with different height and line-height. The button which surrounds the span is also an inline-block element, that's why it is a bit complicated.
Another fix would be, to remove the span inside the button and add the classes from the star-icon to the button like this:
<button class="glyphicon glyphicon-star-empty bookmark">
Now you have the same styling for both buttons and they align correctly when you add
vertical-align: middle; to the star button.
http://jsfiddle.net/a29hC/
There's a number of ways this can be achieved. I'd use one of the following:
Option 1 - relative position with top
button.bookmark {
border:none;
background: none;
padding: 0;
position: relative;
top: 2px;
}
Demo
Option 2 - give the button a .btn class so it has same layout styles as the .btn next to it, then remove left and right padding
<button type="button" class="btn bookmark" id="1799" >
button.bookmark {
border:none;
background: none;
padding-left: 0;
padding-right: 0;
}
EDIT: Note that the gylphicon gets given a line-height of 1 by Bootstrap. With this technique we don't want that because we want it to match the .btn. So that can be overridden:
.btn.bookmark .glyphicon {
line-height: inherit;
vertical-align: middle;
}
Demo
Try putting the two images in a div and using the vertical-align property.
Example:
<div class="col-6 col-sm-6 col-lg-4">
<h3>2000 Cadillac Eldorado Esc (Prospect heights) $3500 </h3>
<p><small>clean eldorado only 123000 miles fresh tune up needs nothing adult driven extremely reliable and well taken care of for ... </small>
</p>
<div> <a class="btn btn-default" href="/search/1799/detail/" role="button">View details »</a> <button type="button" class="bookmark" id="1799"><span class="glyphicon glyphicon-star-empty" style="vertical-align: middle;"></span>
</button>
</div>
</div>
why not just put the star inside the button and let Bootstrap align it for you? You can also add the btn class to the <a> tag to style it as a button. Less code :)
<a class="btn btn-default" href="/search/1799/detail/" class="bookmark" id="1799">
View details <span class="glyphicon glyphicon-star-empty"></span>
</a>
Edit: the reason I made this suggestion is a personal preference; I prefer to let Bootstrap do its thing and not add too much additional CSS positioning as it might get in the way when resizing the browser, etc.
Bootstrap may have some special class for this... however it might rely on a set of circumstances. I think you'd be better off thinking of this as a CSS positioning question.
You want to align 2 elements to one another, vertically. elements which are display: inline or inline-block can align with vertical-align. You can read about that HERE.
In your case, you will want the two elements to be display: inline-block so that you can give them shape and position like a block element, and still have access to some of the properties an inline element would have. Once they are both display: inline-block you can align them with vertical-align: middle;. 2 things to keep in mind are that you don't want them floated, and that when we say they are aligned, it is to each other and not to the box they reside in.
HTML
View Details >>
<button class="star">★</button>
CSS
a { /* reset a */
text-decoration: none;
color: inherit;
}
.button {
display: inline-block;
padding: .5em;
border: 1px solid black;
border-radius: 5px;
vertical-align: middle;
}
.star {
background: transparent;
border: 0;
display: inline-block;
vertical-align: middle;
}
Here is a jsFiddle
I am trying to make a button for a message system to show an orange dot if there's a new message. However, i can't quite get it working. Is it possible?
Here's the button
<input type="button" value="Messages •" />
And the button on jsFiddle if anyone feels like trying out :-)
http://jsfiddle.net/ePA47/1/
Use a button element instead.
<button type="button">
Messages <span style="color: orange;">•</span>
</button>
Of course, don't add your stylings inline. I just did for this example's sake.
You could also add a class to the button such as new-messages and then do...
button.new-messages:after {
content: "•";
color: orange;
}
Just keep in mind the latter won't work in older IEs.
Use <button> instead of <input> since it has child elements which you can style.
To add an orange dot to your button, I would recommend using a background-image. This will give you the ability to design the dot however you wish, and not be constrained by font types.
It's also better for accessibility if the orange dot is added as a background image, as this is not content.
<input type="button" value="Messages" class="newmessage" />
.newmessage
{
background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
background-repeat:no-repeat;
background-position:right center;
padding:5px;
padding-right:25px;
}
See Demo: http://jsfiddle.net/ePA47/3/
As per the question heading, the following will help to add multiple styles in a single style tag
<button type="button" style= "margin-top : 20px; border-radius: 15px"
class="btn btn-primary">View Full Profile
</button>