• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Object Storage Arubacloud
+1 głos
354 wizyt
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 (254,490 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 (254,490 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ź

0 głosów
odpowiedź 4 kwietnia 2022 przez Piotrek2713 Mądrala (5,500 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 (254,490 p.)

@Piotrek2713,  wink

<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,500 p.)

Nie jest konieczne, ale można zapisać angel

Podobne pytania

0 głosów
4 odpowiedzi 1,499 wizyt
pytanie zadane 17 listopada 2016 w HTML i CSS przez Falwack Początkujący (400 p.)
0 głosów
2 odpowiedzi 1,862 wizyt
0 głosów
1 odpowiedź 647 wizyt
pytanie zadane 27 lutego 2016 w HTML i CSS przez KamQiX Dyskutant (9,090 p.)

92,662 zapytań

141,557 odpowiedzi

320,002 komentarzy

62,029 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...