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

Pozioma linia w stópce oddzielająca dwa wiersze.
CyberPunk
CP
CyberPunk
CP
  • Rejestracja:prawie 6 lat
  • Ostatnio:około 4 lata
  • Postów:31
0
  1. 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

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

Kopiuj
<!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>
Kopiuj
/*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;
}
edytowany 9x, ostatnio: CyberPunk
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Freja Draco
Freja Draco
Freja Draco
Freja Draco
  • Rejestracja:prawie 7 lat
  • Ostatnio:ponad 3 lata
  • Postów:3394
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.

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
CyberPunk
CP
CyberPunk
CP
  • Rejestracja:prawie 6 lat
  • Ostatnio:około 4 lata
  • Postów:31
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.

  1. 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
  2. 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).
  1. jest jeszcze pytanie dlaczego w takim kodzie, biała linia znika dla małej szerokości ekranu, bo nie potrafię stwierdzić dlaczego ...
edytowany 3x, ostatnio: CyberPunk
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Freja Draco
Freja Draco
Freja Draco
Freja Draco
  • Rejestracja:prawie 7 lat
  • Ostatnio:ponad 3 lata
  • Postów:3394
1
CyberPunk napisał(a):

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

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

  1. 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ę:

Kopiuj
<!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>
  1. 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ą.

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
CyberPunk
CP
CyberPunk
CP
  • Rejestracja:prawie 6 lat
  • Ostatnio:około 4 lata
  • Postów:31
0
Freja Draco napisał(a):
  1. 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:

Kopiuj
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

edytowany 7x, ostatnio: CyberPunk
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Freja Draco
Freja Draco
Freja Draco
Freja Draco
  • Rejestracja:prawie 7 lat
  • Ostatnio:ponad 3 lata
  • Postów:3394
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ę:

Kopiuj
@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ę.

edytowany 1x, ostatnio: Freja Draco
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Freja Draco
Freja Draco
Freja Draco
Freja Draco
  • Rejestracja:prawie 7 lat
  • Ostatnio:ponad 3 lata
  • Postów:3394
1

Masz:

Kopiuj
/*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;  
}
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
CyberPunk
CP
CyberPunk
CP
  • Rejestracja:prawie 6 lat
  • Ostatnio:około 4 lata
  • Postów:31
0
Freja Draco napisał(a):

Masz:

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

Freja Draco
Freja Draco
:)
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Treść
Podgląd
Kliknij, aby dodać treść...
Kliknij, aby dodać załącznik lub wklej ze schowka.
Instrukcja obsługi Markdown
Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)