I'm adding content to a predefined layout that I cannot modify but allows any HTML. I wish to align a piece of text like a floating text box but due to the h4 and p classes that I can't change it is proving difficult.
What I'd like to see is:
But it currently looks like:
The resulting HTML is currently:
<div class="element property-line"><h4 class="property-name">Foo</h4>
<p class="p property-text">
BAR <div style="line-height: 90%;";>
<i> quite a long but of text that needs to wrap</i></div>
<p></p></div>
...where my content starts at BAR and ends with the i and div end tags.
I think I may be missing a formatting trick.
<div class="element property-line">
<h4 class="property-name">Foo</h4>
<p class="p property-text">
BAR
<span style="line-height: 90%;">
<i> quite a long but of text that needs to wrap</i>
</span>
</p>
</div>
That should be more what you're after, <span> tags are suited for changing/styling text within paragraphs because <div> tags are more for structural elements.
Your original code also had an extra opening <p> on the last line.
I used MS Word to create a document as I wanted it to appear and then tripped out all the extraneous twaddle it puts in; leaving me with:
<p style="margin-left:50pt; text-indent:-50pt">
then found a workaround to mimic the <h4 class= and <p class= sections so that it all fit into one <div> instead.
Related
My button "TEST" is not in the same linke as my text. So the hyperlink does not come directly after the word "hyperlink" in my text but it adds a automatic break. And I dont understand why.
<div style="margin-top: 30px;">
<div class="col d-flex flex-column">
<h3>TITLE!</h4>
<p class="mb-3">
Just some text
<br>
Some more text
</p>
<br>
<h3>Second Title</h4>
<p class="mb-3">
Some text that will contain a hyperlink
<br>
HYPERLINK
Test
some more following text
</p>
<br>**strong text**
</div>
</div>
Your question should contain much more information (i.e. relevant code), but basically the a tag which contains the "TEST" tag needs to be an inline element to allow subsquent text to be on the same line (which it isn't, judging from the behaviour you describe).
Apply a class or ID to it and create a CSS rule for that class or ID wich contains display: inline-block.
I'm trying to select the text "Part Sun, Sun" and "Herb", "Houseplant" from the html below.
The <div class="specifics"> has more of these "row" divs and the text I'm interested in always comes after certain paragraph tags containing specific text like "Light:", and "Type:" below.
Edit: To clarify out of all the "value" divs I'm only interested in ones that have specific "names". So I want to check the text of paragraphs nested inside <div class="name"> elements and if it's what I'm interested in then select the text inside the subsequent <div class="value"> element.
<div class="specifics">
<div class="row">
<div class="name">
<p>Light:</p>
</div>
<div class="value">
<p>Part Sun, Sun</p>
</div>
</div>
<div class="row">
<div class="name">
<p>Type:</p>
</div>
<div class="value">
<p>
Herb, Houseplant
</p>
</div>
</div>
...more rows...
</div>
I've tried this (using Scrapy):
trait = response.xpath("//div[#class='specifics']")
trait.xpath(".//div[#class='row']/div[#class='name']/p[text()='Light:']/../../div[#class='value']/p/text()[normalize-space()]")
The first line is ok but the second one is returning \n \n
Apologies for poor editing originally, below is what the paragraph element actually looks like.
Second Edit: There are a bunch of empty lines and when I select just /p without text() I still get back just a bunch of \n without any of the text? Tried normalize-space as above.
<p>
Part Sun,
Sun
</p>
To select the elements you need, you can do something like this:
/div[#class='specifics']/div[#class='row']/div[#class='value']/p
Adding /text() on the end will grab the Part Sun, Sun in your first row, but because your second row has additional nested elements in it, that text won't be picked up.
Instead you can use /string() which will also extract text from children. /div[#class='specifics']/div[#class='row']/div[#class='value']/p/string()
If you also need to strip out whitespace then you can use either normalize-whitespace() or translate(input, charsToReplace, replacement).
/div[#class='specifics']/div[#class='row']/div[#class='value']/p/normalize-space(string()). Using this tool I get output of String='Part Sun, Sun' and String='Herb, Houseplant'
/div[#class='specifics']/div[#class='row']/div[#class='value']/p/translate(string(), '
', '') where
is the newline character, but you could also add others characters you need removing. source
I cannot understand why there is a break between "Hello 1" and "Logout". Can anybody see why?
<h4 class="hello">Hello, <em><?php echo $_SESSION['username'];?>!</em></h4>
Logout?
test
<div id="container">
<div class="topbar">
<p id="headline">Test</p>
<p id="headline_1">Page</p>
</div>
</div>
Headings, including h4 elements, are display: block by default so they generate line breaks before and after themselves.
You can alter that by:
Not using a heading element (the text doesn't look like it is a sub-sub-sub heading so this is probably the best approach).
Modifying the display
Floating elements
Using Flexbox
Using CSS grids
Reason is described by some people as above. One solution can be like this:
<div>
<span class="hello">
Hello, <em><?php echo $_SESSION['username'];?>!</em>
</span>
Logout?
</div>
I just started out using BEM and SMACCS for my stylesheets but have run into some trouble as far as naming deeply nested elements in the DOM. Say for instance I have a div called .main-container. Nested inside the first level of the main-container is an additional div which by convention would be named .main-container__article.
<div class="main-container>
<div class="main-container__article></div>
</div>
This is where things get confusing. Inside that article div let's say I have a header followed by a paragraph that has a nested span tags. Do I continue prepending classes with main-container__article as so?
<div class="main-container>
<div class="main-container__article>
<h1 class="main-container__article__header">Heading</h1>
<p class="main-container__article__copy">
<span class="main-container__article__copy__intro-text>Example text.</span>
</p>
</div>
</div>
How far down does the rabbit hole go when it comes to naming parent/child elements? Is there a point where you reset at the second-level element and go from there?
<div class="main-container>
<div class="article>
<h1 class="article__header">Heading</h1>
<p class="article__text">
<span class="article__text__intro-text>This is example text.</span> for a paragraph
</p>
</div>
</div>
BEM naming shouldn't resemble DOM structure because otherwise you won't be able to change markup without changes in CSS.
So for your example I'd make it like this:
<div class="main-container">
<div class="article">
<h1 class="article__header">Heading</h1>
<p class="article__copy">
<span class="article__intro-text">Example text.</span>
</p>
</div>
</div>
There's also a quite powerful thing called mixes, which gives possibility to mix different BEM entities on the same DOM node:
Heading
Example text.
So now you may apply CSS to article block and main-container__article element separately which is very useful when you need to reuse article outside main-container.
.main-container__article__copy__intro-text
definitely doesn't help the readability and maintainability of your stylesheets.
I suggest to break such giant blocks into several smaller blocks. If you do this, you can reuse your styles - in your example you couldn't use the article-block somewhere else.
I would "reset" everytime you can encapsulate a block which can potentially be used in several places in your app/website.
I am probably missing soemthing very simple, but the following is a comment posted on in my rails app and if the content is too long..then it doesnot wrap automatically withing the paragraph and overflows onto the page.
The content of the paragraph is generated by Redcloth, though this particular paragraph does not contain any textile markup and I doubt the final result has anything to do with textile..I am probably missing a very basic css property somewhere.
<div class="comment append-bottom ui-widget-content normal-pad" id="comment">
<div class="user-image right-mar-small go-left" id="user_image"><img src="/assets/images/users/14/small.jpg?1285884662" class="profile-image" alt="avatar"></div>
<div >
<p >really really long paragraph ksdjfklajdskfjsdaklfjlaksdjflkdjsafkljasdfkljasdklfjs;lafj;klajsdf;kljdsakfljsa;ldkfjldaksjfklasjdf;kljadsfkljsad;kfjsa;ldkfj;adksljf;lkadjsfk;lajsdf;lkjsad;fkjads;lkfj;ladksjf;lkasdjf;lkdjas;flkjads;lkfjs;adklfj;ladkjf;lkdajsf;klsajdf;lksjadf;lkjsad;kfjsa;ldkfj;kladsjflkdsajfkljdask;lfjkldasjflk;ajdsflkadsjflkjdflkjadslk;fj;ldksajf;lkasdjf;lkjadsfk;ljads;klfjdask;lfj;ladkjf;lasdjf;</p>
</div>
<div id="" class="prepend-top">
<span>Like </span>
</div>
</div>
The reason is that you do not have any space characters in the long word. Try the solution mentioned in the 3rd comment.
How to prevent long words from breaking my div?