Podstrona przesunięta w górę o 1px względem strony głównej. Jak to naprawić?

pytanie zadane 21 kwietnia 2016 w HTML i CSS przez Krzysiek_34 Mądrala (6,090 p.)

Zrobiłem teraz wersję testową i doszedłem do wniosku, że gdy ustalam wysokość podstrony, aby z góry na dół i na odwrót obejrzeć jej zawartość, to ta cała podstrona jest przesunięta w górę o 1px względem strony głównej. W moim przypadku wysokość podstrony wynosi 1200px. Gdy nie ustalę wysokości podstrony (bez możliwości przesuwania suwakiem z góry na dół), to wszystko jest OK względem strony głównej.

W przypadku wysokości podstrony 1200px albo dużo większej da się zrobić tak, aby zawartość podstrony nie przesuwała się w górę o 1px względem strony głównej?

związane z odpowiedzią na: Ustalanie marginesu górnego i nie jest do końca tak jak powinno.

1 odpowiedź

odpowiedź 21 kwietnia 2016 przez Niespecjalny Gaduła (4,180 p.)

Rozumiem że strona główna jest bez "suwaka"?

komentarz 21 kwietnia 2016 przez Krzysiek_34 Mądrala (6,090 p.)

Strona główna też jest z suwakiem i jej wysokość to 800px.

index_style.css:

body
{
	background-color: #0000FF;
	font-family: Verdana;
	margin: 0px;
	width: 100%;
	height: 800px;
	position: relative;
}

podstrona_style.css:

body
{
	background-color: #800080;
	font-family: Verdana;
	margin: 0px;
	width: 100%;
	height: 1200px;
	position: relative;
}

komentarz 21 kwietnia 2016 przez Niespecjalny Gaduła (4,180 p.)

Moze boom masz bo z tego co podeslales nic innego nie wyciagne :)

komentarz 21 kwietnia 2016 przez Krzysiek_34 Mądrala (6,090 p.)

Za chwilę podeślę cały kod.

komentarz 21 kwietnia 2016 przez Krzysiek_34 Mądrala (6,090 p.)
edycja 21 kwietnia 2016 przez Krzysiek_34

index.php:

<body>
	<div class="wrapper">
		<nav>
			<ul>
				<li class="home"><a href="index.php">Strona główna</a></li>
			</ul>
		</nav>

		<div id="content">
			<a href="podstrona.php"><div class="button">Podstrona</div></a>
		</div>
	</div>
</body>

style.css:

body
{
	background-color: #0000FF;
	font-family: Verdana;
	margin: 0px;
	width: 100%;
	height: 800px;
	position: relative;
}

.wrapper
{
	width: 300px;
}

nav
{
	overflow: hidden;
	background-color: #008000;
	padding: 6px;
	margin-top: 10px;
}

nav ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}

nav ul li.home
{
	float: left;
}

nav ul li a
{
	display: block;
	padding: 5px;
	background-color: #000000;
	color: white;
	font-size: 11px;
	text-decoration: none;
}

#content
{
	height: 70px;
	background-color: #C0C0C0;
	margin-top: 30px;
}

.button
{
	outline-style: inset;
	margin-left: 15px;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: auto;
	color: white;
	background-color: #800080;
	font-size: 16px;
	float: left;
	width: 100px;
	line-height: 30px;
	text-align: center;
}

podstrona.php:

<body>

	<div class="wrapper">

		<nav>
			<ul>
				<li class="home"><a href="index.php">Strona główna</a></li>
			</ul>
		</nav>
		
		<div align="center" id="gray" style="display: block">
				<div align="center" id="progressbar">
					<table width="100%" height="100%"> 
						<tr>
							<td style="width: 50%; padding-right: 20px;" id="counter" align="right"> 0 </td>
							<td style="width: 50%" align="left"> % </td>
						</tr>
					</table>
				</div>
		</div>	

		<div id="confirmOverlay" style="display: block">
			<div id="confirmBox">
				<div class="headerText">
					<span style="color: yellow; font-weight: bold; font-size: 20px">Komunikat</span>
				</div>
				
				<p>Czy chcesz wejść na tą podstronę?</p>

				<div id="confirmButtons">
					<button id="cancel_btn">Nie</button>
					<button id="ok_btn">Tak</button>
				</div>
			</div>
		</div>
		
		<div id="content">
			<p>Tu będzie podstrona</p>
		</div>
		
	</div>
	
	<script type="text/javascript">
	
		var timerId = 0;
		var ok_pressed = false;
		var is_page_loaded = false;
		var i = 0;
		var check = 0;
		$(document).ready(function() 
		{
			$("#cancel_btn").click(function() {
				window.location.replace("http://www.google.com");
			});

			$("#ok_btn").click(function() {
				$('#confirmOverlay').fadeOut(function() 
				{ 
					$(this).remove();
					$("#progressbar").show();
					startProgressbar(100);						
				});
								
			});

			var showPage = function() {
				$('#progressbar').fadeOut(function() {
					$(this).remove();
				});
	
				$('#gray').fadeOut(function() {
					$(this).remove();
				});

				clearInterval(check);
			}
	
			$(window).load(function() {
				is_page_loaded = true;
				 
			});
	
			var startProgressbar = function(time) {
				timerId = setInterval(function() {
					i++;
					if (i > 0)
						$("#percent").show();
	
					$("#counter").html(i);
				}, time);
				
				check = setInterval(function() 
				{
					if((i > 99))
					{
						clearInterval(timerId);
						$("#counter").html("100");
						showPage();
						$(window).scrollTop(1);
					}
				}, 50);					
			}
		});
	
	</script>
	
</body>

podstrona_style.css:

body
{
	background-color: #800080;
	font-family: Verdana;
	margin: 0px;
	width: 100%;
	height: 1200px;
	position: relative;
}

.wrapper
{
	width: 500px;
}

nav
{
	overflow: hidden;
	background-color: #008000;
	padding: 6px;
	margin-top: 10px;
}

nav ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}

nav ul li.home
{
	float: left;
}

nav ul li a
{
	display: block;
	padding: 5px;
	background-color: #000000;
	color: white;
	font-size: 11px;
	text-decoration: none;
}

#content
{
	height: 1000px;
	background-color: #C0C0C0;
	color: blue;
	margin-top: 30px;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
}

#progressbar
{
	font-size: 200px;
	color: red;
	font-family: Times;
	width: 100%;
	height: 100%;
}

#confirmOverlay, #gray
{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	background: #000000;
	opacity: 0.9;
}

#confirmBox
{
	background-color: #E5E5E5;
	width: 500px;
	position: relative;
	margin-top: 205px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	padding-bottom: 20px;
}

.headerText
{
	letter-spacing: 2px;
	background-color: #008080;
	line-height: 43px;
	text-align: center;
	margin-top: 0;
}

#confirmBox p
{
	padding: 0px 15px 10px;
	text-align: justify;
	color: black;
	font-size: 14px;
	line-height: 1.4;
}

#confirmButtons
{
	padding: 0px 50px;
}

#cancel_btn
{
	text-decoration: none;
	color: white;
	background-color: #FF0000;
	font-size: 16px;
	border: 2px solid #000000;
	float: left;
	width: 120px;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
}

#ok_btn
{
	text-decoration: none;
	color: white;
	background-color: #0000FF;
	font-size: 16px;
	border: 2px solid #000000;
	float: right;
	width: 120px;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
}