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>
Related
<div class="icons">
<a href="#">
<img class="github" src="GitHub-Mark-64px.png" alt="github logo">
</a>
<a href="#">
<img class="github" src="GitHub-Mark-64px.png" alt="github logo">
</a>
<a href="#">
<img class="github" src="GitHub-Mark-64px.png" alt="github logo">
</a>
</div>
Picture my icons and what they look like now -
As far as CSS goes I have tried using justify content with space around but it spreads them to far apart. I have also tried playing around with padding and margin and it does not not seem to be doing anything. Do I have the html not set up correctly or am I doing something wrong with the css?
Margins works pretty fine.
/* You can use this */
a:not(:last-of-type) {
margin-right: 10px;
}
/* Or this */
a:not(:last-of-type) img {
margin-right: 10px;
}
<div class="icons">
<a href="#">
<img src="//via.placeholder.com/64">
</a>
<a href="#">
<img src="//via.placeholder.com/64">
</a>
<a href="#">
<img src="//via.placeholder.com/64">
</a>
</div>
Also there are many other ways to do it, so if it is not working in your environment it's issue with that and that cannot be debugged here.
Add margin-right to all github class. But not need margin-right github img in last <a>". that is taken by
a:last-child .github{
margin-right:0px;
}
.github{
width:50px;
height:50px;
margin-right:10px;
}
.icons{
margin:20px auto;
text-align:center;
}
a:last-child .github{
margin-right:0px;
}
.github{
width:50px;
height:50px;
margin-right:10px;
}
<div class="icons">
<img class="github" src="https://i.stack.imgur.com/x0ard.png" alt="github logo" />
<img class="github" src="https://i.stack.imgur.com/x0ard.png" alt="github logo" />
<img class="github" src="https://i.stack.imgur.com/x0ard.png" alt="github logo" />
</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>
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>
I have been trying to do an image gallery for my portfolio but I want them images without borders and next to each other both horizontally and Vertically. Unfortunately All my attempts have been unsuccessful.
.portfolio {
height: 1250px;
width: 80%;
margin: 0 auto;
background-color: #CF9;
}
#thumbs {
width: 20%;
height: 50px;
color: #090;
float: left;
font-size: 0px;
}
<div class="portfolio">
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
</div>
http://www.adhemas.com/ is kind of what I'm trying to achieve, except my images are all the same size (although I would not mind a how to make them different sizes but still stacked)
Element IDs should be unique within your entire document. If you have more than one element with the same ID, your HTML is invalid, which is likely to cause your web page to stop working as intended.
Source: Can multiple different HTML elements have the same ID if they're different types?
I suggest you use classes instead, which support having multiple elements with the same class.
Give all your elements a class of thumbs instead of an id. Then you can use .thumbs instead of #thumbs in your CSS rule to style your elements.
First thing to fix is the id. You cannot reuse the id in the html.
Next you need to set the a and the img to be constrained inside the .thumb element.
Something like the following
.portfolio {
height: 1250px;
width: 80%;
margin: 0 auto;
background-color: #CF9;
}
.thumbs {
width: 20%;
color: #090;
float: left;
font-size: 0px;
}
.thumbs a {display:block;}
.thumbs img{width:100%;}
<div class="portfolio">
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/1">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/2">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/3">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/4">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/5">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/6">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/7">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/8">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/9">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/10">
</a>
</div>
</div>
Removing the <div> tags completely and setting the <img> CLASS (don't use ID's more than once) to thumbs stacks the images nicely next to each other with no margins (thanks to your left float). Unless there's a reason to keep the <div>'s I suggest removing them as they're just in the way, they're also block elements which goes against the inline layout you're after.
I found many topics but I still have yet to find solution for my issue. When using image src from lorempixel, my code works well but when using image local (4000x3000), it not resizing to fit the div. Hope anyone can help me.
I'm using Bootstrap 3.1.1
HTML
<section class="portfolio">
<div class="portfolio-list">
<ul>
<li>
<div class="portfolio-box">
<a href="#">
<img src="img/thumb-1.jpg" alt="Portfolio item">
</a>
</div>
</li>
<li>
<div class="portfolio-box">
<a href="#">
<img src="http://lorempixel.com/598/386/" alt="Portfolio item">
</a>
</div>
</li>
<li>
<div class="portfolio-box">
<a href="#">
<img src="http://lorempixel.com/598/386/" alt="Portfolio item">
</a>
</div>
</li>
<li>
<div class="portfolio-box">
<a href="#">
<img src="http://lorempixel.com/598/386/" alt="Portfolio item">
</a>
</div>
</li>
<li>
<div class="portfolio-box">
<a href="#">
<img src="http://lorempixel.com/598/386/" alt="Portfolio item">
</a>
</div>
</li>
<li>
<div class="portfolio-box">
<a href="#">
<img src="http://lorempixel.com/598/386/" alt="Portfolio item">
</a>
</div>
</li>
</ul>
</div> <!-- end portfolio-list -->
</section> <!-- end portfolio -->
CSS
.portfolio-list{
background-color: #cccccc;
li{
float: left;
width: 33.33%;
display: block;
}
}
http://jsfiddle.net/2mbsb16m/
You should be setting the images immediate parent elements width and height. Then you can set the image to width:100%: height:auto;
.portfolio-box {
width:300px;
height:300px;
}
.portfolio-box img {
width:100%;
height:auto;
}
Updated fiddle: http://jsfiddle.net/donnellyjoe/2mbsb16m/2/