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;
}
Related
Depending on where I put the </a> tag, the boxes look different. Here is what it looks like at the moment.
JSFiddle
<a href="#"> <div class="box">
<header><h2>Responsive C3</h2></header>
<div id="chartA">
</div>
</div></a>
How can I keep the first box as a clickable object while the second box is aligned side by side? With out the <a></a> tags then they align just fine.
the class box allow your blocks to float:left and therefore be side-by-side.
If you apply class="box" to the a tag instead of the div tag it will work as you expect.
<a href="#" class="box">
<div>
<header>
<h2>Responsive C3</h2>
</header>
<div id="chartA">
</div>
</div>
</a>
Here is a good article to understand more about float : https://css-tricks.com/all-about-floats/ and another about display: https://css-tricks.com/almanac/properties/d/display/
I have 2 buttons :
Download
Edit
I want to place both of them in same line, side by side, but not too far away from each other either.
As of right now this what I have
I try to give them class pull-left and pull-right
This what they come out to be
They're too far away. :(
I want them to look something like this.
Possible, with the vertical line in the middle.
I am not sure how to do that.
Here is my HTML Code
<p>
<span>
<a class="btn-1" href="/marketing_materials/{{$marketing_material->id}}/download/media_path">
Download
</a>
</span>
</p>
<p>
<span>
<a class="btn-2" href="{{ URL::to('marketing_materials/'.$marketing_material->id.'/edit') }}">
Edit
</a>
</span>
</p>
What should I do to get close to what I want ?
You had 2 <p> tags, combine them into 1.
Place them in the same <p> tag so that they will be in same line as you wanted.
Add style="text-align:center;" into your <p> tag.
Add a bunch of between them to maintain the spaces
For your vertical pipeline, just do this |
Try this
<p style="text-align:center;">
<span>
<a class="btn-1 pull" href="/marketing_materials/{{$marketing_material->id}}/download/media_path">
Download
</a>
</span>
<span>
<a class="btn-2" href="{{ URL::to('marketing_materials/'.$marketing_material->id.'/edit') }}">
Edit
</a>
</span>
</p>
Give a class on your <p> Example: <p class="some-name">
Put .some-name { display: inline-block; } in your stylesheet.
I would also suggest using better semantics for creating buttons.
Wrap the p tags with a container, and then you can add display: inline-block and margin. JSFIDDLE
<div class="buttons">
<p>
<span>
<a class="btn-1 pull" href="#">
Download
</a>
</span>
</p>
<p>
<span>
<a class="btn-2" href="#">
Edit
</a>
</span>
</p>
</div>
CSS
div.buttons p {display: inline-block;}
div.buttons p:last-child {margin-left: 20px;}
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/
Basically I'm trying to add padding to a profile image and align it as shown below in my bootstrap page.
Here's how it looks as of current:
And here's how I want it to look:
(notice that the username is on top with the profile image and the comment text is below but aligned alongside with the profile image)
Here's the HTML: (I'm kind of new with Bootstrap)
<div class="row">
<div class="col-md-12">
<img src="~/Images/avatar.png" class="profile-picture" />
<label>Username - 1 month ago</label>
<p>
This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment.
</p>
</div>
</div>
Here's my CSS that adds a bit of padding to the profile image:
.profile-picture
{
padding-left: 10px;
padding-right: 10px;
}
Based on the Bootstrap3 documentation, use of the media class should work.
<div class="row">
<div class="col-md-12 media">
<img src="~/Images/avatar.png" class="media-object profile-picture" />
<div class="media-body>
<label class="media-heading">Username - 1 month ago</label>
This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment.
</div>
</div>
</div>
More documentation on this here: http://getbootstrap.com/components/#media
You might want to consider giving some css property to the p tag.
http://jsfiddle.net/hXaRG/2/`">Fiddle
You have to float the image and the content to achieve the desired result. You have to modify a bit the html code like this :
<div class="row">
<div class="col-md-12">
<img src="~/Images/avatar.png" class="profile-picture" />
<div class="comment">
<label>Username - 1 month ago</label>
<p>
This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment.
</p>
</div>
</div>
</div>
and the css
.profile-picture, .comment{float:left;}
.comment label {display: block;}
I haven't put the margin's / padding's that you want.
Try this CSS:
.row {
position:relative;
background: #999;
}
img {
position:absolute;
left:0;
top:0;
}
.col-md-12 {
padding-left:80px;
}
jsFiddle example
(Note the background color on .row is only for visualization purposes)
Try this:
.profile-picture{float:left;margin-right:5px;}
.row p {margin-top:0;margin-left:52px;}
.row{width:500px;background:gray;}
this is the result final :
https://docs.google.com/file/d/0B3q2DOPnNwNhM29SYXhEMXhlc3c/edit?usp=sharing
I have a rather colorful background, and to make the text legible, it's set on a semi-transparent background. H1, P both show the background the full width of the divs. spans and as however only show the background for where they are. This latter behavior is what I would prefer, definitely for the Headings, but also possibly for the paragraphs as well.
|-------------width of div-----------|
|{Header:BG fills whole div_________}|
| {LINK} |
|{Paragraph:Same behavior as header_}|
| {SPAN} |
|------------------------------------|
I'm using CSS strict HTML for preference.
The difference between <h1>,<p>,<span> and <a> is that the first two are "display:block" by default, while last two are "display:inline".
Adding "display:block" property to your <a> and <span> should do it.
Response to comment:
I'll add a visual examle:
<div style="width:300px; border:1px solid #444">
<div style="background:#999">This is a div</div>
<a style="background:#999">This is a link</a>
<h1 style="background:#999">This is a header</h1>
<span style="background:#999">This is a span</span>
</div>
returns this
while
<div style="width:300px; border:1px solid #444">
<div style="background:#999">This is a div</div>
<a style="background:#999; display:block">This is a link</a>
<h1 style="background:#999">This is a header</h1>
<span style="background:#999; display:block">This is a span</span>
</div>
returns this
You are trying to achieve that, right?