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.
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 have used overflow:auto in a webpage and there is a scrolling problem. When I place the cursor over the content n try to scroll the entire webpage scrolls and earlier the content alone used to scroll and now it doesn't happen. Below is the code I have used.
/* CSS Code */
.about-style{
max-width: 100%;
max-height: 100%;
background-color: #fff;
color: #000;
opacity: 0.7;
width: 150px;
height: 150px;
overflow: auto;
padding: 10px;
text-align: justify;
border-radius: 3px;
position: relative;
-webkit-overflow-scrolling:touch;
}
<!-- HTML Code -->
<div class="about-style">
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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Overflow only applies if your content is more than the specified width and height of the content div.
as you have mentioned width: 550px; height: 450px; the content of the <div class="about-style"> is not exceeding the above mentioned specs.
in this case overflow:auto and overflow:scroll does not make any difference.
If at all you want a scroll to the <div class="about-style"> div reduce its height and width such that content will overflow.
try with
width: 150px;
height: 150px;
you will get the scroll as you expect.
I need to show a fixed header in the top of the page, so it can't be out of the user's view. The problem is I need to be a responsive and resizable page, so e.g. the header size can change and the height sometimes is 1 em or sometimes 2em.
You can see an example in this fiddle:
<div id="header">
<div id="header-menu">
<div id="header-back-button">Ac1</div>
<div id="header-title">
<h1>This is my so so so long title</h1>
</div>
<div id="header-next-button">Ac2</div>
</div>
</div>
<div id="content">
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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
I need the content area of the page never be behind the header, and I know I can do it changing the "top" of the div, but that top need to be variable, because of the changing header size.
body{
display:inline-block;
width:100%;
}
#header {
position: fixed;
width: 100%;
top: 0;
}
#header-menu{
display: table;
width:100%
}
#header-back-button {
display: table-cell;
width: 15%;
min-width: 30px;
height: 25px;
background: orange;
}
#header-title {
display: table-cell;
width: 70%;
min-width: 40px;
background: yellow;
}
#header-next-button {
display: table-cell;
width: 15%;
min-width: 30px;
height: 25px;
background: orange;
}
#content{
position: fixed;
display:inline;
}
It has to be a CSS solution. I tryed a lot of things, like changing the position, the display, trying to make the body a table... But with no success. How can I do it?
Thanks a lot
Removing elements from the normal flow of the document is problematic, because then they overlap easily.
What you want can be achieved with sticky positioning, but sadly browser support is currently small.
First, remove this code in order to have a normal header:
body{
display: inline-block;
width:100%;
}
#header {
position: fixed;
width: 100%;
}
#content{
position: fixed;
display:inline;
}
And then add
#header {
position: sticky;
top: 0;
}
Demo
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..