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

html/css pozycjonowanie

VPS Starter Arubacloud
0 głosów
234 wizyt
pytanie zadane 28 grudnia 2022 w HTML i CSS przez kamil_uczesie Nowicjusz (120 p.)

Cześć, mam pytanie dotyczace DIV. Zaczalem swoja nauke z filmikami Pana Miroslawa jestem na 3 odc. HTML, mam problem z rozmieszczeniem divow, chociaz kod mam identyczny jak na filmiku zarowno w html jak i css to div .square ustawia mi sie jeden pod drugim chociaz ma zapisane wartosci do szerokosci 50%, a powinien ustawic sie jeden obok drugiego. Dla sprawdzenie skopiowalem juz gotowy kod z filmiku ale i tak na przegladarce wyswietla sie caly czas tak samo. Co moze byc przyczyna? Czy potrzebne jest zmiana jakis ustawien? Z gory dziekuje za odpowiedz. 
Pozdrawiam

<! DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" >
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title> Jan Kowalski - Portfolio</title>
	
	<meta name="description" content="Stworzę dla Ciebie wyjątkową stronę www! Zatrudnij programistę webowego: PHP, JavaScript, HTML, CSS, MySQL, Joomla, Drupal." />
	<meta name="keywords" content=" zamów stronę, tworzenie, www, programista, portfolio, php, javascript, html, css, WordPress, Joomla, Drupal" />
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Lato&display=swap" rel="stylesheet" type="text/css">

</head>


<body>
	<div id="container">
	
		<div class="rectangle" >
			<div id="logo">Jan Kowalski</div>
			<div id="zegar">12:00:00</div>
			<div style="clear: both;"></div>
	</div>
	
	<div class="square">
		<div class="tile1">1</div>
		<div class="tile1">1</div>
		<div style="clear: both;"></div>
		
		<div class="tile2">2</div>
		<div class="tile3">3</div>
		<div style="clear:both;"></div>
		
		<div class="tile4">4</div>
		
	</div>
	<div class="square">
		<div class="tile5">5</div>
	</div>
	<div style="clear: both;"></div>
	
	<div class="rectangle"></div>
	
	</div>


</body>





</html>

style.css
body
{
	background-color: #303030;
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	font-size: 20px;
}
#container 
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.rectangle
{
	width: 960px;
	margin: 20px;
}

.sqaure
{
	width: 50%;
	float: left;
}

#logo
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	width: 600px;
	font-size: 70px;
	margin-top: 15px;
	margin-bottom: 15px;
}

#zegar
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	margin-top: 15px;
	margin-bottom: 15px;

}

.tile1
{
	margin:10px;
	width: 230px;
	height: 142px;
	background-color: #3095d3;
	float: left;
}

.tile2
{
	margin:10px;
	width: 230px;
	height: 142px;
	background-color: #666666;
	float: left;
}

.tile3
{
	margin:10px;
	width: 230px;
	height: 142px;
	background-color: #93c748;
	float: left;
}

.tile4
{
	margin:10px;
	width: 480px;
	height: 142px;
	background-color: #ee5a32;
	
}

.tile5
{
	margin:10px;
	width: 480px;
	height: 304px;
	background-color: #666666;
}

 

komentarz 28 grudnia 2022 przez VBService Ekspert (250,450 p.)

Powinieneś przemyśleć przejście na flex lub grid, zamiast używać: float.

 

BTW, oto kilka powodów, dla których warto to rozważyć:

  1. Flex i grid layout są bardziej elastyczne niż float. Pozwalają na układanie elementów w dowolny sposób, bez konieczności korzystania z technik takich jak clearfix, aby rozwiązać problemy z wyświetlaniem się elementów.

  2. Flex i grid layout są lepsze dla urządzeń mobilnych. Float nie jest dobrze dostosowany do urządzeń mobilnych i może prowadzić do problemów z wyświetlaniem się elementów na małych ekranach. Flex i grid layout są lepiej przystosowane do urządzeń mobilnych i pozwalają na łatwiejsze tworzenie responsywnych projektów.

  3. Flex i grid layout są bardziej zgodne z nowoczesnymi trendami projektowania. Float jest techniką, która była popularna wcześniej, ale obecnie coraz częściej stosuje się flex i grid layout, ponieważ są one bardziej elastyczne i przystosowane do współczesnych wymagań projektowych.

Oczywiście, nadal istnieją sytuacje, w których float może być użyteczny, ale ogólnie rzecz biorąc, warto rozważyć użycie flex lub grid layout zamiast float, szczególnie jeśli tworzysz responsywny projekt lub chcesz mieć więcej elastyczności w układaniu elementów.

komentarz 29 grudnia 2022 przez kamil_uczesie Nowicjusz (120 p.)
Dziękuje za podpowiedź, na pewno skorzystam

1 odpowiedź

0 głosów
odpowiedź 28 grudnia 2022 przez pablop76 VIP (123,060 p.)
.sqaure
{
    width: 50%;
    float: left;
}
 

literówka

 

komentarz 29 grudnia 2022 przez kamil_uczesie Nowicjusz (120 p.)
Nie wiem jak mogłem tego nie zauważyć… dzięki wielkie :)

Podobne pytania

0 głosów
1 odpowiedź 399 wizyt
pytanie zadane 29 sierpnia 2018 w HTML i CSS przez anonim12345 Użytkownik (510 p.)
0 głosów
1 odpowiedź 143 wizyt
pytanie zadane 7 stycznia 2020 w HTML i CSS przez Hardwell Dyskutant (8,960 p.)
+1 głos
4 odpowiedzi 725 wizyt
pytanie zadane 19 grudnia 2015 w HTML i CSS przez medamis Użytkownik (660 p.)

92,417 zapytań

141,222 odpowiedzi

318,983 komentarzy

61,831 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...