Ustalanie marginesu górnego i nie jest do końca tak jak powinno.

Question

Witam.

Na stronie głównej na górze na poziomym pasku mam umieszczone przyciski (strona główna, logowanie). Na środku strony mam przycisk "Podstrona1" i gdy klikam na niego, to wchodzę na podstronę. Najpierw wyskakuje komunikat na czarnym tle czy wejść na tą podstronę, gdy klikam na TAK, to za chwilę uruchamia się podstrona.

Problem polega na tym, że gdy w CSS od podstrony mam wpisany margin-top: 10px, 9px, 8px, 7px, 6px, 5px, 4px, 3px, 2px, 1px, 0 albo auto;, to gdy wyskakuje mi na podstronie ten komunikat, to położenie poziomego paska z przyciskami (strona główna) względem strony głównej jest OK, ale w momencie uruchomienia się podstrony, cała zawartość podstrony przesuwa się do góry o +1px.

Gdy w CSS od podstrony wpiszę margin-top: 11px; to gdy wyskakuje mi na podstronie ten komunikat, to położenie poziomego paska z przyciskami (strona główna) względem strony głównej przesuwa się w dół o -1px na tej podstronie. Gdy wracam z podstrony na stronę główną, to położenie tego poziomego paska jest OK względem podstrony. Gdy wpiszę margin-top: 15px;, to na podstronie położenie tego paska przesuwa się jeszcze bardziej w dół. Czyli od margin-top: 12px, 13px, 14px, 15px, 16px,............i dalej robi się coraz gorzej na tej podstronie - położenie tego poziomego paska przesuwa się w dół.

Gdzie jest błąd w kodzie?

index.php:

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

<div id="content">
	<a href="podstrona1.php"><div class="button">Podstrona1</div></a>
</div>

style.css:

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

nav
{
	overflow: hidden;
	background-color: #C34F4F;
	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;
}

podstrona1.php:

<div id="confirmOverlay" style="display: block">
	<div id="confirmBox">
		<div class="headerText">
			<b style="color: yellow; font-size: 20px">Komunikat</b>
		</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>

podstrona1_style.css:

body
{
	font-family: Verdana;
	background-attachment: fixed;
	margin-left: auto;
	margin-top: 11px;
	margin-right: auto;
	margin-bottom: auto;
	width: 100%;
	height: 2432px;
	position: relative;
}

nav
{
	overflow: hidden;
	background-color: #C34F4F;
	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;
}

#confirmOverlay
{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background: #000000;
	opacity: 0.9;
	z-index: 1;
}

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

.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;
}

 

Comments

Serio tracisz czas na takie pierdoły... najpierw się naucz potem próbuj coś robić, kompletne podstawy się kłaniają.

Answer 1

Jesli jakis element ma ustawiony margin-bottom, a element bezposrednio pod nim ma ustawiony margin-top, to te marginy nie sumuja sie tylko pod uwage brana jest wieksza wartosc, byc moze tutaj lezy Twoj problem (w jednej ksiazce nazwane jest to skladniem marginesow ang. collapse)

Comments

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?