nagłówek na całą długość bez marginów html css

pytanie zadane 27 marca 2022 w HTML i CSS przez grzybownik420 Nowicjusz (170 p.)

Jak zrobić żeby div który ma być nagłówkiem rozciągał się na całą długość i górną wysokość (bez marginów) i żeby można było do niego wstawić akapit. zależy mi na dobrym skalowaniu

Gdy próbuje z position absolute to źle się skaluje

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="top">
        <p>e-news</p>
    </div>
</body>
</html>


.top
{
    width: 100%;
    height: 2.8%;
    background-color: black;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
}
.top p
{
    color: white;
}

komentarz 27 marca 2022 przez VBService Ekspert (256,600 p.)

O to Tobie chodzi?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <div class="top">
      <p>Lorem ipsum</p>
    </div>
  </body>
</html>

.top
{
  width: 100%;
  /* height: 2.8%; usunięty */ 
  background-color: black;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
}
.top p
{
  margin: 0; /* dodany */  
  color: white;
}

komentarz 27 marca 2022 przez VBService Ekspert (256,600 p.)
edycja 4 kwietnia 2022 przez VBService

lub

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <div class="top">
      <p>Lorem ipsum</p>
    </div>
    
    <p style="height: 200px;">lorem</p>
    <p style="height: 200px;">lorem</p>
    <p style="height: 200px;">lorem</p>
    <p style="height: 200px;">lorem</p>
    <p style="height: 200px;">lorem</p>
    <p style="height: 200px;">lorem</p>    
  </body>
</html>

html,
body {
  margin: 0;
  padding: 0;
}
.top
{
  width: 100%;
  background-color: black;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
}
.top p
{
  margin: 0;
  color: white;
}

1 odpowiedź

odpowiedź 4 kwietnia 2022 przez Piotrek2713 Mądrala (5,520 p.)
edycja 4 kwietnia 2022 przez Piotrek2713

Kod CSS powinien się znajdować wewnątrz tagu <style>KOD CSS</style> lub w podpiętym do pliku HTML arkuszu CSS.

<head>
    <style>
        kod CSS
    </style>
</head>

lub

<head>
   <link rel="stylesheet" type="text/css" href="sciezka_do_pliku.css">
</head>

Musisz jeszcze usunąć domyślne marginesy dla body

body
{
     margin: 0;
}

komentarz 4 kwietnia 2022 przez VBService Ekspert (256,600 p.)

@Piotrek2713,

<link rel="stylesheet" type="text/css" href="sciezka_do_pliku.css">

Is type="text/css" necessary in a <link> tag?

komentarz 4 kwietnia 2022 przez Piotrek2713 Mądrala (5,520 p.)

Nie jest konieczne, ale można zapisać

Podobne pytania

0 głosów

4 odpowiedzi 1,994 wizyt

HTML, CSS strona na całą "długość strony"

pytanie zadane 17 listopada 2016 w HTML i CSS przez Falwack Początkujący (400 p.)

0 głosów

2 odpowiedzi 2,238 wizyt

[HTML CSS] Po zmniejszeniu okna przeglądarki środek najezdza mi na menu z lewej strony...

pytanie zadane 2 marca 2017 w HTML i CSS przez LeeTomahawk Początkujący (250 p.)

0 głosów

1 odpowiedź 849 wizyt

Problem z powiększaniem strony - HTML, CSS

pytanie zadane 27 lutego 2016 w HTML i CSS przez KamQiX Dyskutant (9,090 p.)

nagłówek na całą długość bez marginów html css

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci