Do you want the link to cover 100% of the container?

Question

Do you want the link to cover 100% of the container?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Good morning, I have a doubt. How is it possible to prevent a link from covering the full width of a container? I tried the display: inline-block property, but it does not fix the situation anyway.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
    background-color: #fff;
}

body {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
}

a {
    color: #333;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

header > a > img {
    width: 120px;
    height: auto;
    border-radius: 50%;
    margin-bottom: 1.2rem;
}

header > a {
    color: #333;
    text-decoration: none;
}

header > a:hover {
    color: #0d0d0d;
    text-decoration: underline;
}

header > a > h1 {
    font-size: 2.7rem;   
}

header > nav {
    border: solid 1px #dedede;
    border-left: none;
    border-right: none;
    padding: 0.2rem 0 0.5rem 0;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.6rem;
    letter-spacing: 1px;
}

header > nav > a {
    margin-left: 0.8rem;
    margin-right: 0.8rem;
    color: #858585;
    text-decoration: none;
}

header > nav > a:hover {
    text-decoration: underline;
    color: #333333;
}

#articles {
    width: 50%;
    margin: 0 auto;
}

.article {
    border-bottom: solid 1px #dedede;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.titular {
    font-size: 1.3rem;
    margin-top: 0.5rem;
}

.article > a {
    text-decoration: none;

}

.article > a:hover {
    text-decoration: underline;
}

.article span {
    color: #a9a9a9;
    font-weight: 300;
}

footer {
    display: flex;
    flex-direction: column;
    text-align: center;
    color: #333;
    margin: 0 auto;
    width: 50%;
    margin-top: 2.5rem;
}

footer a {
    color: #858585;
    text-decoration: none;
    

}

.iconoSocial {
    font-size: 1.6rem;
    color: #858585;
}

.iconoSocial:hover {
    color: #333333;
}

.contenedorIconos {
    display: flex;
    margin-bottom: 1rem;
}

.espaciado {
    width: 1rem;
    height: 1rem;
    background-color: transparent;
}

#contenedorCreditos {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.iconoCredito {
    font-size: 1.4rem;
}

.html5 {
    color: #f16529;
    margin-left: 0.2rem;
    margin-right: 0.3rem;
}

.css3 {
    color: #1c88c7;
    margin-right: 0.2rem;
}

.corazon {
    color: #d36060;
    margin-left: 0.2rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pedro Fumero</title>
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
</head>
<body>
    <header>
        <a href="/"><img src="img/foto.jpg" alt="Foto del bloguero"></a>
        <a href="#"><h1>Pedro Fumero</h1></a>
        <div class="contenedorIconos">
            <a href="http://google.com"><i class="ion-social-twitter iconoSocial primero"></i></a>
            <div class="espaciado"></div>
            <a href="#"><i class="ion-social-github iconoSocial"></i></a>
        </div>
        <nav>
            <a href="#">Blog</a>
            <a href="#">Talks</a>
            <a href="#">Book</a>
            <a href="#">Newletter</a>
            <a href="#">Podcast</a>
            <a href="#">About</a>
        </nav>
    </header>
    <section id="articles">
        <div class="article">
            <span>August 7, 2017</span>
            <a href="#"><h3 class="titular">CSS Utility Classes and "Separation of Concerns"</h3></a>
        </div>
        <div class="article">
            <span>April 21, 2017</span>
            <a href="#"><h3 class="titular">The $61,392 Book Launch That Let Me Quit My Job</h3></a>
        </div>
        <div class="article">
            <span>April 3, 2017</span>
            <a href="#"><h3 class="titular">Detecting Out of Sync Mocks in Mockery</h3></a>
        </div>
        <div class="article">
            <span>March 2, 2017</span>
            <a href="#"><h3 class="titular">What's KiteTail?</h3></a>
        </div>
    </section>
    <footer>                          
        <div id="contenedorCreditos">
            Creado con 
            <i class="ion-social-html5 iconoCredito html5"></i> 
            <i class="ion-social-css3 iconoCredito css3"></i> 
            y mucho 
            <i class="ion-heart iconoCredito corazon"></i>
        </div>
            <a href="#">Pedro Fumero</a>
            2017
    </footer>
</body>
</html>

Notice that if you place the pointer, in a place outside the headlines, but within the same container it takes it as "part of the link", and I want only the text itself to be clickable, not the empty space that can be be outside the box that contains it. The same thing happens to me with the link that I placed in the footer. Since the link is clickable at 100% of container width. How can I avoid this behavior?

html css

asked by Pedro Fumero 17.09.2017 в 01:32

source

2 answers

0

The first one is by css modifying the width and height attributes

you can handle them by percentages in this way within your ccs:

width:50%; height:50%;

Another way, the best in my opinion, is by means of bootstrap which has a grid system which helps you to have a better handling of all the elements. Here is a link so you can see the documentation.
link

answered by 17.09.2017 в 01:51

My wordpress theme does not look full on my premium hosting Maintain style by making a row drag

score 1 · Accepted Answer

You must apply display:inline to h3 to occupy only your space. Then apply them to the span of the .article display:block to convert them into block elements and push the h3 down and stay as you wish. The span can be converted to div to be block elements by default and so you do not have to specify the css rule but I'll leave that to your decision.

Here's the code. I put the new css rules first so you can easily identify them:

.article span {
    color: #a9a9a9;
    font-weight: 300;
    display:block;
}
.article h3 {
    display: inline;
}
.article h3:hover {
    text-decoration:undeline;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
    background-color: #fff;
}

body {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
}

a {
    color: #333;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

header > a > img {
    width: 120px;
    height: auto;
    border-radius: 50%;
    margin-bottom: 1.2rem;
}

header > a {
    color: #333;
    text-decoration: none;
}

header > a:hover {
    color: #0d0d0d;
    text-decoration: underline;
}

header > a > h1 {
    font-size: 2.7rem;   
}

header > nav {
    border: solid 1px #dedede;
    border-left: none;
    border-right: none;
    padding: 0.2rem 0 0.5rem 0;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.6rem;
    letter-spacing: 1px;
}

header > nav > a {
    margin-left: 0.8rem;
    margin-right: 0.8rem;
    color: #858585;
    text-decoration: none;
}

header > nav > a:hover {
    text-decoration: underline;
    color: #333333;
}

#articles {
    width: 50%;
    margin: 0 auto;
}

.article {
    border-bottom: solid 1px #dedede;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.titular {
    font-size: 1.3rem;
    margin-top: 0.5rem;
}

.article > a {
    text-decoration: none;

}

.article > a:hover {
    text-decoration: underline;
}


footer {
    display: flex;
    flex-direction: column;
    text-align: center;
    color: #333;
    margin: 0 auto;
    width: 50%;
    margin-top: 2.5rem;
}

footer a {
    color: #858585;
    text-decoration: none;
    

}

.iconoSocial {
    font-size: 1.6rem;
    color: #858585;
}

.iconoSocial:hover {
    color: #333333;
}

.contenedorIconos {
    display: flex;
    margin-bottom: 1rem;
}

.espaciado {
    width: 1rem;
    height: 1rem;
    background-color: transparent;
}

#contenedorCreditos {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.iconoCredito {
    font-size: 1.4rem;
}

.html5 {
    color: #f16529;
    margin-left: 0.2rem;
    margin-right: 0.3rem;
}

.css3 {
    color: #1c88c7;
    margin-right: 0.2rem;
}

.corazon {
    color: #d36060;
    margin-left: 0.2rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pedro Fumero</title>
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
</head>
<body>
    <header>
        <a href="/"><img src="img/foto.jpg" alt="Foto del bloguero"></a>
        <a href="#"><h1>Pedro Fumero</h1></a>
        <div class="contenedorIconos">
            <a href="http://google.com"><i class="ion-social-twitter iconoSocial primero"></i></a>
            <div class="espaciado"></div>
            <a href="#"><i class="ion-social-github iconoSocial"></i></a>
        </div>
        <nav>
            <a href="#">Blog</a>
            <a href="#">Talks</a>
            <a href="#">Book</a>
            <a href="#">Newletter</a>
            <a href="#">Podcast</a>
            <a href="#">About</a>
        </nav>
    </header>
    <section id="articles">
        <div class="article">
            <span>August 7, 2017</span>
            <a href="#"><h3 class="titular">CSS Utility Classes and "Separation of Concerns"</h3></a>
        </div>
        <div class="article">
            <span>April 21, 2017</span>
            <a href="#"><h3 class="titular">The $61,392 Book Launch That Let Me Quit My Job</h3></a>
        </div>
        <div class="article">
            <span>April 3, 2017</span>
            <a href="#"><h3 class="titular">Detecting Out of Sync Mocks in Mockery</h3></a>
        </div>
        <div class="article">
            <span>March 2, 2017</span>
            <a href="#"><h3 class="titular">What's KiteTail?</h3></a>
        </div>
    </section>
    <footer>                          
        <div id="contenedorCreditos">
            Creado con 
            <i class="ion-social-html5 iconoCredito html5"></i> 
            <i class="ion-social-css3 iconoCredito css3"></i> 
            y mucho 
            <i class="ion-heart iconoCredito corazon"></i>
        </div>
            <a href="#">Pedro Fumero</a>
            2017
    </footer>
</body>
</html>