HTML
<div class="button">
<a href="#">
<img id="img1" src="icons/onas1.svg" alt="O nas[enter image description here][1]">
</>
<a href="#">
<img id="img2" src="icons/kontakt1.svg" alt="kontakt">
</a>
</div>
</div>
CSS:
div.button img{
position: fixed;
height: 10%;
display: inline-block;
}
Hey, how can I put these two images next to each other?
Try this code:
div a img{
height: 10%;
width:200px;
}
<div class="button">
<a href="#">
<img id="img1" src="https://yt3.ggpht.com/-3N3L1JNdZ4k/AAAAAAAAAAI/AAAAAAAAAAA/PmHzBEEHaU4/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="O nas[enter image description here][1]">
</>
<a href="#">
<img id="img2" src="https://yt3.ggpht.com/-3N3L1JNdZ4k/AAAAAAAAAAI/AAAAAAAAAAA/PmHzBEEHaU4/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="kontakt">
</a>
</div>
</div>
Related
This question already has answers here:
Why are flex items not wrapping?
(2 answers)
Closed 1 year ago.
So am new to learning/using the "display: flex" property.
*{
margin: 10px;
padding: 0;
-webkit-margin:0;
-webkit-padding:0;
}
.container {
display: flex;
}
.imagebox {
position: relative;
flex: 1;
margin: 15px;
}
.imagebox img {
max-height: 200px;
max-width: 100%;
position: absolute;
}
<div class="container">
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
</div>
Here are 4 boxes of a certain size but if I insert one more, the size gets smaller as it tries to fit the 5th box in the same line, how to get the 5th box in the next line?
*{
margin: 10px;
padding: 0;
-webkit-margin:0;
-webkit-padding:0;
}
.container {
display: flex;
}
.imagebox {
position: relative;
flex: 1;
margin: 15px;
}
.imagebox img {
max-height: 200px;
max-width: 100%;
position: absolute;
}
<div class="container">
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
</div>
I want the images to automatically go on to the next line when it reaches the end of the main container, I have tried reducing the width as well, it didn't work.
It's probably something very simple but I can't really seem to find the way, also am not fully accustomed with all the flexbox properties
change width of .imagebox {} accordingly
*{
padding: 0;
-webkit-margin:0;
-webkit-padding:0;
}
.container {
display: flex;
flex-wrap: wrap;
}
.imagebox {
position: relative;
margin: 15px;
width: 20%;
}
.imagebox img {
max-height: 200px;
max-width: 100%;
}
<div class="container">
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
</div>
You can use the flex-wrap property:
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
Flexbox doesn't play nicely with absolutely-positioned children. By taking the images out of the normal flow, they no longer take part in the flexbox calculations. The remaining imagebox element is not wide enough to trigger wrapping.
.container {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.imagebox {
flex: 0 0 calc((100% - 45px) / 4);
}
.imagebox img {
max-height: 200px;
max-width: 100%;
}
<div class="container">
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
</div>
My images won't sit side by side & I'm not sure why.
I've set the display to be inline and it still doesn't work.
I think i should mention that i'd like the 4 colourful buttons to be grouped as how they are now, 2 on top and 2 on the bottom, but i'd still like for it to be inline with the logo and the pfp image..
Here's what I have for the css page so far.
and here's how they currently sit
*the 'vengage' box is the logo, so it should sit like
on 1 row [vengage][home][settings] [pfp]
and then have [fyp] [search] directly underneath the home & settings buttons
if it's useful, this is along the lines of how i'd like them to sit on the webpage if possible
* {
box-sizing: border-box;
}
body {
width: 999px;
height: 1000px;
text-decoration: none;
}
.logo {
padding: 5px;
display: flex;
}
.menu {
display: flex;
flex-direction: row;
}
<div class='menu'>
<div class='logo'>
<img src='https://via.placeholder.com/140x100?text=LOGO' width='100'>
</div>
<div class='above'>
<div class='homebutton'>
<a href='Code draft.html'>
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
<div class='settingsbutton'>
<a href='menusettings.html'>
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
</div>
<div class='below'>
<div class='fypbutton'>
<a href='fyp.html'>
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
<div class='searchbutton'>
<a href='search.html'>
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
</div>
<div class="pfp">
<a href="Profile Page.html">
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
</div>
Remove display: inline from menu class and add display: flex again if you want to align all the elements with the logo than just change the position of menu div, make it as a mother div. Hope it solves your problem
* {
box-sizing: border-box;
}
body {
display: inline-block;
width: 999px;
height: 1000px;
text-decoration: none;
}
.logo {
padding: 5px;
display: inline;
}
.menu {
display: flex;
}
<div class='menu'>
<div class='logo'>
<img src='https://i.ibb.co/h9L3Fyq/logo.jpg' width='100'>
</div>
<div class='above'>
<div class='homebutton'>
<a href='Code draft.html'>
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
<div class='settingsbutton'>
<a href='menusettings.html'>
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
</div>
<div class='below'>
<div class='fypbutton'>
<a href='fyp.html'>
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
<div class='searchbutton'>
<a href='search.html'>
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
</div>
<div class="pfp">
<a href="Profile Page.html">
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
</div>
try this instead,
Add display:flex; to body. also add vertical-align:top;to all image
that is
body{
display:flex;
}
img{
vertical-align:top;
}
* {
box-sizing: border-box;
}
body{
width: 999px;
height: 1000px;
text-decoration: none;
display:flex;
}
img{
vertical-align:top;
border:1px solid #111;
}
<div class='logo'>
<img src='https://i.stack.imgur.com/8U82Z.png' width ="75px">
</div>
<div class = 'menu'>
<div class = 'above'></div>
<div class = 'homebutton'>
<a href = 'Code draft.html'>
<img src = 'https://i.stack.imgur.com/QM11G.png' width = "50px">
</a>
</div>
<div class = 'settingsbutton'>
<a href = 'menusettings.html'>
<img src = 'https://i.stack.imgur.com/LFcP2.png' width = "50px">
</a>
</div>
</div>
<div class = 'below'>
<div class = 'fypbutton'>
<a href = 'fyp.html'>
<img src = 'https://i.stack.imgur.com/rV49R.png' width = "50px">
</a>
</div>
<div class = 'searchbutton'>
<a href = 'search.html'>
<img src = 'https://i.stack.imgur.com/z6gVZ.png' width = "50px">
</a>
</div>
</div>
<div class="pfp">
<a href="Profile Page.html">
<img src='https://i.stack.imgur.com/qpEQy.png' width = "29px">
</a>
</div>
</div>
This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Closed 3 years ago.
My probleme is difficult to explain but i will try.
I develop a web site. For my nav-bar i have 3 div in a header (burger-menu / loogo / social-networks). I use flex for display with justify-content: between.
My probleme is i want to center my second div by the viewport and not by my two other divs. Someone know how to do ?
(Please excuse my bad English)
<header>
<div class="burger">
<img src="assets/img/cutlery.svg" alt="icône couteau cuillère burger menu">
</div>
<div class="logo">
<img src="assets/img/bio.svg" alt="">
</div>
<div class="network">
<a href="#">
<img src="assets/img/facebook.svg" alt="">
</a>
<a href="#">
<img src="assets/img/linkedin.svg" alt="">
</a>
<a href="#">
<img src="assets/img/instagram.svg" alt="">
</a>
<a href="#">
<img src="assets/img/france.svg" alt="">
</a>
<a href="#">
<img src="assets/img/english.svg" alt="">
</a>
</div>
</header>
You can add
position: absolute;
width: 100%;
display: flex;
justify-content: center;
to your second div. Look here:
header{
display: flex;
width: 100%;
justify-content: space-between;
}
.logo{
position: absolute;
width: 100%;
display: flex;
justify-content: center;
}
<header>
<div class="burger">
Burger
</div>
<div class="logo">
Logo
</div>
<div class="network">
<a href="#">
Fb
</a>
<a href="#">
Ln
</a>
<a href="#">
I
</a>
<a href="#">
Fr
</a>
<a href="#">
En
</a>
</div>
</header>
Just tested the code below, and it works. This is to give an idea; CSS attributes have to be in separate file of course:
<div style="display:flex;flex-direction:row;width:100%">
<div style="flex:1 1 0px">
<span style="float:right;background-color:lime">Left Element</span>
</div>
<div style="background-color:blue">Central element</div>
<div style="flex:1 1 0px">
<span style="background-color:red">Right 1</span>
<span style="background-color:gray">Right 2</span>
<span style="background-color:magenta">Right 3</span>
</div>
</div>
Or you can have like this.
header{
display: flex;
width: 100%;
justify-content: space-between;
}
.right-menu{
display: flex;
flex: 0 0 55%;
justify-content: space-between;
}
.right-menu ul{
list-style:none;
margin:0;
}
.right-menu ul li{
display:inline-block;
}
<header>
<div class="burger">
Burger
</div>
<div class="right-menu">
<div class="logo">
Logo
</div>
<ul>
<li>
<a href="#">
Fb
</a>
</li>
<li>
<a href="#">
Ln
</a>
</li>
<li>
<a href="#">
I
</a>
</li>
<li>
<a href="#">
Fr
</a>
</li>
<li>
<a href="#">
En
</a>
</li>
</ul>
</div>
</header>
Give all the child elements of the flexbox a flex: 1 to give them the same width, then give your .logo div a text-align: center.
header {
display: flex;
width: 960px;
background: lightblue;
}
header>* {
flex: 1;
}
header .logo {
text-align: center;
}
header .network {
text-align: right;
}
<header>
<div class="burger">
<img src="http://placekitten.com/40/40" alt="icône couteau cuillère burger menu">
</div>
<div class="logo">
<img src="http://placekitten.com/200/100" alt="">
</div>
<div class="network">
<a href="#">
<img src="http://placekitten.com/50/50" alt="">
</a>
<a href="#">
<img src="http://placekitten.com/50/50" alt="">
</a>
<a href="#">
<img src="http://placekitten.com/50/50" alt="">
</a>
<a href="#">
<img src="http://placekitten.com/50/50" alt="">
</a>
<a href="#">
<img src="http://placekitten.com/50/50" alt="">
</a>
</div>
</header>
This answer well be helpful.
header {
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 1;
}
header > div {
display: inline-flex;
flex-basis: 33.33%;
align-items: center;
}
.burger {
justify-content: flex-start;
background-color: #AAAAAA;
}
.logo {
justify-content: center;
background-color: #DDDDDD;
}
.network {
justify-content: flex-end;
background-color: #AAAAAA;
}
<header>
<div class="burger">
<span>01</span>
<img src="assets/img/cutlery.svg" alt="">
</div>
<div class="logo">
<span>02</span>
<img src="assets/img/bio.svg" alt="">
</div>
<div class="network">
<a href="#">
<span>03</span>
<img src="assets/img/facebook.svg" alt="">
</a>
<a href="#">
<span>04</span>
<img src="assets/img/linkedin.svg" alt="">
</a>
<a href="#">
<span>05</span>
<img src="assets/img/instagram.svg" alt="">
</a>
<a href="#">
<span>06</span>
<img src="assets/img/france.svg" alt="">
</a>
<a href="#">
<span>07</span>
<img src="assets/img/english.svg" alt="">
</a>
</div>
</header>
I am trying to create a footer with 2 Images who link to a page.
The two links / Images shall stay on the right side of the footer.
The Images shall stand next to each other with a Little margin.
How to I manage this with css?
<footer>
<a href="http://www.google.de/" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
<a href="http://www.google.de" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
</footer>
Wrap them in a div and float it.
CSS:
.images-container {
float: right;
}
.images-container a {
margin-left: 5px;
}
HTML:
<footer>
<div class="images-container">
<a href="http://www.google.de/" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
<a href="http://www.google.de" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
</div>
</footer>
hi if you are using bootstrap framework try this code
html
<footer class="clearfix">
<ul class="links pull-right">
<li> <a href="http://www.google.de/" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
</li>
<li>
<a href="http://www.google.de" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
</li>
</ul>
</footer>
css
.links
{
list-style-type:none;
padding:0;
}
.links li
{
display:inline-block;
}
You can use float:right for your hyperlinks
footer a {
float:right;
}
footer a:first-child {
margin-left: 10px;
}
<footer>
<a href="http://www.google.de/" target="_blank">
<img src="http://placehold.it/50" alt="logo.jpg">
</a>
<a href="http://www.google.de" target="_blank">
<img src="http://placehold.it/50" alt="logo.jpg">
</a>
</footer>
In the following example I am trying to create a div that contains any number of other divs which are centered and contain four divs per row (with the last row containing however many are left if the total number of images is not divisible by four).
However, it's causing there to be a small (about 3 pixels) spacing below each row of images. Is there any way to make the images so they have no spacing above/below each row?
.container {
width: 100%;
display: table;
text-align: center;
}
.image {
display: inline-block;
width: 25%;
}
.image img {
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
}
<div class="container">
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
</div>
Just for good measure, here's a screenshot showing the gap I'm referring to:
You can fix this by adding vertical-align: top; to your images.
CSS
.image img {
vertical-align: top;
}
.container {
width: 100%;
display: table;
text-align: center;
}
.image {
display: inline-block;
width: 25%;
}
.image img {
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
vertical-align: top;
}
<div class="container">
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
</div>
Browser automatically adds some space between lines of (what it considers) text. You can resolve it simply by adding font-size: 0 to the images' wrapper.