Step 43
After your last .divider element, create a p element and give it the text Total Fat 8g 10%. Wrap Total Fat in a span element with the class set to bold. Wrap 10% in another span element with the class set to bold. Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment.
<div class="daily-value small-text">
<p class="bold right">% Daily Value *</p>
<div class="divider">
</div>
<p><span class="bold">Total Fat</span>8g<span class="bold right">10%</span></p>
</div>
Test
Sorry, your code does not pass. Keep trying.
Hint
Your p element should have three span elements.
Cholesterol0mg0%
That's all you need.
enter image description here
<div class="daily-value small-text">
<p class="bold right">% Daily Value *</p>
<div class="divider"></div>
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>`enter code here`
</div>
<div class="daily-value small-text">
<p class="bold right">% Daily Value *</p>
<div class="divider"></div>
<p><span><span class="bold">Total Fat</span><span> 8g</span><span class="bold">10%</span></p>
</div>
Related
I'm using twitter-bootstrap grid system and you can see the problem right here.
The text which is supposed to be in the center keeps outgoing from the center to right side as you can see...
<div class="row mt-2">
<div class="col-3"></div>
<div class="col-6">
<div class="text-left">
<p class="d-0">
<span id="issuer_msg" style="white-space: pre-line">{{msg.message}}</span>
<br>
</p>
<div class="text-center">
<small class="text-primary font-weight-normal">{{msg.sent_time}}</small>
</div>
</div>
</div>
</div>
How can I fix the problem?
The problem is from your inline styles where you used "white-space:pre-line"
Try using "white-space:pre-wrap" instead
I think the problem is coming from your small tags. Wrap paragraph around it.
I want to put an icon next to two paragraphs in a way that the icon is exactly at the center (vertically) on the left hand side of the two paragraphs. This is what I want:
This is what I have:
This is my code:
<div class="row">
<div class="col-sm-12"> <span>
Promo Code
</span>
<icon type="Success filled"></icon>
<p class="text-success">PlayerRegistrationPromotion Applied</p>
<p>
$ in credits available</p>
</div>
</div>
P.S:
Please note that the spelling and sentences are dummy data and don't matter. The styling here is important. So what's the best way to get the wanted result?
Is this what you are after?
https://codepen.io/polinq/pen/abzBYoy
Clarification: display: flex on inner will group the elements in two columns.By default, flex-direction will be row so you will have these element in one row.
I also added another div (inner-two) so it separates the text 'PlayerRegistrationPromotion Applied' and the text about the credit. If you were to remove it the text will be next to each other, not in separate rows.
I hope it is all clear!
<div class="row">
<div class="col-sm-12"> <span>
Promo Code
</span>
<div class="inner">
<icon type="Success filled"><img src="http://placekitten.com/60/90" alt=""></icon>
<div class="inner-2">
<p class="text-success">PlayerRegistrationPromotion Applied</p>
<p>
$ in credits available</p>
</div>
</div>
</div>
</div>
.inner {
display: flex;
}
It looks like you're using Bootstrap(?). One way you could do this is by having the 'Promo Code' text on one line that spans the full width and then with the next row having the checkmark icon in a couple columns and the additional text in the remaining columns.
Something like this might get you started:
<div class="row">
<div class="col-12">Promo Code</div>
<div class="col-3 text-center"><icon type="Success filled"></icon></div>
<div class="col-9"><p class="text-success">PlayerRegistrationPromotion Applied</p><p>$ in credits available</p></div>
</div>
This is my html code:
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin:0;">
<article>
<img src="http://placehold.it/1000x500" class="img-responsive" alt="">
<div class="content">
<h3>Title</h3>
<p><i class="fa fa-calendar-o"><small> 1 June</small></i> <i class="fa fa-clock-o"><small> 11:45 PM</small></i></p>
<p>For many individuals and businesses developing a strong social media presence is a cornerstone of their digital strategy, so prioritising social media.... <font color="#88c78a">Read More</font></p>
<div class="pull-right"><i class="fa fa-eye"></i> <small> 400 Views</small></div>
<div class="pull-left" ><i class="fa fa-thumbs-up"></i> <small> 400 Likes</small></div>
</div>
</article>
</div>
<!-- End Row -->
</div>
<!-- End Container -->
</div>
My div currently looks like this:http://s13.postimg.org/fdis1mxyv/div.png
If you go through the image then you will see that there is some space from left and right green margin. I want that space to go away.
Which attribute of div will help do this thing?
The attribute in the css that makes that it writes the content of the child objects is the attribute called "padding". There is 5 types of different paddings :
padding=*X*; Makes the content to be wrote with a margin at every side
padding-top:*X*; Makes the content to be wrote with a margin from the top
padding-left:*X*; Makes the content to be wrote with a margin from the left side
padding-right:*X*; Makes the content to be wrote with a margin from the right side
padding-bottom:*X*; Makes the content to be wrtoe with a margin from the bottom
And then, you can play with these in CSS by specifying only the ones that you want (the number X is either in px or in %. e.g.: padding-top:10px;)
So for your you have to search the child parent class that contains the childs you want to be aligned to the div, and you change the value :
.parent
{
padding:*X*px;
//or padding-top, padding-left, padding-right, padding-bottom, in fonction of wich one you want
}
Here is a snippet to show you an example :
.parent_no_padding
{
padding:0px;
}
.child_no_padding
{
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
}
.parent_with_padding
{
padding:20px;
}
.child_with_padding
{
padding:20px;
}
<table border="1"><tr><td>
<!-- Only for the look -->
<div class="parent_no_padding">
<h3>Title here</h3>
<div class="child_no_padding">
<p>Content of the child</p>
Write a little sentence here to make some content (without padding)
</div>
</div>
<br/></td></tr><tr><td>
<div class="parent_with_padding">
<h3>Title here agagin</h3>
<div class="child_with_padding">
<p>Content of the child</p>
Write a second little sentence (with padding)
</div>
</div>
<br/></td></tr><tr><td>
<div class="parent_with_padding">
<h3>Title here over and over</h3>
<div class="child_no_padding">
<p>Content of the child</p>
Write a last little sentence (parent with padding but child without padding)
</div>
</div></td></tr></table>
Hope this helps ! (don't forget to check an answer if it's right, to help other people to see what works)
I have a question. This is my code
<div class="comments_item">
Post 123
<span> - </span>
Author
</div>
<div class="comments_item">
Post 456
<span> - </span>
Author
</div>
if the title of the article does not fit, it is circumcision line with an ellipsis at the end, means css. The name of the author should be fully displayed.
If the title of the article is short and placed in the unit, then the author's name should go immediately after him. DIV is adaptive!
You need to apply the css white-space rule (and possibly add a class to the first anchor tag)
white-space:nowrap;
to the first anchor: http://css-tricks.com/almanac/properties/w/whitespace/
Example html code:
<div class="comments_item">
<a class="nowrap" href="/post/123">Post 123</a>
<span> - </span>
Author
</div>
<div class="comments_item">
<a class="nowrap" href="/post/456">Post 456</a>
<span> - </span>
Author
</div>
Example css:
.nowrap{
white-space:nowrap;
}
In creating a sidebar with an outline, my goal is to have a small left column and a large right column wrapped in a styled link that the user can click in order to access the assignment document.
This works as far as wrapping all the text, but there aren't any columns, just the data appearing centered over the document name:
<a class="assignment" ng-href="#/course/{{state.course.id}}/lesson/{{$parent.$index}}? page={{$index}}">
<div class="text-center assignment-due">
<p>
{{page.due_date | todayDate: 'EEE'}}
</p>
<small>
{{page.due_date | date:'MMM dd'}}
</small>
</div>
<div>
<h4 class="assignment-name">
<b>Assignments</b>
{{page.name}}
</h4>
</div>
</a>
However, the following causes the box representing the styled link to appear some distance above the text and date, on top of other items (even though the columns show up correctly:
<a class="assignment" ng-href="#/course/{{state.course.id}}/lesson/{{$parent.$index}}?page={{$index}}">
<div class="col-sm-2 text-center assignment-due">
<p>
{{page.due_date | todayDate: 'EEE'}}
</p>
<small>
{{page.due_date | date:'MMM dd'}}
</small>
</div>
<div class="col-sm-10">
<h4 class="assignment-name">
<b>Assignments</b>
{{page.name}}
</h4>
</div>
</a>
I have tried moving the link around, adding extra tags, etc., but as long as the col-sm-X tags are there, the link doesn't wrap the text.
Any ideas other than abandoning Twitter Bootstrap in favor of some other way to get columns?
Thanks!
Update: With both assignment and discussion (defined identically to assignments) objects in the outline, this is what it looks like:
Update #2: This is working for me: http://jsfiddle.net/LVdBv/11/
According to html standards, <a> is an inline-level tag and you cannot put block-level tags like div or ul inside it. By skipping these rules, your code will be invalid and you may face problems in some browsers.
I think I managed to fix your problem by changing your HTML code and using css to style elemetns:
<div class="row">
<a class="assignment" ng-href="#/course/{{state.course.id}}/lesson/{{$parent.$index}}?page={{$index}}">
<span class="col-sm-10 col-md-10 lft">
<span class="assignment-name">
<b>Assignments</b>
"Hey, Hey Baby"
</span>
</span>
<span class="col-sm-2 col-md-2 text-center assignment-due rgt">
<span class="day">
Tue
</span>
<small class="date">
Jan 15
</small>
</span>
</a>
</div>
and CSS:
a.assignment { display: block; }
a.assignment > span { display: inlin-block; }
a.assignment > span span { display: inline-block; }
.day { display: block; }
.assignment-name b { display: block; }
fiddle: http://jsfiddle.net/LVdBv/7/
fiddle preview: http://jsfiddle.net/LVdBv/6/embedded/result/