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

Dziwnie działający poziomy scroll

VPS Starter Arubacloud
0 głosów
247 wizyt
pytanie zadane 12 kwietnia 2019 w HTML i CSS przez WasiliewSaszka Użytkownik (700 p.)

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&amp;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 :)

1 odpowiedź

+1 głos
odpowiedź 12 kwietnia 2019 przez Filipek123 Użytkownik (840 p.)
spróbuj zrobić tak.

slider

{

        max-width: 1600px;

    height: 100%;

    background-color: #ffffff;

    border:1px solid #111111;

    margin-top:40px;

    margin-left: 140px;

}
komentarz 12 kwietnia 2019 przez WasiliewSaszka Użytkownik (700 p.)
Użycie wysokości jako % nie naprawiło problemu :(
komentarz 12 kwietnia 2019 przez Filipek123 Użytkownik (840 p.)
możesz dać screena z tym problemem?
komentarz 12 kwietnia 2019 przez WasiliewSaszka Użytkownik (700 p.)
Udało mi się już rozwiązać zadanie samemu :D

w sumie to i dzięki twojej pomocy filipek123

pewnie zdziwisz się jak to mogłeś mi jakoś pomóc to cie zaskocze

zrobiłem ssa żeby wysłać ci tutaj  okazało sie że w paincie też mam pasek przewijania,

zdziwiło mnie to bardzo więc postanowiłem na szybko zmienić rozdzielczość containera na 1890,i strona o dziwo się mieści, zdziwiło mnie to bardzo, bo mam monitor 1920 × 1080 a tu się okazuje że jednak nie, i mimo sprawdzania specyfikacji monitora itd... 1890 pasuje.

Ne mam bladego pojęcia, o co tu chodzi, ale ważne, że działa :D dzięki za pomoc.

Podobne pytania

0 głosów
1 odpowiedź 592 wizyt
pytanie zadane 15 marca 2017 w HTML i CSS przez Karol Loczeski Użytkownik (820 p.)
0 głosów
0 odpowiedzi 110 wizyt
+1 głos
1 odpowiedź 317 wizyt
pytanie zadane 23 kwietnia 2021 w HTML i CSS przez Miemaj Nowicjusz (130 p.)

92,453 zapytań

141,262 odpowiedzi

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

...