Problematyczna stopka w HTML

pytanie zadane 5 lutego 2023 w HTML i CSS przez Cypika Początkujący (290 p.)

Dzień dobry, mam problem ze zrobieniem tzw. stopki. Próbowałem wiele sposobów z internetu, ale żaden nie działa tak jak bym chciał, a chciałbym żeby stopka zawsze była na dole strony a nie ekranu (żeby nie była przyklejona do ekranu) Zamieszczam kod:

<!DOCTYPE html>
<head>
	<title>Tak</title>
	<body bgcolor="#353B40" onload="startTime()"/>
	
	<script>
function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}


window.onscroll = function() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 150) {
    document.querySelector(".sticky").classList.add("grd");
  } else {
    document.querySelector(".sticky").classList.remove("grd");
  }
};

document.getElementById("odn-tekst").onselectstart = () => false;
	</script>
	
	<style>
		@import url('https://fonts.googleapis.com/css?family=Roboto');
		@import url('https://fonts.googleapis.com/css2?family=Open+Sans:');
		
		.grd{
		transition-duration: 0.3s;
		box-shadow: 0px 4px 8px 0px rgba(0,0,0,1);
		}
		
		html{
		height: 100%
		}
		
		body{
		font-family: 'Roboto', sans-serif;
		overflow-x: hidden;
		margin: 0;
		padding:0;
		min-height: 100%;
		}
	
		#workspace{
		position: absolute;
		}
		
		header{
		position: sticky;
		top: -1px;                      
		transition: .1s;
		}
		
	
		.sticky{
		background-color: #4C555C;
		transition-duration: 0.3s;
		padding-buttom: 10px;
		z-index: 2;
		width: 100vw;
		top: 0px;
		}
		
		.logo{
		width: 300px;
		padding: 10px;
		}
		
		.button{
		background-color: #4C555C;
		width: 150px;
		height: 45px;
		margin-left: 10px;
		margin-right: 10px;
		color: #ffffff;
		border-radius: 40px 40px 40px 40px;
		font-size: 17px;
		font-weight: 700;
		border: 5px solid #212528;
		transition-duration: 0.3s;
		Display: inline-table;
		}
		
		.button:hover{
		color: #212528;
		background-color: white;
		transition-duration: 0.3s;
		border: 3px solid #212528;
		}
		
		.podsw:hover{
		background-color: red;
		color: #ffffff;
		border: 5px solid #212528;
		}
		.podsw{
		background-color: red;
		}
		
		.przes{
		margin-left: 200px;
		}
		
		#foot{
		background-color: #333333;
		width: 100%;
		padding: 20px;
		position: relative;
		clear: both
		bottom: 0;
		left: 0;
		}
		
		.f-text{
		color: white;
		font-size: 14px;
		font-family: 'Open Sans', sans-serif;
		font-weight: 500;
		}
		
		.content{
		padding: 100px;
		}
	</style>
</head>
<body>
	<center>
		<div id="workspace">
			<header class="sticky">
				<img src="Logo1.png" class="logo" style="vertical-align: middle;">
					<button onclick="window.location.href='index.html'" class="button przes">Strona główna</button>
					<button onclick="window.location.href='omnie.html'" class="button podsw">O Mnie</button>
					<button onclick="window.location.href='index.html'" class="button">Inne</button>
				</img>	
			</header>
			<div class="content">
				<p>STRONA</p>
				<div style="font-size: 300px;">
					<br>
				</div>
			</div>
			<div id="foot">
			<p class="f-text">Cypika 2023</a>
			</div>
		</div>
	</center>
</body>

Prosił bym o pomoc.

2 odpowiedzi

odpowiedź 6 lutego 2023 przez VBService Ekspert (256,600 p.)
edycja 6 lutego 2023 przez VBService

Twój kod zawiera kilka błędów np.

Zgubiłeś tag <html>

<!DOCTYPE html>
<html lang="pl>"
  <head>
    <title>Tak</title>

  ...
</html>

Użycie tag-u <body> w bloku <head>

<head>
    <title>Tak</title>
    <body bgcolor="#353B40" onload="startTime()"/>

...

Odnoszenie się w kodzie javascript do nieistniejących elementów, co wywołuje błędy kodu javascript i zatrzymanie jego wykonywania (tego fragmentu gdzie zgłaszany jest błąd)
```
document.getElementById('txt').innerHTML =  h + ":" + m + ":" + s;

document.getElementById("odn-tekst").onselectstart = () => false;
```

Tag <img> nie posiada tagu zamykającego </img>

                <img src="Logo1.png" class="logo" style="vertical-align: middle;">
                    <button onclick="window.location.href='index.html'" class="button przes">Strona główna</button>
                    <button onclick="window.location.href='omnie.html'" class="button podsw">O Mnie</button>
                    <button onclick="window.location.href='index.html'" class="button">Inne</button>
                </img>

Używasz tag-u <p> a zamykasz tag-iem </a>
```
<p class="f-text">Cypika 2023</a>
```

Literówka kodzie css

        .sticky{
        background-color: #4C555C;
        transition-duration: 0.3s;
        padding-buttom: 10px;
        z-index: 2;
        width: 100vw;
        top: 0px;
        }

BTW, Moim zdaniem zastosowałbym tag <a> (za pomocą kodu css, też możesz "wystylizować" go, żeby "wygladał" jak przycisk - button) zamiast tego zapisu

                    <button onclick="window.location.href='index.html'" class="button przes">Strona główna</button>
                    <button onclick="window.location.href='omnie.html'" class="button podsw">O Mnie</button>
                    <button onclick="window.location.href='index.html'" class="button">Inne</button>

np. taki

            <header class="sticky">
                <img src="Logo1.png" class="logo" style="vertical-align: middle;">
                <a href="index.html" class="button przes">Strona główna</a>
                <a href="omnie.html" class="button podsw">O Mnie</a>
                <a href="index.html" class="button">Inne</a> 
            </header>

        .button{
        display: inline-block;
        background-color: #4C555C;
        width: 150px;
        height: 45px;
        margi: 0 10px;
        color: #ffffff;
        border-radius: 40px;
        font: 700 17px/2.5 'Roboto';
        text-decoration: none;
        border: 5px solid #212528;
        transition-duration: 0.3s;
        }

a chciałbym żeby stopka zawsze była na dole strony

czy chodzi Tobie o taki zapis

[ on-line ]

    #foot{
      background-color: #333333;
      width: 100%;
      padding: 20px;
      position: fixed;
      bottom: 0;
      left: 0;
    }

1	komentarz 6 lutego 2023 przez pablop76 VIP (123,580 p.) Ad. pkt 4 Znacznik img jest pojedynczy, a nie podwójny, gdyż obraz jest obiektem

komentarz 6 lutego 2023 przez Cypika Początkujący (290 p.)

@VBService, właśnie nie chcę żeby ta stopka była przyklejona, tak jak pokazałeś na tym codepen. Chciałbym żeby była ona na dole strony, a nie ekranu (jak w twoim przykładzie). Próbowałem zrobić to tak jak chcę, ale jak zmieniałem rozmiar strony (ctrl + scroll) to stopka zostawała na górze.

A co do błędów, to dzięki że mnie poprawiasz bo sam jeszcze dobrze nie ogarniam znaczników.

komentarz 6 lutego 2023 przez VBService Ekspert (256,600 p.)

A taki trick w javascript

[ on-line ]

      
      window.onresize = function() {
        if (orginalBodyHeight < document.body.offsetHeight) {          
          foot.style.position = 'absolute';
          foot.style.top = document.body.offsetHeight + 'px';
        } else {
          foot.style = '';
        }
      };

komentarz 6 lutego 2023 przez Cypika Początkujący (290 p.)

No nie wiem, jak pod F12 kliknę ten telefonik to się wszystko się rozjeżdża.

Na internecie znalazłem takie coś: (przerobiłem to byle jak, żeby zobaczyć czy działa)

<style>
html,
body {
	margin:0;
	padding:0;
	height:100%;
}
#wrapper {
	min-height:100%;
	position:relative;
}
#header {
	background:#ededed;
	padding:10px;
}
#content {
	padding-bottom:100px; /* Height of the footer element */
}
#footer {
	background:#ffab62;
	width:100%;
	height:100px;
	position:absolute;
	bottom:0;
	left:0;
}
</style>

<body>
	<div id="wrapper">
		<div id="header">tekst</div>
		<div id="content">
       <p>tekst</p
		</div>
    <div style="font-size: 500px;">
		  <br><br>
		 </div>
		<div id="footer">
      <p>tekst</>
		</div>
	</div>
</body>

I efekt mi odpowiada tylko że gdy przenoszę odpowiednio to na moją stronę to nie działa to już tak jak na przykładzie.

komentarz 7 lutego 2023 przez wizarddos Nałogowiec (27,970 p.)

Masz w innych miejscach szerokości i marginesy ustawiane z użyciem px, to pewnie powód, czemu ci się "rozjeżdża"

Jeżeli ci na tym telefoniku zależy, zapoznaj się z media queries

Ale przed tym ogarnij trochę bardziej HTMLa i CSSa, bo odnoszę wrażenie że niezbyt rozumiesz co kopiujesz

komentarz 7 lutego 2023 przez Cypika Początkujący (290 p.)

Stronami bawię się rekreacyjnie, i nie ogarniam jeszcze wszystkiego dobrze.

Ale ogólnie to będę musiał się zagłębić w temat tego "media queries" . Co do samej stopki to nie jestem przekonany tym JS, ewentualnie spróbuję wykorzystać to queries i sprawdzić czy mi na telefonie zdziała albo tym telefoniku.

odpowiedź 7 lutego 2023 przez wizarddos Nałogowiec (27,970 p.)

Nie możesz po prostu wyrzucić tych linijek z kodu?

position: relative;
bottom: 0;
left: 0;

(*Za clear:both nie masz średnika, tak przy okazji)

komentarz 7 lutego 2023 przez Cypika Początkujący (290 p.)

Mogę, ale nie wiem czy na telefonie będzie w dobrym miejscu ta stopka, bo skalując tym ctrl + scroll albo klikając ten telefonik pod stopką jest puste miejsce.