I'm trying to create a simple footer with images to each side and some text in the middle.
Problem is the images aren't the same size and therefore the alignment is from top to bottom , i know their is a way to align to middle - I've tried to use
vertical-align:middle
But it didn't work.
Here is what I've done so far - if you have more tips for me regarding doing footer right i'll be glad to hear.
Fiddle
Use the flexbox module with justify-content: space-between. This will push the child nodes of your container away from each other so the left and right images sit against the edges.
footer {
display: flex;
justify-content: space-between;
text-align: justify;
}
<footer>
<img>
<span>text</span>
<img>
</footer>
display: flex; align-items: center; justify-content: center; on the footer ul will align the items in the footer vertically and horizontally. Also removed the fixed height from your footer and am applying top/bottom padding instead which will ensure even spacing on the top/bottom. And you have a random stray </p> that needs to be removed.
img {
width: 120px;
}
.container-footer {
margin: auto;
width: 100%;
text-align: center;
}
#footer {
background-color: #01b3d0;
padding: 1em 0;
}
#footer-images ul {
padding: 0;
}
#footer-images li {
list-style: none;
margin: 0 10px;
display: block;
}
#footer-images ul {
display: flex;
justify-content: center;
align-items: center;
}
<div class="container-footer">
<div id="footer">
<div id="footer-images">
<ul>
<li class="pull-left">
<img src="http://www.essai-automobile.com/actualites/photos-logos/jaguar-logo.png" class="pull-left img-responsive">
</li>
<li class="pull-center">©QBS LAB - ©TCWD 2017</li>
<li class="pull-right">
<img src="https://s-media-cache-ak0.pinimg.com/originals/9e/0d/0d/9e0d0d29921036c2ff5e78d891573f45.png" class="pull-right img-responsive">
</li>
</ul>
</div>
</div>
</div>
Related
So, I was doing this Frontend Mentor challenge (at https://www.frontendmentor.io/challenges/notifications-page-DqK5QAmKbC) while I had run into this problem - I couldn't align the "Chess" image in the "Kimberly Smith" notification to the right.
Here is all the code I have written related to the notification:
The HTML:
<div class="notification">
<div class="notification__container">
<img src="assets\images\avatar-kimberly-smith.webp" class="image" />
<div class="notification-formatting">
<div class="align-right">
<div><strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time>
</div>
<div class="img-container"><img src="assets/images/image-chess.webp" alt="Chess" class="image chess"></div>
</div>
</div>
</div>
</div>
The CSS:
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
background-color: #f6fafd;
display: flex;
align-items: center;
}
.notification__container {
display: flex;
align-items: center;
}
.image {
display: flex;
align-items: center;
width: 50px;
margin-right: 5px;
}
.notification_image--main-message-content {
display: flex;
}
.align-right {
display: flex;
}
Here is the Output
Here is the Expected Output
Here are the solutions I have tried:
display: block;
margin-left: auto;
float: right;
text-align: right;
display: flex;
justify-content: right;
Here is the live website: https://prismatic-capybara-4ba8da.netlify.app/
Here is the GitHub Repository for deeper reference: https://github.com/vishalscodes/frontendmentor-notifications-page
Thank You.
It's possible to massively simplify your markup as follows:
Class notification. This is a flex box so items will try to fit side by side on one line. As the user's image, the main text and the 'chess' image are all on one line we don't need to add any more divs to this. We can just insert them directly, especially as you've made all img elements as blocks (this is always a good move imho).
Class notification-formatting is used to isolate the text so that the text and time stack on top of each other. As this is a flex item, this will try to shrink to fit the content.
We don't need a wrapper around the image with the chess class as that's already a block level element so to get that to move to the right I've added an align-right class. That simply has an inline-margin of auto 0. This is a fairly standard way of moving elements to the right of the page.
Some good resources here:
Complete guide to flexbox on css tricks
Margin on css tricks
Useful css reset by Kevin Powell (e.g. setting img to block)
Any questions just drop me a comment and I'll try help out.
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
background-color: #f6fafd;
display: flex;
gap: 5px; /* I've removed the margin-right from your image and set the gap on the parent element so your 'chess' image moves all the way to the right */
}
.image {
width: 50px;
border-radius: 5px;
}
.align-right {
margin-inline: auto 0; /* if we set the right margin to 0 then setting the left margin to 'auto' causes it to expand to fit the available width */
}
.round {
border-radius: 100vw; /* make the radius massive so it defaults to a circle */
}
<div class="notification">
<img src="https://picsum.photos/id/64/50/50" class="image round" />
<div class="notification-formatting">
<strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time>
</div>
<img src="https://picsum.photos/id/237/50/50" alt="Chess" class="image align-right">
</div>
Base on your code you can set to
.align-right {justify-content: space-between; width: 100%; display: flex;}
and set 100% width to all parents divs you can see code bellow
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
width: 100%;
background-color: #f6fafd;
display: flex;
align-items: center;
}
.notification-formatting {
width: 100%;
}
.notification__container {
display: flex;
align-items: center;
width: 100%;
}
.image {
display: flex;
align-items: center;
width: 50px;
margin-right: 5px;
}
.notification_image--main-message-content {
display: flex;
}
.align-right {
display: flex;
justify-content: space-between;
width: 100%;
}
<div class="notification">
<div class="notification__container">
<img src="assets\images\avatar-kimberly-smith.webp" class="image" />
<div class="notification-formatting">
<div class="align-right">
<div><strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time></div>
<div class="img-container"><img src="assets/images/image-chess.webp" alt="Chess" class="image chess"></div>
</div>
</div>
</div>
</div>
I'll try to align 3 Logos with the same height but with different widths on a row over the hole screen-width: The first image should be aligned at the left end of the screen, the third one should be aligned at the right end of the screen and the second one should float in between the other two images with the same space between them. The space should get smaller when the display gets smaller until it hit a defined minimum space. From there on if the display gets further smaller the hole row should scale down. I hope the image helps in clarify what I have in mind.
how it should look like
It's for a MailChimp Newsletter.
That is how far I got:
.my-logo-container{
width: 100%;
height: 80px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.my-logos{
flex: 1;
border: 1px solid red;
height: auto;
max-height: 100px;
}
<div class="my-logo-container">
<div class="my-logos">
<a href="https://via.placeholder.com/100x80.png">
<img src="https://via.placeholder.com/100x80.png">
</a>
</div>
<div class="my-logos">
<a href="https://via.placeholder.com/195x80.png">
<img src="https://via.placeholder.com/195x80.png">
</a>
</div>
<div class="my-logos">
<a href="https://via.placeholder.com/175x80.png">
<img src="https://via.placeholder.com/175x80.png">
</a>
</div>
</div>
Any Help is highly appreciated.
I have an alternative for you. Did you mean this?
.my-logo-container{
width: 100%;
margin:0;
}
ul.my-logos{
margin: 0;
padding: 0;
list-style: none;
}
ul.my-logos li{
width: 32.33333%;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin:0;
float: left;
text-align: center;
border:1px solid red;
}
ul.my-logos li a img{
max-width: 130px;
height:80px;
}
<div class="my-logo-container">
<ul class="my-logos">
<li>
<a href="https://via.placeholder.com/100x80.png">
<img src="https://via.placeholder.com/100x80.png">
</a>
</li>
<li>
<a href="https://via.placeholder.com/195x80.png">
<img src="https://via.placeholder.com/195x80.png">
</a>
</li>
<li>
<a href="https://via.placeholder.com/175x80.png">
<img src="https://via.placeholder.com/175x80.png">
</a>
</li>
</ul>
</div>
I came up with this solution: Instead of defining a minimum space in css I added more space into the images themselves. Now they can touch eachother and it still looks good. With display: flex; and justify-content: space-between; I arranged them in a row. With max-width: 100%; and height: auto; the Images auto-resizes on smaller screens. It works for me now.
.logo-container {
display: flex;
justify-content: space-between;
}
.logo {
max-width: 100%;
height: auto;
}
<div class="logo-container">
<img class="logo" src="https://via.placeholder.com/100x80.png">
<img class="logo" src="https://via.placeholder.com/195x80.png">
<img class="logo" src="https://via.placeholder.com/175x80.png">
</div>
I have a Flexbox in use for header navigation, the logo is aligned to the left and the ul items are aligned to the right as in a traditional style. Both the logo and the navigation links are flex items within a full width Flexbox, and I have given them both flex: 50%. The navigation links section is also a Flexbox (an inner Flexbox) to prevent the menu from stacking and instead behaving in a better responsive manner.
When I apply justify-content to that inner Flexbox, there is no change to the links, as if there is an overriding style or the property does not work on an inner text box. I should like the navigation links to equally divide themselves among the 50% of the screen width.
I've toyed with placing flex: auto on the items but can't keep it within the current layout by doing that, and I've tried fiddling with inline elements to see if I can remove any overriding property, but no cigar.
#nav {
display: flex;
flex: 50%;
align-items: center;
}
#logo {
margin-right: auto;
width: 50px;
height: auto;
}
#links {
margin-left: auto;
display: flex;
justify-content: space-between;
}
#links a {
text-decoration: none;
}
<nav id="nav">
<img id="logo" src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png"/>
<ul id="links">
<li><a href="#">Link1<a></li>
<li><a href="#">Link2<a></li>
<li><a href="#">Link3<a></li>
<li><a href="#">Link4<a></li>
</ul>
</nav>
You were pretty close. Important changes I made were to set the width of the #links <ul> to 50% and add justify-content: space-between to the container #nav wrapper. A few other style changes to the ul so it doesnt have default margin and padding and I think it is behaving as you are expecting now..
#nav {
display: flex;
align-items: center;
justify-content: space-between;
}
#logo {
width: 50px;
flex: 0 0 50px;
}
#links {
width: 50%;
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
}
#links a {
text-decoration: none;
}
<nav id="nav">
<img id="logo" src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png"/>
<ul id="links">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</nav>
I think you have problem with flex: 50%; CSS deceleration. It's not at proper place. I have re-write the html to use it properly and fixed the CSS according.
Here is the Modified CSS
#nav {
display: flex;
background: #eee;
}
#nav>#logo,
#nav>#links {
flex: 50%;
}
#logo img {
width: 50px;
height: auto;
}
#links {
display: flex;
justify-content: space-around;
list-style-type: none;
}
#links a {
text-decoration: none;
}
<nav id="nav">
<div id="logo"><img src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png" /> </div>
<ul id="links">
<li><a href="#">Link1<a></li>
<li><a href="#">Link2<a></li>
<li><a href="#">Link3<a></li>
<li><a href="#">Link4<a></li>
</ul>
</nav>
Also the code available at codepen https://codepen.io/mobarak/pen/jRjZxB/
I wanted the nav bar right at the top, to have the class with left on the left side, the class with middle right in the middle, and the class with right in the right side.
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.flex-container {
width: 100%;
}
.flex-container ul {
display: flex;
align-items: center;
justify-content: center;
}
.flex-container li {
border: 1px solid red;
}
.flex-container nav ul .nytl {
width: 189px;
height: 26px;
}
.flex-container nav ul .first {
justify-content: flex-start;
}
hr {
margin-top: 10px;
}
<div class="flex-container">
<nav>
<ul>
<li class="left">
<a href="#"><img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
</a>
</li>
<li class="left">
<a href="#"><img src="https://img.icons8.com/material-rounded/16/000000/search.png">
</a>
</li>
<li class="left">SPACE & COSMOS
</li>
<li class="middle"><img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl"></li>
<li class="right"><button>Subscribe</button> .
</li>
<li class="right"><button>Login</button></li>
</ul>
</nav>
<hr>
</div>
Try using auto margins to push the left and right elements away from the middle element.
(Also, since you're using the HTML5 nav element and CSS3 properties, you really don't need a ul to structure your layout. You can simplify your code substantially.)
nav {
display: flex;
align-items: center;
}
nav > * {
border: 1px solid red;
}
.nytl {
margin: 0 auto;
width: 189px;
height: 26px;
}
hr {
margin-top: 10px;
}
* {
padding: 0;
margin: 0;
}
<nav>
<a href="#">
<img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
</a>
<a href="#">
<img src="https://img.icons8.com/material-rounded/16/000000/search.png">
</a>
SPACE & COSMOS
<img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl">
<button>Subscribe</button>
<button>Login</button>
</nav>
<hr>
Learn more about auto margins here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
Here's another flex method you may find useful:
Aligning Three Divs Horizontally Using Flexbox
You may encounter another problem now: Because flex features such as auto margins, justify-content and align-items work by distributing free space, your middle item may not be perfectly centered. See these posts for more details and solutions:
Keep the middle item centered when side items have different widths
Center and right align flexbox elements
I would utilise the space-between option that flex brings with the justify-content property. You have to be careful of the way the code is listed for SEO purposes as opposed to placing anywhere and have the css reposition it all. It should cascade in natural order first.
.flex-thirds {
display: flex;
justify-content: space-between;
}
.flex-thirds .col {
width: 32%;
}
.nytl {
margin: 0 auto;
width: 189px;
height: 26px;
}
<div class="flex-thirds">
<div class="col">
<a href="#"><img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
</a>
<a href="#"><img src="https://img.icons8.com/material-rounded/16/000000/search.png">
</a>
SPACE & COSMOS
</div>
<div class="col">
<img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl">
</div>
<div class="col">
<button>Subscribe</button>
<button>Login</button>
</div>
</div>
You can find more about justify-content here at css-tricks
I wanted to create a list of items by displaying a name, a list of properties and an image. Although this seems like quite a common and easy problem, I am struggling to get it right.
After having changed the markup a dozen of times, I chose to represent the list by a ul in which each li consists of a h3(name), a ul(properties) and a img(image).
In order to make it fill the page a bit more, I used CSS's flexbox in order to put the image and the properties next to each other in a responsive way.
img {
max-width: 100px;
}
#example > ul > li {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
h3 {
width: 100%;
text-align: center;
}
div > ul {
border-left: 2px solid red;
}
<section id="example">
<ul>
<li>
<h3>Bulbasaur</h3>
<div>
<span>Properties</span>
<ul>
<li>green</li>
<li>seed</li>
<li>grass</li>
<li>poison</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" />
</li>
<li>
<h3>Charmander</h3>
<div>
<span>Properties</span>
<ul>
<li>orange or some kind of red, I am not completely sure</li>
<li>lizard</li>
<li>fire</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/7/73/004Charmander.png" />
</li>
<li>
<h3>Squirtle</h3>
<div>
<span>Properties</span>
<ul>
<li>blue</li>
<li>tiny turtle</li>
<li>water</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/3/39/007Squirtle.png" />
</li>
</ul>
</section>
This looks pretty nice when the properties for all elements are equally long, but it kind of looks messy when this is not the case (the property-lists are not properly aligned as indicated by the red lines in the above snippet). I know I could get all the content in a table, causing every table element to be aligned nicely under each other, but then I don't know how I can have my names in a different line than the properties and the image...
My question could thus be formulated as:
How can I align the properties nicely under each other in such a way that they are displayed next to the image (to fill the space on the screen)? Additionally I would like that the image is displayed under the properties when the screen becomes too small (i.e. responsive design) and a separate line for the name.
Any help will be greatly appreciated
Update:
As it turned out that my question is not that clear, I tried to make it more clear by adding the vertical red lines in the snippet. I manage to get the desired result when using a table, but then I have to omit the names (as shown in the attached image) and the responsiveness...
You can just create a simple item element, something like this:
HTML
<li class="item">
<h2>Charmander</h2>
<div class="content">
<h3>Properties</h3>
<ul>
<li>orange or some kind of red, I am not completely sure</li>
<li>lizard</li>
<li>fire</li>
</ul>
</div>
<div class="image">
<img src="http://cdn.bulbagarden.net/upload/7/73/004Charmander.png" />
</div>
</li>
I simply divided the element in three main sections: title, properties and the image.
As you can see the properties are still inside a <ul> because they are used like a enumeration.
CSS
#example > ul {
padding: 0;
}
.item {
width: 100%;
background: #CCC;
padding: 20px;
box-sizing: border-box;
/* Padding will be inside the element (will not affect the width/height) */
margin: 20px 0;
overflow: hidden;
/* Used to keep the floated element inside the flow */
}
.item h2 {
text-align: center;
}
.item .content {
width: 60%;
float: left;
padding-left: 20px;
box-sizing: border-box;
}
.item .image {
width: 200px;
float: left;
}
.item img {
width: 100%;
}
.item .content ul {
border-left: 2px solid red;
margin-bottom: 20px;
}
With the first selector (#example > ul) I reset the default padding it has.
The text of the properties will just start on a new-line if it is too long (you can test this by resizing the window).
You can just edit the padding-left of the .content element, to move the properties a little bit more to the right or to the left.
Example JsFiddle
This is just to give you an example of how you want to approach this.
Hope it was helpful!
I have just been so stupid. As an alternative to the helpful answer of nkmol, it could also be as simple as changing the justify-content property to space-between and correct it by setting width and auto-margins.
img {
max-width: 100px;
}
#example > ul > li {
width: 80%;
margin: auto;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
h3 {
width: 100%;
text-align: center;
}
li > div > ul {
border-left: 2px solid red;
}
<section id="example">
<ul>
<li>
<h3>Bulbasaur</h3>
<div>
<span>Properties</span>
<ul>
<li>green</li>
<li>seed</li>
<li>grass</li>
<li>poison</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" />
</li>
<li>
<h3>Charmander</h3>
<div>
<span>Properties</span>
<ul>
<li>orange or some kind of red, I am not completely sure</li>
<li>lizard</li>
<li>fire</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/7/73/004Charmander.png" />
</li>
<li>
<h3>Squirtle</h3>
<div>
<span>Properties</span>
<ul>
<li>blue</li>
<li>tiny turtle</li>
<li>water</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/3/39/007Squirtle.png" />
</li>
</ul>
</section>
PS: I'm sorry for my awful question...
You need to break out your items from the primary UL
You can think of it as though you were building a table, but instead, use divs and then use a UL just to list the properties. This way, you can style each of the individual elements as needed.
look here: https://jsfiddle.net/oq04f6pm/2/
<section id="example">
<div class="section-title">Bulbasaur</div>
<div class="section-list">
<span>Properties</span>
<ul>
<li>green</li>
<li>seed</li>
<li>grass</li>
<li>poison</li>
</ul>
</div>
<div class="section-image">
<img src="http://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" />
</div>
</section>
img {
max-width: 100px;
}
.section-title {
width: 100%;
text-align: center;
font-weight: bold;
}
.section-list, .section-image {
width: 50%;
float: left;
}
.section-image {
text-align: center;
}
#media screen and (max-width: 400px) {
.section-list, .section-image {
width: 100%;
}
.section-image {
text-align: left;
}
}