@yaseenomeira
Submitted
Is there a more efficient way to lower the button instead of using margin top?
@bernard-rodrigues
@yaseenomeira
Submitted
Is there a more efficient way to lower the button instead of using margin top?
@bernard-rodrigues
Posted
Hi, Yaseen! Congratulations by you solution! Your design looks great!
Answering your question. Yes. There are some different ways to position the button in this specific case.
One suggestion would be styling your card class to position: relative
. By doing this, the div would become a reference point to inner elements with position: absolute
.
Then the next step would be to declare your button position: absolute
, and, after that, you'll be able to control its position using the card as reference point, for example, by using the attribute bottom
and defining the button distance from the bottom of the div.
Absolute elements supports top
, left
and right
attributes too. It's important to keep in mind that you can't use two vertical absolute attribute, as top
and bottom
, simultaneously, as you can't you two horizontal, as left
and right
I hope it can help you! Keep on with the god job!!
Marked as helpful
@juliavilbert
Submitted
Hi, just changed some things (added <a>) but the hover icon at the main image isnt showing anymore
@bernard-rodrigues
Posted
Hello, Julia!
Congratulations by your solution!
I'd like to give some feedback based on you Acessibility and HTML validation reports.
Acessibility Reports
Documents must have <title> element to aid in navigation: It is very important to use a <title> tag inside your <head> tag. The <title> tag will, as the name suggests, define a title for your website. This title will be showed in your website tab, in the browsers, besides its favicon.
Images must have alternate text: For acessibility reasons, it is very important to use the alt attribute in <img> tags. You can describe the image with this tag. This text will be showed to the users when the image URL were not available for some reason, and it will be read by readers, used by people with visual disabilities.
Example: <img src='logo.svg' alt='My website logo' />
HTML validation reports
It looks like your id's names aren't described as strings, between quotes (" or '). It is generating some HTML validation reports. Try to describe ids as follows:
<img id="id-name" src="image.png" alt="image description" />
I hope it could help! Keep on with the good job!!
Marked as helpful