We are using the twitter bootstrap thumbnails.
We are adding a description underneath the same as in the bootstrap documentation.
The difference is that we don't have a size specified (the documentation uses .span4) on our thumbnails, instead the content sizes them.
This works great, except we want one difference, we don't want a long caption to extend the thumbnail, instead we want the extra caption length to be be hidden.
This would be easy if we were using fixed width's but since we are not I have no idea how to do this;
Here is a jsfiddle playground: http://jsfiddle.net/BbCQK/
I thought maybe I could just do:
.caption {
max-width: 100%;
text-overflow: ellipses;
}
But that doesn't work, it just stretches the container anyway, so how can I do this?
Got it :)
Absolute positioning to the rescue: http://jsfiddle.net/BbCQK/4/
a.thumbnail {
padding - bottom: 30px;
position: relative;
}.thumbnail.caption {
overflow: hidden;
white - space: nowrap;
position: absolute;
padding: 0;
bottom: 4px;
left: 4px;
right: 4px;
text - overflow: ellipsis;
}
Related
i wanted to make a menu using only html and css (no javascript). It should have several links next to each other and a scroll bar - a HORIZONTAL scrollbar - so one can access all links.
I can't figure out how to force these links to display next to each other, instead of making a break and displaying in another line. What I have untiol now looks like this: jsfiddle
html:
<nav>
<a>Site1</a>
<a>Site2</a>
<a>Site3</a>
...
<a>Site17</a>
<a>Site18</a>
<a>Site19</a>
</nav
css:
nav {
position: fixed;
top: 0;
left: 0;
height: 100;
background: #c00;
overflow-x: scroll;
overflow-y: hidden;
}
Edit:
The solution was to add white-space: nowrap to the css. jsfiddle
Check this out: http://jsfiddle.net/dmc56jkd/3/
white-space: nowrap;
This property prevents unwanted text wrap.
The key is to add white-space: nowrap
Here's a fork of your fiddle, using the following CSS
nav {
position: fixed;
top: 0;
left: 0;
height: 100;
background: #c00;
overflow-x: scroll;
width: 300px;
white-space: nowrap;
}
For demo purposes, I've limited the nav's width. If you wanted it to be as wide as the containing element, use width: 100% (if you don't define the width at all, the scrollbar slider may not show up)
http://jsfiddle.net/7tzo3vrh/
Here is the JSFiddle I'm trying to do: JSFiddle Example
It is responsive, and in a large width, it is exactly what I want, like this:
But in small sizes, It overlaps the another text and/or breaks the lines, like this:
and this:
And this is my css to the texts:
.giro-nome {
position: absolute;
top: 25%;
}
.giro-percentual {
position: absolute;
right: 0;
top: 25%;
font-weight: 700;
}
I wanted just to stop the text in a single line, something like this(expected, not real):
Is it possible? Probably not with absolute, like I'm doing, but I have no idea another way to do it.
Thank you advanced.
text-overflow: ellipsis; is what you're looking for.
8.2. Overflow Ellipsis: the ‘text-overflow’ property
This property specifies rendering when inline content overflows its
block container element ("the block") in its inline progression
direction that has ‘overflow’ other than ‘visible’. Text can overflow
for example when it is prevented from wrapping (e.g. due to
‘white-space:nowrap’ or a single word is too long to fit). Values have
the following meanings:
ellipsis Render an ellipsis character (U+2026) to represent clipped inline content. Implementations may substitute a more
language/script-appropriate ellipsis character, or three dots "..." if
the ellipsis character is unavailable.
However you should specify the width of the absolutely positioned element at first. Either by left/right properties, or by other approaches such as width: 90% or width: calc(100% - 80px):
EXAMPLE HERE
.giro-nome {
position: absolute;
top: 25%;
left: 0; right: 80px; /* Equal to > width: calc(100% - 80px) */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Apply the below css properties this will truncate your overflow text and append the three dots.
.giro-nome {
position: absolute;
top: 25%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I am quite new to html/css, and I spent some time writing my own website from scratch. I have understood the very basics of the thing, but many subtleties are still unclear in my mind. Currently, I am unable to achieve a specific feature on my website, and I was hoping that maybe some of you would come up with a simple solution.
Here is what my website looks like: the colors are here to make things clearer. The four blocks "converge" toward the focal point. The top left part "Research interests" is dedicated to contain short descriptions, while the top right part "PhD thesis" is dedicated to contain either large texts or pictures. From now on, I will only focus on the top right part, where my problem occurs.
Green part :
#maindisplay
{
display: inline-block;
position: relative;
text-align: left;
width: 66.6%;
height: 80.0%;
float: right;
background-color: green;
}
Red part :
#maindisplay article
{
background-color: red;
font-family: Conv_verdana, sans-serif;
display: inline-block;
position: relative;
margin-left: 1.5%;
top: 10%;
width: 70.0%;
height: 75.0%;
overflow: auto;
}
Dark gray part :
#maindisplay p
{
background-color: gray;
font-weight: normal;
font-size: 90%;
position: absolute;
bottom: -30px;
}
I get my bottom alignment for the #maindisplay paragraphs by absolute positioning them inside the relative positioned article (and therefore, the "overflow: auto;" is here totally useless). When the text is short enough, this works like a charm and the result is exactly what I want it to be. However, when the text is longer, or when the screen is smaller (typically, my laptop), I would like things to look like this : the top of the text appears first, and a scroll bar is available. When the text is scrolled to the bottom, the bottom of the scrolled text is aligned with the bottom of the top left part, as it is in the first picture. This is achieved by setting :
#maindisplay p
{
background-color: gray;
font-weight: normal;
font-size: 90%;
position: relative;
margin: 0;
padding: 0;
bottom: 0;
}
So here is my problem : I would like the first behavior when the text is short enough, and the second behavior when it is longer than the #maindisplay article div. I was hoping that this could be done in a css-only way but I have looked for quite some time and now I am unsure about this (please note that I know precisely nothing about the javascript/jquery stuff). I am not allergic to tables, but I just don't see how to use them here.
Please let me know if there is anything unclear about this, and thanks in advance for your answers !
here's a fiddle making what you need http://jsfiddle.net/7N6Gp/ or http://jsfiddle.net/7N6Gp/1/
you need 2 div's for this one
the holder div that has position: relative;
.holder {
width: 500px;
height: 500px;
position: relative;
}
and a content div that has overflow: auto and max-height
.content {
width: 500px;
max-height: 500px;
overflow: auto;
position: absolute;
bottom: 0;
left: 0;
}
with your code . you need to wrap content in a div not p . p should only contain text or inline elements . and from your pictures it looks like it contains titles and other paragraphs (block elements)
#maindisplay p change into #maindisplay div.content
Hi
On our website I have a page where there are Buy Now buttons
https://www.nutricentre.com/m-300-herbs-hands-healing.aspx
The styling that controls this is
.item .price {
color:#8c9c54;
font-size:14px;
font-weight: bold;
/*
position: absolute;
bottom: 48px;
left: 0px;
width: 150px;
*/
text-align: center;
margin-bottom: 45px;
}
.item a.blue_btn {
position: absolute;
bottom: 10px;
left: 15px;
cursor: pointer;
}
Any idea how I can get this aligned in a straight line regardless of the text above?
You don't have to change the css of the button, but from the whole item:
just add:
.item{
height: 380px;
}
Of course, you have to care about the maximum item-height: your value must not be less, or the price won't be visible anymore.
In this case, min-height would be the better alternative.
I would recommend setting a min-height: 370px; for the easiest solution.
You do not want to set a static height for this because if you have an item with a longer description it will not automatically add space but just cram everything in.
Add a static height to .item
height:375px;
The height:auto; declaration tells .item to expand as big as it needs to be to fit everything in, so the tops of the divs line up, but since they are different heights, the bottoms are staggered.
As some of my co-responders have noted, min-height is also an acceptable option, until you have an item with enough text that item expands past the min-height value, at which point they will begin to expand and stagger again.
This should point you in the right direction: http://jsfiddle.net/v9grm/
Create a grid and with the help of display: table make the columns the same height. Then place the button at the bottom of the column with position: absolute.
#header
{
position: absolute;
top: 0%;
height: 24px;
}
#body
{
position: absolute;
top: 24px;
bottom: 20%;
overflow: auto;
}
#footer
{
position: absolute;
bottom: 0px;
height: 17.2%;
min-height: 80px;
overflow: auto;
}
My problem is that when I compress the browser window, the middle element (the 'body') starts to slip into the footer's area (when 20% from the bottom becomes larger than the minimum height of the footer). The footer can be larger in height than its minimum, but it cannot be smaller.
Any good way to do this without Javascript code?
No. When an element is positioned absolutely it is removed from the flow of the document and has no knowledge of any other elements.
I have not seen a sticky-footer solution that will work with a variable height footer.
There are some examples of headers and footers on Dynamic Drive. These are pure CSS layout examples.
You should be able to achieve the same effect with a combination of these two.