I have a table an done column is just checkboxes.
In the <th> I have a prompt "include?" and would now like to add some JS for a checkbox in that <th>, with maybe some "all/none" text.
Bad ascii art follows:
------------ ------------
| include? | | include? |
| [] | | [] all |
------------ ------------
| [] | or, maybe | [] |
------------ ------------
| [] | | [] |
------------ ------------
in either case, what style should I use to centre that checkbox?
Easiest is with text-align:center;
http://jsfiddle.net/jasongennaro/rhUjP/1/
EDIT
Just saw your other requirements, namely I need the text to be left aligned, but the checkbox to be centered
In that case, put the input in a span
span{display:inline-block; text-align:center; width:100px;}
Have the width match the width of the th.
http://jsfiddle.net/jasongennaro/rhUjP/3/
.checkbox {
display: block;
margin: auto;
}
Or you can set:
th {
text-align: center;
}
And specify which class or id of <th> to include if you want the entire <th> to be centered, like: http://jsfiddle.net/minitech/pJxgc/.
try this one jsFiddle
<table>
<tbody>
<tr><th><input type="checkbox" class="checkbox" /> Hello</th></tr>
<tr><td>My Table Data!</td></tr>
</tbody>
</table>
th {
text-align: center;
}
Do you mean something like this fiddle?
Related
Hi all:) i have a <div> wrapping words. the max length that could fit in it is 6 chars. I want to break it to the next line if word.length > 6
but go down to the newt line if word.length = 6.
e.g:
this is what i have:
text = "aaaaaaa"
|aaaaaa|
|a |
text = "hi bbbbbb"
|hi bbb|
|bbb |
this is what i want:
text = "aaaaaaa"
|aaaaaa|
|a |
text = "hi bbbbbb"
|hi |
|bbbbbb|
You should use overflow-wrap: break-word;
What about split the words in two span inside of that div?
HTML
<div class="flex">
<span>word1<span>
<span>word2<span>
<div>
CSS
.flex {
position: relative;
display: flex;
flex-wrap: wrap;
}
Trying to target each active link with an Font-Awesome icon. I am trying to use a combination os "Content:before" AND "a::first-child".
Targeting the third a-link "contact us" with an icon, not working. Tried many combinations. Is this even possible? xD
.children.windowbg > a::first-child before{
content: "\f114";
font-family: fontawesome !important;
padding-right:5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<td class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: Report Copyright Violations, Disclaimer, Contact Us, Privacy policy
</td>
?
https://jsfiddle.net/rr78gfw1/
.windowbg a:nth-of-type(1):before{
content: "\f114";
font-family: fontawesome !important;
margin-left: -23px;
position :absolute;
color:red;
font-size:20px;
}
.windowbg a:nth-of-type(2):before{
content: "\f115";
font-family: fontawesome !important;
margin-left: -23px;
position :absolute;
color:red;
font-size:20px;
}
.windowbg a
{
margin-left:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: Report Copyright Violations, Disclaimer, Contact Us, Privacy policy
</div>
Some of the solutions mentioned here are not purely CSS solutions as they ask you to change the DOM structure.
You have not used the selectors rightly,There is no : before the before :P and a is not the first child.Use nth-of-type selector for this.
Also you cannot use td tags like that without a table.My demo is after replacing the td with a div.
Like this,
.windowbg a:nth-of-type(1):before{
content: "\f114";
font-family: fontawesome !important;
margin-left: -23px;
position :absolute;
color:red;
font-size:20px;
}
Fiddle link: https://jsfiddle.net/rr78gfw1/1/
you give a CLASS to your link and give him a font-family
.yourlink{
font-family: fantasy;
}
<td class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: Report Copyright Violations, Disclaimer, Contact Us, Privacy policy
</td>
In order to add font-awesome icons to your links, just use an <i> tag as <i class="fa fa-tags"></i> inside your anchor tags.
<td class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: Report Copyright Violations<i class="fa fa-tags"></i>, Disclaimer<i class="fa fa-exclamation"></i>, Contact Us<i class="fa fa-phone"></i>, Privacy policy<i class="fa fa-info"></i>
</td>
Refer here for demo
The other answers have preferable solutions. This one just explains errors in the code snippet
Pseudo-classes like :first-child are with a single colon, instead of two.
:first-child selects (in this case) an a tag that's the first child of .children.windowbg. The a tag you're trying to select is no the first child, but the first of it's type. Therefore, you should use :first-of-type.
To select a pseudo-element, use a colon (:before). Now you were selecting a before tag in the a tag.
A td tag without a table is not valid, and the tag is removed in the code snippet, so for the sake of testing, I wrapped it in a table and a tr tag.
.children.windowbg > a:first-of-type:before {
content: "\f114";
font-family: fontawesome !important;
padding-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<table>
<tr>
<td class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: Report Copyright Violations, Disclaimer, Contact Us, Privacy policy
</td>
</tr>
</table>
The other answers are preferable, because when you change the order of the links or add one, you need to change the CSS (and because CSS isn't for non-dynamic styling). A better solution is to add the icons in the HTML.
Update
There is :first-of-type to select the first element of it's kind, usually in a certain parent. To select the last child, use :last-of-type. To select other children, use :nth-of-type(n), where n is the index of the element. The first element has index 1, not index 0. For example, to select the third element, use :nth-of-type(3).
But n is not limited by that. You can use odd and even to select odd and even elements, and you can make a calculation with n. Then it selects elements with an index that could be the answer when n is any whole number. For example, when you use :nth-of-type(2n):
Values for "n" | Indices
----------------------------
0 | 2 * 0 = 0
1 | 2 * 1 = 2
2 | 2 * 2 = 4
3 | 2 * 3 = 6
... | ...
This selects all elements with an index that is a multiple of 2, so all even elements. Another example is :nth-of-type(3+n):
Values for "n" | Indices
----------------------------
0 | 3 + 0 = 3
1 | 3 + 1 = 4
2 | 3 + 2 = 5
3 | 3 + 3 = 6
... | ...
This selects all elements, except the first two.
Explanation from MDN.
This goes the same for :first-child (:last-child, :nth-child(n)).
I have a figcaption that I want to position divs inside. I'm new to css and can't figure out how to do this. I know there's a float method but can't get my head around it. I've been at this for days now and am really stuck :(
Here's the fiddle(I know it doesn't work but I don't have a way of linking the external css): http://jsfiddle.net/dottsie/6uhw8c1p/
<link rel="stylesheet" type="text/css" href="css/component.css" />
<header>
<h1>Caption Hover Effects</h1>
</header>
<ul class="grid cs-style-2">
<li>
<figure>
<img src="http://www.ruggit.dk/media/catalog/product/cache/1/image/650x/040ec09b1e35df139433887a97daa66f/_/m/_mg_9746_1.jpg" alt="img04">
<figcaption>
<h3></h3>
<div> <div id="share-buttons> <div id="facebook share-buttons"></div>
<div id="twitter share-buttons"></div>
<div id="pinterest share-buttons"></div>
<div id="google_plus share-buttons"></div>
</div>
</figcaption>
</figure>
</li>
The first thing to notice is that you have used id's for your buttons. ID attributes are normally unique, it looks as though you meant class instead though owing to your CSS calling them by . instead of #
<div id="facebook">
// This is accessed in css by #facebook{float:left}
<div class="facebook">
// This is accessed in css by .facebook{float:left}
If you are ever going to have more than one of an item on a page it is a class of item. Remember ID is unique.
Following that you can use float to get your objects to try and position themselves as far to one side as possible:
_________________________________________________
| A | B | C | D | |
|____|____|____|____| |
|_______________________________________________|
Here A B C and D are all floated left float:left, and push up as tight as the can.
_________________________________________________
| | Z | Y | X | W |
| |____|____|____|____|
|_______________________________________________|
Here W X Y and Z are all floated right float:right, and push up as tight as the can.
If you want them stacked vertically we can use clear. Clear stops there from being any floated items that are on the side that is stated, the upshot of that is that it will push things down below if its not allowed to have something on that side:
_________________________________________________
| A | |
|____| | |
| B | <-' |
|____| | |
| c | <-' |
|____| | |
| D | <-' |
|____| |
| |
|_______________________________________________|
So in this case using clear:left on B forces it onto a new line below, clearing C forces D down etc. We don't want anything unexpected happening with wrapping so it is worth clearing both sides just for completeness so using clear:both will ensure that no two floated buttons are on the same line.
When your code has been condensed, it would look like this.
<header>
<h1>Caption Hover Effects</h1>
</header>
<ul class="grid cs-style-2">
<li>
<figure>
<img src="http://domain/imagefile.jpc"/>
<figcaption>
<div>
<div class="facebook share-buttons"></div>
<div class="twitter share-buttons"></div>
<div class="pinterest share-buttons"></div>
<div class="google_plus share-buttons"></div>
</div>
</figcaption>
</figure>
</li>
</ul>
With this CSS for all share-buttons
.share-buttons{
float:left;
clear:both;
height:32px;
padding:2px;
width:32px;
}
and the individual buttons as such
.share-buttons.facebook {
background: url('images/facebook.png') no-repeat;
}
.share-buttons.twitter {
background: url('images/twitter.png') no-repeat;
}
.share-buttons.pinterest {
background: url('images/pinterest.png') no-repeat;
}
.share-buttons.google_plus {
background: url('images/google_plus.png') no-repeat;
}
First off, ids need to be unique, so I would change "share-buttons" to a class instead. Next, I see that you have three divs for social media icons, each with "share-buttons", but they are also wrapped in a wrapper with the same "share-buttons". I would remove that wrapper since you already have a wrapper div around all of that. Finally, give the newly created class "share-buttons" a "float: left;" and your images should align themselves like you're looking for. Also, make sure you clear your float "clear:both;" after this div.
In an app I am maintaining, I am implementing less (the styling language) changes for iPad form factors. I've already got media queries set up to handle this, but I have a slight problem with getting my markup to behave!
Currently, in our 'normal' form factor, we have a 3-column layout:
*---*-----*---*
| A | B | C |
*---*-----*---*
<div class="lft-side-panel">
A
</div>
<div class="ctr-panel">
B
</div>
<div class="rt-side-panel">
C
</div>
.lft-side-panel {
.span4(); // 4/16 slots wide
margin-left: 0;
left: 0;
}
.ctr-panel {
.span8();
}
.rt-panel {
.span4();
}
However, due to size constraints on these smaller form factors, I am trying for a 2-column setup as such:
*---*---------*
| A | |
*---* B |
| C | |
*---*---------*
<div class="lft-side-panel">
A
</div>
<div class="ctr-panel">
B
</div>
<div class="rt-side-panel">
C
</div>
/* These appear to be where the solution lies, at least as far as Less is concerned. */
.lft-side-panel,
.rt-side-panel {
left: 0;
margin-left: 0;
.span4();
}
.ctr-panel {
span12();
}
I've tried
specifying a top and left attribute with value 0 for the C div,
specifying float: left in the media query for the rt-side-pnl class
...but it leaves me with a layout like:
*---*-----*
| A | |
*---| B |
| |
*---*-----*
| C |
*---*
Question: What am I missing to achieve a 2-column layout with A and C on top of each other, and B off to the side? I have a feeling the solution is right under my nose, but I'm just not seeing it. If possible, I must preserve the structure of the markup; if I must re-order things slightly, that can work too.
Check out this fiddle http://jsfiddle.net/s756e/3/
I set .rt-side-panel, .lft-side-panel { float:left; width=25%;} (needed to convert your 4 of 16 bootstrap to percent and added some demo colors and heights) and set .ctr-panel {float:right; width=75%;}
This seems to be, what you are looking for. Right!?
I have this markup:
<div class="wrapper">
<article>A</article>
<article>B</article>
<article>C</article>
<article>D</article>
<article>E</article>
<article>F</article>
<article>G</article>
<article>H</article>
</div>
which is floated and forms a two-column list. Each article has a variable height due to its contents.
What I want is each pair should have the same height based on which of the two has the tallest height. I have found variations of equalHeights plugin but all of them force equal heights to all elements. I just need each pair to be the same height, not all elements. Is this possible or are there any existing plugin for this?
Note: Can't change the article markup because it's outputted by the CMS.
My expected output:
|-------|---------|
| A | B |
|-------|---------|
| | |
| C | D |
| | |
| | |
| | |
|-------|---------|
| | |
| E | F |
| | |
|-------|---------|
Here is a little bit of code that will set the height to the max height, splitting a block of articles by a column count, rather than any other structural method.
Demo: http://jsfiddle.net/bgWaw/
var articles = $('.wrapper article');
var columns = 2;
var cIndex = 0;
while (cIndex < articles.size()) {
var cMaxHeight = 0;
for (cColumn = 0; cColumn < columns; cColumn++) {
var cArticle = articles.eq(cIndex + cColumn);
if (cArticle.size() > 0) {
cMaxHeight = (cArticle.height() > cMaxHeight ? cArticle.height() : cMaxHeight);
}
}
articles.slice(cIndex, cIndex + columns).height(cMaxHeight);
cIndex += columns;
}
This could easily be turned in to a plugin if needed. Just a matter of making it a function in the $.fn object and using this rather than articles and passing in columns as a parameter to the function.
jQuery Plugin Version Demo: http://jsfiddle.net/bgWaw/2/
$.fn.maxSliceHeight = function(columns) {
var cIndex = 0;
while (cIndex < this.size()) {
var cMaxHeight = 0;
for (cColumn = 0; cColumn < columns; cColumn++) {
var cElem = this.eq(cIndex + cColumn);
if (cElem.size() > 0) {
cMaxHeight = (cElem.height() > cMaxHeight ? cElem.height() : cMaxHeight);
}
}
this.slice(cIndex, cIndex + columns).height(cMaxHeight);
cIndex += columns;
}
return this;
}
Example call:
$('.wrapper article').maxSliceHeight(2);
Contrary to my comment here is another method you can use:
Turn that markup into rows:
<div class="row">
<article>A</article>
<article>B</article>
</div>
<div class="row">
<article>C</article>
<article>D</article>
</div>
<div class="row">
<article>E</article>
<article>F</article>
</div>
Float the <article> elements again, but make sure each .row div has clear: both in the CSS.
That way every "row" will be the same height has the tallest content within it.
Separating by divs is a good solution if you really want always two columns, but I assume that you might want to change to three columns if the browser is wide enough. Have you looked at isotope? http://isotope.metafizzy.co/
I have found a solution for this without changing the markup: http://css-tricks.com/equal-height-blocks-in-rows/