Div używanie marginesów ujemnych

Div używanie marginesów ujemnych
bartek164
  • Rejestracja:ponad 8 lat
  • Ostatnio:ponad rok
  • Postów:534
0

Mam pytanie, odnośnie mojego diva, główny div - "god" jest jakby tłem, i teraz moje pytanie skoro margin w klasnie god jest ustawiony na 0 to dlaczego od góry strony jest odstęp, rozwiązaniem jest margin ujemny, ale mnie zastanawia dlaczego tam jest odstęp skoro margin to 0? i przy wartości 0 powinno nie być odstępu
Pytanie numer 2:
Czy stosowamie marginów ujemnych to jakiś błąd? bo tak rozwiązałem problem aby 3 elementy klasy "row" były koło siebie

Kopiuj
margin-left:70px;
margin-right: -40px;

Kopiuj
<!DOCTYPE html>
<html>
<head>
	<title>Bartek Page</title>
	<meta charset="utf-8">
<style>
    
    .main{
    }
    .row{
        float: left;
        width: 25.33%;
        background-color: azure;
        margin-left:70px;
        margin-right: -40px;
    }
    h1{
        clear: left;
    }
    #god{
        min-height: 900px;
        margin: 0 50px;
     //margin: -20px 50px; ##rozwiazanie
        background-color: white;
    }
    body{
        margin: 0;
        background-color: darkgrey;
    }
</style>
</head>
<body>
<div id="god">
    <h1>Hello</h1>
    
    <div class="main">
        <div class="row">
        <h2>Hello</h2>
            <p>Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.</p>
        </div>
        <div class="row">
             <h2>Hello</h2>
            <p>Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.</p>
        </div>
        <div class="row">
             <h2>Hello</h2>
            <p>Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.</p>
        </div>
    </div>
    <h1>Hello again</h1>

</div>
</body>
</html>
NikolaPolov
  • Rejestracja:prawie 8 lat
  • Ostatnio:ponad 6 lat
  • Lokalizacja:Warszawa
  • Postów:106
0

dasz rade wstawić ten kod na jakiś edytor online typu https://jsfiddle.net/ albo https://jsbin.com/?html,css,output ?


Nie byłbym sobą gdybym był kimś innym
bartek164
https://jsfiddle.net/ybnmrngz/#&togetherjs=zRFOxNOjpy ale to ci nie wiele da, bo tutaj się wy,świetla normalnie, to znaczy nie ma ma odstępu od góry strony
NikolaPolov
witaj w świecie frontendu :) jak pójdziesz do pierwszej pracy i dostaniesz zadanie typu ma się tak samo wyświetlać na wszystkich przeglądarkach to ci się odechce :)
bartek164
ee fuj, ja jestem z backendu, chyba, jeszcze nie wiem, ale no ja nie wiem czemu ten odstęp tam jest, inspect wskazuje, że body zaczyna się 0_o 20 px od krawędzie górenej
SwateQ
  • Rejestracja:około 8 lat
  • Ostatnio:3 miesiące
  • Postów:87
0

Zbadaj w przeglądarce powinno Ci pomóc z tym marginesem, osobiście polecam na start css reset np. z tej strony: https://meyerweb.com/eric/tools/css/reset/

Jak chcesz 3 elementy koło siebie to może użyj css-grid?

Kopiuj
.row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
NikolaPolov
  • Rejestracja:prawie 8 lat
  • Ostatnio:ponad 6 lat
  • Lokalizacja:Warszawa
  • Postów:106
1

Jak w 2018 widze że w kodzie jest float left to nie szlak trafia . Teraz są abo flexboxy albo gridy . NIE UŻYWAJ FLOAT W CSS


Nie byłbym sobą gdybym był kimś innym
bartek164
hihihi, dopiero zaczynam, a w3c to miało na początku
NikolaPolov
rozumiem ale olej w3c odpal na youtube faceta z nickiem netninja i on ma całą playliste na temat css
czysteskarpety
czysteskarpety
a ja nie widzę w tym aż takiego problemu, o ile całość jest wykonana prawidłowo
bartek164
dzięki za poradnik
Silv
Technika float chyba nie musi być zła, jest raczej bardziej wymagająca. Miała służyć pierwotnie do wysuwania niektórych elementów z głównego układu na stronie, a nie wszystkich – może dlatego lepiej wykorzystywać tę technikę tylko do fragmentów strony, jeśli w ogóle. Jednak – chyba lepiej unikać mieszania technik float, grid oraz flexbox. Dobrze jest też pamiętać o tym, jak różne przeglądarki interpretują ten sam kod float, jak grid, a jak flexbox.
bartek164
  • Rejestracja:ponad 8 lat
  • Ostatnio:ponad rok
  • Postów:534
0

no dobra, ale powie mi ktoś dlaczego body się zaczyna 20 px od początku strony?

SwateQ
Jaka przeglądarka i rozdzielczość? U mnie Twój kod nie ma żadnego marginesu u góry.
bartek164
firefox i chrome - 1366-768
bartek164
  • Rejestracja:ponad 8 lat
  • Ostatnio:ponad rok
  • Postów:534
0

4p.jpg

  • 4p.jpg (92 KB) - ściągnięć: 128
YO
  • Rejestracja:ponad 11 lat
  • Ostatnio:ponad 2 lata
  • Postów:540
1

Sam ten margines ustawiłeś.
https://imgur.com/a/UrWQo

// jak tu cholera się stawia te obrazki? -.-

dla h1 margin i padding na 0

jakbyś przebadał to to byś widział, że h1 ma wewnętrzne marginesy

https://imgur.com/a/ft1F6 <-- patrz tu


Dziura w ścianie gdzie Panowie widzą Panie,
Rick and Morty, season 1.
Szukam tej dziury, jak coś dajcie znać gdzie jest :D "A z Ciebie c**** pisowski" - Ula Papuszko (w sensie, że JA) 05.06.2020 r., grupa: Strajk Przedsiębiorców. Witam zatem, jestem c**** pisowski ;)
edytowany 3x, ostatnio: youmound
Zobacz pozostały 1 komentarz
YO
co nie działa?
YO
wpisz dla h1 { margin: 0; padding: 0;}
WeiXiao
@youmound: jak wstawiasz obrazki, w sumie gdziekolwiek, to podajesz link do obrazka, a nie do strony (np. album imgura) która wyświetla ten obrazek, czyli do tego z końcówką .jpg, czyli naciskasz prawy i pokaż obrazek - w tym wypadku "https://i.imgur.com/EAANuhr.png", a następnie wstawiasz w odpowiednie tagi.
YO
wiem jak się korzysta z imgura, tylko teraz daję jako gość i nie miałem direct linka ... -.- z konta nie mogę dodawać bo nie chcą się dodawać a kolejnego konta nie mam zamiaru zakładać
WeiXiao
@youmound: no ja też tak robię (as guest) i wystarczy pokaż obrazek użyć i masz direct link. W całym internecie to tak działa :D
SwateQ
  • Rejestracja:około 8 lat
  • Ostatnio:3 miesiące
  • Postów:87
1

Margin z h1 "Hello" Ci bierze.

bartek164
  • Rejestracja:ponad 8 lat
  • Ostatnio:ponad rok
  • Postów:534
0

Rzeczywiście, bo nie mógł się pomieścić, w klasie main i wypchał poza nią

SwateQ
Wyżej Ci podałem przykładowy reset-css, aby uniknąć takich sytuacji ;)
YO
* { margin : 0; padding: 0; } ... ...
Silv
Z koncepcja @youmound z zerowaniem marginesów i paddingu zgodzę się, ale lepiej unikać uniwersalnego selektora *, jeśli można. Lepiej ustawiać to w poszczególnych selektorach.
Kliknij, aby dodać treść...

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)