In the screenshot below we can see 3 icons - 2 of them of the same size, and one(left one) appears bigger/uneven to the 2 others.
This is my HTML code part for this bit:
<article class="number">
<div class="number__illu" style="margin-top: -33px">
<picture class="picture picture--no-background" style="padding-bottom: 146.875%"><img src="assets/images/svg/location-pointer.svg"></picture>
</div>
<h4>Header</h4>
<p>Part 1</p>
</article>
<article class="number">
<div class="number__illu" style="margin-bottom: -10px">
<picture class="picture picture--no-background" style="padding-bottom: 125.35%"><img src="assets/images/svg/world.svg"></picture>
</div>
<h4>Header</h4>
<p>Part 2</p>
</article>
<article class="number">
<div class="number__illu" style="margin-top: 14px">
<picture class="picture picture--no-background"><img src="assets/images/svg/users.svg"></picture>
</div>
<h4>Header</h4>
<p>Part 3</p>
</article>
And this is the CSS part that goes along with it:
.about__section__numbers .number {
margin: 30px auto;
text-align: center
}
.about__section__numbers .number__illu {
max-width: 100px;
margin: 0 auto 10px
}
I don't see why the icon on the left appears bigger than the 2 others.
you have different padding and margins hard-written onto each of your elements. removing that will likely help you troubleshoot better.
try a debug style like *{ outline: 1px solid red; } to help you see if the boxes are sized properly.
alternately you can also try picture,image {display:inline-block}
It's because the images have different widths compared to their heights. You should set the height to a specific pixel height to make them look the same size.
Or you could artificially add white space to the sides of the larger icon so that it has the same native width as the other two icons.
Related
I've seen fixes for individual parts of this problem but not one for a collective solution. I can solve everything without resorting to javascript formatting except for margins from elements being carried over to the top of the next column (I can't understand why it hasn't been fixed but it appears to be a bug in css3 for some time that's impeding compositing layouts 1, 2)
I've a responsive div container broken into three columns (though this can change depending on the width of the page, per responsive layout), containg divs with a varying number of nested images of varying aspect ratios that each have a margin-bottom property. The above problem is very apparent so I'm looking for a solution to this.
Typically the suggestion involves the use of a column-break-inside: avoid; property alongside switching my margin-bottom to padding-bottom. This hack has seen some success with others and this is where I point you to the subject of my question. I cannot implement this as I'm using a seperate hack to prevent reflow of images that are lazy loaded (using the lazy sizes plugin*) into the columns (the padding-bottom as a ratio hack, 3).
So if I use padding-bottom to ensure that my column elements align without orphaned margins, I lose the ability to correct the reflow from lazy loading the elements into the columns. I can't use fixed sized elements as the column layout is responsive and the elements shrink and enlarge dynamically with the column size.
Is there anybody who has succeeded in solving both issues simultaneously without javascript formatting?
I'm keen to stick to this particular lazy loading plugin for reasons outside of the scope of this problem.
HTML Code:
<div id='columncontainer'>
<div class='imagecontainer' style='padding-bottom:reflowPaddingAmountFromPHPvar;'>
<img class='lazyload'>
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Text</p>
<p class='imagedesc'>Text</p>
</div>
</div>
</div>
</div>
CSS Code:
#myContent {
position: relative;
width: 100%;
column-count: 3;
column-gap: 20px;
column-break-inside: avoid;
-moz-column-break-inside:avoid;
-webkit-column-break-inside:avoid;
}
.imagecontainer {
position: relative;
margin-bottom: 20px;
img {
position: absolute;
top: 0;
left: 0;
height: auto;
width: 100%;
}
}
Example jsFiddle:
https://jsfiddle.net/g0yjd9ov/1/
The elements should align at the top of each column but, instead, the margin-bttom on the element (imagecontainer) at the bottom of the first or second column is being carried over to the second or third column and orphaned, giving the impression of the next element having a margin-top value and breaking the top alignment. This serves no benefit to any situation that a deliberate margin-top value couldn't recreate. I've randomised the heights of the elements just for this example, so occasionally the problem won't show (emphasising how much of a nuisance it is. It's hard to deliberately show). Just refresh if it doesn't, as it occurs quite frequently.
This can be solved using an extra container that has padding on it. The container for the image (.imagecontainer) should contain only the image, as that is what its aspect ratio is set up for. The space between a block and the next block in the column can be achieved by setting a padding on that block. The block then gets the styling that prevents column breaks from occurring.
I have created a demo that builds upon the example code in the question, but also includes some things that are only described in the question text. This because I wanted to make sure that everything works the way I think it should (let me know if I misinterpreted the question).
In particular, I added the lazy sizes plugin and let it load some placeholder images. I also added some styling and added blocks that contain more than just a single image. For the rules that prevent breaks inside an element, I used some slightly different ones, as per this answer. Finally, I positioned the .imagetextcontainer as discussed in the question comments.
The demo can be found on JSFiddle. I also include it as a code snippet here.
#columncontainer {
width: 100%;
column-count: 3;
column-gap: 10px;
}
.block-wrap {
width: 100%;
padding-bottom: 10px;
/* prevent column breaks in item
* https://stackoverflow.com/a/7785711/962603 */
-webkit-column-break-inside: avoid; /* Chrome, Safari */
page-break-inside: avoid; /* Theoretically FF 20+ */
break-inside: avoid-column; /* IE 11 */
display:table; /* Actually FF 20+ */
}
.block {
width: 100%;
background-color: #ffff7f;
}
.block > p {
margin: 0;
padding: 10px;
}
.imagecontainer {
position: relative;
width: 100%;
height: 0;
background-color: #a00;
}
.imagecontainer > img {
width: 100%;
}
.imagetextcontainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<div id='columncontainer'>
<div class="block-wrap">
<div class="block">
<div class='imagecontainer' style='padding-bottom: 50%;'>
<img class='lazyload'
data-sizes='auto'
data-srcset='https://placehold.it/100x50/a00/fff 100w,
https://placehold.it/200x100/050/fff 200w,
https://placehold.it/400x200/057/fff 400w' />
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Name</p>
<p class='imagedesc'>Description</p>
</div>
</div>
</div>
<p>Some text. Followed by another figure.</p>
<div class='imagecontainer' style='padding-bottom: 100%;'>
<img class='lazyload'
data-sizes='auto'
data-srcset='https://placehold.it/100x100/a00/fff 100w,
https://placehold.it/200x200/050/fff 200w,
https://placehold.it/400x400/057/fff 400w' />
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Name</p>
<p class='imagedesc'>Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="block-wrap">
<div class="block">
<div class='imagecontainer' style='padding-bottom: 50%;'>
<img class='lazyload'
data-sizes='auto'
data-srcset='https://placehold.it/100x50/a00/fff 100w,
https://placehold.it/200x100/050/fff 200w,
https://placehold.it/400x200/057/fff 400w' />
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Name</p>
<p class='imagedesc'>Description</p>
</div>
</div>
</div>
<p>Some text. No figure here.</p>
</div>
</div>
<div class="block-wrap">
<div class="block">
<p>Only text here.</p>
</div>
</div>
<div class="block-wrap">
<div class="block">
<div class='imagecontainer' style='padding-bottom: 50%;'>
<img class='lazyload'
data-sizes='auto'
data-srcset='https://placehold.it/100x50/a00/fff 100w,
https://placehold.it/200x100/050/fff 200w,
https://placehold.it/400x200/057/fff 400w' />
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Name</p>
<p class='imagedesc'>Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="block-wrap">
<div class="block">
<div class='imagecontainer' style='padding-bottom: 100%;'>
<img class='lazyload'
data-sizes='auto'
data-srcset='https://placehold.it/100x100/a00/fff 100w,
https://placehold.it/200x200/050/fff 200w,
https://placehold.it/400x400/057/fff 400w' />
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Name</p>
<p class='imagedesc'>Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="block-wrap">
<div class="block">
<p>Only text here.</p>
<p>Tow lines now.</p>
</div>
</div>
<div class="block-wrap">
<div class="block">
<div class='imagecontainer' style='padding-bottom: 200%;'>
<img class='lazyload'
data-sizes='auto'
data-srcset='https://placehold.it/100x200/a00/fff 100w,
https://placehold.it/200x400/050/fff 200w,
https://placehold.it/400x800/057/fff 400w' />
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Name</p>
<p class='imagedesc'>Description</p>
</div>
</div>
</div>
</div>
</div>
</div>
After a lot of back and forth I came up with an answer that fixes the problem and maintains the original's CSS properties. There seems to have been two problems causing this.
1 - margins were translating into the next column (but the element was staying into its own column)
2 - height was confined (was a problem in the solution)
solution: since the entire element stays in its own column but the margin is technically not part of the element (it can be tested using outline)
this problem can be solved by placing .imagecontainer into another div which has padding instead of margin. (so then its considered one object so the margin problem is avoided)
you also would need to move column-break-inside to the parent element so it registers without the margin.
a live version can be found at: https://jsfiddle.net/36pqdkd3/6/
Here is a solution using flex-boxes
HTML
<div id='columncontainer'>
<div class='imagecontainer'>
<img class='lazyload'>
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Text</p>
<p class='imagedesc'>Text</p>
</div>
</div>
</div>
<div class='imagecontainer'>
<img class='lazyload'>
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Text</p>
<p class='imagedesc'>Text</p>
</div>
</div>
</div>
<div class='imagecontainer'>
<img class='lazyload'>
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Text</p>
<p class='imagedesc'>Text</p>
</div>
</div>
</div>
<div class='imagecontainer' style=''>
<img class='lazyload'>
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Text</p>
<p class='imagedesc'>Text</p>
</div>
</div>
</div>
</div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#columncontainer {
position: relative;
width: 100%;
display: flex;
height: 40%;
/* use this if you want containter wrapping
flex-wrap: wrap; */
/* use this if you want container scrolling
overflow: auto; */
/* use this if you want container scrolling
justify-content: center; */
}
.imagecontainer {
min-width: 250px;
position: relative;
background-color: red;
overflow: hidden;
height: 100%;
margin: 5px;
z-index: 1;
}
example in jsfiddle
Here are some recommendations based on your question.
I would also recommend learning more about flex-boxes, that is very equipped to handle these kinds of situations.
by default the html and body elements default size is width 100% and no height.
here is a reference I use on flex-boxes
addressing aspect ratio
you can handle aspect ratio using px and vw/vh (measurements of DOM width and height). try playing around with min/max/width to find the perfect amount.
(1:2 aspect ratio)
element {
min-width: 10vw;
min-height: 20vh;
width: 50px;
height: 100px;
}
css size units
in my version you can edit ".imagecontainer".
In my html I get 'response' from controller. Number of lines in the response varies (max is 3).
What is the best way to 'reserve' 3 lines on my html page so the next div with 'SOMETHING' paragraph is not scrolled down by 'response' ?
<div class="row">
<p ng-bind-html="response"></p>
</div>
<div class="row">
<p>SOMETHING</p>
</div>
Using CSS, fix the height occupied by your 3 rows and use overflow to scroll within that fixed height div.
CSS Overflow might help you.
.row-fixed-height {
height: 150px;
overflow: scroll;
}
and in HTML:
<div class="row-fixed-height">
<p ng-bind-html="response"></p></div>
Since the height of the lines varies based on font and font size, I would use line breaks to "reserve" the three lines. If you were to use for instance a fixed height on the div or p, it might jump around on a different browser that uses a different font.
Live Demo:
#response {
background: red;
}
<div class="row">
<p id="response" ng-bind-html="response">
<br />
<br />
<br />
</p>
</div>
<div class="row">
<p>SOMETHING</p>
</div>
JSFiddle Version: https://jsfiddle.net/rspyho74/
As oori pointed you, this is is about CSS, not Angular. The easiest way to fix the height to 3 lines is using the em unit:
.row{
margin: 10px;
padding: 5px;
border: 1px solid #000;
border-radius: 5px;
}
p{
float: left;
margin: 0 5px;
padding: 5px;
border: 1px solid #000;
height: 3em;
}
<div class="row">
<p ng-bind-html="response"></p>
<p ng-bind-html="response">Line 1</p>
<p ng-bind-html="response">Line 1<br>Line 2</p>
<p ng-bind-html="response">Line 1<br>Line 2<br>Line 3</p>
<div style='clear: both;'></div>
</div>
<div class="row">
<p>SOMETHING</p>
<div style='clear: both;'></div>
</div>
As you can see, the paragraph keeps its height no matter how many lines there are. If you remove the height property you can see the difference.
I am using older Skeleton css version, it is a 16 column grid system. I am trying to setup similar layout as in this picture.
http://imgur.com/sIV2aYo
I am pretty new to CSS, is using two containers (one inside another) a proper method?
Here is a sample code of what I been trying, but not working out too well =(
<div class="container">
<div class="eight columns alpha">
<div class="image">
<img alt="" src="images/coffee.jpg">
</div>
</div>
<div class="eight columns omega">
<div class="container">
<div class="eight columns">
<img alt="" src="images/plate.jpg">
</div>
<div class="eight columns">
<img alt="" src="images/macaro.jpg">
</div>
<div class="text area">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div> <!-- 2nd container -->
</div>
</div> <!-- 1st container -->
Thanks in advance.
I don't know your CSS, but maybe this helps you:
HTML:
// The class "columns" is your "block" (div) that needs the content. I've made a CSS with a background-color, height and width.
// In that div "columns we create new "columns, numbered by 1,2 and 3. I've floated all the text to the left and gived it a margin. The first, second and the third a margin of 15px ( top, right, buttom and left ).
// In the div column "columns" I have made a textarea with also a margin of 15px. The vertical-align is for a top vertical align. with the display we means that it needs to be in the block, with a margin of 40% ( it takes 40% of the block).
<div id="container">
<div class="columns">
<div class="eight-columns-1">
<img alt="" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png">
</div>
<div class="eight-columns-2">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="eight-columns-3">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="textarea">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div>
</div>
CSS:
.columns {background-color:yellow; width: 530px; height: 285px;}
.eight-columns-1 {float:left; margin: 15px;}
.eight-columns-2 {float: left; margin: 15px;}
.eight-columns-3 {float:left; margin: 15px 15px 15px 0px;}
.textarea {vertical-align:top; margin: 15px; display:inline-block; width: 40%;}
I'm creating my first web page and I have 3 boxes with an image and text as contet. How do I make the boxes the same height regardless of the content?
New to css etc so please help.
I have tried padding, margin etc but nothing. My code is as follows:
<!------------------------------ Three Small Span Boxes --------------------------->
<div class="container-full-width" id="boxes_lite_section">
<div class="container" >
<div class="container-fluid" >
<!-- Start of markup for boxes lite element -->
<div id="widget_boxes_container" class="row-fluid" >
<div class="boxes">
<div class="box span4">
<p>
***
</p>
<a class="box-link">
<img class="box-image" src=".jpg" />
</a>
<p align="justify" style="margin-top:20px">
content here funding.
</p>
</div>
<!--end box1-->
<div class="box span4">
<p>
***
</p>
<a class="box-link">
<img class="box-image" src=".jpg" />
</a>
<p align="justify" style="margin-top:20px">
content here
</p>
</div>
<!--end box2-->
<div class="box span4">
<p>
***
</p>
<a class="box-link">
<img class="box-image" src=".jpg" />
</a>
<p align="justify">
content here
</p>
</div>
<!--end box3-->
</div>
<!-- end boxes -->
</div><!-- end row-fluid -->
<!-- End of markup for boxes lite element -->
</div>
<!-- .container-fluid-->
</div>
<!-- .container -->
</div>
<!----------------------------- End Three Small Span Boxes ------------------------->
When you set the height for an element, it will be shown with this regardless of the content.
BUT if the content become taller than height, the result may be very ugly.
so, it's better to set overflow:auto in your case, that will save the box height when content is taller...
div.box {
width: 350px; /*for example*/
height:300px; /*for example*/
background: blue; /*for example*/
color:white; /*for example*/
overflow:auto; /*for example*/
border:4px solid red; /*for example*/
}
You can see result Here and you can find out your last question you mentioned in comment...
If you want to hide overflow, try overflow:hidden instead...
If you are dealing with variable height you can use CSS tables to render your divs.
div.boxes { display:table-row; }
div.box { display:table-cell; }
This jsfiddle should give you an indication of what it will look like with your layout.
Practically every major browser supports CSS tables now, so feel free to use them when necessary. Fixed heights are ok, but can cause issues when your content grows beyond your original expected size.
Right now I've got a webapp working, which I'm trying to add icons to, along with text to describe those icons. I'm trying to scale the icons down to fit in the div, which works great, but also to scale the image to hold text within the div. The issue I'm having is that although the image will scale to fit in the div, it won't scale enough to also allow text in the div.
My HTML code is
<div class="ui-grid-b" id="dashGrid">
<div class="ui-block-a changerbutton" style="height:60px;border-bottom: 1px solid;border-right: 1px solid;display:table-cell; vertical-align:middle">
<center>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
<h4 class="gotobutton" goto="#formSelect" data-icon="grid">Forms</h4>
</center>
</div>
<div class="ui-block-b" style="height:22%"></div>
<div class="ui-block-c changerbutton" style="height:90px;border-bottom: 1px solid;border-left: 1px solid;display:table-cell; vertical-align:middle">
<center>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
<h4 class="gotobutton" goto="#entries" data-icon="info">Entries</h4>
</center>
</div>
<div class="ui-block-a" style="height:22%"></div>
<div class="ui-block-b" style="height:22%"></div>
<div class="ui-block-c" style="height:22%"></div>
<div class="ui-block-a changerbutton" style="height:22%;border-top: 1px solid;border-right: 1px solid;display:table-cell; vertical-align:middle">
<center>
<h4 class="gotobutton" goto="#mapScreen" data-icon="star">Map</h4>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
</center>
</div>
<div class="ui-block-b" style="height:22%"></div>
<div class="ui-block-c changerbutton" style="height:22%;border-top: 1px solid;border-left: 1px solid;display:table-cell; vertical-align:middle">
<center>
<h4 class="gotobutton" goto="#locSettings" data-icon="gear">Settings</h4>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
</center>
</div>
</div>
, and the relevant CSS is
.windowscale-height
{
max-height: 100%;
max-width: 100%;
min-height: 1%;
min-height: 1%;
}
I've got a JSFiddle that shows the issue, http://jsfiddle.net/jDDmC/.
Ideally, the text, as well as the image, would both fit into the outlined boxes.
Any help would be appreciated!
A couple of things:
1) Remove the <center> tag since it's been deprecated. Use text-align: center in your css, instead.
2) Your divs have a specific height, and because of that, the text goes out of the box. So in the inline css, remove the height property.
3) Finally, consider using only an external stylesheet (instead of inline css), since it's easier to maintain and reuse.
Please take a look at:
http://jsfiddle.net/jDDmC/1/
Maybe you're looking for something like Fluid Images ?