Ulokowanie obszaru CONTENT pomiędzy górnym panelem, a stopką + pozycjonowanie obrazka w wewnątrz tego contenta

pytanie zadane 29 czerwca 2016 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)
zamknięte 30 czerwca 2016 przez Krzysiek_34

Witam.

Chciałbym, aby pomiędzy górnym panelem (nav), a stopką (footer) był obszar (content), na którym umieszczę więcej obrazków. Zależy mi konkretnie na 2 rzeczach:
1. abym mógł pozycjonować obrazki TYLKO w obszarze content (srebrne tło), a nie na całej podstronie
2. aby ten content (srebrne tło) przylegał na stałe od "nav" do "footer" i wraz z ustaleniem wysokości contenta ma być tak, aby dalej na stałe ten content przylegał od "nav" do "footer".

Obecnie content przylega od "nav" do "footer". Wysokość całej podstrony to 900px (wrapper), a wysokość contenta to 815px. Gdy wysokość contenta będzie wynosiła poniżej 815px (814px-1px), to ten content będzie znajdował się nad stopką. Przy aktualnym kodzie, obrazek znajduje się prawie na samej górze contenta, jest odstęp 1px od góry, bo zapisałem margin-top: 1px, ale nie mogę przesuwać obrazka w lewo w tym content. Odstęp obrazka z lewej wynosi ponad 20px, a nie wpisywałem żadnych wartości do margin-left ani samego left.

Co muszę poprawić w kodzie, abym mógł TYLKO w obszarze content przesuwać obrazek w lewo, górę, prawo i dół?

<body>

	<div class="wrapper">

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

		<div id="content">
			<ul style="position: absolute; margin-top: 1px; margin-left: 15px">
				<li>
					<a href="podstrona2.php" class="images">
						<img src="obrazek.jpg" alt="Przejdź do podstrony">
					</a>
				</li>
			</ul>
		</div>
		
		<div class="footer">Stopka &copy; 2016</div>
	</div>

</body>

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

.wrapper
{
	width: 1000px;
	height: 900px;
	margin-left: auto;
	margin-right: auto;
}

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

nav ul
{
	margin: 0;
	padding: 0;
}

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

nav ul li a:hover
{
	background-color: #800080;
	color: white;
	cursor: pointer;
}

#content
{
	background-color: #C0C0C0;
	width: 1000px;
	height: 815px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

#content ul li
{
	display: block;
}

.images
{
	outline: none;
}

.images img {
	border: 2px solid #000000;
	width: 100px;
	height: 143px;
}

.images img:hover, .images img:focus
{
	border: 2px solid #FF0000;
	cursor: pointer;
}

.footer
{
	text-align: center;
	background-color: #222222;
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 0;
	width: 1000px;
	line-height: 50px;
	z-index: -1;
}

Dla testu wpisałem margin-left: 15px, ale to nic nie pomogło.

komentarz zamknięcia: Problem został w końcu rozwiązany i temat uważam za zamknięty.

1 odpowiedź

odpowiedź 30 czerwca 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Punkt nr 1 już zrobiłem, czyli mogę pozycjonować obrazki TYLKO w obszarze content (srebrne tło), a nie na całej podstronie.

Punkt nr 2 ---> Wysokość całej podstrony to 900px (wrapper), a wysokość contenta to 814px. Nad stopką jest 1px wolnego miejsca, czyli aby content przylegał do stopki, to wysokość contenta musi wynosić o +1px więcej, czyli 815px.

Co należy poprawić w kodzie, aby wraz z ustaleniem wysokości tego contenta, ten content przylegał od "nav" do "footer"? Czyli, np. ustalam wysokość contenta 2000px i ten content przylega od "nav" do "footer".

Działająca poprawka do punktu nr 1:

		<div id="content">
			<ul>
				<li>
					<a href="podstrona2.php" class="images">
						<img src="obrazek.jpg" style="position: absolute; left: 1px; top: 1px;" alt="Przejdź do podstrony">
					</a>
				</li>
			</ul>
			
			<ul>
				<li>
					<a href="podstrona2.php" class="images">
						<img src="obrazek.jpg" style="position: absolute; left: 1px; top: 300px;" alt="Przejdź do podstrony">
					</a>
				</li>
			</ul>
			
			<ul>
				<li>
					<a href="podstrona2.php" class="images">
						<img src="obrazek.jpg" style="position: absolute; left: 895px; top: 1px;" alt="Przejdź do podstrony">
					</a>
				</li>
			</ul>
			
			<ul>
				<li>
					<a href="podstrona2.php" class="images">
						<img src="obrazek.jpg" style="position: absolute; left: 440px; top: 150px;" alt="Przejdź do podstrony">
					</a>
				</li>
			</ul>
			
			<ul>
				<li>
					<a href="podstrona2.php" class="images">
						<img src="obrazek.jpg" style="position: absolute; left: 895px; top: 300px;" alt="Przejdź do podstrony">
					</a>
				</li>
			</ul>
		</div>

#content
{
	background-color: #C0C0C0;
	width: 1000px;
	height: 814px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
}