Question 249362 in Html Question posted in
Some basic documentation can be found here.

Html – How do I make a text appear normal in a <div> included in an Anchor Element?

to learn HTML more in depth I’m building the website of a famous fashion brand, trying to emulate and build all the functions that I see with the HTML knowledge that I have.
I’m coding a part of the website in which a whole <div> is clickable, including a button, some text and an image.
The problem is that all the text that is included in this div (that is, in its turn, included in an Anchor element), becomes a link.
How do I make the text appear normal?

This is what I’ve tried so far.

<section class="twoModels">
            <a href="#">
                <div class="first-model">
                        <div class="first-model-photo">
                            <img src="/img/first-model.jpg" alt="Our Coats" title="Our coats" width="375" loading="lazy">
                        </div>
                        <div class="first-model-text">
                            <h3><!--This is the part of text I want to look normal-->Dress Code: Maglieria</h3>
                        </div>
                        <div class="first-model-cta">
                            <button>Scopri di più</button>
                        </div>
                </div>    
            </a>
</section>
Tags:

2

Answers


  1. 0

    First, you don’t need to use the button tag to make something look like a button. You can use basic CSS for that. Also, you don’t want to have a button as a child of an anchor, that could have unexpected results.

    To make text not have underlines, you can use text-decoration:none

    For my answer, I converted your button to a div and styled it via CSS. I also set the text to text-decoration:none so the text didn’t have an under.

    .twoModels a{
  text-decoration:none;
}

.btn{
  display:inline-block;
  border-radius:10px;
  background:black;
  color:white;
  padding:10px;
}

.btn:hover{
  background:white;
  color:black;
}
    <section class="twoModels">
            <a href="#">
                <div class="first-model">
                        <div class="first-model-photo">
                            <img src="/img/first-model.jpg" alt="Our Coats" title="Our coats" width="375" loading="lazy">
                        </div>
                        <div class="first-model-text">
                            <h3><!--This is the part of text I want to look normal-->Dress Code: Maglieria</h3>
                        </div>
                        <div class="first-model-cta">
                            <div class="btn">Scopri di più</div>
                        </div>
                </div>    
            </a>
</section>
    Login or Signup to reply.
  2. 0

    To make only specific parts of a clickable and leave the rest of the text looking normal, you can use nested anchor tags and CSS to style the text differently. Here’s how you can modify your HTML and CSS to achieve this:

    /* Style the anchor tag within the h3 */
.first-model-text h3 a {
    text-decoration: none; /* Remove underline for the link */
    color: #YourDesiredTextColor; /* Set your desired text color */
}

/* Style the anchor tag when hovered */
.first-model-text h3 a:hover {
    text-decoration: underline; /* Add underline on hover */
    /* Add any other styles you want on hover */
}
    <section class="twoModels">
    <div class="first-model">
        <a href="#">
            <div class="first-model-photo">
                <img src="/img/first-model.jpg" alt="Our Coats" title="Our coats" width="375" loading="lazy">
            </div>
        </a>
        <div class="first-model-text">
            <h3>Dress Code: <a href="#">Maglieria</a></h3>
        </div>
        <div class="first-model-cta">
            <button>Scopri di più</button>
        </div>
    </div>
</section>

    In this modified code, we’ve wrapped only the "Maglieria" text within its own tag. This will make only the "Maglieria" text a clickable link, and the rest of the text will appear normal. Additionally, we’ve added some CSS to style the link and its hover state.

    Make sure to replace #YourDesiredTextColor with the color you want for the link text.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search