I am new to HTML, CSS and Javascript. I am learning things. WHile learning, I came to a problem how to print only a textarea from HTMl while printing using CSS only.
#media print {
* { /* the asterix denotes every element */
/* belt and braces */
display:none;
visibility:hidden;
height:0;
overflow:hidden;
}
textarea {
display:block;
visibility:visible;
height:inherit;
overflow:visible;
}
}
Related
Based on another thread I have here: JQueryUI Accordion: Headers and an inline block for arranging image/text
I have the CSS below, which works fine for one accordion, however when I want to use multiple accordions, which I simply name #accordion2 etc. Is there a quicker way to assign those to this CSS without having to copy/paste it multiple times for each accordion?
I tried:
#accordion #accordion2 .foobar {
etc. but apparently that's not it.
Apologies for such a simple question!
#accordion .foobar {
margin:0px;
padding:0px;
}
#accordion .foobar .foo {
display:inline-block;
width:180px;
height:125px;
vertical-align:top;
margin-right:10px;
}
#accordion .foobar .bar {
display:inline-block;
width:290px; /* enlarge this value, if you want text all on one line */
}
replace:
#accordion #accordion2 .foobar {
with:
#accordion, #accordion2, .foobar {
I'm chucking together a quick splash page for users visiting my website in IE8 or below. I'm using Modernizr's .lt-IE9 class to target the document, then using this CSS (with the help of SASS) to hide my main content and show an 'IE-Warning'.
.lt-ie9 {
body {
background:none;
}
.container {
display:none;
}
footer {
display:none;
}
.ie-warning {
display:block;
text-align:center;
}
}
Everything is working except for the display:none; on the footer element, which is of course a HTML5 element. I'm at a loss as to why it won't hide, it's not showing in the inspector or being overwritten by anything else.
I have a CSS like below,
#media screen {
.page{}
}
#media print {
.page {}
}
body
{
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}
select
{
font-size : 24pt; font-family: 'MS UI Gothic' ;
}
I want to use the same CSS but only the values inside the body should be changed. The values are
body
{
background-color:#ffffe0;
margin-left:5px;
margin-top:0px;
margin-bottom:0px;
}
I tried adding a new class like this. Is this right ? Or how we can use two different body for different classes. Please anybody tell me.
I tried like this
#media screen {
.page{}
}
#media print {
.page {}
}
body
{
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}
select
{
font-size : 24pt; font-family: 'MS UI Gothic' ;
}
#media screen2 {
.page2{}
}
#media print2 {
.page2 {}
}
body
{
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}
select
{
font-size : 24pt; font-family: 'MS UI Gothic' ;
}
But every time it is taking only the first body only.
As far as the body selectors, they both apply to the same element, so only one can be used. If you want to change the style of body, change the existing selector's properties. If you want to switch between the two based on some logic, give the <body> element an ID or class and add that to the selectors so you can choose which one will apply.
ALso, screen2 and print2 aren't valid media selectors.
Ok, here is the first bit.
As #Adrian said, you can only have one body element for a page.
Secondly, #media and #print corresponds to normal screens (such as desktop, laptop, and such) and prints (for examples, when you click on the print button) respectively.
So, what you need to do is simple. Either put the body tag outside all the other media queries.
body {
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}
#media screen {
.page{}
rest of your styles and classes...
}
#media print {
body {
background-color:#ffffe0;
margin-left:5px;
margin-top:0px;
margin-bottom:0px;
}
.page {}
rest of your styles and classes...
}
and so on...
or
do this...
#media screen {
body {
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}
.page{}
}
#media print {
body {
background-color:#ffffe0;
margin-left:5px;
margin-top:0px;
margin-bottom:0px;
}
.page {}
}
However, you should note that the print type css will only visible while you take a print out. It will not be visible on the main site display.
I'm having an CSS problem, i need to achieve this
article div#comments-wrapper ul.sub-comment:before {
width:1px;
height:67px;
background-color:#e4e4e4;
position:absolute;
margin-left:-595px;
margin-top:-36px;
content:'';
}
article div#comments-wrapper ul.sub-comment:nth-child(1):before {
height:37px;
margin-top:-6px;
}
but i can't put two pseudo elements like that, and i've tested it (doesn't work),
also tried some other ways but didn't manage to figure it out.
:nth-child() doesn't filter by classes or anything. In your code, your first ul.sub-comment isn't the very first child in #comments-wrapper, so it doesn't work.
Instead, use this selector technique and invert your height and margin-top styles as follows:
article div#comments-wrapper ul.sub-comment:before {
width:1px;
height:37px; /* was 67px in your code */
background-color:#e4e4e4;
position:absolute;
margin-left:-595px;
margin-top:-6px; /* was -36px in your code */
content:'';
}
article div#comments-wrapper ul.sub-comment ~ ul.sub-comment:before {
height:67px; /* was 37px in your code */
margin-top:-36px; /* was -6px in your code */
}
Basically, instead of :nth-child(1) (or :first-child for that matter), use a sibling selector with another ul.sub-comment to apply the original styles to all subsequent ul.sub-comment elements after the first one.
Updated fiddle (also inverted the background-color styles so the first one remains blue)
I'm familiar with the :hover psuedo class and using it for elements as well as the typical link setup we're all used to. What I am trying to do however is create a situation where hover over one element would change properties of another. For instance if I were to hover over .block1, #block2 would become visible. I would think the .css would look like something this...
.block1:hover div#block2
{
visibility:visible;
}
but that's getting me nowhere. Thoughts? I know that I could probably use javascript to make this happen (make elements appear and disappear) but I would love to find a pure css solution to this.
The element you want to change has to be a child element of the one you are hovering over.
Example CSS:
#navButton div.text {
display:none;
}
#navButton:hover div.text {
display:block;
}
This will make the text div display if you hover over the element with id="navButton".
Otherwise, use a JQuery solution:
CSS:
#navButton div.text {
display:none;
}
.hover {
display:block;
}
Javascript:
$("#navButton").hover(
function () {
$("#navButton div.text").addClass("hover");
},
function () {
$("#navButton div.text").removeClass("hover");
}
);
Edit:
You can also do this for sibling elements in CSS if the hovered element precedes the element you want to modify. Like so:
#navButton + div.text {
display:none;
}
#navButton:hover + div.text {
display:block;
}
OR
#navButton ~ div.text {
display:none;
}
#navButton:hover ~ div.text {
display:block;
}
If that second element is a descendent of the first, then it will work.
jsFiddle.