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;}
Related
I have something like this
<form class="Form">
<FormField>
<label class="FormLabel" ..>
<div class="FormInput">
<div class="InputField">
<input../>
</div>
</div>
</FormField>
</form>
I need to apply styles to FormLabel when input is focussed.
I understand that we cant get the parent selector(Is there a CSS parent selector?)
I want a work around to access the parent using css only (not use jquery)
I tried this using & in LESS
.Form {
.FormField {
.Input:focus & .FormLabel {
border:green
}
}
}
Still no luck :/ .. What am I missing? Thanks!
There is no way, currently, to select the parent of an item using CSS. It must be done with JavaScript/jQuery.
Since there is no way to get the parent item of the item that's in focus (in this case, the input), you cannot change it's style using pure CSS.
I have a drop-up menu and when you hover over the login button the login form popups but when you select the input field and than move the mouse out of the drop-up the drop-up disappears. So how can I keep that drop-up open?
On this jsFiddle can you see what I am trying to explain..
I tried this but that didn't work:
css
.login form input:focus .login{
display:block;
}
I also tried this css
.login > form > input:focus .login{
display:block;
}
html of the login button and the associated drop-up div
<li class="right"><p>Log In</p>
<div class="login">
<form>
<h1>Log In</h1>
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<br>
<div class="submit">Log In</div>
</form>
</div>
</li>
I don't understand why this is not working because when you hove over the login button you also set the display of the pop-up div to block so why does this not work.
First, both your CSS examples mean (you must read them from right to left):
"apply display:block; to any .login element which is in an input:focus child, which has a parent form, which has a parent .login element".
In fact, in CSS you cannot apply something to a parent element (<li>) upon action on a child element (your div.login).
But you could show/hide your .login element with a little bit of javascript. For example you could add a class to your this element after a click on your menu element <li>.
You will surely have to use JS for this. We cannot select parent element via CSS.
Question that will help you understand this:
Is there a CSS parent selector?
One more ref. here:
http://css-tricks.com/parent-selectors-in-css/
Hope you will like jquery for achieving this:
http://api.jquery.com/parent/
Enjoy Coding!!
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;
}
i'm currently working with Twitter Bootstrap and have a problem concerning the size of elements. I'd like to create an input field with an appended button. That's why I'm using a div with "input-append", which sorrounds the input and the button tag.
Now my problem: I want everything to be a bit bigger. So i gave the button tag the property "btn-large". Unfortunately there doesn't seem to be a similar property for the input field.
How can I fit the input field to the appended button?
<div class="input-append">
<input class="span3" id="appendedInputButton" size="16" type="text"><button class="btn btn-large" type="button"><i class="icon-search"></i></button>
</div>
Heres an impression of my problem:
Regards,
Christoph
Define box-sizing to your input field. Write like this:
input, button{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
You can use following style and if you want bigger then increase padding.
input, button{
padding: 7px;
}
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>