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

Wyrównanie elementów strony do środka, responsywność

VPS Starter Arubacloud
0 głosów
279 wizyt
pytanie zadane 15 listopada 2018 w HTML i CSS przez Gucci93 Użytkownik (570 p.)
edycja 15 listopada 2018 przez Gucci93

Mam problemy z wyrównywaniem elementów na stronie do środka, strona prezentuje się tak(kolory użyte żeby było widać który div jest jakiej wielkości:

1 problem to to, że slider nie jest na środku, próbowałem na kilka sposobów i nic nie pomogło

2 problem jest taki, że kiedy zmniejszę szerokość okna przeglądarki to tabele, które normalnie są po prawej stronie przenoszą się na dół (i to jest ok) ale wtedy wszystkie te tabele nie są wyśrodkowane co widać tu:

3 problem to wyśrodkowanie napisów w pionie w tabeli, tzn. jeżeli parametr i jego wartość mają 1 linijkę to są w tej samej linii natomiast jeżeli np. wartość parametru ma 2 linijki tekstu to widać, że nie ma wycentrowania w pionie:

 

HTML:

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

<head>
	<meta charset= "utf-8" />
	<title>Test</title>
	<meta name="description" content="Co jest na stronie" />
	<meta name="keywords" content="keywords"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="stylesheet" href="css/fontello.css" type="text/css" />


	<link rel="stylesheet" href="css/tabele.css">
	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>


 <link rel="stylesheet" href="slider/dist/jquery.bxslider.css">


</head>

<body>

	<div id="container">

		<div id="logo">

		<h1>tytuł strony</h1>

		</div>
		
		<div id="add">
		reklama
		</div>

  <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

		<div id="content">

<ul class="bxslider">

    <script>
  $(document).ready(function(){
    $('.slider').bxSlider(
		{
    mode: 'fade',
    captions: true,
     slideWidth: 640,
	 adaptiveHeight: true,

	});
  });
</script>
	<div class="slider">
<div><img src="samochody/opel-insignia-1-sedan.jpg" title="Podpis1"></div>
  <div><img src="samochody/opel-insignia-1.jpg" title="Podpis2"></div>
  <div><img src="samochody/skoda-fabia-3.jpg" title="Podpis3"></div>
</div>
</ul>






<br/><br/><br/><br/><br/><br/><br/>
<div id="obie_tabele_lewa_prawa">
		<div id="tabele_car_view_lewe">
			<div id="tabela_car_view">
				<div id="nagłówek_tabeli_car_view"><B>1 tabela</B></div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">A</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit&nbsp;</div>
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">B</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit cm&#179 &nbsp;	</div>			
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">C</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit	&nbsp;</div>
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">D</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit	&nbsp;</div>
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">E</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit	&nbsp;</div>
				</div>


				
			</div>
			
			
			<div id="tabela_car_view">
				<div id="nagłówek_tabeli_car_view"><B>2 tabela</B></div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">L</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit	&nbsp;</div>
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">M</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit&nbsp;</div>			
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">N</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit&nbsp;</div>
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">O</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit&nbsp;</div>
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">P</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit&nbsp;</div>
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">R</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit&nbsp;</div>
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">S</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit&nbsp;</div>
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">T</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit&nbsp;</div>
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">U</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit&nbsp;</div>
				</div>
			
			</div>
		</div>
			
		<div id="tabele_car_view_prawe">	
			<div id="tabela_car_view">
			
				<div id="nagłówek_tabeli_car_view"><B>3 tabela</B></div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">W</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit	&nbsp;</div>
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">Y</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit	&nbsp;</div>			
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">Z</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit	&nbsp;</div>			
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">A2</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, consectetur adipiscing elit	&nbsp;</div>			
				</div>

			</div>

			<div id="tabela_car_view">
			
				<div id="nagłówek_tabeli_car_view"><B>4 tabela</B></div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">B2</div>
					<div id="wartość_parametru_car_view"> Lorem ipsum dolor sit amet, &nbsp;</div>
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">C2</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, 	&nbsp;</div>			
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">D2</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, 	&nbsp;</div>			
				</div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">E2</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, 	&nbsp;</div>			
				</div>

			</div>
			
			

			<div id="tabela_car_view">
				<div id="nagłówek_tabeli_car_view"><B>5 tabela</B></div>
				<div id="parametr_i_wartość_car_view">
					<div id="nazwa_parametru_car_view">F2</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet, &nbsp;</div>
				</div>
				<div id="parametr_i_wartość_car_view" >
					<div id="nazwa_parametru_car_view">G2</div>
					<div id="wartość_parametru_car_view">Lorem ipsum dolor sit amet,  &nbsp; 	</div>			
				</div>

				
			</div>
		</div>
</div>


		</div>


		<div id="footer">
		Test<br/>
		test &copy; Wszelkie prawa zastrzeżone
		</div>




</body>
</html>

 

 

CSS:

.podpisy_licencyjne_pod_stopka {
	text-align:left;
	font-size: x-small; 
	}

	#logo
	{

	width: 100%;
	background-color: rgb(238, 235, 235);
	color: rgb(48, 46, 46);
	text-align: center;
	padding:15px;
	}

	#content
	{

	width: 100%;
	color: rgb(48, 46, 46);
	background-color:white;
	min-height: 620px;
	padding:15px;
	background-color: #b1aeae;
	align-content: center;

	font-family: 'Open Sans', sans-serif;

	}

	#add
	{
	width: 100%;
	background-color: 	#606060;
	color: white;
	min-height: 200px;
	padding:15px;
	
	}

	#footer
	{
	width: 100%;
	background-color: #b1aeae;
	color: black;
	clear: both;
	/* padding:15px; */
	}
	.bxslider
	{
		background-color: #0151ff;
		align-content: center;
		margin-left: auto;
		margin-right: auto;
		float: center;
	}
	.slider
	{
		
	align-content: center;
	margin-left: auto;
	margin-right: auto;
	background-color: #0151ff;

	}

	#obie_tabele_lewa_prawa
	{
	background-color: #ff0000;
	width:100%;
	height: 100%;

	}
	
	#tabele_car_view_lewe
	{
		width: 50%;
		min-width: 650px;
		float: left;

		/* TESTOWE KOLORY TŁA */
		background-color: #e4fd00;

	}

	#tabele_car_view_prawe
	{

		width: 50%;
		min-width: 650px;
		float: left;
		align-content: center;

		/* TESTOWE KOLORY TŁA */
		background-color: #04c2fc;

	}
	

	#tabela_car_view
	{
	width:70%;
	min-width: 400px;

	margin: 0 auto;
	margin-bottom:50px;

	/* TESTOWE KOLORY TŁA */
	background-color: #b65f5f;
	}
	#nagłówek_tabeli_car_view
	{
		width: 100%;
		min-width: 200px;
		border-radius: 20px;
		float: left;  
		text-align: center;
		margin-bottom:25px;
		font-size: x-large;
		margin-top: 25px;
		border-style: solid;
		border-width: 2px;
		vertical-align: center;
	/* TESTOWE KOLORY TŁA */
	background-color: #ff0101;
	}

	#parametr_i_wartość_car_view
	{

		width: 100%;
		min-width:200px;
		height: 50px;
		text-align: center;
		float: left;
		/* vertical-align:middle; */
		border-radius: 20px;
		font-size: 93%;

		/* CENTROWANIE W PIONIE NIE DZIAŁA */
		/* vertical-align: middle; */
	
	/* TESTOWE KOLORY TŁA */
	background-color: #0151ff;

	}

	#parametr_i_wartość_car_view:hover 
	{
		background-color: #e0e0e0;
	}

	#nazwa_parametru_car_view
	{
		width: 250px;
		width: 50%;
		min-width: 70px;
		float: left;
		height: 50px;
		
	/* TESTOWE KOLORY TŁA */
	background-color: #01ff16;	
		
	}

	#wartość_parametru_car_view
	{
		float: left;
		width: 250px;

		width: 50%;
		min-width: 70px;
		/* float: left; */
		height: 50px;
		
	/* TESTOWE KOLORY TŁA */
	background-color: #ff01b3;
	}

EDIT:

Sorry za jakość screenów, nie wiem czemu wyglądają tu tak źle. 

Co do divów w tabeli, bo trochę namieszałem, mały opis:

#obie_tabele_lewa_prawa - zawiera w sobie oba rzędy tabel, lewe i prawe

#tabele_car_view_lewe - zawiera w sobie rząd tabel po lewej stronie (kolor żółty)

#tabele_car_view_prawe - zawiera w sobie rząd tabel po prawej stronie stronie (kolor błękitny)

#tabela_car_view - zawiera w sobie pojedynczą tabelę czyli w divie lewych tabel są takie 2 divy a w divie prawych są takie 3 divy

#nagłówek_tabeli_car_view - zawiera nagłówki wszystkich tabel (kolor czerwony)

#parametr_i_wartość_car_view - zawiera w sobie 2 divy, parametr i wartość 

#nazwa_parametru_car_view -  zawiera nazwę parametru (kolor zielony)

#wartość_parametru_car_view - zawiera wartość parametru (kolor różowy)

komentarz 15 listopada 2018 przez jaca121212 Nałogowiec (40,760 p.)

Dlaczego tego użyłeś ? 

<br/><br/><br/><br/><br/><br/><br/>
        <div id="footer">
        Test<br/>
        test &copy; Wszelkie prawa zastrzeżone
        </div>
 

usuń wszystkie <br/> według mnie one nie są potrzebne wszystkie  odstępy jak i załamania  linii da się zrobić za pomocą  CSS

komentarz 15 listopada 2018 przez Gucci93 Użytkownik (570 p.)
Ok, celna uwaga - poprawię. To mój pierwszy projekt także na pewno jest mnóstwo małych błędów itd. Ale problem dalej istnieje oczywiście :P
komentarz 15 listopada 2018 przez jaca121212 Nałogowiec (40,760 p.)

Druga cenna uwaga jest taka, że  nie piszemy ąłśźć itp.  w nazwach ID jak i CLASS 

"#nagłówek_tabeli_car_view"

Jeżeli nazywasz ID lub CLASS-ę to staraj się  jednym językiem nazywać całą nazwę. 

Powinno się stylować  Classy a nie ID -ID a Class

Według mnie cały szkielet powinien być napisany od nowa.

komentarz 15 listopada 2018 przez Gucci93 Użytkownik (570 p.)
Ok a czy wiesz jak rozwiązać, któryś z problemów, które wypisałem?
komentarz 15 listopada 2018 przez jaca121212 Nałogowiec (40,760 p.)

Na chwilę obecną  masz  początek szkielet i  ostylowane  classy, popróbuj na tym szkielecie dalej zrobić stronę 

https://codepen.io/jaca121212/pen/ZmKWzd

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
2 odpowiedzi 396 wizyt
pytanie zadane 11 marca 2018 w HTML i CSS przez dudijr Początkujący (280 p.)
0 głosów
2 odpowiedzi 190 wizyt
pytanie zadane 29 grudnia 2015 w HTML i CSS przez Kuba Bielawski Obywatel (1,760 p.)
0 głosów
1 odpowiedź 109 wizyt
pytanie zadane 19 lutego 2019 w HTML i CSS przez PROFF Obywatel (1,180 p.)

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!

...