I am trying to transcribe some of Prof. Dr. Edsger Dijkstra's EWD's, but running into a little problem. In his writing he likes to place comments such as 'End of Proof' at the end of the paragraph, right aligned when there is room, or on the next line otherwise. I would like to recreate this formatting, but seem unable to do so. I'd really prefer a solution using only CSS, but if that proves impossible, JavaScript is also allowed.
Please see http://www.cs.utexas.edu/users/EWD/ewd10xx/EWD1001.PDF on page number 0 (2nd page of PDF) the comment "End of Legenda" and page number 3 (5th page of PDF) the comment "End of Remark".
I've tried using the display: block / float: right combo which #starx answered with. However, as it is a float, it does not move the rest of the text down. Looking through the source document, the formatting seems ad-hoc, but it seems Dijkstra liked to keep it on the same line if possible, or move it to the next, right aligned, if not.
Searched through the different CSS specs, but I can't as yet fathom a way to accomplish this.
Assuming, you are giving class block to the element.
.block {
display: block;
width: 200px; /* minimum needed to be inline */
float: right;
}
My suggestion would be to use the :after pseudo-element to add the caption at the end of the appropriate paragraph:
.remark:after {
content: 'End of Remark';
color: red;
display: inline-block;
float: right;
}
Example: http://dabblet.com/gist/2406457
If this (End of sth) text must be on its own line, then make it a block (it could be already a block if it's a paragraph or an HTML5 footer element but then it doesn't change anything ;) ) and align text to the right with text-align: right;.
If text isn't exactly 100% right, then you can play with its width or with padding-right:
.end_of {
display: block;
text-align: right;
padding-right: 20px;
}
EDIT: by default, an element rendered as a block is 100% wide. No float, no need to either clear next element from any float or clear block element from previous floats.
If you float the extra content to the right, you will also need to clear the float, otherwise the extra content will conflict with the rest of the text.
So here's my solution. Tested on all major browsers.
.theEnd:after {
display:block;
content:'End of Latin';
text-align:right;
white-space:nowrap;
padding-left:1em;
float:right;
}
.theEnd + * {clear:right}
See jsFiddle.
Related
I know that a newline in html between elements is treated as space, but I think this is pretty scary when you try to play with responsive layout.
For example, here we have the expected and correct behaviour, but to obtain it I had to remove the newline in the html between the element:
https://jsfiddle.net/xew2szfu/1/
<div class="recommend-friend__dialog">You should see only me</div><div class="recommend-friend__dialog recommend-friend__dialog--variant">... but NOT ME!</div>
Here I wrote the html with a newline, as you normally do, and everything got broken:
https://jsfiddle.net/rL1fqwkc/1/
<div class="recommend-friend__dialog">You should see only me</div>
<div class="recommend-friend__dialog recommend-friend__dialog--variant">... but NOT ME!</div>
I know I can fix the problem with a float: left, but I wonder if I missed something, the default behaviour sounds really incorrect to me.
It is happening because inline-block puts a space in between elements, and with the space the second div moves down, since it can't fit on the line any more.
There are many ways to combat this. As you said, float is one of them. This excellent CSS Tricks article is a great help, but I'll go over the ones you probably want:
Negative margin:
nav a {
display: inline-block;
margin-right: -4px;
}
Very simple, you can have a nice html format, but moves the element over to hide the space.
Set the font-size to 0:
.recommend-friend__slider{
font-size: 0;
}
.recommend-friend__dialog {
font-size: 12pt;
}
Or, my personal favorite, skip the inline block and use flexbox instead.
I need to display text vertically in a rowspan within a table. The technique I'm using via CSS seems to "work", but the width of the <p> element can't be changed or else the text wraps to the next line and its not pretty.
Take a look at this jsfiddle I put together in order to replicate my issue.
http://jsfiddle.net/wn4ofcwx/
Any alternatives here? Or possible a fix to my current CSS.
Note: Probably doesn't matter but I'm using the INK Framework (similar
to bootstrap).
Actually I figured it out, it was as simple as using white-space: nowrap;
Which I completely forgot about!
http://jsfiddle.net/wn4ofcwx/7/
The text doesn't wrap because we are explicitly stating nowrap, you can re size the window to see how it keeps its position, now I can apply a width of just 10px to take away all that excessive white space in the rowspan.
Check this out: http://jsfiddle.net/wn4ofcwx/4/
What I added to the class .rotate-vertical:
display: block;
margin: auto auto;
height: 17px;
And I took out : Width: 50px;
Cheers
Actually you can keep out the : display: block;
The p element is already a display: block by default and you didn't overwrite it anywhere.
Here is a demonstration: http://jsbin.com/egezog/edit#html,live
Sorry if this is newby, but I can't figure this out. I have a title, and I need (in decoration purposes) a line going from its edge to the right of the page (not an actual page, but a wrapper, but I have overflow hidden anyway). The wrapper is fixed in width, but the titles vary in length. I can't use absolute position, and I prefer not to use tables. And if we get this sorted out...
Here: http://jsbin.com/ibeciv/edit#html,live. So in the end, I actually prefer this all right aligned. You may ask, why do I need advice if it's there, implemented? Well, as you may see, the title is in two rows, which is unacceptable in my situation, and also, I prefer not to use tables.
I guess I can use float:right, to right align, but well, it depends on the implementation that I hope you'll advise to me. Thanks!
PS: jsfiddle is down for me right now, so here I used jsbin.
http://jsbin.com/ujiquq/edit#html,live
Will work in IE8 and all modern browsers. The background of the parent element can be anything. The line will still be vertically centered no matter what font-size is chosen.
HTML:
<h3><span>The title</span></h3>
CSS:
h3:after {
content: '\00200B';
background: url(data:image/gif;base64,R0lGODlhAgABAIAAAP8AAAAAACH5BAAAAAAALAAAAAACAAEAAAICBAoAOw==) left center repeat-x;
display: block;
overflow: hidden;
}
h3 > span {
float: right;
padding-left: 5px;
}
Here is a solution without using tables:
http://jsbin.com/ujawej/5/edit
And here is the one with tables (from my comment):
http://jsbin.com/osovev/2
Write like this:
HTML
<div class="title"><span>Title Here</span></div>
CSS
.title {text-align:right;border-bottom:1px solid red;}
span{background:#fff;float:right;margin-top:-9px;}
Check this http://jsbin.com/ibeciv/3/edit
UPDATED
Check this http://jsbin.com/ibeciv/4/edit
I have attached an example of what I am trying to achieve using html/css (if you cannot see the image it is: first name and surname, then second line is job description). I would like the all the text (both lines) to be forced justified (left and right) within a div but I am not sure if it is possible. I have tried a few things with no success. I would rather not use an image, so any idea would be greatly appreciated.
Browsers generally do a crap job at full justification. If you are a design company using this to promote yourself, I'd avoid it.
Also, it only works on paragraphs of text, not single lines.
You can try tweaking the CSS letter spacing to get the effect you're looking for.
Use text-align-last: justify:
.justified {
text-align: justify;
text-align-last: justify;
}
.justified:after {
content: ".";
display: inline-block;
width: 100%;
height: 0;
visibility: hidden;
}
http://jsfiddle.net/gilly3/En4wt/
source
Since you only want to style the title, you can create specific styles for it. Try combining font-size with letter-spacing until you get the effect you want to achieve.
Text align: justified is for a different purpose, it's meant for paragraphs (or long blocks of text). If you don't have enough text to reach the end of the line, it doesn't work.
On a website i'd like to show products in the following structure:
[IMAGE]
[PRODUCT TITLE]
[PRODUCT ID]
[DETAIL TEXT]
[FEATURE LIST]
[PRICE]
Resulting in a product display such as:
Now, the thing is that there are multiple products on display, just like this one, but sometimes they are aligned next to one another.
The problem is that i would like to make the price appear at the same position (vertical wise) in all blocks. Of course i see only one solution at first - overflow:hidden on the detail text / feature listing. But then i'd end up having content cut off, right?
Another problem is that there should also be a more>> button (expander) that appears if the UL/LI-listing is longer than 4 entries. Just like this:
I thought this through quite often, but i seem to find no proper solution. For one i will never know if an LI will be multiline, as the content might be longer or shorter - and i cannot calculalate this serverside, as the font width/height might vary.
I'd appreciate any constructive input here.
Thank You!
As long as you have a fixed width you could use inline-block mixed with negative margins : http://jsfiddle.net/bymaK/11/
The sad thing is that it works in Chrome, Opera and IE 9 but completely break Firefox as it's management of with:0 and negative margin seem buggy (Added issue #709014 to Bugzilla following this post). The solution is to detect this browser and set the width to 1px for it...
It create a small bug as when you resize there is 1 pixel where the price warp to the next line but not the block but it's a lot less visible that the result otherwise :
<div id="container">
<p>texttexttext</p>
<ul>
<li>texttexttext</li>
<li>texttexttext</li>
<li>texttexttext<Update/li>
<li>texttexttext</li>
<li>more ยป</li>
<li class="more">more text</li>
<li class="more">Even more text.</li>
</ul>
</div><p class="price">$3993.99</p>
.price
{
height:40px;
display:inline-block;
margin-left: -200px;
margin-right: 200px;
vertical-align: bottom;
font-weight: bold;
}
#container
{
display: inline-block;
margin-right:10px;
position:relative;
width:200px;
padding-bottom:40px;
vertical-align: top;
}
ul
{
list-style-type:disc;
margin-left:30px
}
li.more
{
display: none;
}
$(function(){
$('a.more').click(function(){
$(this).parent('li').hide().nextAll('li').show(200);
});
});
Maybe have the containing div set to position: relative, and then price set to position: absolute; bottom:0? That way, no matter how much text is in the box, the price is always at 0 (or whatever number you set).
Here's a rudimentary example: http://jsfiddle.net/PFwJ6/1/
You might want to use javascript to find the height and display a "click to view more link".
First, create a div over the price div that would contain your "click to see more" link and set it to display:none. Then you can use offsetHeight in javascript to find the height of the div. If the height is over what is acceptable then you would set the div to display:block. That means you can set all of your containing divs to the same height with the price div pinned to the bottom using positioning.
I'm sorry I don't have concrete code for you. I might be able to put some together shortly. But this should point you in the right direction.