This is the CSS:
p + p {
text-indent: 1.1em;
margin-top: 0;
}
p {
font-family: 'Crimson Text', serif;
margin: 0;
}
HTML:
<p>...<p>
<p>...</p> (new paragraph)
<p><br><p>
<p></p> (new scene)
(This is WordPress' default text editor)
I'm not sure how it works (I took it form a site that I can't remember).
It produces this:
There is only one problem. The third paragraph is a new scene and it shouldn't be indented. I wonder if there is a way of fixing this with CSS? (CSS3 is OK)
EDIT:
I guess jQuery is the only way? Any suggestions of doing it with jQuery?
I would say to structure it out into scenes.
Markup:
<div class="scene">
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div class="scene">
<p>...</p>
<p>...</p>
<p>...</p>
</div>
And some CSS:
.scene p { text-indent: 1.1em; }
.scene p:first-child { text-indent: 0; }
That cleans up your markup, and enables consistency across the board. (This is also ie7/8-friendly)
It's because you have all adjacent paragraph tags. If you change your HTML to this:
<p>...<p>
<p>...</p> (new paragraph)
<br>
<p></p> (new scene)
It should work - if you want extra spacing, maybe you should wrap your break inside another div?
You should mark a change of scene using a method other than <p><br></p>, which is a paragraph containing a line break only. The following is artificial too but causes an empty line even when CSS is off:
<p>...</p>
<p>...</p>
<div> </div>
<p>...</p>
Here the third p is not preceded by a p element but a div element, so the selector p + p does not apply to it.
Agree with #Jukka K. Korpela, you should probably be using something better. I have never used word press, but if you can't change the markup, then you might want to change.
If you just need it to work for now, you can run this script and it will fix the css values.
$('br').parent('p').next('p').css('text-indent', '0em');
You just need to make sure you have the <br/> tag before your first scene.
<p><br/></p>
http://jsfiddle.net/bnMzQ/25/
Related
I am working on a website where centered text sometimes was applied using inline style and others, an external style sheet.
<p style="text-align: center;">Centered Text</p>
<p class="center">Centered Text</p>
.center {text-align: center;}
Is there a CSS selector that can target all centered text regardless of the method by which they were centered?
And please, keep in mind that the question is not whether this method for centering was done properly.
You can select it with the following line:
.center, p[style="text-align: center;"] {
color:red;
}
But it's very ugly to use
why not just define them all as a class and add as needed.
In the css you can define
.myCenteringClass {
text-align: center;
}
then anywhere in the html just do
<div class="myCenteringClass">asdfadsf</div>
<p class="myCenteringClass">dasfdsaf</p>
In a Joomla (3.6.5) article I have an image with style: float:left, with several h3 headings, each followed by some plain paragraph text.
Depending on the viewing screen width, which varies a lot, sometimes one of the h3 headings lines up at the bottom of, but still to the right of, the image and the following paragraph is underneath the image on the left. (see mockups)
What I am trying to achieve is to keep the h3 heading with the following first paragraph in the same way as MS Word's "keep with next" function.
I have no special CSS for this article and am not using ul or ol lists. There is only one column and one page, so page-break-avoid is not relevant. It is not a page-break issue.
I have tried wrapping the h3 and associated p tags in a container, but that makes no difference.
Image 1: current text wrapping
Image 2: the 'keep with next' text wrap I am wanting to achieve:
For what it's worth, the code is just:
<h3 style="margin-top: 0; line-height: 30px;">
<img src="images/image-file.jpg" alt="alt text" style="margin-right: 15px; margin-bottom: 5px; float: left;" />h3 heading
</h3>
<p>Some text<br />Some more text</p>
<h3>Another h3 heading</h3>
<p>The quick brown fox jumps over the lazy dog</p>
</h3>
<h3>Third h3 heading</h3>
<p>Last bit of text. Would like to keep previous h3 heading with this first line when wrapping around images</p>
Any suggestions gratefully received.
You are heading in the right direction by wrapping the <h3> and the associated <p> tags in a container, but rather than floating the images left, float these containers right.
It can be solved with a media query. It's not a general solution, but you can do it with an inline css something like this.
<style>
#media (max-width: "500px"){ //Change it accordingly, whenever that break between h3 and p occurs
h3.yourclass{clear: left;} //Assign a class to that h3 or select it with nth-child selector
}
</style>
I was wondering how I could apply CSS to an h2, except when it's directly followed by a paragraph. In that case, apply the CSS to the paragraph.
I've got a few sections, each with it's own title. However, sometimes it's followed by a subtitle. I'm applying a bottom margin to each title, but if there is a subtitle, there shouldn't be a margin between. In that case that bottom margin should be applied to the paragraph beneath the h2.
But.. how do I fix that?
I could give each h2 with a subtitle a class with "gotSubtitle" so I can keep them apart, but that's not the 'smooth' way to do this.
Just did it.
article h2:not(.gotsubtitle){
color: red;
}
<article>
<h2 class='gotsubtitle'>Oi</h2>
<p>Test</p>
</article>
<article>
<h2>Oi</h2>
</article>
Added the class and the :not selector. ;)
Not too smooth, but... Is what we can do with pure CSS.
Another possibility:
With jQuery...
$('article').has('p').addClass('title');
article.title h2{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
<h2>Oi</h2>
<p>Test</p>
</article>
<article>
<h2>Oi</h2>
</article>
Try this it will work:
h2.gotSubTitle{
/*apply CSS to an h2*/
}
p + h2.gotSubtitle{
/*apply CSS to an h2 which is directly followed by a paragraph*/
}
Adding class="..." to each element would sure work, but I think the easiest (and still clean) solution would be to pack both the h2 and the paragraph into a div and apply the bottom margin to the div. No condition checking and it should work just as well.
And as asked many times, there is an adjacent sibling selector, but you can't select preceding elements with it, only following ones. However, it is possible to apply the bottom margin to every h2 and then apply the same bottom margin and a negative top margin to the following paragraph element.
While to me that is everything but clean, it requires no modification of your html code.
Here's an example.
var headerTag = document.querySelectorAll("h2");
for(var i = 0; i < headerTag.length; i++){
var nextELement = headerTag[i].nextSibling.nextSibling;
if( (/P/).test(nextELement.tagName)) {
headerTag[i].classList.add("no")}
}
h2{
background:red
}
h2.no{
background: none
}
<section>
<h2>header is following</h2>
<h2>paragraph is following</h2>
<p>i am a paragraph :-)</p>
</section>
I have a simple request which CSS appears unable to deliver...
I'd like 3 DIVs side-by-side - the first and third DIVs contain a single image - the second DIV contains a line of text, an image, another line of text.
They should appear this
IMAGE1 TEXT1 IMAGE2
IMAGE2
TEXT2
With - and this is the bit I cannot make work - TEXT1, IMAGE2 and TEXT2 centered within the width of the 2nd DIV - something like this
MY TEXT
MY WIDER IMAGE
TEXT
The CENTER tag would have done this in seconds, but CSS cannot apparently do something as simple as that!?!?
p.s. in reply to a request for code - something like this for starters
<DIV>
<IMG src=image1.jpg>
</DIV>
<DIV>
<p>text 1</p>
<IMG src=image2.jpg>
<p>text 2</p>
</DIV>
<DIV>
<IMG src=image3.jpg>
</DIV>
The basic CSS would be
.DIV {
display: inline;
float: left;
}
All I need is the magic to make that centre DIV align it's contents centrally in the way the CENTER tag would have achieved in milliseconds...
and I've tried a variety of things including inline-block, margin: auto etc. -
Try something like this.
float your divs
use text-align:center for the text
wrap your images and give them margin:1em auto
HTML
<DIV>
<p><IMG src=image1.jpg></p>
</DIV>
<DIV>
<p>text 1</p>
<p><IMG src=image2.jpg></p>
<p>text 2</p>
</DIV>
<DIV>
<p><IMG src=image3.jpg></p>
</DIV>
CSS
div{
float:left;
border:1px solid black;
width:150px;
height:200px;
}
div p{
text-align:center;
}
div p img{
width:20px;
margin:1em auto;
}
Example: http://jsfiddle.net/PvgSr/
Without seeing your code it's difficult to answer but Here is a very simple example (jsfiddle) of basically what you have described.
Probably you should place <br> after your image and first text in DIV2. Then you should apply text-align: center to DIV2. These are the only things I can suggest you without seeing the code.
EDIT:
Applied text-align: center to the inner paragraph and centered the image separately, please see http://jsfiddle.net/Lapple/UAm5p/1/
I am doing a Web Software develop with HTML, Javascript and CSS. Now I have several div s, each one is a interface of a functionality. Some of them are quite same, maybe only titles are different. So my question is here: Should I change the existing div with some code, or a new div with all elements repeat there. Which is a better design. I knew there is a principle named DIY, and I want to follow it.
The best practice is to repeat your html...
<div class="module">
<h1>Title</h1>
<p>...</p>
</div>
<div class="module">
<h1>Another title</h1>
<p>...</p>
</div>
But not your css:
.module {
width: 300;
float: left;
}
.module h1 {
font-size: 18px;
}
HTML is a markup language, and as such it's meant to be repeated. In fact, it's a sign that you are modularizing right. If things start to get complex ("damn, I need to put an h2 below every h1 in every div.module!") you can look into a programming language for the web, then the DRY principle applies.