I have a page with some content, and a toolbar to edit this content. The toolbar is positioned fixed to the right of the page. The insides of the toolbar should also be scrollable.
How do I make the insides of this toolbar scrollable? Right now, when I hover over the toolbar and scroll, it results in scrolling the background, not the toolbar content.
I tried
overflow-y: scroll;
and
overflow-y: auto;
these did not help.
UPDATE:
Only one of columns inside the toolbar needs to be scrollable.
Example:
https://jsfiddle.net/kyqr5xst/12/
try this:
.fixed_div
{
overflow: auto;
}
In your fixed nav add height:auto overflow:auto This will make it.
Add overflow:auto; to the .fixed_div
.fixed_div {
position: fixed;
top: 0;
width: 400px;
bottom: 0;
overflow:auto;
right: 0;
border: 1px solid grey;
background: #ffffff;
padding: 10px;
}
.column {
color: grey;
overflow-y: auto;
}
<h1>
Background text
</h1>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<div class="fixed_div">
<div class="column">
<h2>Toolbar Content (needs scrolling on hover)
</h2>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specifi.
Pretty cool, isn't it?
</p>
</div>
</div>
Fiddle: https://jsfiddle.net/ot9d7kju/5/
Related
So I am trying to highlight some text in my html notes, but it fails if that highlight "region" has another tag in it see this.
I just want it to give pink bg to important text just like a real highlighter does, like so
I tried SPAN, MARK & DIV to achieve this, but all fails.
Note: I understand I can enclose important text in appropriate divs again & again but I am looking for some way that would accomplish real-ish highlighting in one tag
HTML noob, please warn before down-voting
this syntax is too bad you can't open a tag and close it inside another tag like so :
<p>
lorem ipsum sit <mark class="hetro"> amet dolor
</p>
<h2> a heading </h2>
<p>
lorem ipsum sit </mark> amet dolor
</p>
what you can do is applying this mark inside the other tag's too like the following :
<p>
lorem ipsum sit <mark class="hetro"> amet dolor</mark>
</p>
<h2> <mark class="hetro">a heading </mark></h2>
<p>
<mark class="hetro">lorem ipsum sit amet dolor</mark>
</p>
LIVE DEMO
according to Wikipedia :
"tag soup" refers to syntactically or structurally incorrect HTML
written for a web page. Because web browsers have historically treated
HTML syntax or structural errors leniently, there has been little
pressure for web developers to follow published standards, and
therefore there is a need for all browser implementations to be able
to treat what looks like HTML as "tag soup", accepting and correcting
for invalid syntax and structure.
I am experiencing a problem that never happened before and seems really unprecedented, some text is not wrapping inside a div.
In this link is a sample of my html code:
http://jsfiddle.net/NDND2/2/
<div id="calendar_container">
<div id="events_container">
<div class="event_block">
<div class="title">
lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem
</div>
</div>
</div>
</div>
Any help??
I found this helped where my words were breaking part way through the word in a WooThemes Testimonial plugin.
.testimonials-text {
white-space: normal;
}
play with it here http://nortronics.com.au/recomendations/
<blockquote class="testimonials-text" itemprop="reviewBody">
<a href="http://www.jacobs.com/" class="avatar-link">
<img width="100" height="100" src="http://nortronics.com.au/wp-content/uploads/2015/11/SKM-100x100.jpg" class="avatar wp-post-image" alt="SKM Sinclair Knight Merz">
</a>
<p>Tim continues to provide high-level technical applications advice and support for a very challenging IP video application. He has shown he will go the extra mile to ensure all avenues are explored to identify an innovative and practical solution.<br>Tim manages to do this with a very helpful and professional attitude which is much appreciated.
</p>
</blockquote>
That's because there are no spaces in that long string so it has to break out of its container. Add word-break:break-all; to your .title rules to force a break.
#calendar_container > #events_container > .event_block > .title {
width:400px;
font-size:12px;
word-break:break-all;
}
jsFiddle example
The problem in the jsfiddle is that your dummy text is all one word. If you use your lorem ipsum given in the question, then the text wraps fine.
If you want large words to be broken mid-word and wrap around, add this to your .title css:
word-wrap: break-word;
This may help a small percentage of people still scratching their heads. Text copied from clipboard into VSCode may have an invisible hard space character preventing wrapping. Check it with HTML inspector
you can add this line: word-break:break-all; to your CSS-code
Might benefit you to be aware of another option, word-wrap: break-word;
The difference here is that words that can completely fit on 1 line will do that, vs. being forced to break simply because there is no more real estate on the line the word starts on.
See the fiddle for an illustration http://jsfiddle.net/Jqkcp/
For example, I got a title:
"Lorem Ipsum for WordPress"
It will be display like this in my screen:
Lorem Ipsum for
WordPress
But I want to display like this:
Lorem Ipsum
for WordPress
Can I have any solution in CSS? I dont want to use <br>
Thank you.
If you just want to prevent a line break between two words, as in “for WordPress”, then the simplest way is to use a no−break space (U+00A0) instead of a normal space. If you do not know how to type no−break space in your authoring environment, use the entity, as in for WordPress.
Alternatively, wrap the words inside nobr markup, as in <nobr>for WordPress</nobr>, or inside a span element to which the CSS declaration white-space: nowrap has been assigned.
Set width whatever you want.
<p>"Lorem Ipsum for WordPress"</p>
p {
width: 95px;
}
or you can use two different para
<p>"Lorem Ipsum </p><p>for WordPress"</p>
DEMO: FIDDLE
<p><span style="display:block">Lorem Ipsum</span>for Wordpress</p>
May not possible by just using CSS but you can do using span + a CSS Display as block as shown below
<p><span>Lorem Ipsum</span><span>for WordPress</span></p>
CSS:
p span
{
display: block;
}
Thanks
you can also use white-space:pre-line DEMO
is there a more semantic way than this markup FOR THE DATE on news detail pages?
<h2>Lorem ipsum <span>12.12.2010</span></h2>
<p>Lorem ipsum dolor sit amet</p>
HTML 5 has a <time> tag. If not using HTML 5, I would do this: <span class='time'> to indicate it is similar to HTML 5 time. This would make it easy to style and find with Javascript automation.
I have the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif;font-size:12px;}
.article {width:600px;}
.image_container {float:left;margin-right:10px;}
h1 {height:50px;line-height:50px;background:url(left.png) no-repeat 0 0;}
h1 span {display:block;padding:0 10px;background:url(right.png) no-repeat top right;}
</style>
</head>
<body>
<div class="article">
<div class="image_container">
<img src="test.jpg" alt="test_img" />
</div>
<h1><span>Test heading</span></h1>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
<h1><span>Test heading</span></h1>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
</div>
</body>
</html>
You can check out a demo here: http://easwee.net/floated_img_article/
Problem:
The image can have 2 different widths (3:2 ratio - horizontal or vertical). The heading has a background image, as you can see, which goes behind the floated image.
Is there a css solution to make the background image start where heading text starts - so that it won't get overlapped by the floated image? The left rounded corners need to be visible.
P.S.: You can also point me to a javascript solution but I'd prefer to solve this with css.
If you are able to determine which image ratio (3:2 vs. 2:3) before spitting out the page, you can assign a class to the h1, then handle it with CSS margins.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif;font-size:12px;}
.article {width:600px;}
.image_container {float:left;}
h1 {height:50px;line-height:50px;background:url(left.png) no-repeat 0 0;}
h1.wide{margin-left:260px}
h1.narrow{margin-left:385px}
h1 span {display:block;padding:0 10px;background:url(right.png) no-repeat top right;}
</style>
</head>
<body>
<div class="article">
<div class="image_container">
<img src="test.jpg" alt="test_img" />
</div>
<h1 class='wide'><span>Test heading</span></h1>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
<h1><span>Test heading</span></h1>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
</div>
</body>
Then, just switch between <h1 class='wide'> and <h1 class='narrow'>