[css/html] border poza kontenerem (przylegający do krawędzi przeglądarki) Opcje

[wujek2009]

Hej,

Na stronie jest zastosowany element nagłówków, gdzie border pod nimi sięga aż do krawędzi przeglądarki. Czyli nagłówki są w pojemniku (np. 1045px) i ten border-bottom ma wyjść poza niego i ciągnąć się aż do krawędzi przeglądarki.
Tylko uwaga: border ma kończyć się przy krawędzi, ale zaczynać się od ostatniej literki w nagłówku!

Spójrzcie na wizualizację:

Link: http://iv.pl/images/24956513383093796519.jpg

Macie pomysły na realizacje? Układ HTML'a to coś na zasadzie:

[HTML] pobierz, plaintext 
<div class="container">
   <div class="section">
       <h2>Aktualności</h2>
        <article>
              Qwerty
         </article>
    </div>
</div>
[HTML] pobierz, plaintext 

[trueblue]

Dodaj swój aktualny css.

[wujek2009]

[CSS] pobierz, plaintext 
.container {
   width: 1045px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}
 
.section {
   width: 100%;
   min-height: 600px;
 
   color: #fff;
   background: url('/resources/images/about.jpg') no-repeat top center / cover;
}
 
/* w przykładzie wyżej, zapomniałem h2 podpiąć pod ta klasę */
.section .headline {
  display: block;
  padding: 0 5px 0 15px;
  margin: 0;
 
  background: url('/resources/images/about-separator.png') repeat-x center bottom;
}
[CSS] pobierz, plaintext 

Ogólnie obecnie nie ma za dużo, ponieważ nie mam nawet pomysłu jak do tematu podejść.
PS. container to klasa z twitter boostrapa 3

Ten post edytował wujek2009 6.06.2016, 13:14:01

[trueblue]

https://jsfiddle.net/d2q0hr9b/

[wujek2009]

Dziękuje.