Placing logo with links inline - html

I am trying to place two logos with links inline in HTML in a jupyter notebook but couldn't get it working proprly.
<a href="https://colab.research.google.com/github/sample_repo/sample_notebook.ipynb">
<img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/, width=150, height=150/></a>
<a href="https://mybinder.org/v2/gh/https%3A%2F%2Fgithub%2Fsample_repo/main?filepath=sample_notebook.ipynb">
<img src="https://mybinder.org/badge_logo.svg" alt="Open In mybinder"/, width=150, height=150/></a>
What I have tried so far?
I tried to put the logo in a div and then tried to align it to left using css
I tried to place the logo with link in a list
None of them worked! The logos right now looks like this
What I am trying to achieve?
I want the logo to be inline separated by space placed from left to right

You can place them inside div with display: flex and disable flex-wrap.
Also do not set both width and height for your images, it can stretch them without keeping the original ration. Only define one property, see snippet.
.logo {
display: flex;
flex-wrap: none;
flex-gap: 1em;
}
/* space between links */
.logo > a {
margin-right: 6px;
}
/* scale your images like this */
img {
height: 40px;
}
<div class="logo">
<a href="https://colab.research.google.com/github/sample_repo/sample_notebook.ipynb">
<img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"></a>
<a href="https://mybinder.org/v2/gh/https%3A%2F%2Fgithub%2Fsample_repo/main?filepath=sample_notebook.ipynb">
<img src="https://mybinder.org/badge_logo.svg" alt="Open In mybinder" /></a>
</div>

For markdown application try to place Your code inside <p align="left">YOUR CODE</p> (see example below).
You can also choose left or right.
<p align="left">
<a href="https://colab.research.google.com/github/sample_repo/sample_notebook.ipynb">
<img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/, width=150, height=150/></a>
<a href="https://mybinder.org/v2/gh/https%3A%2F%2Fgithub%2Fsample_repo/main?filepath=sample_notebook.ipynb">
<img src="https://mybinder.org/badge_logo.svg" alt="Open In mybinder"/, width=150, height=150/></a>
</p>

Related

How can I center an image link in html?

I'm trying to use an image as a link but only one image can be clicked and the other images aren't working as links. I use text-center class
my HTML code:
<div class="foot text-center">
<img src="img/face.png" alt="facebook">
<img src="img/tw.png" alt="twitter">
<img src="img/in.png" alt="linkedin">
</div>
and my css file only has for "foot" class:
.foot{
height: 100px;
background-color: #401BE6;
}
what is the problem?
u need to define a display: block; on that <a href=''> element
Inline elements can't be aligned center unless we use the display: block property on them so apply the display: block property to the anchor elements
I hope I interpreted your desired final outcome.
https://jsfiddle.net/vLk8gtjs/30/
Make your buttons inline instead of vertically stacked.
Therefore: create a new class and class each link. I changed the bg to make it easier for me to work with
.img_links {
text-align: center;
display: inline-block;
width: 32%;
}
This aligns links within your div footer box.
I'm not sure why your links aren't working. Try this solution out and leave a comment if your images are displayed, but not clickable.
OPTION ONE
.foot.text-center {
display: block;
text-align: center;
}
OPTION TWO (INLINE CSS)
<div class="foot text-center" align="center">
<img src="img/face.png" alt="facebook">
<img src="img/tw.png" alt="twitter">
<img src="img/in.png" alt="linkedin">
</div>

Is there a way to align a button so that it is not all the way to the right?

I am creating a website and I am trying to align the button so it is right underneath the image. I have used tags and given a class name so I can then use this in css. However, the only values I know to put for 'text-align' is 'center', 'right' or 'left'. I tried using pixels (like 30px) but that wasn't working. I've provided an image of how part of the website looks like below.
css:
.imgButton{
text-align:right;
}
html:
<img id="course-image2" src ="https://www.dhresource.com/0x0/f2/albu/g8/M00/2D/C9/rBVaVFz-C7KAY4jwAAEi8hE3J14252.jpg/men-suit-men-tuxedo-custom-made-wedding-suits.jpg" width="260" height="500" alt="guy2" class="center"/>
<div class="imgButton">
<button class="check">Gentleman</button>
</div>
Image (note the 'Gentleman' button in the far right corner):
You can achieve this by wrapping both the img and button with a container and using flexbox to set the direction of items to be in a column.
.imgContainer {
display: flex;
flex-direction: column;
}
<div class="imgContainer">
<img id="course-image2" src ="https://www.dhresource.com/0x0/f2/albu/g8/M00/2D/C9/rBVaVFz-C7KAY4jwAAEi8hE3J14252.jpg/men-suit-men-tuxedo-custom-made-wedding-suits.jpg" width="260" height="500" alt="guy2" class="center"/>
<div class="imgButton">
<button class="check">Gentleman</button>
</div>
</div>

In Html5 how do I have Image link with text beneath it

In Html how do I have Image link with text beneath it, Ive read about Figure and Figure Caption but that seems to be only for a standalone image not one within an a link.
This is what I currently have, it shows the 470 x 470 text to the bottom left of the image instead of beneath it.
<a href="../images/txpvc3LLOvRWy5XLiJE9Zw==.jpg">470 x 470
<img
src="../images/txpvc3LLOvRWy5XLiJE9Zw==_thumbnail.jpg"
hspace="4"
height="100"
width="100"
align="top">
</a>
You can use <a> tags around the figure.
If you want to centre the text in the caption you'd have to set the figure to inline-block and the figcaption to have text-align: center
figure {
display: inline-block;
}
figcaption {
text-align: center;
}
<a href="#">
<figure>
<img src="https://via.placeholder.com/350x150" alt="demo image" />
<figcaption>This is an example of a link, it goes nowhere...</figcaption>
</figure>
</a>
Not sure what exactly you want.
My assumption is you want image and text both should be clickable and align the text to bottom.
Make your img as blocked element. So that the text will automatically comes below the image.
.testimg {display:block}
<a href="../images/txpvc3LLOvRWy5XLiJE9Zw==.jpg">
<img class="testimg"
src="http://miumosa.com/assets/products/sample-_20170209104115.png"
hspace="4"
height="100"
width="100"
align="top">470 x 470</a>
Try this.
You can change the width of img if required.
.imgtext {
text-align: center
}
.imgtext img {
display: inline-block;
margin: 0 auto;
width: 150px;
;
}
<div class="imgtext">
<img src="https://s14.postimg.org/u18a0yc1t/contact-1.jpg" alt="" />
<p>**Image text** </p>
</div>

Images will not center with CSS

Just turned in a programming assignment for my class and was talking to the teacher when he told me I was not allowed to use to center my images. He said I had to use id and class and then center in the stylesheet/CSS. This makes no sense to me, when I use the inline it works perfectly but I have tried everything I know to center in the stylesheet and nothing works. I have attached 2 examples from my code:
This works perfectly on centering image but the professor says it is not allowed:
<h5>Back View</h5>
<div style="text-align: center"/>
<a href="BackViewT-Shirt.html" target="_blank">
<img src="http://i1293.photobucket.com/albums/b581/AlaskanAdventureApparel/photo1_zpsff666fce.jpg" height="400" width="300" alt="Back View Alaskan Adventure T-Shirt"/>
</a>
Then tried using an id and class and nothing has worked, trying to center both the heading and the image:
HTML:
<h5 class="center">Back View</h5>
<a href="BackViewT-Shirt.html" target="_blank">
<img src="http://i1293.photobucket.com/albums/b581/AlaskanAdventureApparel/photo1_zpsff666fce.jpg" height="400" width="300" alt="Back View Alaskan Adventure T-Shirt"/>
</a>
StyleSheet:
.center {
text.align: center;
}
Your markup is wrong, you dropped the container div:
<h5>Back View</h5>
<div class="center">
<a href="BackViewT-Shirt.html" target="_blank">
<img src="http://i1293.photobucket.com/albums/b581/AlaskanAdventureApparel/photo1_zpsff666fce.jpg" height="400" width="300" alt="Back View Alaskan Adventure T-Shirt"/>
</a>
</div>
Also, you CSS has a typo (ALWAYS VALIDATE!)
.center {
text-align: center;
}
Here, the div aligns its inline contents.
As an aside, you could also do something like:
a{
display:block;
width:200px; /* This should be the width of the image */
margin:0 auto; /* This cryptic statement will center block-level elements */
}
.center {
text-align: center;
}
you used text.align instead of text-align
Your stylesheet also has a typo in it.
.center {
text.align: center;
}
Should be
.center {
text-align:center;
}

a href link on img

Hi I have the following code to have few links on top of img. It works well in FF but not in IE. It seems IE is not clickable if you put link on top of img
<div style="z-index:-6755;"><img alt="October Offer" src="images/offers/october-offer.jpg" /></div>
<a href="#" onclick="window.parent.SqueezeBox.close();">
<div style="display:block; width: 185px; height: 32px; position: relative; bottom: 50px; left: 260px;border:1px solid blue; "> </div>
</a>
are you just trying to make the image clickable?
you can't have <href> that's not a correct html tag.
either place <img> inside <a> like so: <img />
another way is to set a div with a background image of your image and then a link inside there, make the link display : block and make it the entire width and height of the div and the whole thing will be clickable.
You can add an on-click function to img-tag.
Example:
<img src="images/logo.png" alt="logo" onclick="home()">
and then redirect it to a page.
function home(){ location.replace("/index.html") }