Ok so I tried vertically aligning the text in my div. I tried all kinds of stuff. Turns out this little box is something I can't define and it is unknown and unwanted. I know that the green block is padding Anyone got a clue on this? This purple block is bugging me
.menu-intro {
position: relative;
}
.intro-img-div {
position: relative;
height: 300px;
width: 100%;
overflow: hidden;
align-content: center;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
object-fit: contain;
}
.menu-intro-img {
object-fit: contain;
position: relative;
width: 100%;
}
.menu-intro-text {
display: flex;
align-items: center;
flex-direction: column;
flex-flow: column;
height: 300px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
max-width: 50%;
overflow: hidden;
padding: 20px;
text-align: center;
}
.menu-intro-h1 {
margin: 0;
font-size: 3em;
}
.menu-intro-text p {
font-size: 1.5em;
}
<main>
<h1 class="text-centered">Our Menu</h1>
<div class="menu">
<div class="menu-intro">
<div class="intro-img-div">
<img src="style/img/menuintroimg.jpeg" alt="Background image of our food" class="menu-intro-img">
</div>
<div class="menu-intro-text">
<h1 class="menu-intro-h1">A look at <span class="red-text">Jacque's</span></h1>
<p>Scroll down and see what we have to offer!</p>
</div>
</div>
</div>
</main>
TURNS out this space is space that isn't filled out by text but is still registered as part of the div. You need to define another way of justifying content inside the div
justify-content:space-evenly;
Your menu-intro-text is a flex with explicitly defined height: 300px.
The children elements looks to take less part of that height. So the purple area is a part that is left. And Inspector shows it to you in a convenient way. Now using this hint of the Inspector you can decide what to do: add more children to fill that unutilized space or you may want to distribute it with justify-content:space-evenly as it was proposed by #Andelo Motika above or, in my opinion, better with justify-content:space-around
Related
I am trying to code a resume template just to learn the basics about HTML and CSS. However I have a problem when it comes to positioning a rectangle inside another one. I have been searching for hours and how to fix this but not sure why it isn't appearing at all. I wanted the rectangle to appear over the blue one but under the "Name" text as like a highlighting bar.
I believe it has to do with how I am positioning my elements. I tried using z-index as well but none of the changes I am making is working.
Also as a quick follow up, I wanted to know why I can't align the text "Name" in the center of my rectangle. I tried doing text-align:center but that doesn't do anything either. I feel like I am missing a major concept here with both of these problems. Any insight would be appreciated.
I pasted the code I am working with here: https://jsfiddle.net/Lx09fvcw/1/
Specifically this HTML part:
<svg class = "leftBar">
<rect id="leftRec">
<div class="Name">Name</div>
<div class = "icon">
<img src ="img/education.png">
</div>
</rect>
<rect id = "rightRec"></rect>
</svg>
As an edit I originally wanted a rectangle above another one like this: https://imgur.com/a/eOUGT8n
I am trying to align everything inside an A4 Size Page, but the blue rectangle has a gap between the leftmost part of the A4 page. Since I am not allowed to use absolute, I would just like some insight into how to do that because nothing is working that I am trying online. Not asking for someone to implement it for me but just show me the way as it is a bit confusing. Thanks for the help
Current code: http://jsfiddle.net/05p9qo7t/1/
Keep in mind you can't directly append div as a child to rect, circle, and path. You just can do it with foreignObject, but I strongly not recommend that way.
But if you insist on such a thing you can check the foreignObject documentation here.
If you want to create a resume template in another way I can share some code for you for better illustration.
EDIT:
Here is an alternative solution for what you looking for, check the code snippet below:
.container {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: flex-start;
}
.container>div.right-rect {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
width: 100%;
max-width: 200px;
height: 100%;
background-color: #003d73;
}
.container>div.right-rect>span.name {
font-weight: bold;
color: white;
font-size: 35px;
}
.container>div.right-rect>span.name,
.container>div.right-rect>div.icon {
margin-top: 20px;
}
<div class="container">
<div class="right-rect">
<span class="name">Name</span>
<div class="icon">
<img src="img/education.png">
</div>
</div>
<div class="left-rect"></div>
</div>
NOTE: I just use 100vh and 100vw to fit every viewport, you can replace them with any suitable value.
Implementing left rectangle without position: absolute;
To avoid using position: absolute;, first of all, you should wrap all your element in your related parent, so you need to move
<div class="over-rect"></div>
and
<span class="name">Name</span>
to the related parent where in our case it is div with blue-rect class, then since we used pseudo-class styling we should modify some of our styles to make items fit the new position in the flow. After that we should get rid of position: absolute; and replace them with relative one.
This is optional and better for responsive designs in case you don't care about these stuffs you can keep up with absolute positioning.
But we also must do some modification in the flow with modifying the top element of items positioned relatively, so we add a top element to our style to move relative items with respect to their parent positioning.
Check out the code revises below:
body {
background: rgb(204, 204, 204);
}
.container {
width: 200px;
height: 29.7cm;
display: flex;
align-items: center;
justify-content: flex-start;
}
.container>div.blue-rect {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
width: 200px;
max-width: 200px;
height: 100%;
background-color: #003d73;
}
.container>div.blue-rect>div.over-rect {
position: relative;
top: 20px;
width: 100%;
max-width: 200px;
height: 3%;
background-color: red;
}
.container>div.blue-rect>span.name {
position: relative;
top: -18px;
z-index: 20;
font-weight: bold;
color: white;
font-size: 35px;
}
.container>div.blue-rect>div.icon {
margin-top: 10px;
}
.education {
width: 60px;
height: auto;
}
page[size="A4"] {
position: relative;
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
#media print {
body,
page[size="A4"] {
margin: 0;
box-shadow: 0;
}
}
<page size="A4">
<div class="container">
<div class="blue-rect">
<div class="over-rect"></div>
<span class="name">Name</span>
<div class="icon">
<img class="education" src="img/education.png">
</div>
</div>
</div>
</page>
I want to center .donut-graphs inside .dashboard horizontally, so the space between the right edge of the sidebar and the left edge of .donut-graphs is the same as the space from the right edge of .donut-graphs and the right edge of the screen. I have managed to do so, but I had to remove position: fixed from .navbar. The problem is, I can't do that because my sidebar has to stay on top of the screen when you scroll up/down, and with position: fixed on .navbar, the graphs aren't centered properly.
HTML:
<div class="container">
<div class="navbar">
</div>
<div class="content">
<div class="dashboard">
<div class="donut-graphs">
<div class="dashboard-income">
Div 1
</div>
<div class="dashboard-overall">
Div 2
</div>
<div class="dashboard-spent">
Div 3
</div>
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0;
}
.container {
display: flex;
align-items: stretch;
max-width: 100%;
min-height: 100vh;
}
.navbar {
background-color: #ddd;
flex: 0 0 230px;
position: fixed;
height: 100vh;
width: 230px;
}
.content {
flex: 1;
overflow-x: auto;
text-align: center;
}
.donut-graphs {
display: inline-flex;
border: 1px solid;
margin: 50px auto 0;
position: relative;
text-align: left;
}
.dashboard-income,
.dashboard-overall,
.dashboard-spent {
height: 256px;
width: 357px;
display: inline-block;
}
.dashboard-income {
background-color: green;
}
.dashboard-overall {
background-color: blue;
}
.dashboard-spent {
background-color: red;
}
How can I overcome the issue?
Demo
position: fixed puts element above everything. That element won't attach to any element in body because it is the way that works. It only becomes dependent of viewport
What you want to achive could be done with position: absolute but parent (whose child you want to center) has to be position: relative for this to work.
Read more about positioning elements in css here
.content { padding-left:230px; }
Should do the trick.
Assigning your navbar a fixed position takes it out of the document flow, so when centering your donut graphs the browser doesn't take the navbar into account.
Giving the .content element a padding equivalent to the width of the navbar makes up for this.
The only problem with this approach is that if .navbar changes dimensions, you'll need to change the padding on .content to match.
Can somebody please explain why is it important to keep flex direction as column in this case? When you change it to row or row reverse, some portion of the image shrinks in width
JS Fiddle: https://jsfiddle.net/fbshqg0c/7/
.main {
width: 100%;
}
.left {
position: relative;
display: flex;
flex-direction: column;
background-color: #fff;
width: 50%;
}
.text {
display: flex;
align-items: center;
}
.text-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
}
.width100 {
color: #fff;
text-align: center;
width: 100%;
}
<div class="main">
<div class="left">
<img src="https://via.placeholder.com/350x150">
<div class="text text-img-overlay">
<div class="width100">
<h1>500x320</h1>
</div>
</div>
</div>
</div>
That's because the default value for align-items (alignment of secondary axis: Y when direction is row or X when direction is column) property is stretch, so when you use flex-direction: column the image is stretched on the X axis, but when you change it to flex-direction: row then it's stretched on the Y axis (vertical fit, but not horizontal).
You have to define width: 100% for the image.
I’m not completely sure what you mean because I didn’t see any difference but you don’t have a width value for the image, so probably this will fix your issue.
img {
width: 100%;
}
For a web application, I'm to position an animated emoji along with some text in a div. These elements are to remain separated in a fully responsive way. Behold:
I'm using flex to accomplish this. That ensures that even if the screen size becomes extremely small, separation is still kept by stacking these one on top of the other.
To accomplish it, the whole outer div is wrapped in:
.act{
display: flex;
flex-wrap: wrap;
background-color: #E1F5FE;
padding: 10px;
border-radius: 10px;
align-items: center;
}
Next, the animated image inside the div is wrapped in:
.anim {
flex: 1 1;
min-width: 64px;
text-align: center;
}
.anim > img {
width: 100%;
height: auto;
max-width: 50px;
}
Lastly, the text along with the image is wrapped in:
.txt {
flex: 1 1 180px;
text-align: center;
}
Did you notice the tear drops on the emoji? Those are separate from the image, and are to be animated in html5.
I can't figure out how to ensure those tear drops stay precisely around the eyes of the emoji. I have tried using a z-index alongwith position:absolute (e.g. see the following):
<div class="anim">
<div class="tear" style="z-index:2;position:absolute;margin-top: 30px;margin-left: 110px;"></div>
<div class="tear" style="z-index:2;position:absolute;margin-top: 30px;margin-left: 84px;"></div>
<img src="sad.png">
</div>
This isn't responsive at all.
Moreover, If I try usingposition:relative, that makes it impossible to overlap the tear shape over the emoji, regardless of what z-index I set.
Please help me fix this situation. Ideally, I want to stick to using flex because otherwise, it's perfect for my needs.
Note: Answers to a similar SO question don't help since I've already included what they're suggesting.
To accomplish that you need a wrapper around the image and text, that take the size of the image.
Here is a sample code, where I added an extra wrapper, image, around the anim, and then made the anim display as inline block.
Here the image wrapper become the flex item instead, and will allow the anim to behave and be sized as the image, and create the boundaries you need to be able to place the eyes at a fixed position on top the image.
Stack snippet
.act {
display: flex;
flex-wrap: wrap;
background-color: #E1F5FE;
padding: 10px;
border-radius: 10px;
align-items: center;
}
.image {
flex: 1 1;
min-width: 64px;
text-align: center;
}
.anim {
display: inline-block;
position: relative;
}
.anim>img {
width: 100%;
max-width: 50px;
}
.txt {
flex: 1 1 180px;
text-align: center;
}
.tear {
position:absolute;
top: 10px;
left: 30px;
width: 10px;
height: 10px;
background: blue;
}
.tear:first-child {
left: 10px;"
}
<div class="act">
<div class="image">
<div class="anim">
<div class="tear"></div>
<div class="tear"></div>
<img src="http://placehold.it/150">
</div>
</div>
<div class="txt">
Some text
</div>
</div>
I'm having an issue with flexbox on IE11 and while I'm aware there's lots of known issue, I haven't been able to find a solution...
<div class="latest-posts">
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
<div class="article-content">
<h2>THIS IS POST TITLE</h2>
<p>BLAH</p>
</div>
</article>
</div>
And the CSS...
img {
max-width: 100%;
}
.latest-posts {
margin: 30px auto;
}
article.post-grid {
width: 375px;
float: left;
margin: 0 25px 100px 0;
padding-bottom: 20px;
background-color: #fff;
border: 1px solid #f3f3f3;
border-radius: 2px;
font-size: 14px;
line-height: 26px;
display: flex;
flex: 1 0 auto;
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
}
.article-content {
padding: 20px 35px;
}
Images are getting stretched within a flex container.
Applying align-items: flex-start (I figured, since "stretched" is the default value...) or justify-content: flex-start doesn't seem to work.
Codepen: example of what I mean
What am I doing wrong?
to avoid this funny behavior, you may reset the flex-shrink property.
This looks like a bug, despite what Microsoft says:
<'flex-shrink'>
Sets the flex shrink factor or negative flexibility for the flex item. The flex shrink factor determines how much a flex item will shrink relative to the other items in the flex container.
If omitted, the element's negative flexibility is "0". A negative value is not valid.
Source: https://msdn.microsoft.com/en-us/library/jj127297%28v=vs.85%29.aspx https://msdn.microsoft.com/en-us//library/hh772069%28v=vs.85%29.aspx
img {
max-width: 100%;
flex-shrink: 0;
}
img {
max-width: 100%;
flex-shrink: 0;
}
.latest-posts {
margin: 30px auto;
}
article.post-grid {
width: 375px;
float: left;
margin: 0 25px 100px 0;
padding-bottom: 20px;
background-color: #fff;
border: 1px solid #f3f3f3;
border-radius: 2px;
font-size: 14px;
line-height: 26px;
display: flex;
flex: 1 0 auto;
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
}
article.post-grid .article-content {
padding: 20px 35px;
}
<div class="latest-posts">
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
<div class="article-content">
<h2>THIS IS POST TITLE</h2>
<p>Society excited by cottage private an it esteems. Fully begin on by wound an. Girl rich in do up or both. At declared in as rejoiced of together.</p>
</div>
</article>
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
<div class="article-content">
<h2>MUCH LONGER POST TITLE TO ILLUSTRATE HEIGHTS</h2>
<p>Recommend new contented intention improving bed performed age.</p>
</div>
</article>
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
<div class="article-content">
<h2>SHORT TITLE</h2>
<p>Merry alone do it burst me songs. Sorry equal charm joy her those folly ham. In they no is many both. Recommend new contented intention improving bed performed age. Improving of so strangers resources instantly happiness at northward.</p>
</div>
</article>
</div>
http://codepen.io/anon/pen/KzBOvq
I had image stretch on the cross-axis (stretch in height, using flex-direction: row).
This Stack Overflow Q/A helped me solve it:
Link here
I had to set the following CSS on my img:
align-self: flex-start;
You might need another value than flex-start of course, depending on your goal. Mine is to have my image be at the top of the row.
I had a similar bug in IE11.
The styles were taken from Bootstrap 4.1, so for the fluid images I had:
.img-fluid {
border: none;
height: auto;
max-width: 100%;
}
In my case it appeared that the reason was in max-width: 100% so when I changed it to width: 100% the bug disappeared:
.img-fluid {
border: none;
height: auto;
width: 100%;
}
This solution is not for everyone's case but I hope it would be helpful.
in my case combination of "flex-shrink: 0" suggested by G-Cyr and "align-self: flex-begin" suggested by Rick Schoonbeek did the trick. I had a wrapper which was using flex box to center the image with a "justify-content: center;"
All was good in IE 11, Chrome, Safari except IE Edge was not able to display correctly. adding the two attributes on image resolved the problem with IE Edge.
I tried every solution here but nothing worked. The only thing I was using flexbox for was to vertically center an image shown when hovering another image. So I just used a more classic solution à la top: 50%; transform: translateY(-50%) and then it was ok. So essentially not using flexbox at all then.. #hateIE
I had an issue with stretched product images in IE11, and I did some research and tried different things.
This was my code:
.productImage {
position: relative;
overflow: hidden;
img {
position: absolute;
display: block;
height: 100%;
object-fit: contain;
top: 0;
}
}
I then realized that my image height: 100% was the culprit of the stretched image, and I simply removed my height, but then my image was at the top of my .productImage container instead of being centered vertically. I introduced flex here and positioned it through a simple align-items: center, but this of course didn't work in IE11. I also tried the flex-shrink: 0 but that didn't work either.
I then went ahead to skip using flex and tried the classic top: 50%; left: 50%; transform: translate(-50%, -50%); but this wasn't good either since I already had a transform in use for my zoom on hover effect on the image.
I ended up with this solution instead:
.productImage {
position: relative;
overflow: hidden;
img {
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
}
It worked like a charm