this is my html - click on the link below
http://wklej.org/id/658249/
I cannot edit this html. I have to edit is only through the CSS.
I would like to put every single box of the form in different line.
I cannot create any CSS code. I am stuck.
Since you don't have a <table> tag, browsers will generally just ignore the <tr>, <td>, and <th> tags, and just output the internal content. Ideally, you'd just change the html, but if you must do this in css, you can get them to line up by displaying the inputs/labels as block elements and then floating them appropriately:
#commentForm label, #commentForm input, #commentForm textarea { display: block; }
#commentForm label { float: left; clear: left; }
#commentForm input, #commentForm textarea { float: left; clear: right; }
#commentForm p { clear: both; }
See jsfiddle: http://jsfiddle.net/kY38D/2/
As DRP96 said, since you have no table tag, you are not left with many options.. here is one way using widths:
<style>
label {
display: inline-block;
width: 25%;
}
input[type='text'], textarea {
display: inline-block;
width: 75%;
margin-bottom: 1em;
}
</style>
EDIT: Then try display:block for tr. Usually it should be in different lines.
(You don't have any table tag)
Related
using bootstrap.
reproduce here
the first column is defined like this:
.feedback-table tbody tr td:first-child {
width: 40px;
min-width: 40px;
max-width: 40px;
word-break: break-all;
}
The html as you see in jsfiddle is sent the "bigger" html and wrpped inside a
The gap in there is created by the ::before pseudo element of the .row class.
This is from boostrap:
.row:before, .row:after {
display: table;
content: " ";
}
Why do you need the .row class for ? Strip that and the gap will go. If you need the .row class, you could also just specify content: none; for the after and before elements
.feedback-row:before, .feedback-row:after {
content:none;
}
Later EDIT: I've seen your comment about constraints. To be able to specify widths with tables you need to specify the table-layout to be fixed. Therefore...
.feedback-table {
font-family: 'Arimo', sans-serif;
font-size: 16px;
background-color: yellow;
margin: 15px;
direction: rtl;
text-align: right;
table-layout: fixed;
}
The table row spaces before and after. You can clear them using this:
.feedback-row:before {
content: None;
}
.feedback-row:after {
content: None;
}
I wrote the hover pseudo-class for all input and label elements as shown in the image ,but when when I hover my mouse on one label the other indent directly to the right
Preview
The code is shown:
<Style>
label {
width: 180px;
float: left;
text-align: right;
margin-right: 0.1em;
display:inline-block;
}
label[type:checkbox]+[type:radio]{
width: auto;
input:hover { font-size:25px }
label:hover { font-size:25px }
</style>
First of all, you should make clear that your markup is valid. As already mentioned in the comments, you forgot a curly brace { for your label[type...] descriptor.
To avoid the shifting of other elements on hover, you should make clear, that the hovered label height doesn't become greater than the height of the input element next to it. Therefore the line-height of the label and the height of the inputs should at least be 25px.
Since you haven't provided a Minimal, Complete, and Verifiable example the exact code is hard to guess, but the following should work:
input {
height: 25px; /* <- */
}
label {
width: 180px;
float: left;
text-align: right;
margin-right: 0.1em;
display: inline-block;
line-height: 25px; /* <- */
}
label[type:checkbox]+[type:radio] {
width: auto;
}
input:hover {
font-size: 25px
}
label:hover {
font-size: 25px
}
I used below CSS code for add row number to a table rows:
table {
direction: rtl;
counter-reset: line-number;
}
td:first-child {
text-align: right !important;
}
td:first-child:before {
content: counter(line-number) ".";
counter-increment: line-number;
padding-right: 0.3em;
color: lightgray;
}
but it's content not align right after tenth row. See below image:
But I want something like this:
I also try add padding but it's not a working solution.
How fix this?
This is my Fiddle now.
You can set min-width of td:first-child:before.
td:first-child:before {
content: counter(line-number) ".";
counter-increment: line-number;
padding-right: 0.3em;
color: lightgray;
min-width: 20px;
display: inline-block;
}
Make sure you put the number in an element, like this:
<input type="checkbox"> <div class="number">10</div>
Then you can style that element, to have a minimum width:
.number {
min-width:20px;
}
That way they have the same with, and you don't need funny padding depending on how many digits the number has.
As a part of learning CSS (& practically applying it — by creating simple themes), today I wanted to know some proper ways of clearing floats in CSS.
I wanted to see how Twitter does it, so I downloaded Bootstrap, went through the bootstrap.css file, and found what I was looking for (I found two code blocks):
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
&
.container {
margin-left: auto;
margin-right: auto;
*zoom: 1;
}
.container:before, .container:after {
display: table;
content: "";
}
.container:after {
clear: both;
}
I immediately tried it out, and that specific part of my code looked like so:
<p class="sample-preview">
<span class="sample-preview">PREVIEW</span>
<em>This is italicized aka emphasized</em>, and so is <em>this</em>.<br />
<strong>This is bold aka strong emphasis</strong>, and so is <strong>this</strong>.<br />
Use <strong><em>italics and bold together</em></strong> if you <strong><em>have to</em></strong>.
</p>
+
p.sample-preview {
border: 1px solid #FFCCC9;
background: #FFEBE9;
outline: 2px solid #FFEBE9;
padding: 10px;
}
span.sample-preview {
display: inline-block;
float: right;
margin:0;
font-weight: bold;
font-size: 12px;
background: #FFCCC9;
padding: 2px 5px;
}
.sample-preview {
margin-left: auto;
margin-right: auto;
*zoom: 1;
}
.sample-preview:before, .sample-preview:after {
display: table;
content: "";
}
.sample-preview:after {
clear: both;
}
Although I am not entirely sure, I think this code is causing a weird bug on the page I tried it. Why do I think so? Everything seemed fine when I removed display: table; from the code using Firebug.
You can take a look at the page here and the bug is — the first pink box is taller than the content. What am I doing wrong?
The issue is that you're also clearing the floated menu to the right.
There's two solutions for that:
the usual is to float your content area itself to the left. This means that everything inside it is in a different float context. Your clear will only affect the elements inside of it.
another trick that works is specifying overflow: hidden on your sample-preview paragraph. This is probably easier to do. Specifying the overflow property on an element (but not set to visible) causes it to behave like a float container.
Cfr: http://www.brunildo.org/test/clear.html, http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
I should also note that with this overflow trick, you don't need the clearfix at all.
Here's what I've tried so far:
#billingsummary span.billingitem {
color: White;
text-align: left;
}
#billingsummary span.billingvalue {
text-align: right;
}
<p>
<span class="billingitem">#Model.ProductName</span>
<span class="billingvalue">$ <span id="billingproductcost">4.00</span></span>
</p>
So I'd like billingitem to be as far to the left as possible.
And I'd like billingvalue to be as far to the right as possible.
The outcome isn't what I want:
Use float:
#billingsummary span.billingitem {
color: white;
float: left;
}
#billingsummary span.billingvalue {
float: right;
}
#billingsummary p {
clear: both;
}
do float:right; and float:left; instead. The elements after that should include clear:both; if you want them to be below both of those items.
what text-align does is align text inside a block element to the side specified:
http://www.w3.org/TR/CSS2/text.html#alignment-prop
Span are inline elements, so text-align has no effect for them. You should float them:
#billingsummary span.billingitem {
color: white;
float: left;
}
#billingsummary span.billingvalue {
float: right;
}
Floating them you make them block elements and tell them to be in the extrem and out of the normal flow. If you have some problem with following elements you should clear: both them