Fashioning hyperlinked images using CSS

Looking for help with applying anchor tags to a styled image in CSS? I had already pushed the image to the right and resized it from 400px to 25px:

CSS:

.instagram-section {
    text-align: right;
    font-family: 'Life Savers', cursive;
    font-size: 1em;
}

.ig-logo {
    height: 25px;
}

However, once I surrounded the image in <a> tags, all the styling seemed to disappear:

HTML (before adding anchor tags to image):

<div class="instagram-section">
    <strong>... my <a href="https://www.instagram.com/myinstagram/">Instagram</strong></a>
    <!-- <a href="https://www.instagram.com/myinstagram/"> -->
    <img src="/img/icons/instagram/instagram-logo-400.png" class="ig-logo">
    <!-- </a> -->
</div>

https://i.sstatic.net/gw8rr.jpg

HTML (after adding anchor tags to image):

<div class="instagram-section">
    <strong>... my <a href="https://www.instagram.com/myinstagram/">Instagram</strong></a>
    <a href="https://www.instagram.com/myinstagram/">
    <img src="/img/icons/instagram/instagram-logo-400.png" class="ig-logo">
    </a>
</div>

https://i.sstatic.net/AyOtT.jpg

If you're new to HTML/CSS like me, you might be struggling to keep the image size while aligning it correctly. Any advice on how to achieve this alignment would be greatly appreciated.

Feel free to share any tips or pointers!

htmlcss

Answer №1

After some experimentation, I found a solution that worked for me:

.instagram-section {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 1.2em;
}

.instagram-section a img.insta-logo{
    height: 30px;
    display: inline-block;
}

I'm not sure if this is the most effective approach, so I am open to any improvements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Choose an item from the drop-down menu

Currently, I am working on an automation project and have encountered a challenge with selecting an option from a dropdown menu. The only method that allowed me to access the element was through IHTMLDocument3: $dropdown = $ie.Document.IHTMLDocument3_get ...

htmlpowershellinternet-explorerautomation

The onClick event is failing to function properly due to the presence of nested tags within

My onClick event is not working with this HTML code <a class='list-group-item media' href='#'> <div class='media-body'> <div class='pull-left'> <div class='lg-item ...

javascriptjqueryhtmlevent-handling

Python allows for the color coding of numbers using a method that is comparable to the conditional

Looking for a Python module or workaround to color code numbers from 0 to 100, transitioning from red to green. I want to visually represent a score by changing the font color based on the number without starting from scratch. Considering creating a dictio ...

pythonhtmlcssnumbersconditional-formatting

Guide on implementing the HTML5 fullscreen API for a div's background image

Is it possible to apply HTML 5 fullscreen API to the background image of a div? <div class="bgimg" style="background-image:url('img/home-1.jpg')" /> <img src="img/fullscreen.png" id="fullscreen-btn"> </div> I am trying to m ...

csshtmlbackgroundfullscreen

Troubleshooting an Issue with MediaStreamRecorder in TypeScript: Dealing with

I've been working on an audio recorder that utilizes the user's PC microphone, and everything seems to be functioning correctly. However, I've encountered an error when attempting to record the audio: audioHandler.ts:45 Uncaught TypeError ...

javascripthtmlaudiotypescriptmedia

Setting a fixed time for a preloader is a simple and effective way to

Is there a way to specify a specific duration for the preloader on my website? I find that after the images have preloaded, I am unable to see any animations in the home section. $(window).load(function() { $('#preloader').fadeOut( ...

javascriptjqueryhtmlcsspreloader

Showing error message when utilizing the search bar and autocomplete feature (material design CSS)

I'm having difficulty setting up a materialize search bar () with autocomplete functionality () on my website. The issue I'm facing is that the autocomplete feature seems to affect the display of the search icon. When doing a "select all," it be ...

htmlcssfrontendmaterialize

Validating HTML Forms Using PHP

I am experimenting with a basic HTML login form, but I can't seem to get it to function properly. This is all new to me as I am just starting out with PHP programming. Any assistance would be greatly appreciated! <?php $correctPassword = 'ho ...

phphtmlformsauthentication

Tips for creating a React Table where one element spans the entire cell

Hello, I am trying to make my td element tag occupy the entire cell belonging to that column. The current output I have is shown in this screenshot: https://i.sstatic.net/erPJC.png Essentially, I want the "Independent Study" to take up the first column. H ...

javascripthtmlcssreactjs

What is the best way to utilize CSS to apply a background image with the cover property to a div instead of the body?

I'm working on a div called .cover-section and I want to give it a full background image that fills the viewport. I'm trying to use the cover css property to achieve this effect. So far, I've managed to make it work for the body of the page, ...

cssbackground-imagebackground-positioncover

Tips for adding an image into a PDF document using the jsPDF library in HTML

Due to the lack of support for utf8 characters in jspdf, I'm experimenting with replacing some characters with images before exporting to pdf. To illustrate, I've created a code sample where I insert an image into an html div and then attempt to ...

javascripthtmljspdf

What could be causing the CSS transforms to not show up on the page?

Can't seem to get my navigation panel to slide in when the nav button in the main menu is clicked. I've done this before without issues, so not sure what's up. Any help? Custom HTML Code <!-- Header --> <div class="header"> & ...

javascriptjqueryhtmlcsscss-transitions

Having difficulty positioning breadcrumb items to float on the right side

As I create my Vue.js and Bootstrap application, I am working on a breadcrumb feature that presents some challenges. Specifically, I am trying to align the icons to the right while ensuring that the text "Files" remains floated to the left. <script s ...

htmlcsstwitter-bootstrapvue.jsbootstrap-4

What is the maximum amount of information that can be stored in a data attribute within the DOM?

Occasionally, I find myself wanting to include a substantial amount of data on the webpage in order to minimize additional AJAX calls for dynamic content. However, I am concerned about potential performance implications. Is there a penalty I should be aw ...

javascripthtmldombrowser

Modifying css background in real-time based on the current weather conditions

Is there a way to dynamically change the background image in CSS based on the weather condition? I'm utilizing the wunderground API to retrieve the weather data, which is stored in the weather variable. I am struggling with how to update the backgrou ...

javascripthtmlcssreactjs

Effortlessly switch between multiple divs with jQuery

I am working on a functionality where multiple divs should be displayed or hidden based on the button clicked. Initially, all buttons and divs are visible. Upon clicking a button, only the corresponding div should be visible. Subsequent clicks on other but ...

javascripthtmljquerycss

Tips for Preserving the HTML Page State After Making jQuery Changes

Hi there! I am currently working on developing a card game using HTML5, CSS3, and Javascript. This game will communicate with a server built on node.js, facilitated by socket.io for data transmission. One of the key features I am trying to implement is th ...

javascriptjqueryhtmlnode.jssocket.io

Retrieve the identifier from the database by selecting the edit button within a jQuery DataTable

Whenever the delete button of a specific row is clicked, I need to retrieve the id of that row from the database. Once I have obtained the id, it needs to be sent to the controller to carry out the deletion of that row. I attempted to approach this issue ...

javascriptjqueryasp.net-mvchtmldatatables

Content displayed above a slideshow of images in a stunning gallery on Squarespace platform

Currently working on a one-page landing page using Squarespace and running into some issues with creating a slideshow. You can check out my website here (the slideshow is located at the bottom of the page): Squarespace provides default options for text p ...

jquerycsspositionslideshowsquarespace

HTML containers continue to show gaps even with no margin or padding applied

I have a basic setup here with a single line of red text on a colored background. Despite setting margin and padding to zero and not having any child elements causing spacing issues, I still see a gap around my container. Here's my CSS: { width: ...

htmlcss