Layout nie wygląda tak jak powinien

pytanie zadane 18 listopada 2018 w HTML i CSS przez Franciszek Wakieć Nowicjusz (150 p.)
zamknięte 29 grudnia 2018 przez Franciszek Wakieć

Mam pewien problem, mianowicie layout strony, który wstawiłem nie działa tak jakbym tego chciał - wszystkie elementy nachodzą na siebie, layout jest bardzo wąski. Wstawiam tu kod strony i pliku style.css

<HEAD>
<title>Mongolia(｡◕‿◕｡)</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="UTF-8">
<meta name="keywords" content="filmy anime muzyka recenzje gry recenzja">
<BODY background="tlo-main.jpg">
<div id="container">
	<div id="logo">
	<img src="logo.png">
	
	<div id="tytul">
	Mongolia - Recenzje filmów, gier i anime.
	</div>
	
	<div id="topmenu">
		<div class="option"><a href="recenzje.html">Wszystkie Recenzje</a></div>
		<div class="option"><a href="gry.html">Gry</a></div>
		<div class="option"><a href="filmy.html">Filmy</a></div>
		<div class="option"><a href="anime.html">Anime</a></div>
		<div class="option"><a href="galeria.html">Galeria</a></div>
		<div class="option"><a href="linki.html">Linki</a></div>
		<div style="clear:both;"></div>
	</div>
	
	<div id="contentL">
	<h1><font color="WHITE">"Mongolia"-Tytuł Strony</h1>Dlaczego ta strona nazywa się Mongolia? Odpowiedź jest prosta: 
	Na początku miała być ona poświęcona tylko anime, które w Polsce częściej nazywane jest po prostu chińskimi/mongolskimi
	bajkami. Potem tematyka strony zmieniła się, a tytuł został bez żadnych zmian.
	<h1><font color="WHITE">Co znajdę na tej stronie?</h1> 
	Na tej stronie możesz znaleźć recenzje wielu filmów, gier, anime, albumów muzycznych i wiele innych!
		</div>
		
		<div id="contentR">
		
		</div>
		
		<div id="footer">
		Franciszek Wakieć i Mikołaj Sulski 2018 &copy; Wszelkie prawa zastrzeżone
		</div>
	</div>
	
</div>
</BODY>
</HTML>

#container
{
	background-color: #0099CC;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	color: #CCFFFF;
	font-size: 24px;
}
#logo
{
	padding: 10px;
	text-align: center;
	background: #66CCCC;
	width: 280px;
	float: left;
}
#tytul
{
	height:69px;
	font-size: 48px;
	font-weight: bold;
	letter-spacing: 3px;
	padding: 33px;
	text-align: center;
	background: #66CCCC;
	width:634px;
	float: left;
}
#topmenu 
{
    position: fixed;
    background-color: #00009C;
    width: 750px;
    height: 60px;
    word-spacing: 10px;
    opacity: 0.7;
    margin-left: 10px;
    border: 1px solid black;
}
#topmenu a
{
    color: black;
    font-weight: 700;
    font-size: 20px;
    font-family: Verdana;
    padding: 5px;
    text-decoration: none;
    transition-duration: 5s;
}

#topmenu a:hover 
{
    color: red;
    font-size: 22px;
    font-weight: 900;
    font-family: Verdana;
    padding: 1px;
    text-decoration: underline;
}
.option
{
	float: left;
	min-width: 50px;
	padding: 10px;
	border-right: 3px solid #CCFFFF;
}
#contentL
{
	min-height:700px;
	width: 480px;
	padding: 10px;
	color: #003333;
	float: left;
}
#contentR
{
	min-height:700px;
	width: 480px;
	padding: 10px;
	color: #003333;
	float: left;
}
#footer
{
	font-size: 24px;
	clear: both;
	padding: 10px;
	text-align: center;
	background: #00009C;
}

Na zdjęciu widać o co mi chodzi:

komentarz zamknięcia: Strona jest już ukończona

1 odpowiedź

odpowiedź 18 listopada 2018 przez Kamil Naja Nałogowiec (27,410 p.)
wybrane 29 grudnia 2018 przez Franciszek Wakieć

Najlepsza

Layout rozwala się, bo jest źle zrobiony. Kilka uwag, od tych rzeczy powinieneś zacząć

* Nigdy nie używaj na stronie takich wartości, jak width:634px; - rozwali się przy którejś rozdzielczości. Już lepiej użyć max-width, jeśli chcesz ograniczać szerokość na dużych ekranach.

* Nie styluj po id

* Używaj lepszych nazw zmiennych, niż contentL czy contentR - nic to nie mówi i narusza semantykę (wskazuje na położenie elementu)

* Nie styluj bezpośrednio w html

* Nie mieszaj polskich i angielskich nazw klas i id, wypadało by, by były tylko angielskie.

* Nie mieszaj konwencji tagów html - powinieneś w nich wykorzystywać tylko małe litery.

* Dodaj trochę elementów, które więcej powiedzą Ci o zastosowaniu danego wrappera, a nie tylko divy. Przykłady - <header>, <footer>, <main>.

* Usuń z html przestarzałe znaczniki - <font>

* Nie używaj pustych divów tylko do resetowania floata, możesz to zrobić w inny sposób. Jeśli nie radzisz sobie z floatami, wypróbuj flex, jest łatwiejszy.

1	komentarz 18 listopada 2018 przez arces Pasjonat (17,700 p.) Akurat id, które są kotwicami powinny być w języku w jakim jest strona :) Z resztą jak najbardziej trzeba się zgodzić.