I want my code to do what it is doing in this snippet but on my browser it's displayed as in the picture. I think it is flexbox causing this issue. Anyone has any idea why this could be and how to fix it?
I have checked whether if it is anything on other classes but this div is completely separate from the other divs and their classes
.activity-snippets {
display: flex;
}
.activity-post-link {
height: 215px;
width: 33.33333333%;
padding-right: 12px;
padding-left: 12px;
flex-grow: 0;
}
.activity-post-link img {
max-width: 100%;
}
.activity-post-link a {
text-decoration: none;
}
<div class="activity-snippets">
<div class="activity-post-link">
<a>
<img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
<h2>
My Girl's Cave for $55
</h2>
</a>
</div>
<div class="activity-post-link">
<a>
<img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
<h2>
Turning a French Door Into a Shower Wall.
</h2>
</a>
</div>
<div class="activity-post-link">
<a>
<img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
<h2>
LOVE SHELF
</h2>
</a>
</div>
</div>
If the snippet looks good but your actual full code doesn't, then there must be something else in your code preventing the text to wrap.
Looks like your flex items are being sized correctly but your text is overflowing. Check if there's some white-space: nowrap; being applied to those h2s anywhere in your full code.
Related
I’m using flexboxes to spread 3 boxes across a row. They’re all in ul and li . I’ve put images in the li and it all spreads nicely, as advertised.
The problem arise when I position a few absolute boxes in my flex items, with text in them. These absolute divs are taken out of the flex items and positionned to the beginning of the row.
One workaround I found is to use relative divs instead of an absolute one, put it below my image and the use its top property, to move it on top of my image, but that leaves an empty white row below the image.
So I’m wondering what’s the “official” way of precisely positionning elements inside a flex item ?
Without code and even a graphic to illustrate the desired result this answer is a bit of a shot in the dark.
The primary assumption I'm going to make is that you want to overlay text on top of an image. The fact that you're using flexbox shouldn't be an issue if this assumption is true.
Typically when you want to overlay text on top of an image you absolute position it and and to prevent that absolute positioning from rendering outside of the parent element you set the parent element to position: relative;.
Notes:
Sometimes you might need to create a containing element just for the image and text overlay if there's other content associated with the image and text.
You might also have to set the element containing the image to inline so the parent containing element matches the size of the image.
Here's my suggestion:
ul,
li {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
ul {
display: flex;
justify-content: space-around;
}
li {
position: relative;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul>
<li>
<img src="http://placehold.it/100x100/ffcc00/?text=1">
<div class="overlay">
Text Overlay 1
</div>
</li>
<li>
<img src="http://placehold.it/100x100/ffcc00/?text=2">
<div class="overlay">
Text Overlay 2
</div>
</li>
<li>
<img src="http://placehold.it/100x100/ffcc00/?text=3">
<div class="overlay">
Text Overlay 3
</div>
</li>
</ul>
And here's an example if there's additional content associated with the image and text overlay.
ul,
li {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
ul {
display: flex;
justify-content: space-around;
}
li .intro {
position: relative;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul>
<li>
<div class="intro">
<img src="http://placehold.it/100x100/ffcc00/?text=1">
<div class="overlay">
Text Overlay 1
</div>
</div>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
</li>
<li>
<div class="intro">
<img src="http://placehold.it/100x100/ffcc00/?text=2">
<div class="overlay">
Text Overlay 2
</div>
</div>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
</li>
<li>
<div class="intro">
<img src="http://placehold.it/100x100/ffcc00/?text=3">
<div class="overlay">
Text Overlay 3
</div>
</div>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
</li>
</ul>
So, I have these two images. The HTML structure is like this:
<div class="buttonContainer">
<div class="innerButton">
<img src="...">
<p> Some text </p>
</div>
</div>
But as you can see, both containers have different heights (because of the length of the p content. I'm not a very experienced at CSS, so any help is welcome.
.innerButton{
min-height: /*set your height*/;
}
Hope this helps
Set height attribute to the <p> containing your text. But if the text is too long, it will overflow out of the <p>
Truncate your text: You can truncate your text using the following code.
<p id="greetings">
Hello universe!
</p>
CSS
#greetings
{ width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Then text will become
Hello univ…
A good question and one I encounter a lot.
Firstly you have two options that work well. Go the pure CSS route or use some jQuery. The latter being easier to implement and to be honest, overheads are not too bad either.
The reason I've not gone for using min-height is I am assuming you might want this working responsively where min-heights can be an annoyance. This method means you never need to specify heights explicitly which in my opinion is better.
1. Pure CSS (using display table)
.buttonGrouping.css{
display: table;
border-spacing: 20px;
}
.css .buttonContainer{
display: table-cell;
margin: 0 20px;
border: 1px solid #ccc;
}
HTML for CSS tables
<!--Example using CSS-->
<div class="buttonGrouping css">
<div class="buttonContainer">
<div class="innerButton">
<img src="http://placehold.it/350x150">
<p> Some text </p>
</div>
</div>
<div class="buttonContainer">
<div class="innerButton">
<img src="http://placehold.it/350x150">
<p> Some text </p>
<p> Another para </p>
</div>
</div>
</div>
2. jQuery (using matchHeight.js)
Note you I've included the matchHeight plugin in the live example at the bottom. The plugin can be found here.
CSS:
.buttonGrouping.jquery{
clear: both;
}
.jquery .buttonContainer{
float: left;
display: block;
border: 1px solid #ccc;
margin: 0 20px;
}
And initialize the script on the element...
$(".jquery .buttonContainer").matchHeight();
Please note the .jquery in the script is just a class i added to each example to separate them out.
Live examples
Im trying to create a slide of small images and that on each slide the images are evenly distributed horizontally. Found an interesting technique on css-tricks.com and a very straighforward working example but i haven't been able to replicate it.
Here's the html of a slide
<div class="item active">
<div>
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
</div>
</div>
Here's the css following the mentioned technique
div.sites .carousel-inner .item div {
font-size: 0.1px;
text-align: justify;
}
div.sites .carousel-inner .item div:after {
content: "";
width: 100%;
display: inline-block;
}
div.sites .carousel-inner .item div a {
display: inline-block;
}
You can see the code working at the bottom of this site, under the title "OTROS SITIOS"
EDIT: My girlfriend tried my code in CodePen and it worked nicely. im guessing it must be some global style that's interfering with it.
Thanks for your help
I copied the html structure starting from the div sites and pasted it on CodePen alongside with your proposed css code.
I saw that you missed the escape character between the </a> and <a>
When I added it, the code worked perfectly :)
I want to create a simple thumbnail grid for showing images from the Europeana API. However for some weird, probably very obvious, reason I get random rows in this grid with large spaces as if the floating isn't working. However the same layout with random images (http://placehold.it/250x350) does not seem to have this problem. See result of html and css here: http://jsfiddle.net/VqJzK/1/ .
CSS of the grid
.thumb {
width: 200px;
background-color: #F5F5F5;
border-radius: 5px;
margin-bottom: 0.5em;
margin-top: 0.5em;
text-align: left;
position: relative;
display: inline-block;
float: left;
}
.thumb img {
width: 150px;
vertical-align: middle;
}
and the html:
<div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div>
<div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div>
....
The broken formatting is because some images are taller in the second example. The taller images take up more space and because the thumbnails have float:left set, they flow around the taller one. This explains why the first example works, since they all have the same height.
That said, float:left is also overriding the display:inline-block with display:block - see css display property when a float is applied
If you remove float:left or set the height of the .thumb class the thumbnails will also line up as expected.
sounds like the standard inline-block bug, simple fix is to change your code to this:
<div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div><div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div>
butt the elements right up next to each other, because it's treated as inline spaces between elements matter, because text itself is inline
alternatively you could use comments like this:
<div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div><!--
--><div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div>
I need to make a menu that looks like this:
The upper entries need to have a right margin of (lets say) 20px.
Problem arises, when I add the sub-menus, especially like the red one with the «large Menu-Entry». The top menu needs to stay in place and all the sub-menus need to be centered under that top menu. But either the top-entry is enlarged (which makes the green part shift to the right) or the sub-entries aren't positioned at the center of the top-entry...
As the menu-entries are dynamic, I can't predict how wide they are and thus I can't apply any math.
Also - the sub-entries are only visible, if the user is on the according page (means - the green part only shows «Menu1» if the user is on the red page)
I «could» use some javascript to do it after the page loaded, but I'm trying to avoid that.
I tried all sorts of stuff, including negative margins and whatnot - but nothing seems to work... Any ideas?
[edit]
some html here - tried to fumble around like crazy with no results (except the one from Brad, but that one doesn't work with IE)
<div class="center">
<div class="menu-container">
<div class="menu-title">Title 1</div>
<div class="menu-items">
Testomat<br />
Yo, this is a long text
</div>
</div>
<div class="menu-container">
<div class="menu-title">Title 1</div>
<div class="menu-items">
Testomat<br />
Yo, this is a long text
</div>
</div>
</div>
CSS:
.menu-container{
width: 100px;
float: left;
}
.menu-items, .menu-title{
text-align: center;
}
If you don't care about IE: Have you tried using display:table-cell?
You could try something like:
<div class="menu-container">
<div class="menu-title">
Menu1
</div>
<div class="menu-items">
<div class="menu-item">large menu item</div>
<div class="menu-item">sub</div>
<div class="menu-item">sub</div>
</div>
</div>
With CSS:
.menu-container {
display : table;
width: 100px;
}
.menu-title, .menu-items {
display : table-cell;
width: 100%;
text-align: center;
}
Naturally, the content within the table-cells will wrap to 100px.
My first approach uses different html mark-up to your own, but gives the visual effect you you're looking for with, perhaps, a slight increase in semantics:
html:
<dl>
<dt>Title One</dt>
<dd>Testomat</dd>
<dd>Yo, this is a long text</dd>
</dl>
<dl>
<dt>Title Two</dt>
<dd>Testomat</dd>
<dd>Yo, this is a long text</dd>
</dl>
css:
dl {
width: 100px;
float: left;
position: relative;
text-align: center;
color: #0f0;
}
dl:nth-child(odd) {
color: #f00;
}
Demo of the above at JS Fiddle.
Edited, to add the following:
On looking at your posted mark-up, and applying the css:
.menu-container {
width: 100px;
float: left;
text-align: center;
overflow: hidden;
color: #0f0;
}
.menu-container:nth-child(odd) {
color: #f00;
}
JS Fiddle demo
I'm not sure why you're experiencing difficulties. Admittedly, at the moment, I'm only able to test on Chrome and IE 8 (Win XP), but the above seems to work. Am I missing something important in your problem description?