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

W jaki sposób zastosować poniższy układ>

VPS Starter Arubacloud
0 głosów
114 wizyt
pytanie zadane 9 stycznia 2020 w HTML i CSS przez FilOON Użytkownik (680 p.)

Witam, jak ustawić elementy w następujący sposób?

Mam na myśli to co dzieje się w divie header.

Próbowałem już margin: auto, pozycjonowania za pomocą atrybutu position, ale zawsze mi się to wszystko rozjeżdża.

Z góry dzięki za pomoc i podrzucam kod:

<div id="content">
		<div id="header">
		
			<div id="photo"> <img src="photos/gimnazjum_logo.png" height="250px" width="250px"></div>
			
			<div id="title">Szkoła Podstawowa imienia <br> bł. ks. Józefa Kowalskiego w Siedliskach
			
			<div id="quotation">"Bogactwo i siłę zdobywa się usilną nauką i pracą.<br>
			Nie dość chcieć trzeba czynić."<br>~Goethe</div>
		
		</div>
	</div>
#content
{
	width: 1100px;
	margin-top: 30px;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	postion: relative;
}

#header
{
	height: 230px;
	width: 1080px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	background-color: #53A5E5;
	position: relative;
}

#photo
{
	float: left;
}

#title
{
	font-size: 48px;
	font-family: 'Bebas Neue';
	font-weight: 700;
	letter-spacing: 3px;
	color: white;
	position: relative;
	top: 50%;
	margin: 0;
	padding: 0;
}

#quotation
{
	font-size: 20px;
	color: black;
	font-style: italic;
	font-family: New Times Roman;
	text-align: right;
	letter-spacing: 0;
	font-weight: 400;
	text-align: right;
}

 

2 odpowiedzi

+1 głos
odpowiedź 10 stycznia 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

https://codepen.io/pawelnackiewicz/pen/gObeyvM

 

Przede wszystkim, jeśli ustawiasz na sztywno wartości height dla  id=photo=250 oraz hedera=230, to nie dziw się, że to nie będzie pasować. Poprawiłem tam jeszcze kilka innych rzeczy, takich jak:

margin-top:40px;
margin-right: 3px;
margin-bootm: 50px;
margin-left:10px;

//możesz to zapisać jako
margin: 40px 3px 50px 10px;

Więcej możesz znaleźć tutaj

+1 głos
odpowiedź 10 stycznia 2020 przez pablop76 VIP (123,180 p.)

Nie ma powodu aby używać float lub position jeżeli mamy flexbox.

<div class="container">
	<div class="header">
			<div class="left">
				<img src="https://via.placeholder.com/300C/O https://placeholder.com/" alt="">
		  </div>
			<div class="right">
				<div class="empty"></div>
				<div class="top-right">napis wyśrodkowany w pionie względem header</div>
				<div class="bottom-right">cytat pod napisem</div>
			</div>
	</div>
</div>
*{
	margin: 0;
	padding: 0;
}
.container{
	width: 100%;
	height: 100vh;
	background-color: grey;
}
.header{
	display: flex;
	height: 300px;
	background-color: magenta;
	padding: 10px;
}
.left{
	background-color: red;
}
.right{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	width: calc(100% - 300px);
	background-color: blue;
	padding: 20px;
}
.empty{
	padding: 10px;
}
.top-right, 
.bottom-right{
	width: 100%;
	color: #fff;
	border: 2px solid #fff;
	padding: 10px;
	box-sizing: border-box;
}
.bottom-right{
	width: 70%;
		color: #fff;
	border: 2px solid #fff;
	padding: 10px;
	box-sizing: border-box;
}

 

Podobne pytania

0 głosów
0 odpowiedzi 86 wizyt
pytanie zadane 29 listopada 2019 w Python przez Meffy Użytkownik (730 p.)
0 głosów
4 odpowiedzi 1,212 wizyt
0 głosów
1 odpowiedź 380 wizyt
pytanie zadane 15 listopada 2022 w Bezpieczeństwo, hacking przez Mario11987 Nowicjusz (120 p.)

92,768 zapytań

141,695 odpowiedzi

320,510 komentarzy

62,106 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!

...