Hello i have been coding on a template and there seams to be a problem when articles from my website are being echoed,
Here is my code (Note: This code is the same twice just with a different content)
<section class="slice bg-5">
<div class="w-section inverse">
<div class="container">
<div class="row">
<div class="col-md-5" style="display:inline-block;"> <h3>IceSword</h3>
<p> Voici un news </p>
</div>
HERE IS A IMAGE -------------------------> http://i.stack.imgur.com/g5suv.jpg
in real world scenario the words not as long as you are using in demo.
i mean if the word is too much long (without space) then it will break through its container, you can apply word-break rule but its not necessary.
just try demo with some real paragraph or lorem ipsum paragraph, not with a series of single characters without space.
but if you explicitly want to break words then try this css property:
p {word-break:break-all;}
Related
I'm trying to adopt BEM CSS and have a component but I want small and large versions of it at the block level.
I'm unsure of what should be the block or what should be the modifier. Because then I would need two blocks which defeats the purpose of making a component. Now my elements are now modifiers whereas they should just be elements from either small or large.
<div class="c-sales c-sales__small p3">
<p class="c-sales__small--headlead">Limited time only</p>
<h1 class="c-sales__small--heading">FIRST 2 MONTHS <span style="color:#00ce7d;">FREE!</span></h1>
<h2 class="c-sales__small--subheading pt2">Only in September</h2>
<p class="c-sales__small--details">this is some text</p>
</div>
c-sales is clearly the block. Your elements are:
c-sales__headlead
c-sales__heading
c-sales__subheading
c-sales__details.
Now, for the modifier you have two options. The first, most inline with BEM, would be to create modifiers to all elements that are actually different from the base version, so you could end up with:
c-sales
c-sales__headlead c-sales__headlead--small
c-sales__heading c-sales__heading--small
c-sales__subheading
c-sales__details
The other option is less verbose, but BEM recommends against it: you can use nested selectors. That would technically be a theme instead of a modifier, but it achieves what you want (modify stuff at block level). Have a look at this: https://en.bem.info/methodology/css/#nested-selectors
c-sales c-sales-theme-small
c-sales__headlead
c-sales__heading
c-sales__subheading
c-sales__details
The best approach is to make a base version of the element first, and then add small or large modifiers to it:
<!-- Base version -->
<div class="c-sales p3">
<p class="c-sales__headlead">Limited time only</p>
<h1 class="c-sales__heading">FIRST 2 MONTHS <span style="color:#00ce7d;">FREE!</span></h1>
<h2 class="c-sales__subheading pt2">Only in September</h2>
<p class="c-sales__details">this is some text</p>
</div>
<!-- Small version -->
<div class="c-sales c-sales--small p3">
<p class="c-sales__headlead c-sales__headlead--small">Limited time only</p>
<h1 class="c-sales__heading c-sales__heading--small">FIRST 2 MONTHS <span style="color:#00ce7d;">FREE!</span></h1>
<h2 class="c-sales__subheading c-sales__subheading--small pt2">Only in September</h2>
<p class="c-sales__details c-sales__details--small">this is some text</p>
</div>
<!-- Large version -->
<div class="c-sales c-sales--large p3">
<p class="c-sales__headlead c-sales__headlead--large">Limited time only</p>
<h1 class="c-sales__heading c-sales__heading--large">FIRST 2 MONTHS <span style="color:#00ce7d;">FREE!</span></h1>
<h2 class="c-sales__subheading c-sales__subheading--large pt2">Only in September</h2>
<p class="c-sales__details c-sales__details--large">this is some text</p>
</div>
I can't float my image the way I want in the post editor. I need to have it sit next to several separate elements (2 different headings + a paragraph), not just one element. And I see no way to do that.
Any suggestion would be welcome.
I would do it in the text tab of the editor like this.
<img src="my image" style="float:right" />
<h3>Title</h3>
<h4>Discription</h4>
<p>paragraph text</p>
You want the <img> with the float:right property first, then the rest of headings and the paragraph
Here is a demo http://jsfiddle.net/d55psoqq/
Note: the Wordpress "alignright" property usually added when you add an image with the media manager, will do the same as the style="float:right;" if it is properly defined in the stylesheets. (I have encountered some themes were it is not defined) If "alignright" does not work you can add it to the main stylesheet like this...
.alignright {float:right;}
Update:
To get all the text to stay at the left and never flow under the image, you need to force it into a column like this...
<img src="http://placehold.it/350x200/" style="float:right" />
<div style="overflow:hidden">
<h3>Title</h3>
<h4>Discription</h4>
<p>paragraph text</p>
</div>
Demo http://jsfiddle.net/d55psoqq/3/
I am experiencing a problem that never happened before and seems really unprecedented, some text is not wrapping inside a div.
In this link is a sample of my html code:
http://jsfiddle.net/NDND2/2/
<div id="calendar_container">
<div id="events_container">
<div class="event_block">
<div class="title">
lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem
</div>
</div>
</div>
</div>
Any help??
I found this helped where my words were breaking part way through the word in a WooThemes Testimonial plugin.
.testimonials-text {
white-space: normal;
}
play with it here http://nortronics.com.au/recomendations/
<blockquote class="testimonials-text" itemprop="reviewBody">
<a href="http://www.jacobs.com/" class="avatar-link">
<img width="100" height="100" src="http://nortronics.com.au/wp-content/uploads/2015/11/SKM-100x100.jpg" class="avatar wp-post-image" alt="SKM Sinclair Knight Merz">
</a>
<p>Tim continues to provide high-level technical applications advice and support for a very challenging IP video application. He has shown he will go the extra mile to ensure all avenues are explored to identify an innovative and practical solution.<br>Tim manages to do this with a very helpful and professional attitude which is much appreciated.
</p>
</blockquote>
That's because there are no spaces in that long string so it has to break out of its container. Add word-break:break-all; to your .title rules to force a break.
#calendar_container > #events_container > .event_block > .title {
width:400px;
font-size:12px;
word-break:break-all;
}
jsFiddle example
The problem in the jsfiddle is that your dummy text is all one word. If you use your lorem ipsum given in the question, then the text wraps fine.
If you want large words to be broken mid-word and wrap around, add this to your .title css:
word-wrap: break-word;
This may help a small percentage of people still scratching their heads. Text copied from clipboard into VSCode may have an invisible hard space character preventing wrapping. Check it with HTML inspector
you can add this line: word-break:break-all; to your CSS-code
Might benefit you to be aware of another option, word-wrap: break-word;
The difference here is that words that can completely fit on 1 line will do that, vs. being forced to break simply because there is no more real estate on the line the word starts on.
See the fiddle for an illustration http://jsfiddle.net/Jqkcp/
I've put together this small little piece but I'm having problems with the renderings below IE9.
I've been going over a bunch of tutorials and have even tried a version of the "html shiv" technique, but to no avail.
I'm not sure what the problem is. I cross tested it and it works in pretty much every browser minus IE8 and below. I'm just curious if I'm going to have to rework an entire style sheet for the IE8 and less bunch or if I'm just missing something.
In IE8/IE7/IE6 the hover states for the buttons work, but it's as though all of the boundaries disappear.
http://www.brodieyazaki.com/matt_tiles
is a live working version.
Here's the HTML (I would include the CSS but it's long, but you can view it in developer tools sorry for the inconvenience).
<section id="tile">
<button id="toggle_button"></button>
<section id="tile_content">
<figure id="tile_content_figure" class="clearfix">
<img src="imgs/tile_pic.png">
<h1>
“Siri's Default Settings Leave
Your iPhone 4S Exposed”
</h1>
</figure>
<div id="tile_content_link">
<p id="from_in">
From nytimes.com in arab spring
</p>
</div>
<div id="tile_content_comment" class="clearfix">
<img src="imgs/user_img.png">
<p>
"This is the basic version of the tile"
</p>
</div>
</section>
<footer id="tile_foot">
<div id="foot_wrap" class="clearfix">
<figure class="like_view">
<img src="imgs/like.png">
<span>10</span>
</figure>
<figure class="like_view">
<img src="imgs/view.png">
<span>100</span>
</figure>
<article id="social" class="clearfix">
<button id="facebook"></button>
<button id="tumblr"></button>
<span>share</span>
</article>
</div>
</footer>
</section>
Just looking to get pointed in the right direction. I know that the CSS has features that IE8 and below won't pick up, but the head scratcher for me is that it's as though the style sheet in its entirety is broken.
please help, and thank you
< ie9 doesn't understand your html5 elements: article, footer, section, figure; offhand i'd just go ahead add html5.js and then turn them on in your css:
article,figure,section,footer{display:block}
i think that should fix what you are talking about
You have lots of duplicate id's. id's must be unique per element or a browser may ignore subsequent instances of the id. You should also declare a document encoding, among other HTML Validation errors...
http://validator.w3.org
Your site is more likely to work as expected, in all browsers, when its HTML code is fully compliant.
I have the following html structure:
<div class="decorator">
<div class="EC_MyICHP_Item">
<div class="text">
<h3><a target="_blank" title="" href="#"></a></h3>
text here text here text here text here text here text here
</div>
</div>
<div class="EC_MyICHP_Item">
<div class="text">
<h3><a target="_blank" title="" href="#"></a></h3>
text here text here text here text here text here text here
</div>
</div>
<div class="EC_MyICHP_Item">
<div class="text">
<h3><a target="_blank" title="" href="#"></a></h3>
text here text here text here text here text here text here
</div>
</div>
<div class="readmore"><a></a></div>
</div>
I am trying to select the LAST EC_MyICHP_Item, by using last-child, but in vain. (both CSS and jQuery) Could you help me?
Thanks.
You need to use :last-child at the end of the selector.
div.EC_MyICHP_Item:last-child
http://reference.sitepoint.com/css/pseudoclass-lastchild
Example: http://jsfiddle.net/jasongennaro/zrufd/
Please note: this will not work in earlier versions of IE.
EDIT
As per the comment about the last div being added and it interfering. You're right. It does cause :last-child to choke... at least in Chrome where I tested it.
If your HTML structure remains the same, that is, always three div.EC_MyICHP_Item, you could do this
.EC_MyICHP_Item:nth-child(3)
Updated Example: http://jsfiddle.net/jasongennaro/zrufd/1/
EDIT #2
unfortunately the number of EC_MyICHP_Item div's varies
In that case, I would use jQuery:
$('.EC_MyICHP_Item:last')
Further updated example: http://jsfiddle.net/zrufd/2/
.EC_MyICHP_Item:last-child should work well.
It's important to realize that E:last-child means "an E element, which is a last child", not "last child of E element".
I added the ID for merely testing purposes.
But use :last.
http://jsfiddle.net/aDbcW/1/
.EC_MyICHP_Item:last-child would only work if the div is the last child of its parent div. Since you have div.readmore as the last child of the parent, your selector wouldn't work. You need to use .EC_MyICHP_Item:last-of-type instead.
Edit: in jQuery this would translate to .EC_MyICHP_Item:last.