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 </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³ </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 </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 </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 </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 </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 </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 </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 </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 </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 </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 </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 </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 </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 </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 </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 </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 </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, </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, </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, </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, </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, </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, </div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
Test<br/>
test © 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)