Jak usunąć przerwe między headerem a górą oraz bokami przeglądarki?

0

Witam
Mój problem wygląda następująco. Mam znacznik header i chciałbym by między nim a górą, prawą stroną oraz lewą nie było odstępu. Próbowałem to zerować w css marginem i leftem ale niedziała nie działa. Mógłby ktoś doradzić jak mogę to zrobić?

3

Daj kod to się zastanowimy :P

0

@cerrato:

 <header id="head">
        TEST HOLLANDA
    </header>
#head
{
    background-color: black;
    color: #e6e600;
    font-weight: 900;
    text-align: center;
    font-size: 44px;
    padding: 30px;
    font-family: sans-serif;
}
1

A tak coś więcej? Bo dałeś taki mikrowycinek, trochę moim zdaniem za mało.

Próbowałem to zerować w css marginem i leftem ale nie działa

Pamiętaj, że ten odstęp o którym piszesz wcale nie musi wynikać z headera, bo element przed/po nim może mieć ustawiony jakiś margin i to on powoduje odstęp.

0

@cerrato:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Test Hollanda</title>
    <meta name="author" content="Adam Szumacher"/>
    <meta name="description" content="Test Hollanda czyli test na swój typ osobowości zawodowej"/>
    <link rel="stylesheet" href="test-hollanda.css" type="text/css" />
</head>
<body>
    <header id="head">
        TEST HOLLANDA
    </header>
    <main>
        <div class="pyt">Posiadanie silnego i zgrabnego ciała jest dla mnie ważną rzeczą </div>
        <div id="k1" class="zdj1"><img src="correct-check-button.png" /></div>
        <div id="k2" class="zdj2"><img src="uncorrect-check-button.png" /></div>

body
{
  background-color: #ebebe0;  
}

#head
{
    background-color: black;
    color: #e6e600;
    font-weight: 900;
    text-align: center;
    font-size: 44px;
    padding: 30px;
    font-family: sans-serif;
}
.pyt
{
    float: left;
    border: solid 5px black;
    margin-right: 20px;
    font-size: 26px;
    margin-top: 50px;
    padding: 10px;
    width: 900px;
}

.zdj1 img
{
    border: solid 5px black;
    float: left;
    margin-right: 10px;
    width: 80px;
    height: 80px;
    margin-top: 40px;
}
.zdj2 img
{
    border: solid 5px black;
    width: 80px;
    height: 80px;
    margin-top: 40px;
}
.zdj1 img:hover
{
    border: solid 5px green;
    float: left;
    margin-right: 10px;
    width: 85px;
    height: 85px;
    margin-top: 40px;
}
.zdj2 img:hover
{
    border: solid 5px red;
    width: 85px;
    height: 85px;
    margin-top: 40px;
}
3

Nie mam teraz czasu, żeby dokładnie szukać, która reguła za to odpowiada, ale na szybko dodałem do Twojego CSS'a reset i poszło.

Poniżej masz kod, który (przynajmniej - u mnie) działa.

A co do samego resetu - powinieneś się tym zainteresować. Ogólnie chodzi o to, że różne przeglądarki nieraz mają inaczej ustawione pewne atrybuty. Nie są to wielkie różnice, ale czasem mogą spowodować, że coś, co działa dobrze na jednej przeglądarce (np. Firefox) się rozjedzie na innej (np. Chrome).

W idealnym świecie takie coś nie powinno mieć miejsca, ale jest jak jest - dlatego wymyślono kiedyś tzw. arkusze resetu - czyli style, które powinno się dołożyć do swojej strony jako pierwszy styl. Odpowiada on za to, żeby wyzerować te różnice i żeby na wszystkich przeglądarkach ustawienia domyślne były jednakowe. Ten poniżej pobrałem ze strony https://meyerweb.com/eric/tools/css/reset/, ale jak wpiszesz w Google CSS reset to dostaniesz tysiące wyników. To, co wkleiłem to tylko kawałek "pełnego" resetu, ale jak widać - wystarczający.

Jeśli jesteś ciekawy, dlaczego był ten odstęp, to możesz metodą prób i błędów usuwać pojedyncze fragmenty z tego, co dopisałem, aż w którymś momencie zobaczysz, że odstęp się pojawił. Wtedy będziesz wiedział, co konkretnie było brzydalem, który nam psuł zabawę ;)

Masz obrazki, jak było przed zmianami oraz po nich. Czy o to Ci chodziło?

screenshot-20210312145937.png


screenshot-20210312145945.png


<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
	<style>
	
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}	
	
		
body {
	background-color: #ebebe0;
}

#head {
    background-color: black;
    color: #e6e600;
    font-weight: 900;
    text-align: center;
    font-size: 44px;
    padding: 30px;
    font-family: sans-serif;
}

.pyt {
    float: left;
    border: solid 5px black;
    margin-right: 20px;
    font-size: 26px;
    margin-top: 50px;
    padding: 10px;
    width: 900px;
}
</style>
</head>
<body>
    <header id="head">
        TEST HOLLANDA
    </header>
    <main>
        <div class="pyt">Posiadanie silnego i zgrabnego ciała jest dla mnie ważną rzeczą</div>
	</main>
</body>
</html>

2

@Adam Szumacher: A czy nie prościej było po prostu badać dany element za pomocą narzędzi developerskich wbudowanych w każdą przeglądarkę (nie licząc mobilnych)? Przecież tam od razu byś zobaczył jaki styl daje jaki padding/margin itp itd. Poniżej - incepcjo-przykład :)

Screenshot 2021-03-12 153023.png

1

Teraz miałem chwilkę i sprawdziłem. Poniższe rozwiązuje problem:

body {
    background-color: #ebebe0;
	margin: 0px;
}

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