Hello
I'm making a mailbox for my website and I want it to show/hide with CSS3 I know there are few tutorial etc on how to do it, but I tried to do it a bit differently. I'm getting a good result, however there is one issue. When I hover on an item the item:hover height are not changing together with the text:
styles.css:
.mailbox_item {
width: 440px;
height: 20px;
margin: 0 auto;
border-bottom: 1px solid #ccc;
overflow: hidden;
}
.mailbox_item:hover {
min-height: 100px;
overflow: visible;
display: block;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-o-transition: all 0s ease-in-out;
-ms-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
}
.mailbox_item_top {
min-height: 20px;
line-height: 13px;
}
.mailbox_item_body {
min-height: 20px;
}
item.php
<div class="mailbox_item">
<div class="mailbox_item_top">
<h2 class="titleannouncement">Test Announcement</h2>
<span class="mail_author">0</span>
</div>
<div class="mailbox_item_body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus lacinia dui at mattis. Donec vitae tellus congue leo egestas tincidunt a eget lorem. Fusce et varius velit. In sollicitudin porta arcu, vel convallis mauris varius ut. Aenean id risus a ante mattis bibendum. Sed mollis ipsum ac metus fringilla eget imperdiet urna laoreet. Quisque tincidunt, purus eu vulputate pulvinar, metus arcu malesuada ante, vitae vehicula ipsum lectus ac libero. Cras in ligula at urna tincidunt tempor. Nam sodales lectus a sem sodales congue. Suspendisse ut ultricies nunc. Aenean blandit tempor ipsum lacinia tincidunt. Mauris ut ipsum non dolor luctus volutpat. Cras quis enim at lacus placerat dictum ut et elit. Vestibulum porta varius dui, rutrum gravida orci semper sit amet. Nam ornare iaculis velit, sit amet euismod felis pulvinar et. Nam sed ipsum eget elit adipiscing tristique.</p>
</div>
<div class="newsdate">
<span class="newsdatetext">2011-04-30 06:54:05</span>
</div>
</div>
and here is what I'm getting:
Normal state - this is as intended
on :hover - the min-height value in mailbox_item:hover stays the same and doesn't get higher when the text gets bigger
on Hover
I know that I can use overflow:hidden; so the text wont overlap the other window but I wanted to show that there is more text. How can I force the min-height value to change if there is more text?
thanks in advance
You could set height:auto property on the :hover rule so that the browser correctly calculates the height when the menu item is hovered, overriding the fixed height:20px in the .mailbox_item rule. See this demo.
Or if you want to use CSS text-overflow you could have a double hover whereby you show some of the message when hovering on the menu item and then the full message when you hover over the message - see this demo.
You should consider the user experience of having lots of hover events. It is probably distracting to have an inbox like list of messages in which the message body shown and hidden when hovering over the message item.
I hope this helps.
The only way to do that will be with javascript (jquery will make it easier).
You can also try
overflow: auto;
If you want a pure css solution that will add a scrollbar when it overflows.
Related
I am trying to do continuous scrolling text using pure CSS.
Here is my HTML I am trying to scroll:
<div class="marquee">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas placerat maximus massa ut dictum. Sed eu est justo. Quisque pharetra vel tellus ac porttitor. Nunc luctus sollicitudin diam non dignissim. Phasellus mollis semper libero, nec rhoncus est tristique quis. Nulla eget pharetra nunc, sed faucibus felis. Curabitur nec posuere nisl. Quisque at vestibulum velit. Pellentesque sagittis lacus ut aliquet faucibus. Ut porta purus id mi tincidunt mollis. Integer vulputate, eros malesuada viverra rutrum, magna nisl vehicula nisi, nec pellentesque augue nunc vel felis. Sed consectetur lacinia quam et auctor. Cras nec ullamcorper orci. Vivamus id felis eu mauris tempor viverra eget in mi. Nam nibh risus, tincidunt in hendrerit quis, eleifend at dui. Aenean odio odio, eleifend vel malesuada porta, dapibus nec risus.</div>
</div>
and this my CSS I got, it works, but my problem is when the text is done, its takes away to for it to start up again....is there anyway when its done it starts from the beginning so when its at the end it looks like this:
eleifend vel malesuada porta, dapibus nec risus. Lorem ipsum
dolor sit amet, consectetur adipiscing
* {
margin:0;
padding:0;
border:0;
}
#keyframes slide {
from { left: 100%;}
to { left: -100%;}
}
#-webkit-keyframes slide {
from { left: 100%;}
to { left: -100%;}
}
#marquee {
color:red;
background:#f0f0f0;
width:100%;
height:120px;
line-height:120px;
overflow:hidden;
position:relative;
}
#text {
position:absolute;
top:0;
left:0;
width:100%;
height:120px;
font-size:30px;
animation-name: slide;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: slide;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count: infinite;
}
I don't think this is possible in a maintainable way using just CSS. The problem is that there isn't really a way to create elements that can wrap at the box level.
You effectively want an element to be able to appear in 2 places at once: once on the left side of the screen with the remaining content to be scrolled and again on the right side of the screen with the content that has already scrolled. The only CSS thing that I know that can do this is background images in the same way that graphics textures can wrap using UV repeating settings.
Considering that, the options are to use an <svg> which, which is an image, and set it as a repeating background of an element. Then, we can animate the background position to have it scroll.
The problem is that the text is not not selectable (since it's a rasterized image) and you will have to set content within the SVG in the CSS which isn't good practice.
However, as a proof of concept, you could do it. See the snippet below:
#keyframes slide {
from {
background-position-x: 0;
}
to {
background-position-x: -100%;
}
}
.container {
width: 100%;
height: 18px;
background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='300'>\
<text x='0' y='18'>hello world foo bar fizz buzz lorem ipsum</text>\
</svg>\
");
background-repeat: repeat;
background-size: auto;
animation: 5s linear infinite slide;
}
<div class="container"></div>
Here's a solution that scales well -
Detailed explanation available on my blog.
let outer = document.querySelector("#outer");
let content = outer.querySelector('#content');
repeatContent(content, outer.offsetWidth);
let el = outer.querySelector('#loop');
el.innerHTML = el.innerHTML + el.innerHTML;
function repeatContent(el, till) {
let html = el.innerHTML;
let counter = 0; // prevents infinite loop
while (el.offsetWidth < till && counter < 100) {
el.innerHTML += html;
counter += 1;
}
}
#outer {
overflow: hidden;
}
#outer div {
display: inline-block;
}
#loop {
white-space: nowrap;
animation: loop-anim 5s linear infinite;
}
#keyframes loop-anim {
0% {
margin-left: 0;
}
100% {
margin-left: -50% /* This works because of the div between "outer" and "loop" */
}
}
<div id="outer">
<!-- This div is important! It lets us specify margin-left as percentage later on. -->
<div>
<div id="loop"><div id="content">Hello, World </div></div>
</div>
</div>
A way to do this could also be to put your text on the site as a background image element. For this you could use your text element as a background images with -moz-element.
Your html code will look something like this (the classname repetition corresponds to your "text"):
<div class="repetition">
<h3 id="repeat">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas placerat maximus massa ut dictum. Sed eu est justo. Quisque pharetra vel tellus ac porttitor. Nunc luctus sollicitudin diam non dignissim. Phasellus mollis semper libero, nec rhoncus est tristique quis. Nulla eget pharetra nunc, sed faucibus felis. Curabitur nec posuere nisl. Quisque at vestibulum velit. Pellentesque sagittis lacus ut aliquet faucibus. Ut porta purus id mi tincidunt mollis. Integer vulputate, eros malesuada viverra rutrum, magna nisl vehicula nisi, nec pellentesque augue nunc vel felis. Sed consectetur lacinia quam et auctor. Cras nec ullamcorper orci. Vivamus id felis eu mauris tempor viverra eget in mi. Nam nibh risus, tincidunt in hendrerit quis, eleifend at dui. Aenean odio odio, eleifend vel malesuada porta, dapibus nec risus.</h3>
And the necessary css would be this (you can always change the styling, but the body part is the important part here):
.repetition {
height: 0px;
overflow: hidden;
}
h3 {
text-align: center;
font-weight: 300;
font-size: 50px;
}
body {
min-height: 100vh;
background-image: -moz-element(#repeat);
background-repeat: repeat-y;
background-position: center;
}
Here is a website giving a clear example as to how this could work: Background text image repetition
As you can see in the example, when setting the width of an absolute positioned pseudo element works find normally, but if it's within an element with text-align: justify set, the pseudo element seems to be the width that the parent element would be if justify were not set.
This is evident by it not happening on links outside the paragraph, or on the last line where the text is not justified.
Anyone know how to avoid this?
It appears to only happen in Firefox, not Chrome. Any ideas for a workaround?
I found this bug report on Bugzilla.
.test {
position: relative;
background: #ccc
}
.test::before {
content: '';
position: absolute;
background: red;
height: 2px;
width: 100%;
}
p {
width: 300px; margin: auto;
text-align: justify;
}
how it should look
<p>
Lorem ipsum dolor sit amet, i am text consectetur adipiscing elit. Maecenas tristique tristique sem at molestie. Maecenas eget lacus est. i am text Aenean leo eros, eleifend id blandit sit amet, feugiat sit amet velit. Quisque i am text mattis at diam et vulputate. Pellentesque vitae nisi lacinia, tempus lorem in, dapibus sem. Phasellus auctor urna risus, eu tempus enim scelerisque at. Proin at nunc quis tellus i am text ultricies faucibus quis eu risus. Donec hendrerit venenatis orci vitae aliquet. Praesent pretium sodales nisl, id commodo nisl accumsan ac. i am text </p>
I have a CSS class that is designed to reduce something to 0 width in a nice animated way. It all works apart from the content (text etc) will wrap to the new width as it animates and this looks terrible.
How can I force (in a generic way, hopefully) the containing div to maintain its contents positioning whilst animating the width to 0?
.highlightedSubSection.closed {
overflow:hidden;
width: 0%;
height: 0%; /* this is only here to stop text contents pushing height down as width hits 0 */
opacity: 0;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
You can wrap the .highlightedSubSection in an other element and apply the width animation on the wrapper. You also need to give the .highlightedSubSection a fixed width.
Here is an example (hover the text to see the animation):
.wrap p {
width:880px;
background:teal;
color:#fff;
padding:10px;
}
.wrap{
width:900px;
transition: width .5s ease-in-out;
overflow:hidden;
}
.wrap:hover{
width:0;
}
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id libero sed nulla vestibulum eleifend. Fusce mauris dui, dignissim ut sagittis ut, fringilla id nisi. Integer ex erat, fermentum ac accumsan sit amet, iaculis sed urna. Aenean pharetra maximus sapien id rhoncus. Duis vel mauris nec ligula sodales faucibus. Integer varius, erat in lobortis sollicitudin, lectus mauris elementum tortor, tincidunt elementum quam nunc sed urna. Nunc sed ante tempor, commodo eros vitae, pharetra sapien. Integer tortor tellus, elementum ac dapibus eu, gravida et libero. Maecenas convallis augue turpis, sit amet sollicitudin nunc pretium faucibus. Maecenas commodo, sem quis pretium lobortis, diam augue facilisis arcu, vitae volutpat massa turpis vitae nibh.</p>
</div>
add a div just wraping .closed and give certain height width to a wrapping div, then animate closed.... thats it..
I don't want to just place text within an image. I want the text it to begin over the bottom-center of the image and to be able to run to the right, outside of the image.
Think of the stackoverflow site image above (if the text wasn't actually part of the image).
Consider if the orange bars continued till it was over the 'K'
Here is a crude example (# represents the image).
#################
#################
#####
##### TEXT GOES HERE
#####
I hope that I was able to adequately explain.
It would be impractical to list everything that I have tried, maainly because I didn't keep track of every single thing I have tried (sfd).
<td valign="left">
<div style="float:left;">
<img src="image.png" />
</div>
<div style="float:left;vertical-align:bottom; margin-right:100px">
<asp:Label ID="Label1" runat="server" style="font-size:1.5em;" >TEXT TEXT TEXT TEXT</asp:Label>
</div>
</td>
i'm not 100% on the solution you want, but i imagine it's something like this?
http://jsfiddle.net/ujL4pwx9/1/
HTML
<div class="foo">
<img src= "http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg"/>
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
}
img{
width:300px;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
make the div containing both the img and text relative then you can make the text absolute and decide where the edge will reach. as shown in the jsfiddle above.
is this what you meant?
but personally i'd not use img and instead use a background-image
http://jsfiddle.net/9ka1fq2j/3/
HTML
<div class="foo">
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
height:300px;
background-image:url(http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg);
background-size:cover;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
When the size of the image is known, this is relatively simple: just give the text a background color (otherwise it is transparent by default) and a negative left margin of half the image's width.
span {
background: white;
margin-left: -70px;
}
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
That's it. For cosmetic purposes, you could wrap it in a div so that it can placed on its own. Secondly, the above solution aligns the bottom of the image with the baseline of the text instead of the bottom of the text. If you want both fixed as well, then use this slightly more complex solution:
div {
float: left;
}
img {
vertical-align: bottom;
}
span {
background: white;
margin-left: -70px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tristique ante in rhoncus. Vivamus auctor nec massa elementum mattis. Nunc tempor metus quam, quis varius nibh posuere eu. Suspendisse vitae iaculis ex, id lacinia nunc.</p>
<div>
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
</div>
<p>Sed gravida congue ligula. Cras dignissim varius aliquet. Morbi semper nulla eget mauris feugiat accumsan. Aenean iaculis nisl a erat interdum bibendum. Nullam eu urna tempus, efficitur urna sit amet, vestibulum lorem. Duis tincidunt, nunc id semper maximus, ante lorem suscipit orci, nec laoreet libero dui in odio. Mauris in mi at dui aliquam vestibulum id non metus. Sed et enim ut metus tristique tempus. In tempus purus a eros imperdiet porttitor. Fusce faucibus, nisl at vestibulum suscipit, tellus magna tincidunt ante, at ultrices nulla libero non quam.</p>
<p>Ut orci nunc, cursus eget quam id, malesuada consequat odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ullamcorper nunc. Integer luctus faucibus augue, ac fermentum mi bibendum sed. Donec ultrices pulvinar tellus. Praesent mollis euismod erat eu semper. Pellentesque pretium interdum nibh sed aliquet. Etiam vehicula aliquam ligula id imperdiet. Cras sodales purus leo, sed scelerisque enim porttitor ac. Aenean id luctus quam. Nullam elementum arcu quis elit malesuada dapibus. Maecenas leo nisi, maximus dignissim enim sed, lacinia tempor est. Maecenas eget cursus ligula.</p>
The z-index css property would be a good tool to use also in situations like this, just center the text using margin values.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
There is a z-index property, you should increase it by 1 and that should help you. You can make some methods that will increas/decrease it in case you would like to hide it and then let it show up back again.
More about z-index in here and here.
I'm trying to make a page without the opacity css stuff, but with a transparant image over all the text and images. Only, i can't get the background over the text.
CSS:
background-image: url('spotlight.png');
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
And HTML simple:
<div class="darkLayer"></div>
Result:
Thanks!
If you want the png overlay over everything in the page, you need to have your overlay div empty of all content, and increase z-index to something like 20000 or whatever.
Although, I'm not 100% sure what you are trying to do.
But it does beat css in terms of cross-browser compatiblity, I think.
Yes, use quotation marks on your image url.
The url should be url('spotlight.png'); and of course the png have to be transparent. I also suggest toninoj's idea with the high number z-index.
Anyway. Why do you want to do this? The only explanation I can guess is for making right click resist web pages, but there are other better way for reaching that goal.
How about this?
http://jsfiddle.net/Z8rkT/
In this example you'd just replace the background/opacity lines with your transparent background image.
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida, metus pharetra euismod eleifend, nisi est tempor massa, vel consectetur lorem elit non ante. Nulla facilisi. Nulla id libero eu erat suscipit pellentesque ultrices quis tellus. Donec ante dui, scelerisque nec venenatis id, suscipit sit amet ligula. Nulla turpis justo, fermentum id ullamcorper condimentum, posuere sit amet ligula. Praesent auctor, mi at tempor tincidunt, felis libero pretium ipsum, quis iaculis odio erat eu urna. Integer vel fermentum ipsum. Duis sit amet accumsan nunc. Nulla facilisi. Etiam condimentum nulla nec quam venenatis laoreet. Etiam massa ipsum, pellentesque sed imperdiet eget, ornare eget est. Fusce pulvinar lorem in nunc tempus fringilla. Vivamus posuere augue a mi interdum rhoncus. </p>
</div>
<div class="overlay"></div>
html, body {
width:100%;
height:100%;
}
.wrapper {
position:relative;
z-index:1;
}
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#333;
opacity:0.75;
}