i have a long message inside the div box, and i am looking for a way to show the that text message within the div with scroll bar (vertical) and i have two links to it as you can see:
1)disclaimer
2)Behavior
the above links are hyperlink so when i click those links i display the below divs based on the selection. so is that possible to show the div underneath the hyperlink with nice model div or something?
i am not a CSS guy so if possible make the div box look awesome :)
<span ><a href="#" >Disclaimer-1</a></span> <span class="slide1">
| Behavior</span>
<div id="one" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
<div id="second" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
If you want a scroll bar, set a height and then make the overflow value auto or scroll.
div#one,
div#two
{
height: 120px;
overflow: auto;
}
As for your latest edit, you're looking at JavaScript to implement something like that.
Hi for make scroll bar in left and format the page please find basic css you can use.
<style type="text/css">
#one{
overflow-y: scroll;
padding: 15px;
height: 150px;
line-height: 25px;
margin: 20px 0px 20px 0px;
}
#second{
overflow-y: scroll;
padding: 15px;
height: 150px;
line-height: 25px;
}
span a{
padding-left:15px;
color:blue;
text-decoration: none;
}
span a:hover{
padding-left:15px;
color:blue;
text-decoration: none;
}
</style>
Please specify the point when i click on the div i just need the div to be underneath the links.
thanks..
Related
I'm trying to align the text to the left but center the content as well. Its not working.
Like this: image of the design I wish to accompolish.
Here is my PUG markup and I have placed the rest of the info on codepen.io:
section.team-section.section
.container
.row.center-it
.center-it.col-xs-12.col-sm-12.col-md-8.col-lg-8.u-align--center
h1.section__title.section__title--block
| <span class="u-display-block type---color-light-grey">Experienced.<br></span><span class="type--color-green u-display-block">Reliable.<br></span>
<span class="u-display-block type---color-light-grey">Commited.</span>
p.section__description
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
I'm using flexbox framework so that would have been too much to copy
and paste here.
here is my full code on codepen.io, this link will provide all scss mark up:
https://codepen.io/harp30/pen/GGbKdp?editors=1100
Without setting an explicit width on the h1, I'm not sure you can do this with flex properties. The easiest way to do this would be to add the following:
.center-it {
text-align: center;
}
.section{
padding: 10rem 0 0 0;
&__title{
display: inline-block;
text-align: left;
}
}
p {
text-align: left;
}
This will allow the width of the h1 to match the content, centering it within its parent, then left-aligning the text inside the h1. You'll also need to re-align the text in the paragraph.
It's because your .section has padding: 10rem 0 0 0; rule, which means, that you have only padding from top and not from bottom. To center the content, you can add the same padding from bottom:
.section {
padding: 10rem 0;
}
The idea is to have the same paddings/margins from both, top and bottom. And to center the text in <h1> you can simply use text-align: center rule.
Here is the updated DEMO.
I need to create a text that adapts to the size of its container DIV, distorting itself to always fill the whole space inside the DIV. So it should be always width=100% and height=100% and resize according to the browser window.
I know this can be done with an image, my doubt is if there is any way to do the same to a editable text, deforming the font shapes itself. Which property should I use?
Thank you in advise.
Option 1
We are going to use Javascript to change dynamically the font-size and line-height
First, cache the div so that the browser doesn't have to find it every time the window is resized.
var $div = $('.foo');
Run the following when the window is resized, and also trigger it once to begin with.
$(window).resize(function () {
Get the current height of the div and save it as a variable.
var height = $div.height();
Set the font-size and line-height of the text within the div according to the current height.
$div.css({
'font-size': (height/2) + 'px',
'line-height': height + 'px'
})
}).trigger('resize');
Demo: https://jsfiddle.net/nanilab/6tpztvnc/
Option 2
You can use FitText.js
FitText makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.
Option 3
You can use slabText.js
A jQuery plugin for producing big, bold & responsive headlines
Check out the CSS Viewport percentage lengths, this might be what you're looking for: https://css-tricks.com/viewport-sized-typography/
I put together a quick container with text that will change size based on the size of the viewport. You can check it out here: http://codepen.io/sktwentysix/pen/GZzvEx
<div class="main">
<p>
lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum!
</p>
</div>
.main {
border: 1px solid #000;
padding: 1rem;
width: 80%;
height: 500px;
}
p {
margin: 0;
font-size: 4vw;
}
Hope this helps!
only CSS will not be possible unless the lenght of your text is known.
If it is known, vw units + transform will do .
Problems : long text on small window could be too small to be read
Short text on large screen will be awfully stretched
h1 {
height: 3vw;
background: #147EBD;
text-align: center;
}
span {
display: inline-block;
height: inherit;
line-height: inherit;
font-size: 10vw;
transform-origin: top center;
transform: scale(1, 0.3);
}
h1 + h1 span {
line-height: 40vw;
font-size: 40vw;
transform: scale(1, 0.08);
}
<h1> <span>longer text to strecth </span></h1>
<h1> <span>short</span></h1>
As you can see, javascript will be needed to find out text lenght before to apply a font-size and a proper scale to start with .
It would be wise somehow to still set a max and min font-size so it remains readable at anytime time, and eventually let break a line on small screen.
edit: i did understand 100% of container, not window's height but scale() will do also in this case.
I use padding and a negative text-indent to create an indented layout for responsive forms but now want to make the bottom paragraph a block level element so it always wraps.
The layout works fine when the bottom row is display inline or inline-block but as soon as the bottom row is display block then the entire layout in Chrome changes.
I don't know which browser is right, but it is Firefox's interpretation of the layout that I am after.
This is a simplified version of a layout I use for forms to attempt to fix this problem.
http://codepen.io/rachelreveley/pen/rxxxRj
<div>
<div>
<p class="top">Lorem ipsum dolor sit amet</p>
<p class="bottom">Lorem ipsum dolor sit amet</p>
</div>
</div>
<style type="text/css">
div div {padding-left: 36%; margin: 0; text-indent: -18%; background-color: #cee; width: 300px;}
p {text-indent: 0;}
p.top {display: inline-block; background-color: #ffc;}
p.bottom {display: block; width: 200px; background-color: #fcf;}
</style>
Real world example of how this code is being used.
I have fixed this by changing from using padding to margin on the parent container and then adjusting the sizes after that.
Im trying to approach this design where i have different divs with display inline block. What im trying to do is keep the same margin bottom for all the divs but it seems like the content height of a div affects the space at the top of every div.
Here's the code and the css:
.box {
border: 1px solid red;
display: inline-block;
background: #eee;
margin-bottom: 0.5em;
width: 48%
}
Hello Hello
is simply dummy text of the printing and typesetting industry
Hello Hello
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type
Hello Hello
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.
Hello Hello
is simply dummy text of the printing and typesetting industry
Hello Hello
is simply dummy text of the printing and typesetting industry
Here you can see the results:
enter link description here
I dont care if the boxes have a different height but the bottom space between them have to be the same. any thoughts ? many thanks !
http://fiddle.jshell.net/qyk6t/2/
One of the ways to solve this issue is using a mutiple column layout. This way you can split your content in more than one column keeping a different height for each one of your boxes.
.column {
display : inline-block;
margin: 0.7em;
vertical-align: top;
width: 40%;
}
.box {
border: 1px solid red;
background: #eee;
display : inline-block;
margin: 0.7em;
vertical-align: top;
width: 100%;
}
As you can see in the JSFiddle.
There are some cool examples and guides of how use multiple columns:
http://css.dzone.com/articles/implementing-card-ui-pattern
http://portfolio.planetjon.ca/2012/12/31/how-to-make-a-flowing-css-gallery-layout/
Hope that helps you.
I have an events listing page where the date is wrapped in a div for styling purposes. If the following code is left as is, the divs become staggered. Also, if the p content after the div is longer than a few lines, it wraps around the div. Is there an easy way to prevent this without encasing each listing in a div?
HTML:
<div class="date">Mar <span>28</span></div>
<p>Lorem ipsum dolor sit amet</p>
<div class="date">Mar <span>29</span></div>
<p>Lorem ipsum dolor sit amet</p>
<div class="date">Apr <span>6</span></div>
<p>Lorem ipsum dolor sit amet</p>
CSS:
.date {
float: left;
width: 42px;
height: 40px;
padding-top: 2px;
font-size: 12px;
text-align: center;
text-transform: uppercase;
background-color: #ccc;
margin-right: 10px;
}
.date span {
display: block;
font-size: 24px;
}
There are problems with a few solutions:
Adding .date + p { height: 42px } means long lines of p content will overflow.
Adding .date + p { min-height: 42px } doesn't account for the text wrapping.
Adding .date + p { margin-left: 50px } would work if I didn't have a mobile version of the site which puts the p content underneath the div.
I also made a fiddle for this.
http://jsfiddle.net/9t48g/
.date {
clear:left;
}
.date + p {
overflow:hidden;
min-height:40px;
}
http://jsfiddle.net/aber100/qs8WC/
That should work if you can't change the html. Otherwise, I would use Nicole Sullivan's media object html/css for this layout.
For the 'staggering' problem, add clear: left to the CSS for .date - that will make each entry drop below the preceding floated content.
(Using margin-left to solve the wrapping problem seems very sensible - surely there's a way you can use that but omit it from your mobile site? A media query, or a class on the body?)