How would I go about adding a comment section under each photo in this gallery?
(You can view an image of what I'm hoping to do here: - won't let me post a link because i'm a new member.... zhttp://www.some-things.net/storage/Picture109.p ng )
I know the iframe may not be the best way to be working this - but my friend wanted a sideways scroll area with wordpress integration and I couldn't find any suitable gallery plugins.
The images are displayed in a ul/ li - but because it's display-inline it won't let me put in another div below each image.
http://www.some-things.net/storage/anna/wordpress/?page_id=49
Basically I want to create a section under each picture that contains room for comment if needed - something like the picture above.
Any tips on the code needed would be great!
Put the image and the content in a div, and float all these divs to the left. use inline-block as display and whitespace: no-wrap.
<html>
<head>
<style type="text/css">
#container {
white-space: nowrap;
}
.image {
display: inline-block;
width: 150px;
}
.comment {
display: block;
white-space: normal;
}
</style>
<div id="container"><p>
<div class="image">
<div style="height: 200px; width: 150px; background: gold;"></div>
<div class="comment">Bla bla bla lorum ipsum doler amet amor etc. etc.</div>
</div>
<div class="image">
<div style="height: 200px; width: 150px; background: gold;"></div>
<div class="comment">Bla bla bla lorum ipsum doler amet amor etc. etc.</div>
</div>
...
...
</p></div>
Related
I have been searching for a solution to this problem for almost two weeks now and I am still completely lost. I'm making a simple landing page and I don't want any scrolling. I need a header followed by a bootstrap row containing a paragraph and an image. Here is my ms paint example:
Simple enough right? Well I can not for the life of me figure out how to get that image to shrink to fit into that row. Here is what is happening to me now. Note: When you run the snippet on stackoverflow the window is to small. It is easier to see whats going on with the JSFiddle
body, html {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
}
.content {
}
img {
height: 100%;
}
h1 {
background-color: white;
}
.banner {
height: 90%;
background-color: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="banner">
<h1>
Header
</h1>
<div class="row content">
<p> Hello World </p>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png">
</div>
</div>
Result
The part that throws me off is that the .row extends beyond it's parent container .banner. How do we force this to stay inside that red area?
I've messed with object-fit, flex-grow, flex-shrink, a flex-basis and none of these seem to create the desired behavior. I'm going insane trying to figure this problem out. Maybe flexbox is the wrong tool to use here? But I'm trying to take advantage of the bootstrap grid system's media queries. Thanks in advance for any help!
Note: The reason I have everything nested in the <div class=".banner"> is because I want the header to have a shadow onto the red background.
Edit
The root of my question is how do I get an image to fit inside of a row that only covers the red area?
You can update your code like below:
img {
/* this will make the image stretch and no overflow*/
height:0;
min-height:100%;
/**/
}
h1 {
background-color: white;
}
.banner {
height: 90vh;
background-color: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >
<div class="banner d-flex flex-column"> <!-- flex container here -->
<h1>
Header
</h1>
<div class="d-flex content flex-grow-1 p-2"> <!-- flex-grow here to fill remaining space -->
<p> Hello World </p>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="ml-auto">
</div>
</div>
Try this:
<div class="banner">
<h1>Header</h1>
<div class="row content">
<div class="col-6">
<p> Hello World</p>
</div>
<div class="col-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png">
</div>
</div>
</div>
Working example: Codepen.
PS.: In my example I tried to follow your ms paint example.
Use display:block to the img & this also helps in responsiveness you can check the fiddle if you want to explore.
OR
You can also look into vh for height and vw for width that will take care of all screen resolutions.
fiddle to playaround.
body,
html {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
}
.content {
height: 80%;
background-color: red;
display: flex;
justify-content: space-around;
}
img {
max-width: 100%;
max-height: 100%;
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="header">
<h1>Header</h1>
</div>
<div class="row content">
<p> Hello World </p>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png">
</div>
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.
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
I use reveal.js and write my slides in Markdown code. Now I want to display my content (text, unordered list of bullet points or even an image) in a classical two-column text layout. I would prefer a solution which may be more complex in initial configuration as long as the actual writing of content in Markdown remains easy.
Since I prefer not to run a local server, I write my markdown within the main HTML file.
Update: As the first answer indicates this should be achieved with CSS. (I updated my question accordingly.) Still, I couldn't find any description how to do it with CSS.
I am using CSS flex, it is working fine.
<style>
.container{
display: flex;
}
.col{
flex: 1;
}
</style>
<div class="container">
<div class="col">
Column 1 Content
</div>
<div class="col">
Column 2 Content
</div>
</div>
UPDATE:
Since pandoc supports fenced div,
::: {.container}
:::: {.col}
Column 1 Content
::::
:::: {.col}
Column 2 Content
::::
:::
For the style, we can either use flex or grid, both work fine.
Using flex
<style>
.container{
display: flex;
}
.col {
flex: 1;
}
</style>
Using grid
<style>
.container{
display: grid;
grid-auto-flow: column;
}
</style>
I created two ID's in an external css file, custom.css, which I attached to my reveal.js file with the field css: custom.css in the YAML header.
#left {
left:-8.33%;
text-align: left;
float: left;
width:50%;
z-index:-10;
}
#right {
left:31.25%;
top: 75px;
float: right;
text-align: right;
z-index:-10;
width:50%;
}
I placed div elements with the right and left ID's in my markdown document to produce a two column layout.
<div id="right">
- You can place two graphs on a slide
- Or two columns of text
- These are all created with div elements
</div>
.multiCol {
display: table;
table-layout: fixed; // don't fudge depending on content
width: 100%;
text-align: left; // matter of taste, makes imho sense
.col {
display: table-cell;
vertical-align: top;
width: 50%;
padding: 2% 0 2% 3%; // some vertical, and between columns
&:first-of-type { padding-left: 0; } // there's nothing before col1
}
}
Put this into your custom theme, i.e. right before
// Theme template ------------------------------
#import "../template/theme";
// ---------------------------------------------
How to use? – easy! And not limited to 2 columns:
<section>
<h3>Doing two-column (this headline still full-width)</h3>
<div class='multiCol'>
<div class='col'>
Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur.
</div>
<div class='col'>
Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.
</div>
</div>
And simply more regular full-width text in the following. But hey, there is also:
<div class='multiCol'>
<div class='col'>Also works for 3 columns...</div>
<div class='col'>...as we can show in...</div>
<div class='col'>...this example here.</div>
</div>
</section>
No float needed
no clearfix needed
size independent (→ only percentages used)
2 columns, 3 columns, 4 columns ...
<table> ist often considered “outdated” (since it got so badly abused for layout purposes in early html days, and still today for html in emails...) but to the contrary at least as a property layout:table it has many legit uses, is often the most simple solution and widely compatible.
The CSS Grid Layout allows very flexible layouts, two-column formats and more complex layouts.
For two columns, the following CSS snippet may be used. It defines two column templates with equal size, each 1 fraction (1fr) of the available width, and a gutter space of 10px between the columns.
.twocolumn {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
text-align: left;
}
It can be used as follows
<section>
<h2>Slide Title</h2>
<div class="twocolumn">
<div>
Column One
</div>
<div>
Column Two
</div>
</div>
</section>
I solved the problem with two floating <div>-Elements:
<section>
<div style="text-align: left; float: left;">
<p data-markdown>- This is my first left element</p>
<p data-markdown>- This is my second left element</p>
<!-- more Elements -->
</div>
<div style="text-align: right; float: right;">
<p data-markdown>- This is my first right element</p>
<p data-markdown>- This is my second rightelement</p>
<!-- more Elements -->
</div>
</section>
I found out, if you want to use markdowns inside the div-container, you have to wrap the elements in p-tags. If you write data-markdown into the parent section-Tag, it will be ignored inside the div
I hope I could help!
I have found the following way to show one element in such a way it seems to be in a column layout
Text going to the right <!-- .element: style="float: right; width: 40%" -->
Text going on the left column <!-- .element: style="width: 40%" -->
But actually it doesn't work with more than one element on the right
I could not understand you completely but I guess you may found the answer in ramnathv post.
---
layout: slide
---
{{{ content }}}
<div class='left' style='float:left;width:{{left.width}}'>
{{{ left.html }}}
</div>
<div class='right' style='float:right;width:{{right.width}}'>
{{{ right.html }}}
</div>
it worked for me
Is there a way to clear the bottom of an image? I tried margin-bottom: 100%, and padding-bottom: 100%, but it is not working because I have more divs below which clears all.
I want to clear only the content of the image containing div.
HTML
<div class="contentpart">
<p>
<a href="http://www.s1waterbike.ro/wp-content/uploads/2013/07/contact-feat1.jpg">
<img class="alignnone size-medium wp-image-88" alt="contact-feat" src="http://www.s1waterbike.ro/wp-content/uploads/2013/07/contact-feat1-300x200.jpg" height="200" width="300">
</a>
</p>
the text....
</div>
<div class="contentpart">
The text.....
</div>
CSS
.contentpart img {
float: left;
clear: bottom;
}
Example of how the solution should look like
Based on your image, you can realize the layout by using the the following HTML:
<div class="contentpart">
<a href="#">
<img src="http://placehold.it/300x200">
</a>
Donec adipiscing, lorem non euismod venenatis...
</div>
and applying the following CSS rules:
.contentpart {
border: 1px dotted gray;
display: table;
}
.contentpart a {
display: table-cell;
vertical-align: top;
padding-right: 20px;
}
You can see the demo at: http://jsfiddle.net/audetwebdesign/wknjA/
How This Works
You can use CSS tables to get the text to stay in a single column without wrapping it in a block element.
Apply display: table to the parent block and display: table-cell to the a tag.
You can have some control over white space by applying some padding to the a element.