I need to float some text around a spangle on my page as you can see on the attached screenshot. I'd like to not to use JavaScript. Is that possible to do in pure CSS?
Use CSS shapes if you're not too worried about compatability with older browsers.
.element{
shape-outside: url(image.png);
shape-image-threshold: 0.5;
float: left;
}
http://www.html5rocks.com/en/tutorials/shapes/getting-started/
Might the padding attribute be what you mean?
.container {
background: url('someimage.png') no-repeat left bottom;
border: 1px solid #111;
color: #666;
font: 9pt/14pt 'consolas';
padding: 40px 12px 12px 40px;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Oooh... I didn't know that you meant the text bending over the image! sorry, See evilunix' answer, as I don't want to copy someone else's solution.
Related
So, there is a paragraph <p> with an inline element <span> that has a semi-transparent background rgba(0,0,0,0.5). It contains more than one line of text. To remove the gap between backgrounds on each line, padding-top, padding-bottom is used.
For example, using Open Sans 16px with 26px line-height and 2px padding -top -bottom, it renders good in Webkit desktop browsers (without gaps or overlays) but has overlays in mobile browsers (Chrome).
It could be done by applying rgba(0,0,0,0.5) to a block element (<p>), but in that case the background will fill all the block, and I need it to be partially applied to some text inside a block. Not using padding is also not an option — gaps between lines with background look bad.
div {
background: linear-gradient(to bottom, #00b3e3 0%, #2c5697 100%);
color: #fff;
font-family: Helvetica;
font-size: 16px;
line-height: 24px;
}
p {
padding: 50px;
}
span {
background-color: rgba(0,0,0,0.3);
padding: 5px 0;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit</span> esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit</span> esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit</span> esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Playing with padding gives different results in different browsers.
I know you said non-transparent background is not an option, I'd still argue the simplest solution is actually to go with a solid color background that is visually identical to your non-transparent tint.
For instance, rgba(0, 0, 0, .5) renders as rgb(127, 127, 127), which makes sense, because 50% transparent black equals to 50% gray visually.
Even if you're using a colored background, say, rgba(25, 150, 90, .5), it can easily be converted into a solid color—in this case, rgb(139, 203, 173).
See the image for reference.
Fiddling with pixel dimension discrepancies between browser rendering engines can suck up your hours.
The bellow seems to be buggy on Fiferox but works fine on chrome
One idea is to use multiple background where the second one will be the same as the main container but you have to consider background-attachment:fixed to make both of them at the same position to create the illusion of the same one.
I am using different colors than your exmpale to better see the result
div {
background: linear-gradient(to right, red, blue) fixed;
color: #fff;
font-family: Helvetica;
font-size: 16px;
line-height: 24px;
}
p {
padding: 50px;
}
span {
background:
linear-gradient(rgba(0,255,0,0.3),rgba(0,255,0,0.3)),
linear-gradient(to right, red, blue) fixed;
padding: 5px 0;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit</span> esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
I have problem with adding 3 dots on the end of div. I my text is too long and don;'t have enough space to display, on the of div I want to display 3 dots.
I know for text-overflow ellipsis but now workig correct on IE and Firefox.
Is it possible to do on another way.
https://jsfiddle.net/kq1Lp6og/
I want to create ease in CSS, but don't know how without ellipsis.
HTML
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
CSS
div{
height:38px !important;
overflow: hidden;
}
div {
max-width:100%;
height:38px;
overflow: hidden;
position: relative;
line-height: 1em;
max-height: 3em;
text-align: justify;
padding-right: 1em;
font-size: 20px;
}
div:before {
content: '...';
position: absolute;
right: 2px;
bottom: 0px;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
I know you asked for CSS, but you may (or future readers may) not want CSS: it doesn't update when window size changes and it's not a very good nor flexible nor easy method to have "...", I had the same problem that I tried to fix with CSS and I finally use a JS library called dotdotdot.
PS : please do not dislike because it doesn't match all the criteria, I had exactly the same problem and I understood that CSS isn't necessarily the best option (for user experience and developer) so it's important that you know all the option you have.
I have a textarea element with fixed width & height and no resize and when the vertical scrollbar appears the padding (top & bottom) of the element is ignored.
Here is a plnkr demo: http://plnkr.co/edit/jOeYXqkOZk3FCT24BRrk?p=preview
This happens only with Chrome (tested on Chromium, Linux version).
Here is my styling for the textarea element:
textarea{
background-color: #1c1b1b;
border-bottom: 3px solid #343434;
border-radius: 4px;
color: #fff;
display: block;
height: 165px;
margin-bottom: 21px;
padding: 10px;
resize: none;
width: 90%;
}
*One solution would be to wrap the textarea element inside a div with that specific padding, but then the scrollbar will not overlap that padding and will look kinda strange.
Edit: ok, maybe it won't look as strange as I thought, but I just wonder if there is a more elegant fix, within css maybe.
I've tried to think of a workaround, depending on your own hint. You've got it right, but didn't implement it yet. :) I just coded your idea. What I did was to enclose within a wrapper, and setting before and after pseudo elements to just hide the top and bottom parts. I hope that would solve your issue.
It would also run perfectly in Chrome, Firefox as well as in IE.
.container {
width: 90%;
position: relative;
}
textarea {
background-color: #1c1b1b;
border:0;
border-radius: 4px;
color: #fff;
display: block;
height: 165px;
margin-bottom: 21px;
padding: 10px;
resize: none;
width: 100%;
border-radius: 4px;
}
.container:before, .container:after {
content:'';
display: block;
height: 10px;
background: #1c1b1b;
position: absolute;
left: 4px;
right: 18px;
}
.container:before {
top: 0px;
}
.container:after {
bottom: 0px;
}
<div class="container">
<textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
</div>
I have two divs I have placed next to each other inside a content-container div, one of them includes a video and some description text and the other includes a scrollbar of random text. However, as you can see in this picture ( http://gyazo.com/1a5b3e559c1f4294b8c05b6c74fc677d ), the content-container doesn't include the description like I wanted (thus making the rounded div content-container not cover it). I have tried to fix it, but I haven't had much luck. Here is a breakdown of my code:
I'll show the CSS first:
#content-container3
{
margin-top: 10px;
width: 900px;
repeat-y 100% 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #575757;
background: #DBDBDB;
}
#content
{
margin-top: 10px;
padding: 5px;
padding-top: 0px;
float: left;
}
#scroll {
height: 358px;
border: 1px solid #999;
width: 239px;
overflow: auto;
margin-top: 10px;
padding: 2px;
}
And now onto the HTML
<div id="content-container3">
<div id="content">
<video id="player_a" class="projekktor" poster="intro.png" title="1v1LB Player" style="background: black;" width="640" height="360" controls>
<source src="unorthxdox.mp4" type="video/mp4" />
</video> <h2 style="padding-top: 10px;">
Unorthxdox vs CaLeB XII</h2>
Player's Profile | Editor's Profile <br />
Click here to view comment(s) on the game.
</div>
<div id="scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
From the code I have posted, it should be working. I have tried messing with the float and the width and other things such as that and I haven't been able to find a solution. I'm not the best with HTML/CSS, but I would like to be able to at least fix this.
Adding float: left; into all three css rules helps.
(But don't forget to clear it after. And anyway, I would take risk and advise you not to use floats. Your markup, you can achieve it by removing float: left and adding display: inline-block; to #content and #scroll.)
I've two (or more) DIVs inside a list item and I'm not able to make the last one to fit the remaining height of its container.
This is the code:
CSS
div{margin: 5px;}
ul{
height: 300px;/*it's calculated via js*/
width: 250px;/*it's calculated via js*/
padding: 0;/*don't change it*/
margin: 0;/*don't change it*/
background-color: #F5EBD6;
border: 4px solid orange;
}
li{
list-style-type: none;
background-color: #E0E5F5;
border: 2px solid blue;
}
.item-title{
background-color: #EDF5E0;
border: 2px solid green;
}
.item-description{
background-color: #FDF1FB;
border: 2px solid fuchsia;
}
.item-description>div{
background-color:rgba(252,255,170,0.3);
}
HTML
<ul>
<li>
<div class="item-title">Title</div>
<div class="item-description">
<div style="margin: 0px; padding: 0px; border: 0px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</li>
Here's the Fiddle.
I'd like that the .item-description div (fuchsia bordered div in the Fiddle) will stay inside listItem (the orange bordered element).
The div inside the description, the actual text container, should not be modified in its height.
Here's the Fiddle that shows how it should look like.
On the right the result I'd like to reach
I'd like to solve the problem using css/css3, not js and without changing the HTML, if possible.
Can you help me?
Change the UL css like below,
ul {
background-color: #F5EBD6;
border: 4px solid orange;
float: left;
margin: 0;
min-height: 300px;
padding: 0;
width: 250px;
}
it will works.
Adding
overflow-y:scroll;
to .item-description
might put all the content inside the div.AM not sure this is what you are expecting
http://jsfiddle.net/Pdaj8/2/