1

Buenas, tengo una duda. ¿Cómo es posible evitar que un enlace abarque todo el ancho de un contenedor? He probado con la propiedad display: inline-block, pero de igual forma no me arregla la situación.

* {
    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>

Fijense que si colocan el puntero, en un lugar fuera de los titulares, pero dentro del mismo contenedor lo toma como "parte del enlace", y yo quiero que sólo sea cliqueable el texto en sí, no el espacio vacío que pueda estar fuera de la caja que lo contiene. Lo mismo me sucede con el enlace que coloqué en el footer. Ya que el enlace es cliqueable en el 100% de ancho del contenedor. ¿cómo puedo evitar este comportamiento?

2 respuestas 2

0

Debes de aplicarle display:inline a los h3 para que ocupen solo su espacio. Despues aplicales a los span de los .article display:block para convertirlos en elementos de bloque y empujen a los h3 abajo y quede como lo deseas. Los span los puedes convertir en div para sean elementos de bloque por defecto y asi no tener que especificar la regla css pero ya eso lo dejare a tu decision.

Aqui el codigo. Puse las nuevas reglas css de primero para que puedas identificarlas facilmente:

.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>

1
  • Es justamente lo que necesitaba!, aunque he aplicado el mismo principio para el enlace que se encuentra en el footer y no ha funcionado, aunque noté que si encierro el enlace dentro de un div, este si abarca únicamente su contenido como enlace, mientras que dejándolo sin un contenedor div me ocupa el 100% del espacio del div, sabes a qué se debe esto?
    – user13764
    Commented el 17 sept. 2017 a las 10:37
0

La primera es por css modificando los atributos width y height

los puedes manejar por porcentajes de esta forma dentro de tu ccs:

width:50%; height:50%;

otra forma, la mejor a mi parecer, es por medio de bootstrap el cual cuenta con un sistema de cuadricula la cual te ayuda a tener un mejor manejo de todos los elementos. Aquí tienes un link para que puedas ver la documentación.
http://getbootstrap.com/docs/4.0/examples/grid/

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.