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

Ustawienie contentu i paneli bocznych.

VPS Starter Arubacloud
0 głosów
183 wizyt
pytanie zadane 3 listopada 2016 w HTML i CSS przez Avenue Użytkownik (940 p.)

Witam, mam problem z ustawieniem elementów na stronie.

Mianowicie chodzi o tą stronę - https://symu.co/pnccfq.sl

Jak na razie mam tylko menu i content z lewym panelem bocznym (bez zawartości) i za bardzo nie wiem jak je poprawnie ustawić.

Nie chce gotowego kodu, lecz jakąś podpowiedź lub koncepcje jak to rozwiązać w prawidłowy sposób.

Obecnie próbowałem coś z position: absolute, lewy panel ustawił się ok, ale gdy chciałem dodać prawy to się totalnie wysypał, pojawiło się ich kilka na stronie, więc dodałem backgroud-repeat: no-repeat.

I odnośnie tej kwestii mam pytanie, czemu tak się stało skoro panel-left ustawił się bez żadnych problemów z takimi samymi parametrami?

No i dalej, jak już ustawiłem ... - no-repeat; i panel-right ustawiłem jak ma być to na dole pojawiła się wolna przestrzeń, tzn około 200px białego tła, poniżej całej strony.

 

HTML:

<!DOCTYPE HTML>
<html lang="pl">

<head>
	<meta charset="utf-8">
	<title>Neria - Prywatny serwer Metin2.</title>
	<meta name="description" content="Neria.pl to najlepszy prywatny serwer metin2 w Polsce! Rozpocznij przygodę już dziś!">
	<meta name="keywords" content="najlepszy, prywatny, serwer, metin2, w, Polsce, mt2, metin2, m2, rpg, mmo">
	<meta http=equiv="X-UA-Compatible" content="IE=edge, chrome=1">

	<link href="style.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Caudex:400,700&amp;subset=latin-ext" rel="stylesheet">
</head>

<body>
	<div class="wrapper">
		
		<nav>
			<ul>
				<li><a href="#" class="menu-item-1 font-color">Home</a></li>
				<li><a href="#" class="menu-item-2 font-color">Forum</a></li>
				<li><a href="#" class="menu-item-2 font-color">Register</a></li>
				<li><a href="#" class="menu-item-2 font-color">Support</a></li>
				<li><a href="#" class="menu-item-3"><p class="font-download">Download</p> <p class="font-client">Client 1,2 GB</p></a></li>
				<li><a href="#" class="menu-item-4 font-color">ItemShop</a></li>
				<li><a href="#" class="menu-item-5 font-color">Rankings</a></li>
				<li><a href="#" class="menu-item-5 font-color">Contact</a></li>
				<li><a href="#" class="menu-item-5 font-color">Events</a></li>
			</ul>
		</nav>

		<div class="content"></div>

		<div class="panel-left"></div>

		<div class="panel-right"></div>
		
	</div>
</body>

</html>

CSS:

body{
	font-family: 'Caudex', serif;
	margin: 0;
	padding: 0;
}

.wrapper{
	width: 1920px;
	height: 1189px;
	background: url(img/background.jpg);
}

nav{
	width: 1063px;
	height: 84px;
	background: url(img/menu.png);
	margin: auto;
}

ul{
	padding: 0;
	margin: 0;
}

ul > li{
	float: left;
	margin-left: 25px;
	list-style-type: none;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	line-height: 46px;
	text-shadow: 0 0 5px rgba(0,0,0,0.35);
}

ul > li:first-child{
	margin-left: 0;
}

.menu-item-1{
	margin-left: 104px;
}

.menu-item-2{
	margin-left: 16px;
}

.menu-item-3{
	margin-left: 48px;
	text-decoration: none;
}

.font-download{
	color: #111304;
	width: 78px;	
	height: 24px;
	line-height: 24px;
	margin-left: 48px;
	margin-top: -45px;
	text-shadow: none;
}

.font-client{
	color: #a9af79;
	margin-left: 52px;
	margin-top: -34px;
	font-size: 10px;
}

.menu-item-4{
	margin-left: 44px;
}

.menu-item-5{
	margin-left: 6px;
}

.font-color{
	background-image: -webkit-gradient(linear,
		left top, left bottom,
		from(#c2b59b),
		to(#817762));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 0 5px rgba(0,0,0,0.75);	 
}

.font-color:hover{
	background-image: -webkit-gradient(linear,
		left top, left bottom,
		from(#cfbf9e),
		to(#c2b59b));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 0 5px rgba(0,0,0,0.75);
}

.content{
	width: 900px;
	height: 1189px;
	background: url(img/content.png);
	margin: auto;
	margin-top: -84px;
}

.panel-left{
	width: 350px;
	height: 1014px;
	background: url(img/panel-left.png);
	position: absolute;
	left: 381px;
	top: 175px;
}

.panel-right{
	width: 900px;
	height: 1189px;
	background: url(img/panel-right.png);
	position: absolute;
}

Z góry dziękuje za pomoc ;-)

2 odpowiedzi

+1 głos
odpowiedź 4 listopada 2016 przez pablop76 VIP (123,060 p.)

Cześć Avenue. Nadając elementowi position: absolute; pozycjonujesz go względem body. Jeżeli ma być pozycjonowany względem np: wrapper to musisz  wrapper uczynić elementem zawierajacy nadajac mu position: relative; ALE TAK SIĘ NIE USTAWIA ELEMENTÓW NA STRONIE !!! DO TEGO SŁUŻĄ właściwości float:left; display:inline-block; lub najnowszy ale nieobsługiwany w starszych przeglądarkach display:flex;

Zobacz koniecznie.

Kurs HTML odc.2: Budowanie struktury strony www

1
komentarz 4 listopada 2016 przez dewe Gaduła (4,300 p.)
Osobiście gdy odbywałem praktyki w agencji interaktywnej stylowałem elementy position: absolute; :) Bo tak mnie uczyli, a to profesjonaliści, więc chyba każdy ma swój styl.
1
komentarz 4 listopada 2016 przez pablop76 VIP (123,060 p.)
Tak myślę, że gdybym miał dużo elementów na stronie i ustawiał je używając Twojej metody to było by to niemożliwe. Po prostu nie wiedziałbym w pewnym momencie, który jest czyim pojemnikiem. A poza tym trudno jest zapanować nad strukturą strony gdy elementy mające position: relative; sa wyjęte z obiegu strony. Ponieważ zostawiają po sobie puste niewidoczne miejsce.
+1 głos
odpowiedź 4 listopada 2016 przez jaca121212 Nałogowiec (40,760 p.)
Tutaj dobrze zostały objaśnione zagadnienia z position relative a position absolute, float:left;

display:inline-block; display: flex;

https://www.youtube.com/watch?v=zPB74LBBPLU
1
komentarz 4 listopada 2016 przez pablop76 VIP (123,060 p.)
To dobry tutorial,ale chyba nie chodzi w nim o strukturę strony tylko o pozycjonowanie konkretnych elementów takich jak np: tekst.
1
komentarz 4 listopada 2016 przez jaca121212 Nałogowiec (40,760 p.)
Nie do końca bo tutaj zostały przedstawione wspomniane wyżej te style i objaśnione. Używać tych styli można do każdego elementu. Za ich pomocą można  zrobić strukturę strony.

Podobne pytania

0 głosów
2 odpowiedzi 335 wizyt
pytanie zadane 6 listopada 2017 w Sprzęt komputerowy przez marakuja Użytkownik (590 p.)
0 głosów
1 odpowiedź 298 wizyt
pytanie zadane 3 stycznia 2020 w HTML i CSS przez BlvckFox Gaduła (4,240 p.)
0 głosów
1 odpowiedź 592 wizyt

92,452 zapytań

141,262 odpowiedzi

319,079 komentarzy

61,854 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!

...