Problem ze stroną w HTML

pytanie zadane 28 maja 2018 w HTML i CSS przez Rafał Masny Obywatel (1,700 p.)
edycja 28 maja 2018 przez Rafał Masny

Co zrobiłem nie tak? Strona ma wyglądać następująco. Plik w .zip Strona musi być oparta o divy

https://www27.zippyshare.com/v/uume1qAV/file.html

I jak zrobić, tak żeby strona dopasowywała się do rozdzielczości? Bo to wygląda fatalnie.

Poprawiłem trochę kod, ale nie wiem dlaczego stopka mi zniknęła. Jest tylko napis

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>strona</title>
  <style> 
  body {
  margin: 0;
  padding: 0;
  text-align: center;
  }
  
  #pudelko {
  margin: auto;
  width: 90%;
 }
 
 #logo {
 height: 15%;
 border: double 4px;
 }
 
 #menu1 {
 background-color: white;
 width: 20%;
 height: 6%;
 float: bottom;
 border: double 4px;
 }
  #menu2 {
 background-color: white;
 width: 20%;
 height: 48%;
 float: left;
 border: double 4px;
}
 
 
 #tresc {
 width: 99,5%;
 height: 100%;
 float: center;
 border: double 4px;
 }
 
 #stopka {
 float: center;
 border: double 4 px;
 }
 
 </style>
</head>
<body>

<div id="logo">
<img src="topologie.png" alt="obrazek przedstawia topologię magistrali"> <br>
</div>
<div id="menu1">
<br>
<center> ...:MENU::.. </center>
</div>
<div id="menu2">
<a href="topologie.html">TOPOLOGIE</a><br><br>
<a href="#">MAGISTRALA</a><br><br>
<a href="#">PIERŚCIEŃ</a><br><br>
<a href="#">GWIAZDA</a><br><br>
<a href="#">DRZEWO</a><br><br>
</div>
<div id="tresc">
<img src="magistrala.png" alt="obrazek przedstawia magistrale"> <br>
<b>Topologia magistrali </b> (szyny, liniowa) (ang. Bus) - 
<br> Wszytstkie elementy sieci podłączone
</div>
<div id="stopka">webm@ster: witryny internetowe</div>
</div>
</body>
</html>

komentarz 28 maja 2018 przez ScriptyChris Mędrzec (190,190 p.)

Zamiast zamieszczać link do pobrania kodu, wstaw go w odpowiedni bloczek - będzie łatwiejszy w odczycie i nie wymusi pobierania plików z zewnętrznych serwisów.

komentarz 28 maja 2018 przez Rafał Masny Obywatel (1,700 p.)

ok.

komentarz 28 maja 2018 przez Rafał Masny Obywatel (1,700 p.)

Dziwna rzecz się stała, wcześniej zrobiłem błąd ''doctype! html" poprawiłem na "!doctype html" i nie mogę zmieniać height w menu

3 odpowiedzi

odpowiedź 28 maja 2018 przez olekjs Gaduła (4,540 p.)

odpowiedź 28 maja 2018 przez Rafał Masny Obywatel (1,700 p.)

Pomoże ktoś?

komentarz 29 maja 2018 przez pablop76 VIP (123,180 p.)
edycja 29 maja 2018 przez pablop76

Źle zaplanowany szablon. Podstawowe błędy w html i css.

float: center; nie istnieje taka wartość.

height: 15%; height: 100%; height: 6%; To nie zadziała.

menu width:20% + tresc 99.5% = 119.5% Do dyspozycji masz 100%.

menu to zestaw linków a powinna być lista.

Z doctype wynika, że to html5 - tag center jest wycofany od html4

Id nie używa się do styli.

Trudno coś doradzić.

To bardzo prosty układ. Zapoznaj się z flexbox

i pewnie jakoś to ogarniesz, ale czy się czegoś nauczysz ?

odpowiedź 29 maja 2018 przez Sejdi Początkujący (460 p.)
edycja 29 maja 2018 przez Sejdi

Tak jak nadmienili inni forumowicze nie posiadasz wiedzy na temat tworzenia stron RWD, polecam najpierw zapoznać się z tymi materiałami:

FLEXBOX FROGGY - bardzo fajna pod względem edukacyjnym gierka, która pozwoli ci nauczyć się korzystać z flexbox,
MEDIA QUERIES - kolejny sposób na tworzenie stron RWD, trochę bardziej toporny ale mimo wszystko warto się z nim zapoznać, gdyż w niektórych sytuacjach jest bardzo przydatny,
VIEWPORT UNITS - są to bardzo przydatne jednostki, które pozwalają np. ustalić wysokość elementu na 100% wysokości naszego obszaru roboczego czyli 100% wysokości okna przeglądarki,
BOOTSTRAP lub inne frameworki - to chyba najszybszy i najwygodniejszy sposób na tworzenie stron responsywnych, ale jak dla ciebie lepiej będzie gdy skorzystasz z frameworków takich jak bootstrap dopiero w momencie gdy dobrze opanujesz html i css. Dlaczego? Tutaj odsyłam cię do filmu na kanale Pasja Informatyki.