Having difficulty clicking on the logo due to a CSS problem

HTML Code

 <div class="app-header-logo">
        <a href="/home"><img ng-src="img/..."/></a>
    </div>

CSS Styles

.app-header-logo {
    width: 48px;
    height: 64px;
    padding: 8px 0px 8px 0px;
    margin: 0px 16px 0px 0px;
    vertical-align: middle;
    text-align: center;
    background-color: #009530;
    display: inline-block;
}

    .app-header-logo > img {
        height: 32px;
        margin: 8px 0px 8px 0px;
    }

I've written some code above. I want a user to be redirected when they click on an image, but when I inspect the element, I notice that the anchor tag is there but I can't click on it. I don't know much about CSS, but I suspect this is a CSS issue.

When I remove the class "app-header-logo", I can click on the image and the cursor changes to a pointer.

I would appreciate any help!

Thank you!

htmlcss

Answer №1

try out this new css style:

.app-header-logo a {display:inline-block;vertical-align:top;}

also, don't forget to remove the >

.app-header-logo  img {
        height: 32px;
        margin: 8px 0px 8px 0px;
    }

you can also define it like this:

.app-header-logo a {display:block;}

instead of inline, consider defining the a element as either block or inline-block.

Answer №2

Check out this JSFiddle link

 //Styling for app header logo
 .app-header-logo {
width: 48px;
height: 64px;
padding: 8px 0px 8px 0px;
margin: 0px 16px 0px 0px;
vertical-align: middle;
text-align: center;
background-color: #009530;
display: inline-block;

}

.app-header-logo img {
    height: 32px;
    margin: 8px 0px 8px 0px;
    width:32px;
}
.app-header-logo img:hover{
  cursor:pointer;
}

//HTML for app header logo
<div class="app-header-logo">
       <a target=-blank href="https://www.google.com.pk/"><img     src="http://www.picdesi.com/upload/comment/friend/best-friends-quote-pic.jpg"/>   </a>
</div>

Answer №3

Give this code a try to add padding to a link.

.app-header-logo {
  width: 48px;
  height: 64px;
  padding: 8px 0px 8px 0px;
  margin: 0px 16px 0px 0px;
  vertical-align: middle;
  text-align: center;
  background-color: #009530;
  display: inline-block;
}

.app-header-logo > img{
  height: 32px;
  margin: 8px 0px 8px 0px;
}
.app-header-logo>a{ padding : 4px 20px 50px 20px;}
<div class="app-header-logo">
  <a href="/home"><img ng-src="img/..."/></a>
</div>

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

Exploring BreakPoints using gridlisttiles

Can Grid List Tile components be configured to occupy the entire screen on small devices using sm={12} lg={6}, but only half of the screen on larger devices? If not, is there a way to adjust the grid list layout to display fewer tiles per row on smaller ...

cssreactjsmaterial-ui

Guide on incorporating a thymeleaf custom dialect in an HTML script

Essentially, I am trying to create a dynamic schema using ld+json with thymeleaf. To fetch the URL for the corresponding page, we have set up a custom processor as shown below: public class CustomUrlAttributeTagProcessor extends AbstractAttributeTagProcess ...

javahtmljsonthymeleafschema.org

Choosing the most suitable stylesheet in Angular 8 when multiple CSS files are present

In my project, I have several CSS stylesheets for angular components. I am curious if there is a method to designate a preferred stylesheet when multiple sheets loaded by a component contain the same styles but with different values. ...

cssangular

Utilizing SASS to retrieve the H, S, L values from a color

Is there a way to extract the H, S, L values from a hex color in SASS and assign them to separate CSS variables? $colors: ( "primary": $primary, "secondary": $secondary) !default; :root { @each $color, $value in $colors { -- ...

csssasscss-variables

What mechanisms does Vue employ to halt the browser from sending a server request when the URL in the address bar is modified?

When a link <a href='www.xxx.com'> is clicked in a traditional HTML page, the page is redirected to the new page. In a Vue application, we utilize the Router. See the code snippet below. Vue.use(Router); export default new Router({ mode ...

javascripthtmlvue.js

Can you explain the connection between CSS and WebKit?

Lately, the tag "webkit" has caught my eye on various questions. These inquiries typically pertain to web-related topics like CSS, jQuery, website layouts, and cross-browser compatibility problems... But what exactly is "webkit" and how does it interact w ...

csswebkitcross-browserrendering-engine

What is the best way to position text below an image icon in a menu?

I am having trouble creating a menu that has the same style as shown in this image: . Unfortunately, my menu ends up looking like this instead: . Can someone please help me fix this issue? Here is the HTML code I am working with: <header> ...

htmlcssmenu

Rails Polymer is experiencing a glitch where the CSS and Polymer elements are not displaying correctly until a page refresh is

Whenever I first load a page, my polymer elements (like paper-input) fail to load their CSS properly. Here is an example of how the page looks before and after refreshing: https://i.sstatic.net/vsIpE.pnghttps://i.sstatic.net/YAFjP.png Below is the code sn ...

cssruby-on-railspolymer

Getting information from HTML using BeautifulSoup

Embarking on my python learning journey, I am eager to utilize BeautifulSoup for extracting elements from the provided HTML structure. This HTML snippet is sourced from a voice recording system that documents data such as the local time, UTC, call duratio ...

pythonhtmlbeautifulsoupvoip

Retrieving Multiple Arrays of Variables in PHP Output

I am struggling to retrieve the GET Variables from the URL of this particular page. Here is the URL: http://thisthat.com/category/?field_issue_month_value%5Bvalue%5D%5Byear%5D=2013&field_issue_month_value%5Bvalue%5D%5Bmonth%5D=10 I am attempting to ...

phphtmlurlurl-encoding

Using jQuery and Bootstrap to Enhance Checkbox Button Styling

I am currently working on an asp.net webform and attempting to style my checkbox similar to the design shown here: When I try to replicate the HTML and JS code from the above link on my page, it does not seem to be functioning properly, most likely due to ...

javascriptjquerycssasp.nettwitter-bootstrap

Sub menus are not appearing in the drop-down menu

Below is the code for my dropdown button with an additional level. Initially, the button works as intended. However, upon attempting to click within the dropdown submenu, I noticed that all four items displayed the same last submenu only. .icon-cadet-l ...

htmlcsscss-selectors

Tips for implementing varying styles depending on the number of columns in a table

I am working with multiple tables that share similarities, but differ in the number of columns each table has. I am looking to create a styling rule where depending on the number of columns, the width of each column will be set accordingly. For example, if ...

htmlcss

Angular Bootstrap 4 modal with responsive content dimensions

I am facing an issue where I am trying to place a media list inside a Bootstrap card. However, when I zoom in on the browser, the media list <ul/> overflows from the modal-body and goes out of the Bootstrap card. How can I ensure that the media list ...

htmlcssbootstrap-4ng-bootstrap

Comparing the use of jQuery click event with the button to trigger a function that calculates the

Currently, I am grappling with a JQuery function that checks if any checkboxes are ticked within my form. My version of JQuery is v1.10.2. The code functions as expected when triggered by a button, but when I attempt to trigger it with a checkbox within t ...

javascriptjqueryhtmlformscheckbox

Is there a reliable method for directing to the Google "I'm Feeling Lucky" result consistently?

I am currently working on a solution in my application to easily link to NFL player profiles on NFL.com using their names. Since the URL structure of the player profile pages on NFL.com is not consistent, I am attempting to generate a link to Google's ...

htmlsearch

The overlay background is not covering the entire height of the container

The CSS includes a .wrapper with the style min-height: calc(50% - 30px), along with an overlay blur div to cover the entire height of the .wrapper element. Here's a link to a Codepen example showcasing this setup: https://codepen.io/palaniichukdmytro/ ...

htmlcss

Arrange three div elements beside each other with the middle column containing two

My challenge involves figuring out how to display 3 divs on a webpage in a specific layout. Currently, I am able to get 2 divs to align next to each other using the float:left property. However, the third div always ends up positioned below the first one ...

csshtml

Transform an xlsx document into a HTML file using VBscript or batch script

After extensive research, I have come up empty-handed in finding a solution to the issue I am facing. The problem at hand is that I have an Excel file in .xlsx format that needs to be converted to .html on a regular basis throughout the day. Once converte ...

htmlexcelbatch-filevbscriptxlsx

Changing Background Color on Div Click

After spending a considerable amount of time on this, I find myself getting confused and stuck. It seems like I might be overlooking something crucial. Essentially, my code is designed to have the default div background (gamebg), and upon clicking one of t ...

javascripthtmlcss