Witam!
Tworząc szkielet strony internetowej trafiłem na kilka błedów.
Błędy są napisane na samym dole strony internetowej
Z góry dzięki za pomoc :)
Kod HTML
<!DOCTYPE html>
<html>
<head>
<meta charset"utf-8">
<meta http-equiv="X-UA-Compatibile" content="IE=edge,chrome=1"/>
<meta name="description" content="szkielet strony">
<title>szkielet strony internetowej</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="css/fontello.css" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato&subset=latin-ext" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="rectangle">
<div class="logo"><h1><center></center></h1></div>
<div class="offer"></div>
<div class="health"></div>
<div class="yt"></div>
<div class="fb"></div>
<div class="rules"></div>
<div class="help"></div>
<div class="login"></div>
<div style="clear:both;"></div>
<div class="slider"</div>
</div>
</div>
KOD CSS
body
{
color:#111111;
font-family: 'Lato', sans-serif;
}
#container
{
width:1910px;
margin-left:auto;
margin-right: auto;
}
.rectangle
{
width: 1910px;
margin-left:auto;
margin-right: auto;
}
.logo
{
width: /*powinno byc 1902 */450px;
height: 100px;
background-color: #ffffff;
float: left;
border:1px solid #111111;
margin-right: 5px;
}
.offer
{
width: 200px;
height: 100px;
background-color: #ffffff;
float: left;
border:1px solid #111111;
margin-right: 5px;
}
.health
{
width: 200px;
height: 100px;
background-color: #ffffff;
float: left;
border:1px solid #111111;
margin-right: 5px;
}
.yt
{
width: 200px;
height: 100px;
background-color: #ffffff;
float: left;
border:1px solid #111111;
margin-right: 5px;
}
.fb
{
width: 200px;
height: 100px;
background-color: #ffffff;
float: left;
border:1px solid #111111;
margin-right: 5px;
}
.rules
{
width: 200px;
height: 100px;
background-color: #ffffff;
float: left;
border:1px solid #111111;
margin-right: 5px;
}
.help
{
width: 200px;
height: 100px;
background-color: #ffffff;
float: left;
border:1px solid #111111;
margin-right: 5px;
}
.login
{
width: 200px;
height: 100px;
background-color: #ffffff;
float: left;
border:1px solid #111111;
margin-right: 5px;
}
.slider
{
width: 1600px;
height: 600px;
background-color: #ffffff;
border:1px solid #111111;
margin-top:40px;
margin-left: 140px;
}
Pierwszy błąd to poziomy pasek przewijania.
Jak juz pewnie zauważyliście w id container i clasie rectangle ustawiłem na 1910 px pozniewaz od 1920 pojawiał się poziomy pasek przewijania.
Kolejny problem jest przy klasie slider, zobaczcie że ustawiając w nim width na większy niz ma mój monitor (1920x1080) pojawia się tylko pionowy pasek przewijania( co jest ok) lecz gdy cofniemy ustawienia do standardowych
i zrobimy to tylko z height (np: 900px) to pojawia się poziomy i pionowy pasek przewijania mimo że na standardowych (nie wykaraczających poza moją rozdzielczośc monitora) żaden pasek sie nie wyswitlał . Moim celem jest usunięcie dolnego paska przewijania nie pomagają komendy :
margin-left:auto;
margin-right: auto;
overflow: scroll;
overflow-y:hidden;
overflow: auto;
Jeszcze raz dzięki za pomoc :)