Pozioma linia w stópce oddzielająca dwa wiersze.

0

Czy da się osiągnąć taki efekt (pozioma biała linia między dwoma wierszami w stópce) nie używając do tego dwóch kontenerów, tylko żeby w jednym kontenerze była cała stópka + to co tworzy tą białą linię (ale też żeby biała linia rozciągała się na całą szerokość, a nie do max-width kontenera).

title

Powiedźcie mi dlaczego dla tego kodu, przy mniejszych rozdzielczościach ta biała linia mi znika w ogóle? (jak widać na załączonym obrazku)

title

Kod:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>title</title>
  <link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>

<body>
  <header class="background-primary">
    <div class="container">Header Content</div>
  </header>
  <main>
    <section class="background-secondary">
      <div class="container">Hero Primary Content</div>
    </section>
    <section>
      <div class="container">
        <div class="row">
          <div class="col-1-3 pull-right-sm">
            Circle Image
          </div>
          <div class="col-2-3">
            Content Area
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class="container">
        <div class="row">
          <div class="col-1-3 remove-gutter-xs">
            <div class="background-secondary">
              Feature Content
            </div>
          </div>
          <div class="col-1-3 remove-gutter-xs">
            <div class="background-secondary">
              Feature Content
            </div>
          </div>
          <div class="col-1-3 remove-gutter-xs">
            <div class="background-secondary">
              Feature Content
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="background-primary">
      <div class="container">Testimonial Content</div>
    </section>
    <section class="background-secondary">
      <div class="container">
        <div class="row">
          <div class="col-1-2">
            Media Object
          </div>
          <div class="col-1-2">
            Media Object
          </div>
        </div>
      </div>
    </section>
    <section class="background-tertiary">
      <div class="container">More Content</div>
    </section>
  </main>
  <footer class="background-quaternary">
    <div class="container">
      <div class="row">
        <div class="col-1-3">
          Logo
        </div>
        <div class="col-1-4">
          Address
        </div>
        <div class="col-1-6">
          Phone Number
        </div>
        <div class="col-1-4">
          Social Media
        </div>
      </div>
    </div>
    <div class="col-1-1 no-collapse background-white">
    </div>
    <div class="container">
     
      <div class="row">
        <div class="col-1-3 no-collapse">
        </div>
        <div class="col-1-4">
          Copyright
        </div>
        <div class="col-1-6">
          Privacy Policy
        </div>
        <div class="col-1-4">
          Terms of Use
        </div>
      </div>
    </div>
  </footer>
</body>
</html>

/*Color List:
- light blue = 00AEEF;
- dark blue = 1C75BC
- green = 8DC63F
- dark green = 009444
- orange = F7941E
- dark orange = F15A29
- brown = 594a42; */

/***************************
****************************
Reset Styles
****************************
***************************/
@import 'normalize.css';
/* Change all elements to use border-box */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}


/***************************
****************************
Base Styles
****************************
***************************/
body {
    color: #414042;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
}
h1, h2, h3 {
    font-weight: bold;
}
a {
    color: #8dc63f;
    font-weight: bold;
}
a:hover {
    text-decoration: underline;
}
footer {
    color: white;
}


/***************************
****************************
Layout Styles
****************************
***************************/
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1170px;
}
.row {
    margin-right: -15px;
    margin-left: -15px;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
[class*='col-'] {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
/* Media Query excludes extra small devices and includes small and above */
@media (min-width: 48em) {
    [class*='col-'] {
        float: left;
    }
    /* Column Third */
    .col-1-3 {
        width: 33.3333%;
    }
    /* Column Two Thirds */
    .col-2-3 {
        width: 66.6666%;
    }
    /* Column One Half */
    .col-1-2 {
        width: 50%;
    }
    /* Column one Quarter */
    .col-1-4 {
        width: 25%;
    }
    /* Column One Sixth */
    .col-1-6 {
        width: 16.6666%;
    }  
  .col-1-1 {
        width: 100%;
    }
    .no-collapse {
        min-height: 1px;
    }
}
@media (min-width: 48em) {
    .pull-right-sm {
        float:right;
    }
}
@media only screen and (max-width : 47.9375em) {
    .remove-gutter-xs {
        padding-left: 0px;
        padding-right: 0px;
    }
}

/***************************
****************************
Module Styles
****************************
***************************/


/***************************
****************************
Theme Styles
****************************
***************************/
.background-primary {
    background: #F7941E; /*Orange*/
}
.background-secondary {
    background: #00AEEF; /*Blue*/
}
.background-tertiary {
    background: #8DC63F; /*Green*/
}
.background-quaternary {
    background: #594A42; /*Brown*/
}
.background-white{
  background: white;
}

1

Mało czytelnie to opisujesz i nawet z załączonych grafik nie wynika, co rozumiesz przez białą linię.
Rozwiązania w ogólności widzę takie:

margin elementu,
border elementu
dodatkowy biały div (można go ustawić tak, żeby wystawał poza granice swojego kontenera).

W załączonym kodzie dokonujesz @import 'normalize.css';
ale nigdzie nie podałeś treści normalize.css.

0

Freja Draco napisał(a):

Mało czytelnie to opisujesz i nawet z załączonych grafik nie wynika, co rozumiesz przez białą linię.
Rozwiązania w ogólności widzę takie:

margin elementu,

border elementu

dodatkowy biały div (można go ustawić tak, żeby wystawał poza granice swojego kontenera).

W załączonym kodzie dokonujesz @import 'normalize.css';
ale nigdzie nie podałeś treści normalize.css.

chyba oczywistym jest, że plik normalize.css jest do tego żeby podstawowe elementy HTML'a wyświetlały się tak samo na każdej przeglądarce jest to podstawowy plik normalize.css na licencji MIT
mało czytelnie to opisuję? wstawiłem dwa obrazki, które dobitnie pokazują o co mi chodzi w stylach CSS container ma max-width 1170 px, ja chcę mieć w stópce białą linię na poziomą na całą rozdzielczość, nawet jeśli tworzenie tej białej linii miałoby być w kontenerze, który ma właśnie utworzone te max-width na 1170 px i o tu chodzi, czy da się w środku kontenera, który ma szerokość ustaloną, ustawić tą białą linię na całość szerokość ekranu, bez tworzenia dwóch kontenerów i białej linii poza tymi kontenerami

ale w swojej odpowiedzi uwzględniłeś taką odpowiedź, więc jakbyś mógł napisać/powiedzieć jak tak ustawić diva w środku kontenera, żeby wystawał poza jego granicę 1170 px to byłbym wdzięczny, bo o to właśnie chodzi:

Freja Draco napisał(a):

dodatkowy biały div (można go ustawić tak, żeby wystawał poza granice swojego kontenera).

jest jeszcze pytanie dlaczego w takim kodzie, biała linia znika dla małej szerokości ekranu, bo nie potrafię stwierdzić dlaczego ...

1

CyberPunk napisał(a):

W załączonym kodzie dokonujesz @import 'normalize.css';
ale nigdzie nie podałeś treści normalize.css.

chyba oczywistym jest, że plik normalize.css jest do tego żeby podstawowe elementy HTML'a wyświetlały się tak samo na każdej przeglądarce jest to podstawowy plik normalize.css na licencji MIT

Co prawda produkuję w internecie horoskopy w celach zarobkowych, ale akurat nie w tym miejscu :p

mało czytelnie to opisuję? wstawiłem dwa obrazki, które dobitnie pokazują o co mi chodzi

A to przepraszam, myślałam, że zależy ci na uzyskaniu odpowiedzi a nie na udowadnianiu, że twoje pytanie było zrozumiałe. W takim wypadku ja odpuszczam.

ale w swojej odpowiedzi uwzględniłeś taką odpowiedź, więc jakbyś mógł napisać/powiedzieć jak tak ustawić diva w środku kontenera, żeby wystawał poza jego granicę 1170 px to byłbym wdzięczny, bo o to właśnie chodzi:

Freja Draco napisał(a):

dodatkowy biały div (można go ustawić tak, żeby wystawał poza granice swojego kontenera).

Proszę:

<!DOCTYPE html>
<html>
<head>
  <title>tytul</title>
<style>
BODY {
  overflow-x:hidden;
}

#kontener {
  display:block-inline;
  border:1px solid red;
  width:300px;
  margin:auto;
}

#separator {
  border:1px solid blue;
  background-color:#E6EAFF;
  height:10px;
  width:2000px;
  margin-left:-1000px;
}
</style>
</head>
<body>

<div id="kontener">
  aaa
  <div id="separator">&nbsp;</div>
  bbb
</div>
  
</body>
</html>

jest jeszcze pytanie dlaczego w takim kodzie, biała linia znika dla małej szerokości ekranu, bo nie potrafię stwierdzić dlaczego ...

J.w. - nie wiem, co twoim zdaniem na załączonych obrazkach jest białą linią.

0

Freja Draco napisał(a):

jest jeszcze pytanie dlaczego w takim kodzie, biała linia znika dla małej szerokości ekranu, bo nie potrafię stwierdzić dlaczego ...

J.w. - nie wiem, co twoim zdaniem na załączonych obrazkach jest białą linią.

biała linia pomiędzy Logo Adress Phone Number Social Media, a Copyright Private Policy Terms of Use, której na drugim obrazku przy mniejszej szerokości ekranu nie ma, a Twoje rozwiązanie w moim przypadku tj. dla takiego kodu:

footer class="background-quaternary">
    <div class="container">
      <div class="row">
        <div class="col-1-3">
          Logo
        </div>
        <div class="col-1-4">
          Address
        </div>
        <div class="col-1-6">
          Phone Number
        </div>
        <div class="col-1-4">
          Social Media
        </div>
      </div>
      <div class="row">   
      <div id="separator"> </div>
      </div>
      <div class="row">
        <div class="col-1-3 no-collapse">
        </div>
        <div class="col-1-4">
          Copyright
        </div>
        <div class="col-1-6">
          Privacy Policy
        </div>
        <div class="col-1-4">
          Terms of Use
        </div>
      </div>
    </div>
  </footer>

daje efekt taki: że linia zaczyna się co prawda od lewej strony dla max dowolnej szerokości ekranu, ale kończy się na max szerokości kontenera z prawej strony tj. przy końcu "Terms of Use"

title

a chciałbym żeby była do samego końca ekranu, a nie max-width 1170px

0

CyberPunk napisał(a):

biała linia pomiędzy Logo Adress Phone Number Social Media, a Copyright Private Policy Terms of Use, której na drugim obrazku przy mniejszej szerokości ekranu nie ma, a Twoje rozwiązanie w moim przypadku tj. dla takiego kodu:

Biała linia znika ponieważ w CSS masz taką deklarację:

@media (min-width: 48em) {
    (...)
    .no-collapse {
        min-height: 1px;
    }
    (...)
}

Czyli: ustaw minimalną wysokość linii, jeżeli szerokość strony wynosi przynajmniej 48 em (zadeklarowanych rozmiarów czcionki).

Co do reszty zaraz obaczę.

1

Masz:

/*Color List:
- light blue = 00AEEF;
- dark blue = 1C75BC
- green = 8DC63F
- dark green = 009444
- orange = F7941E
- dark orange = F15A29
- brown = 594a42; */

/***************************
****************************
Reset Styles
****************************
***************************/
@import 'normalize.css';
/* Change all elements to use border-box */
html {
    box-sizing: border-box;
    overflow-x:hidden;    
}

*, *:before, *:after {
    box-sizing: inherit;
}

/***************************
****************************
Base Styles
****************************
***************************/
body {
    color: #414042;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
}
h1, h2, h3 {
    font-weight: bold;
}
a {
    color: #8dc63f;
    font-weight: bold;
}
a:hover {
    text-decoration: underline;
}
footer {
    color: white;
}

/***************************
****************************
Layout Styles
****************************
***************************/
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1170px;
}
.row {
    margin-right: -15px;
    margin-left: -15px;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
[class*='col-'] {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
.no-collapse {
    min-height: 1px;
}

/* Media Query excludes extra small devices and includes small and above */
@media (min-width: 48em) {
    [class*='col-'] {
        float: left;
    }
    /* Column Third */
    .col-1-3 {
        width: 33.3333%;
    }
    /* Column Two Thirds */
    .col-2-3 {
        width: 66.6666%;
    }
    /* Column One Half */
    .col-1-2 {
        width: 50%;
    }
    /* Column one Quarter */
    .col-1-4 {
        width: 25%;
    }
    /* Column One Sixth */
    .col-1-6 {
        width: 16.6666%;
    }  
  .col-1-1 {
        width: 100%;
    }
}
@media (min-width: 48em) {
    .pull-right-sm {
        float:right;
    }
}
@media only screen and (max-width : 47.9375em) {
    .remove-gutter-xs {
        padding-left: 0px;
        padding-right: 0px;
    }
}

/***************************
****************************
Module Styles
****************************
***************************/

/***************************
****************************
Theme Styles
****************************
***************************/
.background-primary {
    background: #F7941E; /*Orange*/
}
.background-secondary {
    background: #00AEEF; /*Blue*/
}
.background-tertiary {
    background: #8DC63F; /*Green*/
}
.background-quaternary {
    background: #594A42; /*Brown*/
}
.background-white{
  background: red;
  width:4000px;
  margin-left:-2000px;  
}

0

Freja Draco napisał(a):

Masz:

ok dziękuję, działa ;) i sprawa z tą linią też, plusik leci :)

Pozioma linia w stópce oddzielająca dwa wiersze.

Freja Draco napisał(a):

Freja Draco napisał(a):

CyberPunk napisał(a):

Freja Draco napisał(a):

Freja Draco napisał(a):

CyberPunk napisał(a):

Freja Draco napisał(a):

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami