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>
Related
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.
I know the following HTML is not valid because the div inside the h2 is a block element:
HTML
<h2>
<div>November 23 2015</div>
<div>This Is My First Blog Post</div>
</h2>
I want to know what the best way to get the date and title of this example blog post heading to display on separate lines with valid HTML. I've done the following which I understand is technically valid:
HTML
<h2>
<span>November 23 2015</span>
<span>This Is My First Blog Post</span>
</h2>
CSS
span { display: block; }
Maybe I'm wrong in thinking the date of this example blog post should be considered part of the heading of the post, and I should just do something like this:
HTML
<p>November 23 2015</p>
<h2>This Is My First Blog Post</h2>
But assuming there is some case where you'd have a legitimate need for a multi line heading, I'm wondering what the best way to do it is.
EDIT
I should add that I know I can also just add a <br> after the first <span>, but the issue with that approach is losing control over the vertical spacing between the lines because adjusting the top/bottom margins/padding doesn't work for inline elements.
This is a perfect use-case for the HTML5 header element. It would be semantically correct to use two separate HTML tags - one for the title, and one for the date - as they are two separate entities, and the header can contain them both.
<header>
<h2>This Is My First Blog Post</h2>
<span>November 23 2015</span>
</header>
If you want a multi-line heading, simply for design purposes, then it would be semantically correct to use CSS to achieve it.
h2 {
width: 230px;
text-align: justify;
}
<h2>This is a Very Long Title and the Desired Look is to Have it Take Up Less Width</h2>
Actually the <br> tag is the simplest way, but in most cases it's semantically incorrect.
Inserting a br tag at the point of the desired linebreak is a straightforward approach, and you can retain control over the vertical spacing of the lines by setting a line-height property on the h2 element.
<div class="post-title">
<span class="date">November 23 2015</span>
<h2 class="heading">This Is My First Blog Post</h2>
</div>
:) hope it helps! Good Luck!
Using BEM CSS class syntax, lets say I have an element with the following class:
...
<div class="purchase__module2__heading__tooltip">...</div>
...
Now lets say there is an event or something where this "tooltip" becomes active or visible. What is the proper way to express this with BEM? Do I replace the current class so now it becomes:
...
<div class="purchase__module2__heading__tooltip--active">...</div>
...
or do I add it
...
<div class="purchase__module2__heading__tooltip purchase__module2__heading__tooltip--active">...</div>
...
Or can I just do something simple like this:
...
<div class="purchase__module2__heading__tooltip active">...</div>
...
I think the answer is #2, but it seems very drawn out. #3 is nice and simple but I can't tell if this follows proper BEM guidelines or not.
If you're modifying a block or element you must include the base class as well.
For example
<div class="block">
<div class="block__element">...</div>
</div>
could have the block modified as:
<div class="block block--modifier">
<div class="block__element block--modifier__element">...</div>
</div>
or the element modified as:
<div class="block">
<div class="block__element block__element--modifier">...</div>
</div>
In either case you start needing to use multiple classes.
Looking over your example of:
<div class="purchase__module2__heading__tooltip">
It's clear that you're nesting too deeply, preventing yourself from being able to reuse the majority of your code.
Given the names you're using, I'd guess that what you actually have is:
a purchase module (.purchase-module)
with a heading (.purchase-module__heading)
a tooltip (.tooltip)
The markup could look something like:
<article class="purchase-module">
<h1 class="purchase-module__heading">
...heading text...
<span class="tooltip">...</span>
</h1>
</article>
Note how making the tooltip active now just requires changing a short class:
<span class="tooltip tooltip--active">...</span>
That's the ideal with BEM.
You are right and the answer is #2.
Here's why:
https://en.bem.info/methodology/faq/#why-include-the-block-name-in-names-of-modifier-and-element
https://en.bem.info/methodology/faq/#how-do-i-make-global-modifiers-for-blocks
BTW, you shouldn't keep DOM structure in naming. And here's why: https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2
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?