I'm having a challenge and i'm hours away from handing in a project and totally frustrated.
In the past i've done a simple paragraph collapse, by splitting the paragraph into 2 pieces and inserting a toggle in between.
<p id="paragraph1">some text goes here </p>
<p id="toggleMe">more...</p>
<p id="paragraph2">more hidden text shows up here</p>
in the css:
#paraphgraph2{
display: none;
#togglMe:hover #paragraph2{
display: block;
}
but apparently i'm doing something wrong, because its not affecting the browser.
This is what you have:
#paraphgraph2{
display: none;
#togglMe:hover #paragraph2{
display: block;
}
<p id="paragraph1">some text goes here </p>
<p id="toggleMe">more...</p>
<p id="paragraph2">more hidden text shows up here</p>
Try the following instead:
#paragraph2{ /* Wrong id selector */
display: none;
}/* Add closing bracket */
#toggleMe:hover #paragraph2{ /* Wrong id selector */
display: block;
}
<p id="paragraph1">some text goes here </p>
<div id="toggleMe">
more...
<p id="paragraph2">more hidden text shows up here</p>
</div>
#toggleMe:hover #paragraph2{ Suggest #paragraph2 to be inside #toggleMe.
Related
So I am currently trying to edit the "line-height" of my Wordpress paragraphs. The problem is that I have multiple p tags on my page, and I'm only interested in changing the paragraphs that are located inside a div named "entry-content", which is actually the article of the page.
Here is the basic code of the php page I have:
<div class="entry-content">
<p style="text-align: center;">Paragraph 1</p>
<p style="text-align: center;">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
So my question is if there's a way to do something like that in css (so it only affects the paragraphs that are inside the div entry-content:
.entry-content {
p, li {
line-height: 30px;
}
}
Thanks for your help
Your CSS selector needs to be:
div.entry-content p {
line-height: 30px;
}
This will style all <p> elements that are descendants of a <div> element with the class name "entry-content".
A WordPresss site, where I'm attempting to hide the word 'SKU' as seen below in the html code.
Here is the html
<div class="card-body card-body">
<h3>Phase 1 Phonics Planning Week 1 Example TEST FREE</h3>
<p><small><strong>SKU:</strong> </small></p>
<p>
</p></div>
I want to use a just CSS to hide the SKU word, my effort thus far, but I'm unable to see how to target just SKU, I presume I need to use the element some how?:
CSS
.card .card-body {
display: none;
}
Unless im misunderstanding your question, you can just use:
.card-body p small strong {display:none}
If this isn't what you require please elaborate.
There are a couple of ways. One is to use
.card-body small {
display: none;
}
But, it would probably be better to create a new class just for hidden things, like this
.hide-sku {
display: none;
}
and in the html
<span class='hide-sku'>SKU:</span>
(also, you have the class card-body duplicated -- not sure if that's your intention)
If you can control classes in your html code - the easiest way is to add some helper class:
.hidden {
display: none;
}
<div class="card-body">
<h3>
Phase 1 Phonics Planning Week 1 Example TEST FREE
</h3>
<p class="hidden">
<small>
<strong>SKU:</strong>
</small>
</p>
<p>Some other content</p>
</div>
If you can't control classes and change html code - you can use :nth-of-type or :nth-child pseudoclasses:
.card-body p:nth-of-type(1) {
display: none;
}
<div class="card-body">
<h3>
Phase 1 Phonics Planning Week 1 Example TEST FREE
</h3>
<p>
<small>
<strong>SKU:</strong>
</small>
</p>
<p>Some other content</p>
</div>
I'm declaring css for hr tag like ..
hr {
height: 2px !important;
background-color: #A2B1B9;
width: 9%;
margin-left: 0px;
margin-top:auto;
}
But the width of the hr tag dosen't always need to be the same as per the text that it is supported with. Please refer to the screen shot.
In this case I can either supply differen width along with the hr tag using inline css like . But as inline css dosen't fit to the ethical standards of web development is there any other approach that I could follow to make it dynamic?
HI now try to this way
Create a class and used to this css .
it's the best option for your .
.customHr{
padding-bottom:5px;
border-bottom:solid 2px black;
display:inline-block;
vertical-align:top;
color:blue;
}
<p>Custom Text here</p>
<p><span class="customHr">Custom Text here</span></p>
<p>Custom here</p>
<p>Custom Text</p>
<p><span class="customHr">Custom</span></p>
<p>Custom Text here</p>
<p>Custom Text here</p>
Rohit Azad's answer is best, but if for "ethical" reasons you would rather use an hr, you can wrap it together with the text to get the same length.
div {
display: inline-block;
}
<div>
<span>Text here</span>
<hr>
</div>
<br>
<div>
<span>T-t-t-t-t-text here</span>
<hr>
</div>
You can use Underline instead by putting the text in tag and then custom css for that.
I would like to apply bold formatting to figure 1, figure2, ...until figure 111.
I can only change the HTML and CSS and need to do this without using JavaScript or jQuery. Is there any way besides adding <strong> in HTML?
There is ::first letter in CSS, but no ::first word. Can I use ~like %figure in CSS?
<p>Figure 3 All incidences of ...</p>
<div id="imgcontainer" style="height: auto;">
<p><img src="Images/misc/newsletters/msIssue7_monoAnti4_850x550.png" style="margin-bottom: 10px;" /></p>
<p>Figure 4 ...</p>
</div>
<div id="imgcontainer" style="height: auto;">
<p><img src="Images/misc/newsletters/msIssue7_monoAnti5_350x370.png" style="float: left; width: 450px; margin: 8px 20px 8px 0px;" /></p>
<p>Figure 5 Sequence information obtained from MS/MS analysis of capillary electrophoresis ...</p>
</div>
<p><img src="Images/misc/newsletters/msIssue7_monoAnti6_850x350.png" style="width: 850px; height: 200px; margin: 8px 8px 8px 0px;" /></p>
<p>Figure 6 Separation of ...</p>
Given that you have the ability to change the markup and CSS of your page and that you don't want to add extra elements (like <strong> etc), you could try to make use of CSS counters. Counters have very good browser support.
Using Counters, you can auto number the figures, add the text "Figure X" before the content and also style it without doing any additional changes to your markup. The big advantage of this is that you don't have to manually number them and don't even have to worry about any future changes to the order. CSS would automatically take care of it. You can also add any extra styling that you need.
Below is a sample snippet:
body {
counter-reset: figure; /* Initializes the counter to 0 */
}
p {
counter-increment: figure; /* Increment the counter everytime p tag is encountered in DOM */
}
p:before {
content: "Figure " counter(figure)" "; /* Set Figure + Counter value as content */
font-weight: bold;
color: red;
}
<p>Lorem Ipsum...</p> <!-- Counter = 1, Before Content = Figure 1 -->
<p>Lorem Ipsum...</p> <!-- Counter = 2, Before Content = Figure 2 -->
<p>Lorem Ipsum...</p> <!-- Counter = 3, Before Content = Figure 3 -->
<p>Lorem Ipsum...</p> <!-- Counter = 4, Before Content = Figure 4 -->
<p>Lorem Ipsum...</p> <!-- Counter = 5, Before Content = Figure 5 -->
If you don't want to number all <p> tags and want to number only specific <p> tags then you can give them an unique class like in the below snippet. (Note: Even though you add an extra class, the bold text is restricted to just the "Figure X" text and doesn't apply to the entire content of that <p>).
body {
counter-reset: figure;
}
p.count {
counter-increment: figure;
}
p.count:before {
content: "Figure " counter(figure)" ";
font-weight: bold;
color: red;
}
<p class='count'>Lorem Ipsum...</p>
<p>Lorem Ipsum...</p>
<p class='count'>Lorem Ipsum...</p>
<p class='count'>Lorem Ipsum...</p>
<p>Lorem Ipsum...</p>
If like the snippet provided in your question, the "Figure x" text is applicable only for the second paragraph within the div class='imgcontainer', you can still do this without adding any extra class like in the following snippet:
body {
counter-reset: figure;
}
.imgcontainer > p + p {
counter-increment: figure;
}
.imgcontainer > p + p:before {
content: "Figure " counter(figure);
padding-right: 1ch; /* More padding-right means more space between Figure x and text */
font-weight: bold;
color: red;
}
<div class='imgcontainer'>
<p>
<img src='http://placehold.it/100/100'>
</p>
<p>Some Description</p>
</div>
<div class='imgcontainer'>
<p>
<img src='http://placehold.it/100/100'>
</p>
<p>Some Description</p>
</div>
<div class='imgcontainer'>
<p>
<img src='http://placehold.it/100/100'>
</p>
<p>Some Description</p>
</div>
<div class='imgcontainer'>
<p>
<img src='http://placehold.it/100/100'>
</p>
<p>Some Description</p>
</div>
Note: 1ch means width of the "0" character in the element's font. The ch unit has lower browser support and I have used it only for example. You can use px or em or any such unit instead of ch.
though you want to change the figure1 and so on to be bold using css, as you know css only deals with decoration, while javascript deals with user action, now this can only be achived by javascript to first find out the figure word, and then adding css class to it, css has no build in Attribute to find out automaticaly and change the decoration of html inner element
you can put desired property in a class and then add the elements to that class.
Also you are using id="imgcontainer".
id's are unique in css (should be at least) when you want to give same properties to more than one element use classes instead of id's
Try putting all the figures in a div with class abc.
Now put these bold property in the that class.
here is the property for bold you need to add in your div.
font-weight: bold;
I have a custom helper which returns a html string. Which outputs the follow html code:
<div>
<div class='floatRight'>
<img height='300' src='{0}' />
</div>
<div class='clearFloat'>
<h4>{1}</h4>
<p>{2}</p>
</div>
</div>
When this is placed inside a foreach loop I want it to show the heading and paragraph text with the image inline to the right of it. If the height of the image is bigger than the heading and text then I want the next heading and text to appear below the the line of the previous image. However the result I get is a Left-Down diagonal positioning of images. I'm sure this is an easy fix but nothing seems to be working. I'm not sure if this a float problem or a div problem since the images flow into other divs. Basically I want the very outer div to expand with the greater of: the height of the image, or text so that the next div will be placed under that and not just under the text part.
For a more visual example I am looking for something will replicate this:
<table>
<tr>
<td>
<h4>Title</h4>
<p>Text Text Text Text Text </p>
</td>
<td><img width="300" height=300" /></td>
</tr>
</table>
I was trying to avoid to avoid tables but maybe floating divs are just as bad.
From your description it sounds like your problem is that you were attempting to use floats.
Solution below. Let me know if I’m misunderstanding what you’re trying to do.
/* Demo Styles
-------------------------------- */
img {
width: 300px;
height: 300px;
}
li:nth-child(1) img { background:dodgerblue }
li:nth-child(2) img { background:gold }
li:nth-child(3) img { background:red }
/* Reset Default Browser Styles
-------------------------------- */
* { margin:0; padding:0 }
li {
list-style: none;
}
/* Layout
-------------------------------- */
/* All direct children of the list element */
li > * {
display: inline-block;
vertical-align: top;
}
<li>
<div>
<h1>Your title</h1>
<p>The description of descriptions of descriptions</p>
</div>
<img>
</li>
<li>
<div>
<h1>Your title</h1>
<p>The description of descriptions of descriptions</p>
</div>
<img>
</li>
<li>
<div>
<h1>Your title</h1>
<p>The description of descriptions of descriptions</p>
</div>
<img>
</li>
Editable demo: http://jsbin.com/puveba/2