Im having a problem with my footer ( started learning css two days ago).this is the bottom of my page:
https://gyazo.com/b681e5ca06f7f89bac727ea20a1ff3dd
now i want the links to stick to the bottom without manipulating margins seperately for each div. So i tried to make the parent div have position:relative and the insider element have position:absolute.
what happens is this:
https://gyazo.com/0031cbb528e4c80600f1533f4b60993d
the relevant code for CSS:
.footer {
width: 100%;
height: 200px;
float: left;
position: relative;
display: inline-block;
}
.infotype {
float: left;
display: inline-block;
color: black;
width: 30%;
margin-left: 30px;
bottom: 0 auto;
position: absolute;
}
relevant code for HTML:
<section class="row">
<div class="footer">
<div class="infotype data">
<h3>Rockets and spacecraft</h3>
Falcon 9<br>
<a class="info" href="#">Falcon Heavy</a><br>
<a class="info" href="#">Dragon</a>
</div>
<div class="infotype updates">
<h3>Updates</h3>
<a class="info" href="#">News</a><br>
<a class="info" href="#">Launch Manifest</a>
</div>
<div class="infotype about">
<h3>About SpaceX</h3>
<a class="info" href="#">Company</a><br>
<a class="info" href="#">Careers</a><br>
<a class="info" href="#">Gallery</a><br>
<a class="info" href="#">Shop</a>
</div>
</div>
</section>
sorry for my poor formatting skills, like i mentioned im new here.
I have removed the floats and absolute positioning, using flexboxes for the layout instead. You can read about flexboxes here. I also removed the line breaks in the HTML.
.footer {
width: 100%;
height: 200px;
position: relative;
display: flex;
justify-content: space-around;
}
.infotype {
display: flex;
flex-flow: column;
justify-content: flex-start;
}
h3 {
font-size: 1em;
}
<section class="row">
<div class="footer">
<div class="infotype data">
<h3>Rockets and spacecraft</h3>
Falcon 9
<a class="info" href="#">Falcon Heavy</a>
<a class="info" href="#">Dragon</a>
</div>
<div class="infotype updates">
<h3>Updates</h3>
<a class="info" href="#">News</a>
<a class="info" href="#">Launch Manifest</a>
</div>
<div class="infotype about">
<h3>About SpaceX</h3>
<a class="info" href="#">Company</a>
<a class="info" href="#">Careers</a>
<a class="info" href="#">Gallery</a>
<a class="info" href="#">Shop</a>
</div>
</div>
</section>
Try this html and css. Just create an inner div for .infotype to make position: absolute work correctly.
.footer {
width: 100%;
height: 200px;
float: left;
position: relative;
display: inline-block;
}
.infotype {
float: left;
display: inline-block;
color: black;
width: 30%;
margin-left: 30px;
position: relative;
}
.infotype-inner{
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
<section class="row">
<div class="footer">
<div class="infotype data">
<div class="infotype-inner">
<h3>Rockets and spacecraft</h3>
Falcon 9<br>
<a class="info" href="#">Falcon Heavy</a><br>
<a class="info" href="#">Dragon</a>
</div>
</div>
<div class="infotype updates">
<div class="infotype-inner">
<h3>Updates</h3>
<a class="info" href="#">News</a><br>
<a class="info" href="#">Launch Manifest</a>
</div>
</div>
<div class="infotype about">
<div class="infotype-inner">
<h3>About SpaceX</h3>
<a class="info" href="#">Company</a><br>
<a class="info" href="#">Careers</a><br>
<a class="info" href="#">Gallery</a><br>
<a class="info" href="#">Shop</a>
</div>
</div>
</div>
</section>
If you aren't worried about supporting old browsers, you can replace all of your css with:
.footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
More on flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You need something like this.
Try this code..
.footer {
width: 100%;
height: 200px;
position: relative;
}
.infotype {
float:left;
color: black;
width: 30%;
margin-left: 30px;
}
Related
I am trying to get a grid of cards with a text and an image where the image cover all card spare space. But I can't get the text to show, the text is scrolled off the card which has an overflow: hidden. (https://jsfiddle.net/s8gxuza0/)
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
gap: 24px;
}
.cell {
position: relative;
overflow: hidden;
border-radius: 6px;
padding-top: 100%;
background: red;
}
.link {
text-decoration: none;
color: inherit;
}
.content {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
}
.text {
padding: 16px;
}
<div class="grid">
<div class="cell">
<a class="link" href="https://stackoverflow.com/questions/65760464/grid-aspect-ratio-with-text-and-image-covering-all-spare-space" target="_blank">
<div class="content">
<img class="image" src="https://images.unsplash.com/photo-1499492568083-9115ab12d0d2?auto=format%2Ccompress&fit=crop&w=400" />
<div class="text">
text 1
</div>
</div>
</a>
</div>
<div class="cell">
<a class="link" href="https://stackoverflow.com/questions/65760464/grid-aspect-ratio-with-text-and-image-covering-all-spare-space" target="_blank">
<div class="content">
<img class="image" src="https://images.unsplash.com/photo-1533743409942-b91130480a7a?auto=format%2Ccompress&fit=crop&w=400" />
<div class="text">
text 2<br>
more text
</div>
</div>
</a>
</div>
<div class="cell">
<a class="link" href="https://stackoverflow.com/questions/65760464/grid-aspect-ratio-with-text-and-image-covering-all-spare-space" target="_blank">
<div class="content">
<img class="image" src="https://images.unsplash.com/photo-1505569127510-bde1536937bc?auto=format%2Ccompress&fit=crop&w=400" />
<div class="text">
text 3
</div>
</div>
</a>
</div>
<div class="cell">
<a class="link" href="https://stackoverflow.com/questions/65760464/grid-aspect-ratio-with-text-and-image-covering-all-spare-space" target="_blank">
<div class="content">
<img class="image" src="https://images.unsplash.com/photo-1531852855896-94f2949b34fe?auto=format%2Ccompress&fit=crop&w=400" />
<div class="text">
text 4<br>
more text
</div>
</div>
</a>
</div>
</div>
I too tryed with display: flex and flex: 1 1 auto but i didn't get it to work either.
Something like this, but keeping the aspect ratio of the whole card (image + text = aspect-ratio 1/1):
For example, as a diagram:
AND THIS FINAL VERSION
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
gap: 24px;
}
.cell {
position: relative;
overflow: hidden;
border-radius: 6px;
padding-top: 100%;
background: red;
}
.link {
text-decoration: none;
color: inherit;
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
}
.image {
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.text {
padding: 16px;
height: fit-content;
box-sizing: border-box;
}
<div class="grid">
<div class="cell">
<a class="link" href="https://stackoverflow.com/questions/65760464/grid-aspect-ratio-with-text-and-image-covering-all-spare-space" target="_blank">
<div class="content">
<div class="image" style="background-image: url(https://images.unsplash.com/photo-1499492568083-9115ab12d0d2?auto=format%2Ccompress&fit=crop&w=400);"></div>
<div class="text">
text 1
</div>
</div>
</a>
</div>
<div class="cell">
<a class="link" href="https://stackoverflow.com/questions/65760464/grid-aspect-ratio-with-text-and-image-covering-all-spare-space" target="_blank">
<div class="content">
<div class="image" style="background-image: url(https://images.unsplash.com/photo-1533743409942-b91130480a7a?auto=format%2Ccompress&fit=crop&w=400);"></div>
<div class="text">
text 2<br> more text
</div>
</div>
</a>
</div>
<div class="cell">
<a class="link" href="https://stackoverflow.com/questions/65760464/grid-aspect-ratio-with-text-and-image-covering-all-spare-space" target="_blank">
<div class="content">
<div class="image" style="background-image: url(https://images.unsplash.com/photo-1505569127510-bde1536937bc?auto=format%2Ccompress&fit=crop&w=400);"></div>
<div class="text">
text 3
</div>
</div>
</a>
</div>
<div class="cell">
<a class="link" href="https://stackoverflow.com/questions/65760464/grid-aspect-ratio-with-text-and-image-covering-all-spare-space" target="_blank">
<div class="content">
<div class="image" style="background-image: url(https://images.unsplash.com/photo-1531852855896-94f2949b34fe?auto=format%2Ccompress&fit=crop&w=400);"></div>
<div class="text">
text 4<br> more text
</div>
</div>
</a>
</div>
</div>
I want to have the span tag inside the div with the item class innerHTML to not cause a line break no matter its length. I also do not want to have the innerHTML that goes beyond the item width to overlap but be hidden. I have tried using CSS display, overflow and I have had no luck with preventing any line break. I have had success with ensuring no text overlaps when it goes beyond the item width.
#list {
overflow-x: hidden;
overflow-y: scroll;
height: 200px;
width: 200px;
}
.item {
width: 100%;
}
.item-div {
display: inline-block;
width: 10px;
height: 10px;
background-color: red;
}
.item-span {
overflow: hidden;
}
<div id="list">
<div class="item">
<div class="item-div">
</div>
<span class="item-span">Item</span>
</div>
<div class="item">
<div class="item-div">
</div>
<span class="item-span">Item ----------------------------------------------------------------------------------------------------</span>
</div>
<div class="item">
<div class="item-div">
</div>
<span class="item-span">Item</span>
</div>
</div>
You're looking for white-space: nowrap on .item-span:
#list {
overflow-x: hidden;
overflow-y: scroll;
height: 200px;
width: 200px;
}
.item {
width: 100%;
}
.item-div {
display: inline-block;
width: 10px;
height: 10px;
background-color: red;
}
.item-span {
white-space: nowrap;
}
<div id="list">
<div class="item">
<div class="item-div">
</div>
<span class="item-span">Item</span>
</div>
<div class="item">
<div class="item-div">
</div>
<span class="item-span">Item ----------------------------------------------------------------------------------------------------</span>
</div>
<div class="item">
<div class="item-div">
</div>
<span class="item-span">Item</span>
</div>
</div>
I have a request to set the width of buttons to the longest sibling in a row of buttons.
Rules:
Buttons sit in columns of a row
Button content dictate the width of button.
The longest button should set other sibling button's width
I've tried using flex: 1 with max/min-width however this will break rule 2. And I can easily do this in js I'm wondering if possible in css alone?
https://codepen.io/matthewharwood/pen/JvoVzE?editors=1100
.link {
height: 49px;
padding: 0 24px;
margin-right: 20px;
background: pink;
a {
display: flex;
align-items: center;
line-height: 49px;
justify-content: center;
}
}
.container {
width: 70%;
margin: 0 auto;
background: papayawhip;
padding: 30px;
display: flex;
}
.container2 {
width: 70%;
margin: 0 auto;
background: orange;
padding: 30px;
display: flex;
flex-wrap: wrap;
}
.container3 {
width: 70%;
margin: 0 auto;
background: honeydew;
padding: 30px;
display: flex;
flex-wrap: wrap;
}
<div class="container">
<div class="link">
<span> 1 button</span>
</div>
<div class="link">
<span> secondary button</span>
</div>
</div>
<div class="container2">
<div class="link">
<span> 1 button</span>
</div>
<div class="link">
<span> secondary button</span>
</div>
<div class="link">
<span> third button</span>
</div>
</div>
<div class="container3">
<div class="link">
<span> 1 button</span>
</div>
<div class="link">
<span> 2 button</span>
</div>
</div>
Important Notice: the solution below is a hack.
The idea here is to rely on direction column and inline-flex to have all element equal width (the longest one) then I use transformation in order to revert back the row direction.
I know it's a bad hack
.link {
height: 49px;
padding: 0 24px;
background: pink;
border:1px solid;
}
.container {
padding: 30px;
display: inline-flex;
flex-wrap:wrap;
flex-direction:column;
}
.link:nth-child(2) {
transform:translate(100%,-100%);
}
.link:nth-child(3) {
transform:translate(200%,-200%);
}
.link:nth-child(4) {
transform:translate(300%,-200%);
}
<div class="container">
<div class="link">
<span> 1 button</span>
</div>
<div class="link">
<span> secondary button</span>
</div>
</div>
<br>
<div class="container">
<div class="link">
<span> 1 button</span>
</div>
<div class="link">
<span> secondary button</span>
</div>
<div class="link">
<span> third button</span>
</div>
</div>
<br>
<div class="container">
<div class="link">
<span> 1 button</span>
</div>
<div class="link">
<span> 2 button</span>
</div>
</div>
This question already has answers here:
Why doesn't percentage padding / margin work on flex items in Firefox and Edge?
(2 answers)
Closed 5 years ago.
I have a problem with flexbox and height: auto in Firefox:
.portfolio {
width: 100%;
position: relative;
overflow: visible;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
background-color: red;
}
.portfolio a {
display: block;
background-color: black;
width: 30%;
height: auto;
padding-top: 30%;
/* 1:1 Aspect Ratio */
position: relative;
/* If you want text inside of it */
margin-bottom: 5%;
}
<div class="portfolio">
<a href="#">
<div class="portfolio_item">
</div>
</a>
<a href="#">
<div class="portfolio_item">
</div>
</a>
<a href="#">
<div class="portfolio_item">
</div>
</a>
<a href="#">
<div class="portfolio_item">
</div>
</a>
<a href="#">
<div class="portfolio_item">
</div>
</a>
<a href="#">
<div class="portfolio_item">
</div>
</a>
</div>
When div .portfolio have height: auto, in Firefox this div is not visible. Chrome, Safari and others works fine... I really don't have idea how to make this working... anyone?
.portfolio has no height by default. Setting the height to auto will do nothing in this case.
Setting height: 30%; to .portfolio's children will do nothing, because the logic of that goes: take up 30% of the parent's height, which is 0. Again, if you set .portfolio a's height to 30vh (30% of the viewport height) That would work, or if you could give it a pixel value
In the example below, I've set the height to 100px but obviously you can change it to whatever you want.
.portfolio {
width: 100%;
height: 100px;
position: relative;
overflow: visible;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
background-color: red;
}
.portfolio a {
display: block;
background-color: black;
width: 30%;
height: auto;
padding-top: 30%;
/* 1:1 Aspect Ratio */
position: relative;
/* If you want text inside of it */
margin-bottom: 5%;
}
<div class="portfolio">
<a href="#">
<div class="portfolio_item">
</div>
</a>
<a href="#">
<div class="portfolio_item">
</div>
</a>
<a href="#">
<div class="portfolio_item">
</div>
</a>
<a href="#">
<div class="portfolio_item">
</div>
</a>
<a href="#">
<div class="portfolio_item">
</div>
</a>
<a href="#">
<div class="portfolio_item">
</div>
</a>
</div>
When I zoom in from 100% to 90% or less, my li width changes from 229px to a larger value. Does anyone knows how to avoid.
It happens with Chrome and Firefox. IE9 - IE11 are fine
Your help or suggestion is appreciated.
<div class="product_section">
<ul class="list_product">
<li>
<a href="#">
<div class="product_frame" style="background-image: url(http://image.haier.com/pk/nv/consumer/refrigerator/tfnf/201208/P020121130740687231395.png);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd<br />dfdffd</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd<br />dfdffd</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd</p>
</div>
</a>
</li>
</ul>
</div>
.product_section {
display: inline-block;
margin: 15px;
width: 725px;
}
.product_frame {
display: inline-block;
margin: 0;
padding: 0;
width: 229px;
height: 229px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.product_name {
display: table;
vertical-align: middle;
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100px;
}
.product_name p {
display: table-cell;
vertical-align: middle;
text-align: left;
padding: 10px;
}
ul.list_product {
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
ul.list_product li {
display: inline-block;
margin: 8px;
width: 229px;
height: 329px;
float: left;
border: 1px solid #eeeeee;
border-radius: 5px;
position: relative;
}
ul.list_product li:nth-child(3n - 2) {
margin-left: 0;
}
ul.list_product li:nth-child(3n) {
margin-right: 0;
}
https://jsfiddle.net/pocnjpf9/1/
/ UPDATE /
After finished reading a previous post: Zoom changes the design layout
I have noticed that it's most likely caused by the border.
By applying box-sizing: border-box to the li fixes the problem.
Adding the following code of CSS will solve your problem.
*, *:before, *:after {
box-sizing: border-box;
}
Demo: https://jsfiddle.net/pocnjpf9/2/