Mam jakiś dziwny problem z divem?

bartek164

2018-03-22 23:27

bartek1642018-03-22 23:27

Rejestracja:ponad 8 lat
Ostatnio:ponad rok
Postów:534

Dlaczego

Bartuś

nie jest wyświetlony w jednej linii jak pozostałe linki? chce stworzyć sobie przed linkiem taki napis,ale jakieś dziwne rzeczy mi wyszły</p>

Kopiuj

<!DOCTYPE html>
<html>
<head>
	<title>Bartek page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/style.css">
<style>
div.menu{
//	width: 100%;
	//height: 100%;
	margin-left: -10px;
	margin-right:-25px;
}
div.memu_show{
	padding: 0;
	background-color:#262626;
	width: 100%;
	height: 100%;
	float: left;
}
div.bartus{
        float:left;
	color:#0086b3;
}
a{
	float:left;
	display: block;
	padding: 14px 16px;
	text-decoration: none;
	color: white;
}

h1#welcome{
	margin: 20px;
	margin-top:90px;
	text-align: center;
	color:#23272a;
}
a:hover{
	color:#4da6ff;
}




</style>
</head>
<body>

<div class="menu">
	<div class="bartus">Bartuś</div>
	<div class="memu_show">
		<a href="">Home</a>
		<a href="">Gallery</a>
		<a href="">About</a>
	</div>
</div>

<h1 id="welcome">Helo on my page</h1>

Silv

2018-03-22 23:55

Silv2018-03-22 23:55

Moderator Wiki

Rejestracja:ponad 10 lat
Ostatnio:prawie 3 lata
Lokalizacja:Warszawa

Nie bardzo widzę ten napis "Bartuś" w podanym przez Ciebie layoucie, ale do rzeczy; należałoby postawić sobie pytanie: dlaczego miałby się wyświetlać w tej samej linii co elementy <a>? <div> jest domyślnie elementem blokowym, więc oba elementy <div> tworzą nowe linie. Oba też mają takie same wartości własności float, więc ona tutaj nic nie zmienia.

Poza tym porada: rozdzielaj kod CSS i HTML na różne pliki, oraz tu na forum możesz wrzucać do oddzielnych znaczników.

edytowany 5x, ostatnio: Silv 2018-03-22 23:57

bartek164 2018-03-22 23:58

aha, no to jak to zrobić?

Silv 2018-03-22 23:58

Ale co zrobić?

bartek164 2018-03-22 23:59

napis koło linków :)

Silv 2018-03-23 00:00

Zdefiniuj, co to znaczy "koło". Przed, za, nad, pod? PS. Pytam, bo, jak napisałem, nie badzo widzę ten napis – on mi po prostu wizualnie nie pasuje w rejonie tych linków.

bartek164

2018-03-23 00:02

bartek1642018-03-23 00:02

Rejestracja:ponad 8 lat
Ostatnio:ponad rok
Postów:534

napis bartuś niżej, i strzliłem ci fotkę

4p.jpg (8 KB) - ściągnięć: 334

Silv 2018-03-23 00:02

A! Chodzi Ci - takie logo jakby?

bartek164 2018-03-23 00:03

tak

Silv

2018-03-23 00:11

Silv2018-03-23 00:11

Moderator Wiki

Rejestracja:ponad 10 lat
Ostatnio:prawie 3 lata
Lokalizacja:Warszawa

Napis można umieścić tak, jeśli koniecznie chcesz używać własności float: https://jsfiddle.net/n7h0hds3/8/

Kopiuj

<!DOCTYPE html>
<html>

  <head>
    <title>Bartek page</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>

    <div class="menu">
      <!--<div class="bartus">Bartuś</div>-->
      <div class="memu_show">
        <div class="bartus">
          Bartuś
        </div>
        <div class="menu-wrapper">
          <a href="">Home</a>
          <a href="">Gallery</a>
          <a href="">About</a>
        </div>
      </div>
    </div>

    <h1 id="welcome">Helo on my page</h1>

Kopiuj

div.menu {
  /* width: 100%; */
  /* height: 100%; */
  margin-left: -10px;
  margin-right: -25px;
}

div.memu_show {
  padding: 0;
  background-color: #262626;
  width: 100%;
  height: 100%;
  float: left;
}

div.bartus {
  float: left;
  color: #0086b3;
}

a {
  float: left;
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  color: white;
}

h1#welcome {
  margin: 20px;
  margin-top: 90px;
  text-align: center;
  color: #23272a;
}

a:hover {
  color: #4da6ff;
}

.bartus {
  color: white;
}

.menu-wrapper {
  float: left;
}

UPDATE: Poprawiłem komentarze w CSS. To ważne, bo ze slashami z Javascriptu to style będą źle interpretowane, być może różnie przez różne przeglądarki.

UPDATE 2: Może być prawdopodobnie co najmniej kilka innych sposobów umieszczenia tego napisu tam. Ja na przykład nauczyłem się używać modelu grid (https://developers.google.com/web/updates/2017/01/css-grid) i wydaje mi się on więcej intuicyjny niż własność float. Dobry jest także flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

edytowany 3x, ostatnio: Silv 2018-03-23 00:15

bartek164

2018-03-23 00:25

bartek1642018-03-23 00:25

Rejestracja:ponad 8 lat
Ostatnio:ponad rok
Postów:534

dobra, zrobiłem głupote, ale teraz naprawiłem, natomiast mam pytanie

dlaczego ten margin nachodzi na elementy "menu" przynajmniej wizualnie? chodzi o tą otoczke zółtą która oznacza margines?
nie rozumiem tego, czy jest wszystko w porządku czy coś zrobiłem żle?
zmieniłem tylko

Kopiuj

h1#welcome{
	margin: 40px 20px;
	margin-top:70px;
	text-align: center;
	color:#23272a;
}

4.jpg (167 KB) - ściągnięć: 465

edytowany 2x, ostatnio: bartek164 2018-03-23 00:45

Silv

2018-03-23 00:49

Silv2018-03-23 00:49

Moderator Wiki

Rejestracja:ponad 10 lat
Ostatnio:prawie 3 lata
Lokalizacja:Warszawa

a powiesz mi dlaczego ten headaer jest taki paskundy? na inspeckji zbadaj element on wychodzi swoimi ramami wysoko do góry

Dlatego, że własność float ustawiona dla elementu <element> powoduje usunięcie elementu <element> z normalnego układu elementów na stronie. Powoduje to u Ciebie, że element <h1> jest ustawiony tak (na wysokość), jakby nie było menu na stronie (od samej góry strony). Polecam przeczytać zanim zaczniesz pisać coś skomplikowanego z floatami: https://css-tricks.com/all-about-floats/.

poza tym musiałem go marginem osuwać od menu by było ok?

Nie rób tak. Ustaw clear: left na <h1>. Ta własność powoduje, że ten element nie będzie pozwalać, by opływały go elementy z lewej strony. Teraz przesunął się poniżej floatującego menu, jak powinno być. Więcej: https://developer.mozilla.org/pl/docs/Web/CSS/clear

UPDATE: pamiętaj też, że <h1>, mimo że jest używany jako element z treścią tekstową, jest elementem blokowym. Nie wiem, czy nie ma to wpływu na opływanie jego i przez niego.

edytowany 3x, ostatnio: Silv 2018-03-23 00:52

bartek164 2018-03-23 00:52

dodanie clear:left nic nie zeminiło

Silv 2018-03-23 00:56

Zmieniło: https://jsfiddle.net/n7h0hds3/20/ Pokaż aktualny kod.

bartek164

2018-03-23 01:02

bartek1642018-03-23 01:02

Rejestracja:ponad 8 lat
Ostatnio:ponad rok
Postów:534

To mnie dziwi, bo takiego problemu nie mam niżej, a zrobiłe identycznie, chodzi o klasy "two"

Kopiuj

<!DOCTYPE html>
<html>
<head>
	<title>Bartek page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="menu">
	<div class="memu_show">
		<div class="bartus">Bartuś</div>
		<div class="menu-wrapper">
			<a href="">Home</a>
			<a href="">Gallery</a>
			<a href="">About</a>
		</div>
	</div>
</div>

<h1 id="welcome">Helo on my page</h1>

<div class="container" style="margin: 0 70px;">
	<div class="one">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius ac nunc porttitor sagittis. Ut vel eros rhoncus, tristique purus vel, porttitor erat. Mauris convallis ac justo vitae semper. Morbi tincidunt velit felis, non eleifend orci mollis eget. Duis elementum nunc sagittis, ultricies augue sit amet, posuere libero. Mauris eu iaculis neque. Fusce facilisis fringilla augue, nec porttitor sapien iaculis nec. Maecenas vehicula tincidunt vulputate. Vivamus porttitor enim nec dignissim porta. Morbi euismod est odio, non venenatis dolor efficitur vitae. In sollicitudin eros augue, condimentum feugiat ex dictum non. Pellentesque nec metus luctus, malesuada urna nec, convallis lacus. Sed cursus, ipsum non volutpat accumsan, eros orci rhoncus nisl, eu luctus libero dolor vel arcu.

		Donec maximus nunc eget ante mollis, eu venenatis mi eleifend. Suspendisse ac libero enim. Sed commodo mattis augue in egestas. Sed semper varius nisl a lobortis. Donec elementum ex a consectetur semper. Fusce et turpis mi. Quisque ac viverra felis.

		Mauris erat eros, tincidunt elementum maximus nec, auctor in lacus. Morbi eu felis neque. Phasellus vestibulum tempor imperdiet. Cras sollicitudin sapien id nulla porttitor, sit amet malesuada est pulvinar. Cras in aliquet massa, sed scelerisque ipsum. Integer vel efficitur lectus. Phasellus auctor quam risus, in lobortis nunc dictum vitae.

		Nullam a ligula congue, <br>finibus sem at, consequat erat. Nulla blandit mauris non fringilla tempus. Quisque tempus sodales neque, vel fringilla orci placerat a. Proin in ex mauris. Quisque rhoncus, dui at tincidunt vestibulum, ante ligula finibus sem, nec bibendum purus nibh ac quam. Mauris efficitur dolor dui, sit amet malesuada augue suscipit ut. Aenean ac velit non lacus malesuada vulputate. Donec maximus dolor et faucibus rutrum. Phasellus non nunc non urna dictum porta.

		Etiam dapibus purus leo, vitae finibus mauris elementum vel. Etiam erat lectus, sagittis et turpis vel, ultrices imperdiet sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat justo nec lectus accumsan, nec posuere erat pretium. Praesent sagittis vehicula egestas. Pellentesque at tortor id magna viverra viverra quis at mauris. Praesent quis placerat felis. Sed porta dui et dui fermentum tristique.

		Integer facilisis velit et mattis interdum. Aliquam tincidunt congue massa et sagittis. Suspendisse potenti. Phasellus nec leo commodo, lacinia odio nec, porttitor lorem. Sed dolor eros, lobortis sed nisi sed, placerat eleifend enim. Curabitur faucibus, tellus sed ultricies sodales, erat orci sollicitudin lectus, vitae finibus ex augue sit amet quam. Nunc convallis pellentesque nulla nec mattis.

		Curabitur mauris esmod est. Nunc est massa, accumsan ut convallis vel, bibendum vel ante. In mattis risus id felis pretium tempus. Aenean eget vestibulum nisi. Sed tempus hendrerit ex eu pulvinar. Integer urna elit, blandit ut feugiat et, convallis sit amet quam. Cras vitae purus lectus. Nulla ultricies viverra risus vel ultrices. Maecenas efficitur ac mauris a pharetra. Pellentesque maximus justo eget est posuere, in bibendum sem egestas. Mauris ante mauris, lobortis ut erat at, interdum rhoncus lectus. Cras ut nibh elit. 
		</p>
	</div>
	<div class="two">
		<div class="two_top">
			Mauris erat eros, tincidunt elementum maximus nec, auctor in lacus. Morbi eu felis neque. Phasellus vestibulum tempor imperdiet. Cras sollicitudin sapien id nulla porttitor, sit amet malesuada est pulvinar. Cras in aliquet massa, sed scelerisque ipsum. Integer vel efficitur lectus. Phasellus auctor quam risus, in lobortis nunc dictum vitae.

			Nullam a ligula congue, <br>finibus sem at, consequat erat. Nulla blandit mauris non fringilla tempus. Quisque tempus sodales neque, vel fringilla orci placerat a. Proin in ex mauris. Quisque rhoncus, dui at tincidunt vestibulum, ante ligula finibus sem, nec bibendum purus nibh ac quam. Mauris efficitur dolor dui, sit amet malesuada augue suscipit ut. Aenean ac velit non lacus malesuada vulputate. Donec maximus dolor et faucibus rutrum. Phasellus non nunc non urna dictum porta.
		</div>
		<div class="two_down">
			Mauris erat eros, tincidunt elementum maximus nec, auctor in lacus. Morbi eu felis neque. Phasellus vestibulum tempor imperdiet. Cras sollicitudin sapien id nulla porttitor, sit amet malesuada est pulvinar. Cras in aliquet massa, sed scelerisque ipsum. Integer vel efficitur lectus. Phasellus auctor quam risus, in lobortis nunc dictum vitae.

				Nullam a ligula congue, <br>fini
		</div>
	</div>
</div>

</body>
</html>

```'


```css
div.menu{
	margin-top: -8px;
	margin-left: -8px;
	margin-right:-8px;
	
}
div.memu_show{
	padding: 0;
	background-color:#262626;
	width: 100%;
	height: 100%;
	float: left;
}
div.bartus{
	float:left;
	color:#0086b3;
}
a{
	float:left;
	display: block;
	padding: 14px 16px;
	text-decoration: none;
	color: white;
	//border: 1px solid red;
}
 
.menu-wrapper {
  float: left;
}
div.contener{
		width: 100%;
		height: 100%;
}
div.one{
	margin-right: 40px;
	float:left;
	width:50%;
}
div.two{
	width:40%;
	height:50%;
	float:left;
	
}
div.two_top{
	margin-bottom:20px;
	padding: 29px;
	border-radius: 24px;
	background-color:#d1d1e0;
}
div.two_down{
	background-color: #66d9ff;
	
}
h1#welcome{
	clear: left;
	margin: 40px 20px;
	margin-top:70px;
	text-align: center;
	color:#23272a;
}
a:hover{
	color:#4da6ff;
}

html 
{
	 font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body 
{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

#main_img{
	background-image: url(img/ocean.jpg);
	width: auto;
	height: 100px;
}

bartekpage.7z (2 KB) - ściągnięć: 345

edytowany 1x, ostatnio: bartek164 2018-03-23 01:05

Silv 2018-03-23 01:03

Nie pobieram plików, wstaw kod lub jsfiddle, lub pastebin u nas na stronie.

bartek164 2018-03-23 01:04

:(((( whhyy

Silv

2018-03-23 01:09

Silv2018-03-23 01:09

Moderator Wiki

Rejestracja:ponad 10 lat
Ostatnio:prawie 3 lata
Lokalizacja:Warszawa

No dobrze, ale jaki problem jest z tym kodem? Wszystko wygląda w porządku w jsfiddle, tzn. w porządku w kwestii float.

bartek164 2018-03-23 01:11

znaczy ja nie wiem czy jest ok, bo dopiero wczoraj zaczołem się uczyć, ale te marginy zachodzą na menu, tam wynika z inspektora google :) hihihi, jeśli jest ok, to fajnie:)

Silv 2018-03-23 01:15

("ął", nie "oł"). Nie jestem specjalistą od floatów, ale z racji tego, że od dawna są w CSS, to wydaje mi się, że o wiele ciężej coś z nimi zrobić niż z gridem czy flexboksem. Jeśli upierasz się przy floatach, to poszukam w wolnym czasie, czemu tak to menu działa.

bartek164 2018-03-23 01:23

aha, nie wiem, takie tylko znalazłem w w3c, i takiego używałem, póżniej będe robił,dziękuje Ci bardzo za pomoc, musze się teog nauczyć więcej

Silv 2018-03-23 01:29

Na marginesie: W3C (https://www.w3schools.com/, jak rozumiem) to dobre źródło, szczególnie jeśli chodzi o przejrzystość. Ale – jeden lubi używać floatów, a inny czego innego.

bartek164 2018-03-23 19:01

rozumiem

youmound

2018-03-26 12:17

youmound2018-03-26 12:17

Rejestracja:ponad 11 lat
Ostatnio:ponad 2 lata
Postów:540

Dodam coś bez wartościowego od siebie

div { display: inline; }

Silv 2018-03-26 13:47

Dlaczego?

youmound 2018-03-26 13:50

co dlaczego?

Silv 2018-03-26 18:19

Dlaczego ta deklaracja miałaby zostać dodana do <div>?

youmound 2018-03-26 19:38

bo to bezwartościowy komentarz, przeczytałem pierwszy post i jego komentarze, dalej mi się nie chciało :)

Silv 2018-03-26 19:39

Acha. To może lepiej usunąć?

LukeJL

2018-03-26 20:12

LukeJL2018-03-26 20:12

Rejestracja:około 11 lat
Ostatnio:minuta
Postów:8403

Kopiuj

//  width: 100%;

w czystym CSS bez dodatków nie ma takich komentarzy (jest tylko /* i */), to nie Sass.

Kopiuj

div.menu{

lepsze byłoby po prostu .menu. Skąd wiesz, czy nie będziesz musiał zmienić kiedyś taga z diva na jakiś inny tag?

Kopiuj

memu_show

co to jest memu? (którego konsekwentnie używasz, więc to nie literówka).

No i ogólna rada - jak chcesz, żeby ktoś na to patrzył to weź wyodręb z całego kodu fragment, który sprawia błąd i stwórz case na jsfiddle czy codepen albo podobnej stronie. Prawdopodobnie rozwiążesz w ten sposób swój problem (samo wyodrębnienie często wymaga od nas spojrzenia inaczej na kod), a jeśli nie to wrzuć linka z konkretnym case'm...

nikt się nie będzie bawił w czytanie kilometrowego kodu i zgadywanki...

edytowany 1x, ostatnio: LukeJL 2018-03-26 20:13

Silv

2018-03-26 23:44

Silv2018-03-26 23:44

Moderator Wiki

Rejestracja:ponad 10 lat
Ostatnio:prawie 3 lata
Lokalizacja:Warszawa

te marginy zachodzą na menu, tam wynika z inspektora google

Myślałem nad tym; nie wiem, o jakie marginesy Ci chodzi, ale domyślam się, że o górny margines tagu <h1>. Rzeczywiście, znika (i nie da się ustawić – a przynajmniej nie tak prosto, bo nie próbowałem wszystkich możliwości). Nie udało mi się dokładnie ustalić, czemu tak jest, ale może to być kwestia tzw. załamywania marginesów. Zobacz tu:

UPDATE: Najprawdopodobniej znikanie marginesów jest spowodowane (może tylko pośrednio) przez to, że element <div class="menu"> posiada zerową wielkość (dodaj mu własność na przykład height: 1px; i zobaczysz, że górny margines dla <h1> będzie ustawiony poprawnie). Myślę, że ma to też związek z załamywaniem marginesów.

Co innego, dlaczego ma on zerową wielkość (oraz czy powinno tak być); nie szukałem do tego rozwiązania, ponieważ moim zdaniem, w tym momencie lepiej byłoby zmienić HTML.

edytowany 11x, ostatnio: Silv 2018-03-27 00:21

Liczba odpowiedzi na stronę

Treść *

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: H₂O i m².

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)

Mam jakiś dziwny problem z divem?

Smileys & People

Animals & Nature

Food & Drink

Travel & Places

Activities

Objects

Symbols

Typografia

Linki

Wewnętrzne odnośniki

Wspomnienia użytkowników

Znaczniki HTML

Skróty klawiszowe

Indeks górny oraz dolny

Składnia Tex

Kod źródłowy

Krótkie fragmenty kodu

Kod wielolinijkowy

Tabelki

Lista uporządkowana i nieuporządkowana

Składnia Markdown

Skróty klawiszowe