How to have a whole <div> contain a link with a href - html

I am trying to change the <a href> link of "signup.php" to go from just being on the word NOW, to the whole <div>, so when a user hovers over anything inside of that div, the link will work:
HTML:
<div class="row">
<div class="grid-full containerHomepage">
<div class="centered">SIGN UP TO HEAD SMART<a class="noDecoration brain" href="signup.php"> NOW</a>
<img src="images/HeadSmart.png" width="50" height="60"/>
</div>
</div>
</div>


<a class="noDecoration brain" href="signup.php">
<div class="centered">SIGN UP TO HEAD SMART NOW
<img src="images/HeadSmart.png" width="50" height="60"/>
</div>
</a>


You can use onclick with javascript:-
<div onclick="location.href='signup.php';" class="centered">SIGN UP TO HEAD SMART NOW
<img src="images/HeadSmart.png" width="50" height="60"/>
</div>


Just style the anchor - (and move the nice icon to the left) ;)
.containerHomepage a { display:block}
.noDecoration { text-decoration: none }
<div class="row">
<div class="grid-full containerHomepage">
<a href="signup.php" class="centered noDecoration brain">
<img src="data:image/png;base64,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" width="50" height="60"/>
SIGN UP TO HEAD SMART NOW
</a>
</div>
</div>

Related

There's a weird line between two links in my footer. What is it and how do I get rid of it?

Screenshot: Small line appearing between footer images
No matter what I do to the HTML and CSS, this little underline or underscore (see image) is appearing between the images in my footer. It's blue, so it looks like it may be part of the link somehow (even though I changed the color and decoration of links in the CSS). If I remove either image, it disappears. If the images stack on top of each other (e.g., if I make them block level), it disappears. I want both images sitting next to each other, though.
I've tried the following:
Using vanilla CSS and Bootstrap
Restructuring the footer HTML Putting a text-decoration:none rule on the links
Putting a text-decoration:none rule on the links
Putting a box-shadow:none rule on the links (as suggested in this StackOverflow post)
Here's the footer HTML:
<div id="footer" class="row py-3">
<div id="site-copyright" class="col-7">
<small>© ABCDEFG, 2022</small>
</div>
<div id="footer-contact" class="col-5">
<a href="mailto:exampleABCDEFG#outlook.com">
<img src="https://via.placeholder.com/25" alt="email me">
</a>
<a href="https://www.linkedin.com/in/ExampleABCDEFG">
<img src="https://via.placeholder.com/25" alt="visit LinkedIn profile">
</a>
</div>
</div>

just add text-decoration:none to your <a> tags. Much more helpful when you supply a working snippet
a{
text-decoration:none;
}
<div id="footer" class="row py-3">
<div id="site-copyright" class="col-7">
<small>© ABCDEFG, 2022</small>
</div>
<div id="footer-contact" class="col-5">
<a href="mailto:exampleABCDEFG#outlook.com">
<img src="https://via.placeholder.com/25" alt="email me">
</a>
<a href="https://www.linkedin.com/in/ExampleABCDEFG">
<img src="https://via.placeholder.com/25" alt="visit LinkedIn profile">
</a>
</div>
</div>

It doesn't happen here when I add display:inline-block. As a general rule, don't trust inline styles. Use your own float and margin when you need to.
#footer-contact a {
display: inline-block;
}
<div id="footer" class="row py-3">
<div id="site-copyright" class="col-7">
<small>© ABCDEFG, 2022</small>
</div>
<div id="footer-contact" class="col-5">
<a href="mailto:exampleABCDEFG#outlook.com">
<img src="https://picsum.photos/id/237/200/80" alt="email me">
</a>
<a href="https://www.linkedin.com/in/ExampleABCDEFG">
<img src="https://picsum.photos/id/137/200/80" alt="visit LinkedIn profile">
</a>
</div>
<div id="footer-contact2" class="col-5">
<a href="mailto:exampleABCDEFG#outlook.com">
<img src="https://picsum.photos/id/237/200/80" alt="email me">
</a>
<a href="https://www.linkedin.com/in/ExampleABCDEFG">
<img src="https://picsum.photos/id/137/200/80" alt="visit LinkedIn profile">
</a>
</div>
</div>

I could've helped better if I had more of your code. But, from what you've told, I think it has something to do with footer-contact div. Try removing its border, background, box-shadow etc.

How can the picture be taken behind the ''top pick'' text?

How can the picture be taken behind the ''top pick'' text?
The problem: https://iili.io/VQKa0F.jpg
Page which has the problem: https://awet123.blogspot.com/2022/04/testing-all-required-boxes-for-niche.html

Wrong place of .cg-our-top-pick. You should replace it to position after .cg-li-photo
Bad:
<div class="cg-layout-img">
<div class="cg-our-top-pick">TOP PICK</div>
<div class="cg-li-photo">
<a class="cg-aff-link" href="https://www.amazon.com/dp/B01M12RE4A?tag=kitlit-20&linkCode=ogi&th=1&psc=1" rel="nofollow noopener" target="_blank">
<img alt="Goxawee Cordless Drill Screwdriver" class="cg-img-1" src="https://m.media-amazon.com/images/I/413Spl-3a0L.jpg" loading="lazy" />
</a>
</div>
<div class="cg-li-ratebadge">
<div class="cg-rate"><span>9.4/10</span> <span>Our Score</span></div>
</div>
</div>
Good:
<div class="cg-layout-img">
<div class="cg-li-photo">
<a class="cg-aff-link" href="https://www.amazon.com/dp/B01M12RE4A?tag=kitlit-20&linkCode=ogi&th=1&psc=1" rel="nofollow noopener" target="_blank">
<img alt="Goxawee Cordless Drill Screwdriver" class="cg-img-1" src="https://m.media-amazon.com/images/I/413Spl-3a0L.jpg" loading="lazy" />
</a>
</div>
<div class="cg-our-top-pick">TOP PICK</div>
<div class="cg-li-ratebadge">
<div class="cg-rate"><span>9.4/10</span> <span>Our Score</span></div>
</div>
</div>
Result:

Images Not Stacking - HTML & CSS

I have an html page that contains "links" to many sections of the page. I'm using a single page layout where if a link is clicked, you are not actually taken to a new page. Instead you are taken to the section of the page that you clicked on in the nav bar. I have a section for 6 images, each with a caption. I need the images to be in 2 rows with 3 images per row without using a table.(each image with its caption underneath) But I also need them to be responsive, so if the size of the browser is minimized then the images stack up on each other (caption still there). I tried using padding and margins but I wasn't able to get it to work so I don't have any CSS to post but I do have my HTML code. Can someone please help me out? Here is my code:
<div class="allimagesgallery">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption">CAPTION.</div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image4.jpg">
<img id="galleryimages" src="images/image4.jpg">
</a>
<div class="caption">CAPTION</div>
<a href="images/image5.jpeg">
<img id="galleryimages" src="images/image5.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image6.jpeg">
<img id="galleryimages" src="images/image6.jpeg">
</a>
<div class="caption"> CAPTION </div>
</div>
</div>

it would help us if we knew what your css in "allimagesgallery" looked like.
A little reformatting like the code below might help:
/*-----css---------*/
.imagesgalleryrow img{
display: inline-block;
}
<!-- /// HTML \\\ -->
<div class="allimagesgallery">
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
</div>

Select specific element with CSS

I'm trying to select title with CSS selector.
This is my css
.category-center :nth-last-child(-n+2) {
color: red;
}
<div class="category-center">
<div class="cbp-item-wrapper">
<div class="post-medias">
<a href="" target="_blank">
<img src="#" alt="">
</a>
</div>
<div class="post-info">
<h4 class="post-title">
This is awesome title
</h4>
</div>
</div>
</div>
Can somebody help me with this?

You can use .category-center .post-title a. It will target the <a> element which is inside the element with class post-title which is inside category-center element.
You could even use .post-title a but it will break the hierarchy of CSS which you already have for elements inside .category-center. Also, it will tightly bound the HTML with CSS so when in future if you place the HTML outside of .category-center then the styles will not apply and you will know that something is going wrong with that action.
.category-center .post-title a {
color: red;
}
<div class="category-center">
<div class="cbp-item-wrapper">
<div class="post-medias">
<a href="" target="_blank">
<img src="#" alt="">
</a>
</div>
<div class="post-info">
<h4 class="post-title">This is awesome title</h4>
</div>
</div>
<div class="cbp-item-wrapper">
<div class="post-medias">
<a href="" target="_blank">
<img src="#" alt="">
</a>
</div>
<div class="post-info">
<h4 class="post-title">This is awesome title</h4>
</div>
</div>
<div class="cbp-item-wrapper">
<div class="post-medias">
<a href="" target="_blank">
<img src="#" alt="">
</a>
</div>
<div class="post-info">
<h4 class="post-title">This is awesome title</h4>
</div>
</div>
</div>

Just target the class rather than going specific numnber of children in, as this means if you change your page redesign slightly, it will no longer work.
You can either put a class on your a tag, or target any a tag, on your h4 class, as below.
.post-title a {
color: red;
}
<div class="category-center">
<div class="cbp-item-wrapper">
<div class="post-medias">
<a href="" target="_blank">
<img src="#" alt="">
</a>
</div>
<div class="post-info">
<h4 class="post-title">This is awesome title</h4>
</div>
</div>
</div>

Add a hyperlink to a Div Class

I'm a graphic design student, I am trying to do my portfolio, however not sure how to add a hyperlink to an icon that appears when you hover your mouse over a portfolio item. The item in code reads as div class="hoverIconChain"
<div class="portfolio-item html android">
<a href="portfolio-item-detail-page.html" class="animatedImage3">
<img src="images/portfolio02.jpg" alt="Portfolio 02">
<div class="hoverWrapperBg"></div>
<div class="hoverWrapper">
<div class="hoverIconChain"></div>
<div class="hoverIconHeart"></div>
<div class="hoverBottom">
<div class="hoverBottomText">Real Gamers Network</div>
<div class="hoverBottomLike"> 63 </div>
</div>
</div>
</a>
</div>

Delete the ending a tag from the bottom of your code, and move it after image.
<a href="portfolio-item-detail-page.html" class="animatedImage3">
<img src="images/portfolio02.jpg" alt="Portfolio 02">
</a>
To add a hyperlink to a div, just do it like this.
<a href="http://google.com">
<div class="hoverIconChain"></div>
</a>