Div używanie marginesów ujemnych

Odpowiedz Nowy wątek
2018-03-26 10:48
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

margin-left:70px;
margin-right: -40px;
<!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>

Pozostało 580 znaków

2018-03-26 11:04
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
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 - bartek164 2018-03-26 11:07
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 :) - NikolaPolov 2018-03-26 11:09
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 - bartek164 2018-03-26 11:13

Pozostało 580 znaków

2018-03-26 11:05
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?

.row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

Pozostało 580 znaków

2018-03-26 11:18
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
hihihi, dopiero zaczynam, a w3c to miało na początku - bartek164 2018-03-26 11:18
rozumiem ale olej w3c odpal na youtube faceta z nickiem netninja i on ma całą playliste na temat css - NikolaPolov 2018-03-26 11:20
a ja nie widzę w tym aż takiego problemu, o ile całość jest wykonana prawidłowo - czysteskarpety 2018-03-26 11:24
dzięki za poradnik - bartek164 2018-03-26 11:45
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. - Silv 2018-03-26 23:44

Pozostało 580 znaków

2018-03-26 11:28
0

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

Jaka przeglądarka i rozdzielczość? U mnie Twój kod nie ma żadnego marginesu u góry. - SwateQ 2018-03-26 11:33
firefox i chrome - 1366-768 - bartek164 2018-03-26 11:35

Pozostało 580 znaków

2018-03-26 11:35
0

4p.jpg

  • 4p.jpg (0,09 MB) - ściągnięć: 26

Pozostało 580 znaków

2018-03-26 11:38
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
edytowany 3x, ostatnio: youmound, 2018-03-26 11:43
nie działa - bartek164 2018-03-26 11:39
co nie działa? - youmound 2018-03-26 11:39
wpisz dla h1 { margin: 0; padding: 0;} - youmound 2018-03-26 11:42
@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. - WeiXiao 2018-03-26 11:43
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ć - youmound 2018-03-26 11:44
@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 - WeiXiao 2018-03-26 11:45

Pozostało 580 znaków

2018-03-26 11:39

Margin z h1 "Hello" Ci bierze.

Pozostało 580 znaków

2018-03-26 11:44
0

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

Wyżej Ci podałem przykładowy reset-css, aby uniknąć takich sytuacji ;) - SwateQ 2018-03-26 11:45
* { margin : 0; padding: 0; } ... ... - youmound 2018-03-26 13:55
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. - Silv 2018-03-26 23:57

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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