http://jsfiddle.net/awWmY/
For the life of me I can't solve this simple one. Why wont the text wrap to #bigEnough?
html{background:black;}
#bigEnough {
width: 500px;
text-wrap: normal;
}
#bigEnough a {
-moz-transition: none !important;
-webkit-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
-moz-transition: none;
-webkit-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}
#tagCloud {
height: 500px;
width: 500px;
float: right;
margin: -45px 0;
}
The simplest solution I could find (with full cross-browser implementation) is to use display: inline-block on the a elements: JS Fiddle demo.
Note that I've also increased the width of the page, to show that the words will also occupy the same lines where space is available.
Adding word-break: break-word; to your #bigEnough CSS will force the words to wrap but not at break points between the several anchor tags. I don't know if that's the behavior you were trying to achieve, but here's a demo: jsFiddle.
Hope that helped in any manner!
Because word wrapping depends on there being a space between words.
The others are right, you need to use spaces for words to wrap. If you want to avoid doing that, however, I've had success with:
Hyphenator
Hyphenator is a JavaScript solution that automatically wraps long words so that they fit in their parent container and inserts hyphens where the wrap occurs.
As others have noted, you should really have some whitespace between the a elements. But if you cannot change the markup, you can inject no-break spaces U+200B (which are line-breaking opportunities) with generated content:
#bigEnough a:after { content: "\200B"; }
Usual CSS Caveats apply.
Not sure sure what you are trying to achieve but you can try this if this is what you need
#bigEnough a {
display:inline-block;
/* rest of your styles*/
}
DEMO.
Related
I’m leveraging Codrops’ slowly aging but still relevant ‘Inline Anchor Styles’ kit. Codrops’ original live demo can be found here. For my site, I’m using the ‘link-arrow’ theme.
I’ve got most of it to work as intended. My problem is that I can’t figure out how to make the longer anchor tagged web links to wrap to the next line.
Here is my reduced test case on CodePen, which also shows the HTML and CSS I am working with. When you are viewing that Pen, if you reduce the size of your browser window, you’ll notice that the very first web link is obscured and extends way over to the right beyond the boundary of the window. What I am trying to do is make the web links wrap to the next line (similar to the way the regular non-anchor tag <li> contents already do).
To further clarify what I am trying to accomplish, you can take a look at this screenshot on imgur. There are 4 red arrows pointing to the anchor tag contents which extend beyond the browser window.
How do you get the content inside the anchor tags to wrap to the next line?
After importing Codrops' HTML, CSS, and JS source code linked to above, these are the only modifications I've made:
body {
background: #f9f9f9;
width: 100%;
font-size: 133%;
margin: auto;
}
.box {
margin-left:-60px;
}
li {
line-height: 150%;
font-size: 1.2em;
padding-bottom: 15px;
}
ol {
margin: 0;
}
ol.dashed {
list-style-type: none;
}
ol.dashed > li {
text-indent: 5px;
}
ol.dashed > li:before {
content: "- ";
text-indent: 5px;
}
.container {
width:100%;
}
What I’ve tried:
I’ve tried adjusting width and max-width values from 100% progressively down to 50% for all the elements in play including the body, ol, li, a elements in addition to the classes in play such as .container and .box. No dice.
I have carefully checked your code on codepen and Codrops's Inline Anchor Styles.
I have found a very simple solution after analyzing your problem, there are two places where the code needs to be adjusted is:
this code code must not include line white-space: nowrap, it should be removed. When removing we need to setup after position of anchor from top: 0
And boom now we changed two snippset as follows:
section a {
position: relative;
display: inline-block;
outline: none;
color: #404d5b;
vertical-align: bottom;
text-decoration: none;
}
.link-arrow a::after {
left: 100%;
z-index: -2;
width: 1em;
background: #34495e url('./arrow_right.svg') no-repeat 50% 50%;
background-size: 60% auto;
text-align: center;
font-family: Arial, sans-serif;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
pointer-events: auto;
top: 0
}
Now Your Anchor tag will not be overflown again.
Based on #Umar_Ahmed's code snippet, I was able to reduce the solution down to this:
section a {
color: black;
text-decoration: none;
white-space: normal;
}
.link-arrow a::after {
pointer-events: auto;
top:0;
}
But I am giving full credit to Umar as the official answer to my question. ;)
Thank you Umar!
I have this page built in DIVI WordPRess:
http://www.wilderfilms.co.uk/wp/work/
When you hover over an image, I want the zoom effect to work - but the image overlaps outside it's div area.
I used the CSS code from here:
https://codepen.io/Remedy/pen/ZYJrpp
my CSS code which doesn't work is here:
.et_portfolio_image img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.et_portfolio_image:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
I use firefox browser and I did right click> inspect element on the image, in order to see what class it's been assigned. I've tried different classes, but this seems to be the closest class that looks like what I'm trying to achieve. I basically want the background image to zoom, but not overlap the way it does and keep within the DIV.
Thanks!
You need to hide any overflow that is caused by the zoom.
Simply add overflow:hidden to the .et_portfolio_image and you are done.
.et_portfolio_image, .et_shop_image {
display: block;
position: relative;
overflow: hidden; }
You have to add some css like below:
.et_pb_portfolio_item {
overflow: hidden;
}
add this style
.et_portfolio_image, .et_shop_image {
overflow: hidden; }
Thank you to all, the code worked perfect, for benefit of answering this post, I used David's answer:
.et_portfolio_image, .et_shop_image {
display: block;
position: relative;
overflow: hidden; }
Thank you, the page looks fantastic now!
I know that you can make hovering over a div affect the div directly after it with '+' and any div after it with '~'. But I have a situation where I need a div directly before and after the div I'm hovering over to be affected. What I am trying to do is have 4 circles grow on hover (which works fine), and the adjacent circles should be pushed aside.
Here is a codepen that may make it more apparent what I am trying to do:
http://codepen.io/anon/pen/Bojug
Here is a snippet of code with the issue.
#circ2:hover + #circ3{
margin: 100px 0px 100px 8%;
}
#circ2:hover ~ #circ1{
margin: 100px 2% 100px 13%;
background: blue;
}
As you can see, when you hover over circle number 2, circle number 3 is pushed aside but circle number 1 is not. Does anyone have a way around this. I know some of you may suggest JS or JQuery which I am not familiar with. In that case could you point me in the right direction? Also, I know there are many threads that address similar issues but I havent seen one that asks about affecting preceding divs. Thanks in advance!
From what I understood from your question I think you want to shift the preceding elements like the post elements.
If I am correct, just use the simple technique .Shift parent relatively on hover - >
#circles:hover{
position:relative;
right:40px;
}
Demo
Update with transition
#circles{
position:relative;
right:0px;
}
#circles:hover{
position:relative;
right:40px;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
Demo 2
I'm too lazy to change youre code, since it's quite big, but the following idea should help:
You have
#circ2:hover + #circ3 //Affects circ3, when circ2 is hoverd
Now you want to affect #circ1, when circ2 is hoverd.
Try this:
#circ1 //Set the rules you want to see applied when circ2 IS hovered
#circ1 + :not(:hover) //Set the standard style here.
That way, since #circ2 isn't ususally hovered, you see the standard style. But as soon as you hover over it, the :not()-selector will no longer apply - and the hover styles will apply.
I am using php, html, and css to create a caption that displays the title first then sliding even more to reveal excerpt on hover.
Sample structure of basic post setup (simplified for clarity):
<div class="post-container">
<img src="postThumbnail.jpg" />
<span class="post-caption-container">
title
this is the excerpt
</span>
</div>
CSS file
.post-container{
position: absolute;
height: 200px;
width: 300px;
overflow: hidden;
}
.post-caption-container{
width: 300px;
height: 80px;
top: -45px;
}
.post-container:hover .post-caption-container{
top: 0px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
Inline HTML to override styling
<div id="post-container" style="height: 140px;">
<img src="postThumbnail.jpg" />
<span class="post-caption-container" style="height: 50px; top: -25px; ">
title
this is the excerpt
</span>
</div>
The portion where "style = top: -25px;" is causing problems.
My best guess is that the inline html styling "style= top: -25px;" is overriding values in both ".post-caption-container" and ".post-container:hover .post-caption-container", which is not what I want.
I need ".post-container:hover .post-caption-container" value to remain "top: 0px;".
I've spent about a week trying to resolve this issue, but I'm stuck! I don't know if this is impossible to achieve?
Any help would be appreciated. If this problem is impossible, perhaps an alternative method to achieve the same result, would love some different ideas as well! oi vey, thanks so much!
Positioning values like top: XXpx etc. don't work unless the element they are applied to also has a position set, such as position: relative, so perhaps try adding that in. I don't quite understand the example you are working with, but that might be all you need to get it working.
PS: Welcome to Stack Overflow. :-)
EDIT: In response to comments below, I now understand that the problem relates to an inline style overriding stylesheet declarations, and yes, inline styles carry more weight that stylesheet rules in the laws of the cascade.
However, there is one way to override the inline style, using !important:
.post-container:hover .post-caption-container{
top: 0px !important;
}
So, you place !important after the rule but before the semicolon. (Note also the period . before .post-caption-container above. You left it out, but without it the declaration won't work anyway.
In Webkit, the following fiddle works as expected. That is to say, #navigation's left padding is transitioned properly from 0 to 100px.
In Firefox, the identical code somehow prevents the transition from occuring.
http://jsfiddle.net/threehz/JEMN6/27/
my css:
#navigation {
background: #ccc;
-webkit-transition: padding-left 0.125s ease;
-moz-transition: padding-left 0.125s ease;
transition: padding-left 0.125s ease;
margin: 0;
padding-left: 0;
width: 100%;
}
.fixed #navigation {
padding-left: 100px;
}
.fixed #page-navigation {
position: fixed; // removing this results in #navigation transition working properly in firefox
height: auto;
border-top: 1px solid #000;
width: 100%;
}
It seems it is related to the parent element's positioning changing. As noted above, if I remove position: fixed from the parent element, the transition works in Firefox:
http://jsfiddle.net/threehz/JEMN6/28/
Problem is, for what I am trying to accomplish, the header must become fixed, AND the child padding property must transition, so simply removing the position: fixed is not an option.
Thoughts?
The transition works if you toggle it from Firebug/DevTools. In the other hand:
Using transform: translate(100px) or position: absolute + left: 100px for the li items or
Using a transition delay
don't work. The transition event is not even fired :/ ( http://jsfiddle.net/JEMN6/25/ )
It seems that FF can't handle a simultaneous redrawing of the #page-navigation container (since position: fixed takes it out the document flow) and the #navigation child, so the transition event gets aborted.
As Alex Morales suggests, you could use an animation, but you'd need the opposite one to get a transition when removing the #fixed class.
Introducing a minimal delay through JavaScript is also an option:
$('#toggle').click('on', function() {
$('body').toggleClass('fixed');
setTimeout(function () {
$('#navigation').toggleClass('get-padding')
}, 20);
});
http://jsfiddle.net/JEMN6/26/
Not an ideal solution, though.
This looks like https://bugzilla.mozilla.org/show_bug.cgi?id=625289 to me: the parent is having its CSS boxes reconstructed, which loses the old computed style on the child.