Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Border-top adaptable a diferentes tamaños

Estas en el tema de Border-top adaptable a diferentes tamaños en el foro de CSS en Foros del Web. Buenas, en mi web hay una parte en el inicio del main que indica en que parte de la misma estamos, ésta parte tiene un ...
  #1 (permalink)  
Antiguo 23/07/2015, 05:50
Avatar de Player_AAA  
Fecha de Ingreso: julio-2015
Mensajes: 7
Antigüedad: 8 años, 8 meses
Puntos: 0
Border-top adaptable a diferentes tamaños

Buenas,
en mi web hay una parte en el inicio del main que indica en que parte de la misma estamos, ésta parte tiene un border-top, como podemos apreciar en la siguiente imagen, ésta barra está hecha para que ocupe todo el main:

El problema viene cuando hacemos la web a un tamaño menos grande, el border-top se desequilibra, y se pasa mas del main, como podemos ver en la siguiente imagen:

¿Cómo puedo solucionar esto? ¿Hay otra manera de hacer esto sin éste incoveniente?
Aquí tenéis el código de la web:
http://jsfiddle.net/Player_AAA/huva5xtc/

Saludos.

Última edición por Player_AAA; 23/07/2015 a las 06:04
  #2 (permalink)  
Antiguo 23/07/2015, 07:22
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 8 años, 9 meses
Puntos: 263
Respuesta: Border-top adaptable a diferentes tamaños

seria bueno que colocaras el codigo por aca, lo otro es que estas usando, tabalas, DIVs, o a que le estas asignando el Border-top, que codigo css usas, todo eso orienta para saber como ayudarte
__________________
[email protected]
HITCEL
  #3 (permalink)  
Antiguo 23/07/2015, 07:35
Avatar de Player_AAA  
Fecha de Ingreso: julio-2015
Mensajes: 7
Antigüedad: 8 años, 8 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';}
  #4 (permalink)  
Antiguo 23/07/2015, 09:07
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 4 meses
Puntos: 91
Respuesta: Border-top adaptable a diferentes tamaños

amigo la solucion que te hice fue esta que se adapta muy bien a lo que quieres/Responsive ;)

1.- Agregamos el siguiente CSS a tu hoja de estilos ;)
Código CSS:
Ver original
  1. .breadcrumb li {
  2.       border-top: 5px solid #ff0000;
  3.       width: 100%;
  4.   }

2.- Buscamos ol.breadcrumb li > p.bread y borramos las Siguientes Lineas ;)
Código CSS:
Ver original
  1. border-top: 5px solid #ff0000;
  2. padding-right:741px;

y con eso ya quedo listo amigo, ya no se sale como decias ;) ahi te dejo una imagen para que veas ;)


Demo:
http://jsfiddle.net/huva5xtc/1/
  #5 (permalink)  
Antiguo 23/07/2015, 09:11
Avatar de Player_AAA  
Fecha de Ingreso: julio-2015
Mensajes: 7
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: Border-top adaptable a diferentes tamaños

¡Muchísimas gracias, AngelKrak! Gracias por ayudarme por poder hacer eso.

Etiquetas: adaptable, tamaños, todo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:37.