i'm trying to achieve the following (for building a form):
Name: [ ] *
my markup is:
<label>Name:</label>
<input type=text name=name>
<span class=validate></span>
my css is:
label
{
display:block;
width:50px;
float:left;
}
input
{
float:left;
}
span.validate
{
display:block;
background-image:url(img/required.png);
width:16px;
height:16px;
}
the problem: the validate-span is positioned to the very left border instead of right to the textbox. what is wrong?
thanks
You are using display: block on your span, so it will automatically go to a new line. You can change it to inline-block or float it as well.
You need to also add float: left to your span.validate.
See: http://jsfiddle.net/8jDjq/
But, that won't look right if you add another set of the elements underneath: http://jsfiddle.net/8jDjq/2/
To fix that, you need to add clear: both to label: http://jsfiddle.net/8jDjq/3/
You need to float:left the validate span (or reconsider those display:blocks, but I guess they're there for a good reason).
Give the span a float:left too.
span.validate
{
display:block;
background-image:url(img/required.png);
width:16px;
height:16px;
float:left;
}
U need float:left; for your span
Related
I want to make the horizontal boxes with the size of 200 x 200 pixel each. I decide to use the ul li. and you guys know well that I must apply the float:left attribute to the li tag to make it horizontal.
My problem is that when I apply the float:left to the li element, all content in li completely breaks its container. I noticed this because I append the border style to the main container and all the content is in the new line below the main container.
Here is my code
HTML :
<div class="content-box">
<h3 class="box-header">Recent Files</h3>
<ul class="horizontal-content">
<li>
<div class="filebox">
</div>
</li>
</ul>
</div>
and the css :
.content-box {
position:relative;
width:800px;
border:1px solid #dadada;
margin-left:10px;
padding:10px;
}
ul.horizontal-content {
list-style:none outside none;
}
ul.horizontal-content > li {
float:left;
display:block;
padding:10px;
}
.filebox {
position:relative;
padding:15px;
width:200px;
height:200px;
border:1px solid #dadada;
background-color:#ecf0f1;
}
Now you see all of my code, please help me figure out what I have done wrong.
You dont really need float:left to make it horizontal. Just add display:inline-block and remove float
ul.horizontal-content > li {
padding:10px;
background:grey;
display:inline-block
}
DEMO
Add:
ul.horizontal-content {
overflow: auto;
}
here use overflow:auto and here is link of demo Click Here
I have been trying many of the solutions but they won't solve. I will create the JSfiddle for you guys to see what went wrong
Okay, all problems are solved with clear:both
I’m trying to create a button toggle using the twitter bootstrap.
What I’m looking to do is add a tick image at the top right of a button when the class active is added.
Here is an example of the source
http://jsfiddle.net/4GC9R/
My button css looks like
.mybtn {
width:150px;
height:150px;
margin:5px;
background:#FBDFDA;
border:none;
}
.mybtn.active {
background:#CFCFCF;
}
Sorry if this is a stupid question I’ve tried a few ways but I’m far from a css expert.
Thanks in Advance
To add the checkmark you could use the :after pseudo element and for an image you could then further use content: url('image_path') or background-image: url('image_path').
Also, your class selectors should be adjusted. Maybe something in this direction:
.mybtn {
width:150px;
height:150px;
margin:5px;
background:#FBDFDA;
border:none;
}
.mybtn.active {
background:#CFCFCF;
border:none;
position:relative;
}
.mybtn.active:after {
content: '\2713';
position:absolute;
top:0;
right:0;
}
DEMO
P.S. if you meant tick - as in the animal (e.g. Ixodes), that is also possible via content or the background property of the :after pseudo element (DEMO) ;-)
When the class name '.active' is added to the button with class '.mybtn', then the selector of the button will not be '.mybtn .active', but '.mybtn.active'.
Hope this helps.
I'm using third party libraries like Kendo which output various types of HTML elements when they render.
So you might end up with a scenario such as this:
<ul>
<li>
<label>label text</label>
<div>muli select widget</div>
<span>date selector</span>
</li>
</ul>
NB! Assume I don't have control over the HTML rendered from these widgets/third party tools.
The problem is vertical alignment for the scenario above. I've created a JSFiddle which shows how the label doesn't vertically align properly. See here:
http://jsfiddle.net/tMJFF/
How would I get all three these elements to vertically align perfectly?
Use inline-block property on all elements
label,
.div-input,
.span-input{
display: inline-block;
vertical-align: middle;
}
http://jsfiddle.net/6vQ4Q/
You mentioned Kendo, so I'd recommend using whatever selectors they have decorating the ul and do something like :
ul.kendo-selector-class-of-choice li * {
vertical-align: middle;
display : inline; /* for lte IE7 only */
}
Since you aren't in control of the elements being created, this could change with different implementations/version updates of the decorating client side library (in this case Kendo). The * covers that and although arguably a hungry selector its scope is limited by the .kendo-selector-class
The below works in Chrome and IE10, but jsfiddle a bit tricky to browser test for IE8 since it doesn't render properly itself... but if you do test further you'd find you'll have to use something like display:inline if you're going down to the lovely land of IE7-.
http://jsfiddle.net/tMJFF/11/
Simply add vertical-align:middle;
Here is referenced Fiddle
label {
vertical-align:middle;
line-height:20px;
border:1px solid blue;
}
.div-input {
vertical-align:middle;
border:1px solid black;
margin-right:20px;
display:inline-block;
height:20px;
width:100px;
box-model:collapse-box
}
.span-input {
vertical-align:middle;
border:1px solid black;
display:inline-block;
height:20px;
width:100px;
}
label {
line-height:20px;
border:1px solid blue;
vertical-align:top;
}
vertical align all elements in li to middle.
ul li *{
vertical-align:middle;
}
vertical-align css property aligning your tags vertically so simply use :
label,div,span{
vertical-align :middle
}
DEMO
i want some text and textfields to properly display in the same line and make an line break after each textfield. First i had all buttons in a class which had a absolute position, but i think there is a better solution.
At the moment i have it this way
<form action="" method="get" name="pdaten" >
<p><div class="text">Vorname</div><input class="button" id="vname" type="text" /></p>
<p><div class="text">Nachname</div><input class="button" id="nname" type="text" /></p>
<p><div class="text">Geburtstag</div><input class="button" id="gebdat" type="text" /></p>
</form>
CSS:
form{
padding-left:1em;
}
.button{
position:relative;
left:0%;
}
.text{
position:relative;
text-align:left;
width:20%;
background-color:#00FF00;
}
The thing is, the textfields are always displayed in the next line, instead of the same as the div in which the text is. I could use a span, but than i dont know how to position them correctly, since i want the textfields to be exactly underneath the last one.
Anybody can help me fix this?
Add display:inline-block; to your text class.
.text{
position:relative;
text-align:left;
width:20%;
background-color:#00FF00;
display:inline-block;
}
jsFiddle example
You can set the divs display property to inline, like this:
.text {
display: inline;
}
This will make the divs behave like inline elements.
It is because div's are block element, you can change the behavior by changing the display property value to inline-display
.text{
position:relative;
text-align:left;
width:20%;
background-color:#00FF00;
display: inline-block;
}
Demo: Fiddle
Add float:left; clear:right; to your .button elements
Why not just add display: inline-block for your div
Demo: http://jsfiddle.net/mAsxZ/1/
I am trying to back three background images in css appear inline
<div id="hd_but2"></div>
<div id="hd_div1"></div>
<div id="hd_but1"></div>
and
#hd_but2 {
background-image:url('1.png');
background-repeat:no-repeat;
height:28px;
width:49px;
margin-top:9px;
}
#hd_div1 {
background-image:url('2.png');
background-repeat:no-repeat;
height:46px;
width:4px;
}
#hd_but1 {
background-image:url('3.png');
background-repeat:no-repeat;
height:28px;
width:29px;
margin-top:9px;
}
But everytime i change the divs to inline it requires content, like text, to show the background images...how can i do this without putting text into the containers...whats a better way to do this?
Use display:inline-block instead of display:inline
Here is jsfiddle http://jsfiddle.net/rmL9s/
Hi you can used two method
table-cell or inline-block
Demo if you used table-cell http://jsfiddle.net/rohitazad/XTVbu/7/
or
or if you used inline-block demo http://jsfiddle.net/rohitazad/XTVbu/8/
Have you tried using display: inline-block?