I have three figures, each with different sizes and different figcaptions.
I want them to display inline (so if the last figure doesn't fit in the line, it'll move the next line).
Here's what I have so far: https://jsfiddle.net/Jonjei/31kteL68/6/ (The preview corner isn't as accurate to what I see in a normal window)
Images are random placeholders and do not belong to me.
The problem:
The figcaptions take up all the space and are pushing the next figure to the next line.
Solutions I'm looking for:
Make each figcaption text stop at the edge of its figure and move to a new line within the figcaption.
Have the figure (with its figcaption) move to the next line if it's too large to fit in the first.
Any other general suggestions and tips are more than welcome. I managed to make the text work with a single-row table, but that doesn't help when I want the last figure to move to the next line.
.container {
border: 5px transparent solid;
border-radius: 2px;
margin: 2% 10% 2% 10%;
padding: 0px 7% 0px 7%;
}
.fig-container{
display:flex;
width:100vw;
}
figure{
flex-grow:1;
display:block;
text-align:left;
background:#e3e3e3;
}
<!-- images are placeholders and belong to their respective owners -->
<div class="container" align="center">
<h1 style="font-size: 1.5rem">OTHER NOTES</h1>
<div class="fig-container">
<figure><img src="https://is3-ssl.mzstatic.com/image/thumb/Purple5/v4/da/83/ae/da83ae00-d126-1200-1588-c74c59aa1a38/source/256x256bb.jpg" alt=""><figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption></figure>
<figure><img src="https://www.petmd.com/sites/default/files/petmd-puppy-weight.jpg" alt=""><figcaption>Duis ut nulla sed dolor ultrices ornare sed pharetra ligula. Phasellus sapien augue, eleifend ut odio vel, suscipit auctor purus.</figcaption></figure>
<figure><img src="https://vetstreet-brightspot.s3.amazonaws.com/56/d831705c9f11e19be6005056ad4734/file/puppy_training-tips-335mk022012-200454626-001.jpg" alt=""><figcaption>Proin volutpat dictum leo eget pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</figcaption></figure>
</div>
Related
I have an HTML component that has an image floating to the left and text on the right. When the text's height is larger than the image, the text will wrap to the left. I want to add some padding between the image and the wrapped text. I could add a bottom padding to the image, but I don't want the padding to show up when the text is not wrapped. Here is what the component should look like when the text is no wrapped. The image should not have a bottom padding:
Here is what it should look like when the text is wrapped. There should be some padding between the image and the wrapped text:
Is there a way to do this through css?
An idea in case the image height is fixed or known:
.container {
border:2px solid;
min-height:200px; /* same as image height */
font-size:19px;
}
.container img {
float:left;
margin:0 20px 20px 0;
}
<div class="container">
<img src="https://picsum.photos/id/1014/200/200" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum quis mi vitae molestie. Sed scelerisque fringilla interdum. Duis ac purus nisl. Nulla vehicula vehicula turpis id convallis. Etiam nec nisl nibh. Mauris lorem mauris, vehicula nec massa in, accumsan egestas eros. Integer vehicula nulla sed enim laoreet maximus. Vestibulum at interdum sem. Sed interdum volutpat massa,
</div>
Yes, you can do it. Follow this example for HTML and css.
body {
margin: 20px;
text-align: center;
}
img {
float: left;
margin: 0px 10px 5px 10px;
}
p {
text-align: justify;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>
Wraping an Image with the text
</title>
</head>
<body>
<div class="square">
<div>
<img src= "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1024px-Image_created_with_a_mobile_phone.png" alt="Longtail boat in Thailand" width="300px">
</div>
<p>
How many times were you frustrated while looking
out for a good collection of programming/algorithm
/interview questions? What did you expect and what
did you get? This portal has been created to
provide well written, well thought and well
explained solutions for selected questions.
An IIT Roorkee alumnus and founder of GeeksforGeeks.
He loves to solve programming problems in most
efficient ways. Apart from GeeksforGeeks, he has
worked with DE Shaw and Co. as a software developer
and JIIT Noida as an assistant professor. It is a
good platform to learn programming. It is an
educational website. Prepare for the Recruitment
drive of product based companies like Microsoft,
Amazon, Adobe etc with a free online placement
preparation course.
</p>
</div>
</body>
</html>
I've got a problem with setting the width of <hr> elements. I mean I want my <hr> to be displayed half of the full width like this image:
As you can see the <hr> element is between the <h1> tag and paragraph and it's half of screen full width.
I have searched and all I got was to setting the <hr> element like this:
<hr size="30">
But that just does not work. So do you know how to set the width of <hr> element?
Set the style attributes of the hr element in css
hr {
width:50%;
margin:0 auto;
}
hr.half-width{
width:50%;
margin: 0 auto;
}
Then add class="half-width" to the hr element.
You can do the following things
Move <hr /> inside title element [<h2> in this example]
Add padding-left:25% and padding-right:25% to title element
Add text-align:center to title element
h2{
font-size:50px;
padding:0 25%;
text-align:center;
}
h2 hr{ width:100%;height:10px;background:#000;}
<h2>
This is a very big title
<hr />
</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
Hope it helps.
Fortunately, there is an attribute for this, the only thing you need to do is use the following attribute. In this case, I am going to it a width of 75%. I hope that it'll be helpful to you
<hr width="75%">
try adjusting font size of your hr tag
hr{
font-size: 1.5em;
}
It seems that is not the hr tag. probably it's the border bottom for the span container the text. so the width of the span will define the line width. use padding for the span to adjust the line-width.
I did a search and it seems this is the theme you are using: https://theme.co/x/
You can do like this also
hr {
margin: 0rem 10rem 0rem 10rem;
}
It is easy to use BEM for fixed layouts. What is about css styles structure for adaptive web pages with media queries?
html sample:
<div class="t-news">
<div class="t-news__post b-post">
<div class="b-post__title"></div>
<div class="b-post__text--green"></div>
</div>
<div class="t-news__post b-post--small">
<div class="b-post__title"></div>
<div class="b-post__text--red"></div>
</div>
</div>
less sample:
.t-news {
&__post {
//some styles
}
}
.b-post {
&__title {
//some styles
}
&__text {
//some styles
&--red {
//some styles
}
&--green {
//some styles
}
}
&--small {
//some styles
}
}
.t-news - page template. It is a block that defines position of blocks inside.
.b-post - BEM block
.b-post__title - BEM element of b-post
.b-post__text--red - BEM modifier of b-post__text of b-post
Should I put media queries inside or outside my blocks?
In my experience, I realized that blocks shouldn't be responsible for their widths or margins for the sake of flexibility and modularity. Having "elastic" blocks in a project allow them to be moved around to occupy different areas (with different sizes) of a page without breaking functionality or layout. As for the margins, it's easier to keep consistent spaces between the blocks if they are defined on a higher level: a template block like, I assume, t-news is (considering the "t" is for template).
BEM is all about modularity, every piece of code that is related to a specific block stays in the block's folder in the file system, so it shouldn't be different with media queries, that are only a part of the CSS. The important thing is to know what the CSS is doing, for example: if a set of rules is defining areas and margins in a template, whether it needs media queries for that or not, these rules should be a part of the block that is responsible for these definitions.
This approach may generate a lot of media queries, and there may be a concern with rendering performance, but, according to this article, multiple media queries may affect performance only if they are different from each other. Repetitions of the same rule, like #media (max-width: 850px), will be serialized and interpreted as one.
This way, media queries related to areas and margins go in the template block, and additional media queries related to the components themselves, go in the components blocks. Since the template is responsible for sizes, I would change the "small" modifier, in your example, to the template block.
Also, I would reconsider using green and red as modifiers, since colors may change during the lifetime of a project. I suggest trying something that doesn't describe the appearance of the elements, like correct and alert.
Finally, remember that modifiers should folow element classes in the HTML, like b-post__text b-post__text--alert.
Here's your updated code:
Html:
<div class="t-news">
<div class="t-news__post b-post">
<div class="b-post__title">Title 1</div>
<div class="b-post__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</div>
</div>
<div class="t-news__post b-post">
<div class="b-post__title">Title 2</div>
<div class="b-post__text b-post__text--correct">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</div>
</div>
<div class="t-news__post t-news__post--small b-post">
<div class="b-post__title">Title 3</div>
<div class="b-post__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="t-news__post t-news__post--small b-post">
<div class="b-post__title">Title 4</div>
<div class="b-post__text b-post__text--alert">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
Scss:
.t-news {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
margin: -0.5rem;
&__post {
margin: 0.5rem;
width: calc(50% - 1rem);
#media (max-width: 800px) { width: calc(100% - 1rem); }
&--small {
width: calc(25% - 1rem);
#media (max-width: 800px) { width: calc(50% - 1rem); }
}
}
}
.b-post {
box-sizing: border-box;
border: 1px solid #eeb;
background: #ffc;
padding: 0.5rem;
&__title {
font-size: 1.5rem;
#media (max-width: 800px) { font-size: 1.25rem; }
}
&__text {
font-size: 1rem;
&--correct {
color: green;
}
&--alert {
color: red;
}
}
&--small {
border: none;
font-style: italic;
}
}
Hope this helps.
Is there anyway to allow flex items to grow in width but only in height when necessary. I love flexbox but find it painful that flex items in a row all grow to the same height even when there is not content to fill them and then display additional items further down the page. Ideally I would like flex items to arrange themselves into available space when previous items don't have sufficient content to fill the box and not leave a big space.
Is this my lack of knowledge or is it just not possible? If it's not possible, could the facility be added in updates etc.
(Sorry. I tried to upload diagrams to explain but my reputation isn't enough!)
[EDIT. Code added as request. Some style left to demonstrate the white space I want to be taken up by the other flex items.]
<!doctype html>
<html>
<head>
<style>
.content {
font-size: 2em;
width: 100%;
margin: 0px;
padding: 0px;
background-color: coral;
display:flex;
flex-direction:row;
flex-wrap: wrap;
justify-content: center;
align-content: stretch;
align-items: flex-start;
}
.flex-item {
box-sizing: border-box;
flex-grow: 1;
flex-shrink: 0;
flex-basis:40vw;
background-color: rgba(255, 255, 255, 0.9);
border: 2px solid white;
border-radius: 2px;
margin: 2vmin;
padding: 2vmin;
}
</style>
</head>
<body>
<div class="content">
<div class="flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu venenatis nisi. Sed nec purus consectetur, sodales mi vel, efficitur arcu. Vivamus id congue quam. Fusce imperdiet bibendum egestas. Mauris porttitor risus id pharetra pharetra. Vivamus et lorem erat. Nullam ac nulla ex. Nulla sit amet semper ligula. Integer augue sem, pharetra in ex ut, finibus mollis neque. Integer vulputate dolor massa, a maximus sem vehicula malesuada. Morbi a nulla ornare, egestas nisl in, ultrices est. Integer ut maximus elit. Cras ac velit condimentum, dapibus dui quis, mattis ex.
</div>
<div class="flex-item"><img src="https://pixabay.com/get/ec8630811c846e5862cb/1442266437/wheat-797086_1280.jpg" width="100%">
</div>
<div class="flex-item">Vivamus semper at tortor a lacinia. Nulla a suscipit felis. Aliquam erat volutpat. Integer dignissim suscipit nibh a accumsan.Fusce gravida nisl nec elit placerat porta. Ut feugiat feugiat lorem nec commodo. Morbi porttitor vel sapien id tincidunt. Vivamus venenatis pellentesque tempus.
</div>
<div class="flex-item"><img src="https://pixabay.com"/get/ec8630811c846e5862cb/1442266437/wheat-797086_1280.jpg" width="100%"> </div>
</div>
</body>
</html>
Apparently my question is not clear enough! I will try and expand with the sites constraints but not being allowed to post a diagram doesn't help.
There are Flex item boxes containing text, images or both. Flex item boxes containing images scale to the available space.
With high resolutions, text only boxes are the same width and height (square) so images scale ok (square) and all is chipper. However at say viewports of 400 px wide, the boxes containing just text, become long (say 200 x 1000px for sake of argument) and the image boxes are 200 x 200px (square). The next line is then display after the bottom of the flex item text leaving a big gap (say 800px high) below the image. Other flex boxes could fit in the space after the shrunk image but they don't move into the gap. Is that clear people who put the question on hold??
what you are looking for is the 'align-content' property which is default set to 'stretch' and justifies elements vertically (the cross-axis).
Opposed to 'justify-content', default 'flex-start' which justifies elements horizontally (main-axis).
'align-self', default 'auto', can be used to control individual items.
In other cases giving the max-height and height properties the same value will work too.
Which option to use depends on your personal requirement.
A very good resource for background info: Codrops CSS Reference - Flexbox
#Sharon
I believe here is your answer. Essentially everything in your solution has a relative width and height. Thus your inner box too. Giving your 'flex-item' both a min and max height will prevent height resizing. You need to do some more stuff, so have a look at the code.
body {
overflow: hidden;
/* just for testing, remove */
}
.flex-content {
width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-flow: row wrap;
}
.flex-item {
flex: 1 1 40vw;
min-height: 50px;
max-height: 50px;
background-color: rgba(255, 255, 255, 0.7);
text-align: center;
border: 2px solid white;
border-radius: 2px;
margin: 2vmin;
padding: 2vmin;
background-color: #fce4ec; /* for testing*/
}
<div class="flex-content">
<div class="flex-item">some text</div>
<div class="flex-item">some text data</div>
<div class="flex-item">some more text data</div>
<div class="flex-item">again some more text data</div>
<div class="flex-item">some text</div>
<div class="flex-item">some text data</div>
<div class="flex-item">some more text data</div>
<div class="flex-item">again some more text data</div>
<div class="flex-item">some text</div>
<div class="flex-item">some text data</div>
<div class="flex-item">some more text data</div>
<div class="flex-item">again some more text data</div>
</div>
I'm making myself a website but I'm a little stuck on an issue I am having.
Inside a div I have a block of text with variable height.
At the right side of the text I want to position an image width a variable width & height. It has to be aligned to the bottom
Above the image may not come any text.
It needs to be like this: https://www.dropbox.com/s/pqpttrvefrvci52/example.jpg
Here is the code I'm currently having:
HTML:
<div id="section">
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.
Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.
</p>
</div>
CSS
#section {
position: relative;
}
#image {
float: right;
margin-left: 20px;
position: absolute;
bottom: o;
right: 0;
}
With this code the image is aligned to the bottom right corner of the div, but the height of the div is lower then the height of the image.
Also the text just goes through the image.
you need a couple of things to fix this.
1) add padding-right to the section so it does not overlap with the image.
#section {
position: relative;
padding-right:<at least image width so the text doesn't overlap>
}
2) when you add a div and float in it, the float remove the image from the flow of the document so you need to add another internal div with the same height or make the height of the div the same height as your image or just add a floater div..
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<div style="clear:both"></div>
</div>
Here is a working solution: http://jsfiddle.net/zV3wm/
I can think of a way with variable image widths and text amounts, but it requires some duplication in the markup.
The gist is that you right-float a hidden version of the image, and then use overflow:hidden so that the paragraph against the float doesn't flow under it. Then, we use absolute positioning to place the non-hidden version of the image at the bottom of the container.
I have prepared a mockup at http://jsfiddle.net/UmGNZ/ (I have given the hidden image partial opacity, so you can see where it's being added to the document), but for a pseudo-HTML example:
<container with position:relative>
<right-float>
<hidden img tag with opacity: 0 />
<actual img tag with absolute positioning, bottom: 0, right: 0 />
</right-float>
<p with overflow:hidden (or auto) />
</container>
You could also try a pure CSS solution using CSS tables if you don't have to support IE7, but otherwise this should work down to IE6 if you use visibility:hidden in favour of opacity, and add a zoom:1 to the paragraph style.
This idea which allows a flexible image size: http://jsfiddle.net/David_Knowles/F3zZU/4/
.cell {display:table-cell;}
#section {
position: relative;
width:300px;
}
#image {
vertical-align: bottom;
}
<div id="section">
<div class="cell">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.</p>
</div>
<div id="image" class="cell">
<img src="http://placeimg.com/120/80/any" alt="image"/>
</div>
</div>
I dont thing I am correct but you can achieve that by float right and margin-top.
#img {
float: right;
margin-top: -140px;
}
Check this out: http://jsfiddle.net/wrujx/
I think best solution is to use a little bit of jQuery (JavaScript) and let each part do its job keeping it as simple as possible. Here's what you'd have:
HTML
<div id="wrapper">
<p>yourtexthere</p>
<img src="whatever.jpg"/>
</div>
CSS
#wrapper{
width:600px;
border:1px solid #000000;
}
p{
display:inline-block;
margin-right:20px;
}
img{
vertical-align:bottom;
}
jQuery
var parentWidth = $('#wrapper').width()
var imgWidth = $('img').width()
$('p').width((parentWidth - imgWidth) - 20)
And there you go plain and simple without extra tags and messy positioning.