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

Nie poprawne wyświetlanie się strony

VPS Starter Arubacloud
0 głosów
224 wizyt
pytanie zadane 25 grudnia 2017 w HTML i CSS przez DudSon Użytkownik (680 p.)
edycja 25 grudnia 2017 przez DudSon

Mam następujący problem. Zrobiłem stronę, która wyświetla się poprawnie odczytywana z pulpitu przez przeglądarkę, ale po wgraniu na serwer lokalny xampp przy próbie uruchomienia część strony nie jest wyświetlana. To samo dzieję się po wgraniu na serwer w internecie oczywiście cały czas ten sam PC i przeglądarka, ale tutaj ciekawostka a mianowicie na iphonie wszystko widać jak należy. Gdzie może leżeć problem? Chodzi o te kolorowe pola. Link do strony: http://mojatestowa.pl/nowylayout/

Dodam jeszcze, że sprawdziłem na ipadzie i też strona jest wyświetlana poprawnie.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ogłoszenia lokalne</title>
	<link rel="stylesheet" href="style/style.css">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link href="https://fonts.googleapis.com/css?family=Risque&amp;subset=latin-ext" rel="stylesheet">
</head>
<body>
	<header class="container">
		<div class="session">
			<p></p>
			<a href="#">Nie jesteś zalogowany</a>
			<p>Dzisiaj jest 25-12-2017</p>
		</div>

		<div class="logo">
			<h1><a href="#">Ogłoszenia lokalne</a></h1>
			<h2>ogłoszenia drobne</h2>
		</div>

		<div class="topMenu listStyle">
			<ol>
				<a href="#"><li>Home</li></a>
				<a href="#"><li>Kategorie</li></a>
				<a href="#"><li>Ogłoszenia</li></a>
				<a href="#"><li>Dodaj</li></a>
				<a href="#"><li>Zaloguj</li></a>
				<a href="#"><li>Zarejestruj</li></a>
			</ol>		
		</div>
	</header>

	<main class="container">

		<div class="block topBlock">
			<h3>Ogłoszenia lokalne</h3>
			<p>Darmowe oferty pracy, ogłoszenia kupna i sprzedaży nieruchomości, samochodów, artykułów agd i rtv, zwierząt, ubrań...
			Wybierz swój region i przeglądaj 658 169 ogłoszeń.</p> 
		</div>
		
		
		<div class="mainContent">

			<div class=leftColumn>
				<div class="block left">
			
				<form action="...">

				<h3>Region</h3>
					<select name="Region">
						<option></option>
						<option>Dolnośląskie</option>
						<option>Kujawsko-pomorskie</option>
					</select>

				<h3>Miasto</h3>
					<select name="Miasto">
						<option></option>
						<option></option>
						<option></option>
					</select>

				<h3>Kategoria</h3>
					<select name="Kategoria">
						<option></option>
						<option></option>
						<option></option>
					</select>

					<input type="submit" class="more button" value="Pokaż ogłoszenia">

					</form>
				</div>
				<div class="block left">
					<h3>Region</h3>
					<ol>
						<a href=""><li>Dolnośląskie</li></a>
						<a href=""><li>Kujawsko-pomorskie</li></a>
						<a href=""><li>Lubelskie</li></a>
						<a href=""><li>Łódzkie</li></a>
						<a href=""><li>Małopolskie</li></a>
						<a href=""><li>Mazowieckie</li></a>
						<a href=""><li>Opolskie</li></a>
						<a href=""><li>Podkarpackie</li></a>
						<a href=""><li>Podlaskie</li></a>
						<a href=""><li>Pomorskie</li></a>
						<a href=""><li>Śląskie</li></a>
						<a href=""><li>Świętokrzyskie</li></a>
						<a href=""><li>Warmińsko-mazurskie</li></a>
						<a href=""><li>Wielkopolskie</li></a>
						<a href=""><li>Zachodniopomorskie</li></a>
					</ol>
				</div>

				<div class="block left">
					<h3>Kategorie</h3>
					<ol>
						<a href=""><li>Motoryzacja</li></a>
						<a href=""><li>Dom i ogród</li></a>
						<a href=""><li>Moda i Uroda</li></a>
						<a href=""><li>Nieruchomości</li></a>
						<a href=""><li>Elektronik</li></a>
						<a href=""><li>Rozrywka, rekreacja</li></a>
						<a href=""><li>Usługi i firmy</li></a>
						<a href=""><li>Praca</li></a>
						<a href=""><li>Dla dziecka</li></a>
						<a href=""><li>Zwierzęta</li></a>
						<a href=""><li>Różne</li></a>
					</ol>
				</div>
			</div>

			<div class="rightColumn">
				<div class="block">
					<h3>Ostatnio dodane ogłoszenia</h3>
				</div>

				<div class="adsBlock buy">
					<h2>Lorem ipsum dolor sit amet</h2>
					<h4>Dodano: 20.12.2017</h4>
					<h4>Dodał: Michał</h4>
					<h4>Wrocław</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra est imperdiet magna eleifend, ut auctor nibh suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec...</p>
					<input type="submit" class="more Buy" value="Dowiedz się więcej">
				</div>

				<div class="adsBlock sell">
					<h2>Lorem ipsum dolor sit amet</h2>
					<h4>Dodano: 20.12.2017</h4>
					<h4>Dodał: Michał</h4>
					<h4>Wrocław</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra est imperdiet magna eleifend, ut auctor nibh suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec...</p>
					<input type="submit" class="more Sell" value="Dowiedz się więcej">
				</div>

				<div class="adsBlock exchange">
					<h2>Lorem ipsum dolor sit amet</h2>
					<h4>Dodano: 20.12.2017</h4>
					<h4>Dodał: Michał</h4>
					<h4>Wrocław</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra est imperdiet magna eleifend, ut auctor nibh suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec...</p>
					<input type="submit" class="more Exchange" value="Dowiedz się więcej">
				</div>
			</div>
		</div>

	</main>

	<footer class="containerFooter">
		<div class="allRights">
			<p class="copy">Wszelkie prawa zastrzeżone &copy; 2017</p>
				<p clas="center"></p>
					<ol>
						<a href="#" class="biger"><li>Polityka Prywatności</li></a>
						<a href=""><li>O stronie</li></a>
						<a href=""><li>O autorze</li></a>
						<a href="" class="biger"><li>Regulamin Strony</li></a>
					</ol>
				<p clas="center"></p>
			<p class="who">Stronę przygotował DudSon</p>
		</div>
	</footer>
</body>
</html>

A tutaj css. Powinien się znaleźć w folderze style

/* Reset styli domyślnych */
*
{
	margin: 0;
	padding: 0;
}

/* Style ogólne dla strony */
body
{
	background-color: #031526;
	clear:both;
	clear:both;
}

main
{
	min-height: 100px;
}

.container
{
	width:100%;
	margin:0 auto;
}

/* Nagłówek strony */
.session
{
	width:100%;
	min-height:10px;
	background-color: #1F3349;
	padding:10px 0 5px 0;
	text-align: center;
}

@media (min-width: 600px) 
{
	.session
	{
		display: flex;
	}
	
}

.session a
{
	text-decoration: none;
	color:#FFF;
	line-height: 10px;
	flex:1;
}

.session p
{
	color:#FFF;
	flex: 1;
}

.listStyle
{
	width:100%;
	min-height:15px;
	background-color: #1F3349;
	padding:10px 0 5px 0;
}

.listStyle li
{
	display: block;
	margin:0px auto 5px auto;
	height:30px;
	line-height: 30px;
	text-align: center;
	border-radius: 7px;
}

@media (min-width: 600px) 
{
	.topMenu ol
	{
		display: flex;
	}
	.topMenu a
	{
	 flex:1;
	}
}

.topMenu li
{
	width:90%;
}

.listStyle li:hover
{
	background-color: #2B4364
}

.listStyle a
{
	color: #FFF;
	text-decoration: none;
	font-size: 20px;
}

.logo
{
	width:100%;
	min-height:100px;
}

.logo h1
{
	text-align: center;
	font-size: 3rem;
}

.logo h2
{
	text-align: center;
	font-size: 2rem;
	color: #76D1FE;
}

@media (orientation: landscape )
{
	.logo
	{
		height:100px;
	}
	.logo h1
	{
		font-size: 3.4rem;
	}
	.logo h2
	{
		font-size: 1.5rem;
		margin-left:-30%;
	}
}

.logo a
{
	font-family: 'Risque', cursive;
	color:#C1DB4D;
	text-decoration: none;	
}

/* Elementy blokowe strony */
.block
{
	border:1px #3C4D5E solid;
	margin:15px;
	background-color: #1F3349;
	padding: 15px;
	text-align: justify;
	color:white;
}

@media (min-width: 600px) 
{ 
	.mainContent
	{
		display: flex;
	}
	.topBlock
	{
		margin-bottom:0;
	}
	.left
	{
		margin-right: 0px;
	}
	.leftColumn
	{
		flex:1;
	}
	.rightColumn
	{
		flex:4;
	}
}

.block h3
{
	color:white;
	padding: 0 0 10px 0
	line-height:30px;
}

.block ol
{
	list-style: square inside url("../images/list.bmp");
}

.block ol a
{
	color:#2EA3F1;
	text-decoration: none;
}

.block ol a:hover
{
	text-decoration: underline;
	color:#C1DB4B;
}

/* Style dla bloku wyszukiwania */
.block select
{
	width:100%;
	margin-bottom: 10px;
}

/* Style dla ogłoszenia */
.adsBlock 
{
	margin:15px;
	padding: 15px;
	text-align: justify;
	color:white;
	clear: both;
}

.adsBlock.buy
{
	background-color:#2BA9B9;
}

.adsBlock.sell
{
	background-color: #80A305;
}

.adsBlock.exchange
{
	background-color: #FC6002;
}

/* Style przycisków */
.more
{
	border: none;
	padding: 7px;
	border-radius: 7px;
	margin-top: 10px;
	color:#FFF;
}

.more.Buy
{
	background-color: #1F7C8C;
}

.more.Buy:hover
{
	background-color: #58B6C9;
}

.more.Sell
{
	background-color:#5A780E;
}

.more.Sell:hover
{
	background-color:#93B24B;
}

.more.Exchange
{
	background-color:#B1490C;
}

.more.Exchange:hover
{
	background-color:#EA8349;
}

.more.button
{
	background-color: #172A3E;
	border:1px #203A58 solid;
}

.more.button:hover
{
	background-color: #50647B;
}

/* Style dla stopki */
footer
{
	width:100%;
	min-height: 70px;
	background-color: #1F3349;
}

footer ol
{
	margin: 0 auto;
	width: 100%;
}

@media (min-width: 600px) 
{
	.allRights
	{
		width:550px;
		margin: 0 auto;
	}	
	footer ol
	{
		display: flex;
	}

	footer ol a
	{
		flex:1;
	}

	.biger
	{
		flex:2;
	}
}

footer ol li
{
	/*width:100%;*/
	list-style-type: none;
	text-align: center;
}

footer ol a
{
	color:	#5A91D1;
	text-decoration: none;
}

footer ol a:hover
{
	text-decoration: underline;
	color:#A0C1E2;
}

.copy
{
	width:100%;
	text-align: center;
	color:#B8BBC4;
	padding:5px 0;
}

.who
{
	width:100%;
	text-align: center;
	color:#E7F1F0;
	padding: 5px 0;
}

Proszę o jakieś wskazówki, bo nie mam pojęcia co jest nie tak. Pierwszy raz użyłem display:flex może nie umiejętnie. Chętnie też przyjmę ocenę mojego kodu.

2 odpowiedzi

0 głosów
odpowiedź 25 grudnia 2017 przez Daniel90 Pasjonat (17,970 p.)
O jakie pola chodzi? Zrób screen na ipadzie i normalne gdzie się nie wyświetla
komentarz 25 grudnia 2017 przez DudSon Użytkownik (680 p.)
już jest
0 głosów
odpowiedź 25 grudnia 2017 przez DudSon Użytkownik (680 p.)

Tak jest wyświetlany w mojej przeglądarce i to jest źle:

A to jak powinno być i jest, ale tylko odpalane z pulpitu.

komentarz 25 grudnia 2017 przez jaca121212 Nałogowiec (40,760 p.)

 U mnie Poprawnie wyświetla się strona tak jak wyżej na obrazku. W czym leży problem?

Czasami na localhost tak się dzieje.

komentarz 26 grudnia 2017 przez DudSon Użytkownik (680 p.)
W tym, że z jakiegoś powodu na moim komputerze odpalana przez xampp'a albo z serwera z sieci nie wyświetlają się te kolorowe bloki(niebieski, zielony i pomarańczowy) za to odpalona po prostu z pulpitu działa jak należy i dlatego zastanawiam się gdzie leży przyczyna, bo mi się będzie ciężko pracowało nad php.

Podobne pytania

0 głosów
0 odpowiedzi 206 wizyt
pytanie zadane 19 listopada 2020 w HTML i CSS przez K4P3K Początkujący (360 p.)
0 głosów
0 odpowiedzi 265 wizyt
pytanie zadane 1 grudnia 2018 w HTML i CSS przez PiotrG25 Nowicjusz (120 p.)
0 głosów
3 odpowiedzi 1,341 wizyt

92,454 zapytań

141,262 odpowiedzi

319,089 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!

...