Pusta przestrzeń przy zmienieniu rozdzielcości ekranu.

pytanie zadane 19 lutego 2018 w HTML i CSS przez Cezary Klauza Nowicjusz (210 p.)
edycja 20 lutego 2018 przez Cezary Klauza

Witam,

Mam pewien problem z rozmieszczeniem dwóch divów które posiadają

float: left;

. Ponieważ jak chce rozmieścić je razem na całym ekranie poprzez

weight: 25%;
weight: 75%;

to nie działa, ekranu po prawej stronie zostaje pusta przestrzeń. Próbowałem również z

padding-left: 75%;
margin-left: 75%;

jednak też nie działa.

Te divy są umieszczone w menu które poprzez JavaScript jeździ za ekranem. Ale to nie działa tylko jak sam główny div zacznie podążać za ekrenem a te divy w nim umieszczone zmieniają pozycje razem z nim. Nadole znajduje się kod JavaScript

$(document).ready(function() {
	var NavY = $('.nav').offset().top;
	 
	var stickyNav = function(){
	var ScrollY = $(window).scrollTop();
		  
	if (ScrollY > NavY) { 
		$('.nav').addClass('sticky');
	} else {
		$('.nav').removeClass('sticky'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
	});

Linki do screenshot'ów ze strony:

https://zapodaj.net/bc2f2d0e32dcf.png.html

https://zapodaj.net/376daa221593e.png.html

PS. Nie chce używać w liczbie szerokości pixeli ponieważ jak zmienię rozdzielczość obrazu to zostaje pusta przestrzeń.

komentarz 19 lutego 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Nie styluj inline w html tylko w CSS i daj kod na codepen.

komentarz 19 lutego 2018 przez Cezary Klauza Nowicjusz (210 p.)

@Tomek Sochacki,

https://codepen.io/anon/pen/VQQNVO

Będą Pana obchodzić linie: 28, 66, 57

1 odpowiedź

odpowiedź 20 lutego 2018 przez pablop76 VIP (123,180 p.)
wybrane 20 lutego 2018 przez Cezary Klauza

Najlepsza

Jeżeli ustawiasz szerokości w px to nie ma się co dziwić. Np. szerokość obrazków to 700px, więc się nie mieszczą przy mniejszym oknie.

komentarz 20 lutego 2018 przez Cezary Klauza Nowicjusz (210 p.)

Przecież jest napisane że ustawiłem w %. Każdy kod ustawiający szerokość lub dodający pogrubienie ustawiłem w %. Oczywiście ustawiłem to tylko w tych fragmtach które mnie interesują.

komentarz 20 lutego 2018 przez pablop76 VIP (123,180 p.)

W tym linku w js ustawiasz szerokość zdjęć na 700px.

var plik = "<img height=\"700px\" src=\"slajdy/slajd" + numer + ".png\" />";

komentarz 20 lutego 2018 przez Cezary Klauza Nowicjusz (210 p.)
przywrócone 20 lutego 2018 przez Cezary Klauza

Tak jednak czy to ma znaczenie? Mi chodzi o menu, i w mojej wypowiedzi dodałem że ustawiłem % tylko w tych fragmentach które mnie interesują.

komentarz 20 lutego 2018 przez pablop76 VIP (123,180 p.)

Dobrze to dla porządku wstaw jeszcze raz kod, ale ten na którym można zaobserwować twój problem. W ODPOWIEDNIE BLOCZKI HTML, CSS, JS a nie C/C++ , plain-text .

Poza tym nie widzę żadnych <span> w twoim kodzie, za to jest weight: 25%; weight: 75%;

Jedyne co od razy rzuca się w oczy to to, że nie ma ustawionego width: 100% dla .sticky.

komentarz 20 lutego 2018 przez Cezary Klauza Nowicjusz (210 p.)

Kod HTML

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

<meta charset="utf-8"/>
<title>Strona Główna</title>

<link rel="stylesheet" media="screen" href="styl.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,400,700" rel="stylesheet"> 

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>

	$(document).ready(function() {
	var NavY = $('.nav').offset().top;
	 
	var stickyNav = function(){
	var ScrollY = $(window).scrollTop();
		  
	if (ScrollY > NavY) { 
		$('.nav').addClass('sticky');
	} else {
		$('.nav').removeClass('sticky'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
	});
	
	var numer = Math.floor(Math.random()*2)+1;
			
			var timer1 = 0;
			var timer2 = 0;
			
			function ustawslajd(nrslajdu)
			{
				clearTimeout(timer1);
				clearTimeout(timer2);
				numer = nrslajdu - 1;
				
				schowaj();
				setTimeout("zmienslajd()", 500);
				
			}
			
			function schowaj()
			{
				$("#slider").fadeOut(500);
			}
		
			function zmienslajd()
			{
				numer++; if (numer>2) numer=1;
				
				var plik = "<img height=\"700px\" src=\"slajdy/slajd" + numer + ".png\" />";
				
				document.getElementById("slider").innerHTML = plik;
				$("#slider").fadeIn(500);
				
				timer1 = setTimeout("zmienslajd()", 5000);
				timer2 = setTimeout("schowaj()", 4500);
			
			}
</script>

</head>

<body onload="zmienslajd()">
<div class="nav">
<div class="logo">P r o g r a m i n g</div>
<div id="menu2">
<div class="option">Strona Główna</div>
<a href="log.html"><div class="option">Zaloguj się</div></a>
<div class="option">Zajerestruj się</div>
<div style="clear: both;"></div>
</div>
</div>
<div id="slider"> </div>

<div class="blue" style="height: 500px;">
<div class="nag"><h1 style="margin: 0px; border-bottom: dashed 5px #fff5ff">Co to jest programowanie?</h1></div>
<br/><br/><br/>
<div style="font-size: 35px; font-weight: 500;">
TEXT</div></div>

<div class="footer"> Wszelkie prawa zastrzezone. </div>
</body>

</html>

Kod CSS

body
{
	background-color: #303030;
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	margin: 0 !important;
}

a:visited {
    color: #ffffff;
    background-color: transparent;
    text-decoration: none;
}

.footer
{
	height: 35px;
	background-color: #303030;
	font-size: 20px;
	font-weight: 100;
	text-align: center;
}

#log
{
	height: 751px;
}
.option
{
	float: left;
	padding-top: 35px;
	padding-bottom: 35px;
	padding-left: 10px;
	padding-right: 10px;
	border-right: solid 2px;
}
.logo
{
	font-family: 'Lato', sans-serif !important;
	font-weight: 100;
	font-size: 75px;
	float: left;
}

.logo:hover
{
	cursor: default;
}

.option:hover
{
	cursor: pointer;
	background-color: rgb(0,0,0,0.50);
}

#menu2
{
	height: 65px;
	font-weight: 500;
	font-size: 25px;
	float: left;
	background-color: #000000;
	padding-left: 25%;
}

.nav
{
	weight: auto;
	height: 100px;
	background-color: rgb(0,0,0,0.50);
}

#slider
{
	background-color: #303030;
	height: 700px;
	padding-left: 300px;
	weight: 100%;
}

.blue
{
	background-color: #8993d0;
}

.sticky
{
	weight: 100%;
	position: fixed;
}

.nag
{
	font-size:75px;
	font-weight: 700;
}

h1
{
	font-size:75px;
	font-weight: 700;
	
}