23/07/2015, 07:35
|
 | | | Fecha de Ingreso: julio-2015
Mensajes: 7
Antigüedad: 9 años, 4 meses Puntos: 0 | |
| Respuesta: Border-top adaptable a diferentes tamaños
El border-top se lo he aplicado a un h2 con un elemento a. Y aqui tienes todo el código tanto HTML como CSS:
Código HTML: Código HTML: <!DOCTYPE html>
<html lang="es">
<head>
<link href='http://fonts.googleapis.com/css?family=Nunito:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Hind:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Asap:400,400italic' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<meta name="description" content="Noticias y análisis sobre videojuegos de todas las consolas que puedes imaginar. <br /> De Jugad0dores, para Jugad0res. ¡¿A qué esperas para entrar a la mejor web de videojuegos en Castellabo?!">
<meta name="keywords" content="Videojuegos,Noticias,Análisis,Consolas,Nintendo,Sony,Microsoft,Xbox,PC,XBOX ONE,XBOX 360,PS4,PS3,PSP,PSVITA,NINTENDO DS,WII,WII U,Player_AAA">
<link href="http://jugad0res.esy.es/wp-content/uploads/2015/06/j0faviconaranja.png" type="image/x-icon" rel="shortcut icon">
<title>Jugad0res | Noticias y análisis sobre videojuegos | PC, XBOX ONE, XBOX 360, PS4, PS3, PSP, PSVITA, NINTENDO DS, WII, WII U</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<bod>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top col-xs-12 ">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Mostrar/Ocultar menú</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Jugad0res</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Inicio</a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Análisis</a></li>
<li><a href="#">Blogs</a></li>
<li class="disabled"><a href="#">Foro</a></li>
</ul>
<ul class="hidden-xs hidden-sm nav navbar-nav navbar-right">
<li><a class="twitter-logo" href="#" target="_blank"></a></li>
<li><a href="#" class="youtube-logo" target="_blank"></a></li>
<li><a href="#" class="twitch-logo" target="_blank"></a></li>
<li><a href="#" class="copyright-infolegal-logo" target="_blank"></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<section class="main container">
<div class="row">
<section class="posts col-md-9">
<div class="migasdepan">
<ol class="breadcrumb">
<li class="active"><p class="bread">inicio</a></li>
</ol>
</div>
<article class="post clearfix">
<a href="#" class="thumb pull-left"><img src="http://lorempixel.com/output/nature-q-c-880-440-4.jpg" alt="Imagen Destacada"></a>
<h2 class="post-title"><a href="#">Cómo reparar una placa base</a></h2>
<p class="post-extract text-justify">
Una forma nueva, única y, sorprendente para limpiar y reparar la placa base de nuestro ordenador.
</p>
<p class="post-author"><span class="author-avatar"><img src="http://lorempixel.com/output/technics-q-c-50-50-10.jpg" alt="Hola" class="author-avatar"></span><span class="author-name"><a href="#">Hola</a></span><!--span class="post-date">21/07/2015</span!--></p>
<!--div class="comments"><img src="http://s27.postimg.org/y2m6phki7/chat.png" alt="" class="comments-img pull-left"><p class="numero-cm pull-left">25</p></div!-->
</article>
</section>
</div>
</section>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html> Código CSS:
Código:
/** Ajustes generales **/
body {padding-top: 70px;}
.h2, h2 {margin: 0;}
a:focus, a:hover {text-decoration: none;}
/** Menú **/
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {background-color: transparent; color: #9d9d9d;}
.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {color: #e03800;}
.navbar-inverse .navbar-nav > li > a {color: #fff;}
.navbar-inverse .navbar-brand {color: #fff;}
.navbar-inverse a.navbar-brand:focus, .navbar-inverse a.navbar-brand:hover {color: #e03800;}
/** Main **/
.breadcrumb {background-color: transparent;}
ol.breadcrumb li > p.bread {
color: #333;
font-weight: 700;
font-size: 30px;
border-top: 5px solid #ff0000;
padding-top: 1px;
padding-right:741px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
}
.main {
margin-top: 20px;
margin-bottom: 20px;
}
.post {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #999;
}
.post .post-title a {color: #333; font-family: 'Asap', arial;}
.post .thumb {
margin-right: 10px;
width: 40%;
}
.post .thumb img {
width: 100%;
}
.post .post-author img.author-avatar {border-radius: 50%; margin-right: 5px; border: 2px solid #ccc;}
.post .post-author .author-name > a {color: #333; font-family: 'Oswald', arial;}
p.post-extract {
margin-bottom: 0px;
font-size: 18px;
font-family: 'Hind', sans-serif, "Times New Roman", arial;
}
div.comments > p.numero-cm {padding-left:5px; font-family: 'Nunito';}
|