HTML - Can't make image stay put when scrolling

79wjd · December 19, 2016

1 hour ago, SCGazelle said:

I think this is what you mean: I created a div around the image then created a new class for it. In CSS I told the class to position:fixed. That worked when there wasn't enough text to scroll down, but when I added some more text, the image disappeared.

Put a z-index on it that is greater than the z-index of the page (so...set the header/images/navigation bar to z-index: 100 for example). It's probably getting covered up by the rest of the page's content.

Niemand · December 19, 2016

I did this. Don't replace the entire file with the code. Remember, you just gave me bits of it.

Spoiler


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<title>GAZELLE</title>
		<link rel="stylesheet" href="files/main.css">
	</head>
	<body>
		<div class="container">
			<header class="header">
				<nav class="top_nav">
					<ul class="nav">
						<li class="Navi"><a href=""><button class="menuselected">Menu 1</button></li>
						<li class="Navi"><a href=""><button class="menu">Menu 2</button></a></li>
						<li class="Navi"><a href=""><button class="menu">Menu 3</button></a></li>
						<li class="RNavi"><a href=""><button class="menu">Contact</button></a></li>
						<li class="RNavi"><button class="midb"><strong>Name</strong></button></li>
					</ul>
				</nav>
			</header>

			<aside class="submenu">
				<a href="Home.html">
						<img src="files/logo.png" class="logo">
				</a>
				<h2>Creations</h2>
					<ul class="aside-ul">
						<li class="Links"><a href="">Menu 1</a></li>
						<li class="Links"><a href="">Menu 2</a></li>
						<li class="Links"><a href="">Menu 3</a></li>
						<li class="Links"><a href="">Menu 4</a></li>
						<li class="Links"><a href="">Menu 5</a></li>
					</ul>
			</aside>

			<section class="MainContent">
				<article>
					<h2 class="title">Title</h2>
						<p class="content">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Content that made the page longer so I could scroll but cut out so it wouldn't get in the way
						</p>
				</article>
				<article>
					<h2 class="title">Title</h2>
						<p class="content">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Content that made the page longer so I could scroll but cut out so it wouldn't get in the way
						</p>
				</article>
				<article>
					<h2 class="title">Title</h2>
						<p class="content">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Content that made the page longer so I could scroll but cut out so it wouldn't get in the way
						</p>
				</article>
			</section>


			<footer class="footer">
			</footer>

		</div>
	</body>
</html>


* {
	margin:0px;
	padding:0px;
}

.container{
  margin: 0px auto;
  width: 100%;
  height: 100%;
  border:1px solid blue;
}

p {
	font-size:20px;
  padding: 16px;
}

a {
  text-decoration:none;
}

ul {
  list-style-type:none;
}

/* _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
                         HEADER
 _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/*/

.header {
  width: 100%;
  height: 50px;
  background-color: #cc1818;
  display: inline-block;
  position: fixed;
}

 .top_nav{
   width: 100%;
   height: 50px;
 }

 .RNavi{
   float:right;
 }

 .Navi{
   float:left;
 }

 .menu{
   padding: 0 16px;
   height: 50px;
   display: block;
   background-color: #383838;
   border: none;
   color: white;
   font-family:Century Gothic;
   font-size: 16px;
 }

 .menu:hover{
   background-color: #cc1818;
   color: white;
 }

 .menuselected{
   padding: 0 16px;
   height: 50px;
   background-color: white;
   border: none;
   color: #383838;
   font-weight:bold;
   font-family:Century Gothic;
   font-size: 16px;
 }

 .midb{
   padding: 0 16px;
   height: 50px;
   background-color: white;
   color: #383838;
   font-family: "Century Gothic";
   font-size: 16px;
   border: none;
 }

/* _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
                         ASIDE MENU
 _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/*/

.logo {
	width: 200px;
	height:auto;
}

h2 {
  line-height: 50px;
  padding: 10px
}

.submenu{
  width: 200px;
  margin: 50px 0 0 0;
  height: 100%;
  background-color: #cc1818;
  position: fixed;
  margin-top:50px;
  color:white;
  list-style-type: none;
  text-align: center;
}

.aside-ul {
  width: 200px;
}

.Links{
  width: 100%;
  padding: 10px 0;
  display:block;
  background-color: #383838;
  font-family:Century Gothic;
  font-size:20px;
  border: none;
}

.Links:hover {background-color: #cc1818;}

.Links a {
  color: white;
}

/* _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
                         MAIN CONTENT
 _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/*/

.MainContent{
	width: 880px;
  margin-top: 50px;
  margin-left: 200px;
	color:#383838;
}

.title {
  padding: 20px;
}


.footer {
    height:60px;
    width: 100%;
    clear: both;
}

I could have cleaned it a little, but it's too damn late here where I live.

EunSoo · December 19, 2016

1 minute ago, Niemand said:

I did this. Don't replace the entire file with the code. Remember, you just gave me bits of it.

Hide contents



<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<title>GAZELLE</title>
		<link rel="stylesheet" href="files/main.css">
	</head>
	<body>
		<div class="container">
			<header class="header">
				<nav class="top_nav">
					<ul class="nav">
						<li class="Navi"><a href=""><button class="menuselected">Menu 1</button></li>
						<li class="Navi"><a href=""><button class="menu">Menu 2</button></a></li>
						<li class="Navi"><a href=""><button class="menu">Menu 3</button></a></li>
						<li class="RNavi"><a href=""><button class="menu">Contact</button></a></li>
						<li class="RNavi"><button class="midb"><strong>Name</strong></button></li>
					</ul>
				</nav>
			</header>

			<aside class="submenu">
				<a href="Home.html">
						<img src="files/logo.png" class="logo">
				</a>
				<h2>Creations</h2>
					<ul class="aside-ul">
						<li class="Links"><a href="">Menu 1</a></li>
						<li class="Links"><a href="">Menu 2</a></li>
						<li class="Links"><a href="">Menu 3</a></li>
						<li class="Links"><a href="">Menu 4</a></li>
						<li class="Links"><a href="">Menu 5</a></li>
					</ul>
			</aside>

			<section class="MainContent">
				<article>
					<h2 class="title">Title</h2>
						<p class="content">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Content that made the page longer so I could scroll but cut out so it wouldn't get in the way
						</p>
				</article>
				<article>
					<h2 class="title">Title</h2>
						<p class="content">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Content that made the page longer so I could scroll but cut out so it wouldn't get in the way
						</p>
				</article>
				<article>
					<h2 class="title">Title</h2>
						<p class="content">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Content that made the page longer so I could scroll but cut out so it wouldn't get in the way
						</p>
				</article>
			</section>


			<footer class="footer">
			</footer>

		</div>
	</body>
</html>



* {
	margin:0px;
	padding:0px;
}

.container{
  margin: 0px auto;
  width: 100%;
  height: 100%;
  border:1px solid blue;
}

p {
	font-size:20px;
  padding: 16px;
}

a {
  text-decoration:none;
}

ul {
  list-style-type:none;
}

/* _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
                         HEADER
 _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/*/

.header {
  width: 100%;
  height: 50px;
  background-color: #cc1818;
  display: inline-block;
  position: fixed;
}

 .top_nav{
   width: 100%;
   height: 50px;
 }

 .RNavi{
   float:right;
 }

 .Navi{
   float:left;
 }

 .menu{
   padding: 0 16px;
   height: 50px;
   display: block;
   background-color: #383838;
   border: none;
   color: white;
   font-family:Century Gothic;
   font-size: 16px;
 }

 .menu:hover{
   background-color: #cc1818;
   color: white;
 }

 .menuselected{
   padding: 0 16px;
   height: 50px;
   background-color: white;
   border: none;
   color: #383838;
   font-weight:bold;
   font-family:Century Gothic;
   font-size: 16px;
 }

 .midb{
   padding: 0 16px;
   height: 50px;
   background-color: white;
   color: #383838;
   font-family: "Century Gothic";
   font-size: 16px;
   border: none;
 }

/* _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
                         ASIDE MENU
 _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/*/

.logo {
	width: 200px;
	height:auto;
}

h2 {
  line-height: 50px;
  padding: 10px
}

.submenu{
  width: 200px;
  margin: 50px 0 0 0;
  height: 100%;
  background-color: #cc1818;
  position: fixed;
  margin-top:50px;
  color:white;
  list-style-type: none;
  text-align: center;
}

.aside-ul {
  width: 200px;
}

.Links{
  width: 100%;
  padding: 10px 0;
  display:block;
  background-color: #383838;
  font-family:Century Gothic;
  font-size:20px;
  border: none;
}

.Links:hover {background-color: #cc1818;}

.Links a {
  color: white;
}

/* _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
                         MAIN CONTENT
 _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/*/

.MainContent{
	width: 880px;
  margin-top: 50px;
  margin-left: 200px;
	color:#383838;
}

.title {
  padding: 20px;
}


.footer {
    height:60px;
    width: 100%;
    clear: both;
}

Thank you so much. I'll take a look at it tomorrow

Niemand · December 19, 2016

Just now, SCGazelle said:

Thank you so much. I'll take a look at it tomorrow

ok

vorticalbox · December 19, 2016

you know you could have just made the div that has the main content overflow, it becomes scrolling everything else stays put.

Sign In

HTML - Can't make image stay put when scrolling

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Featured Topics

Topics

Latest From Linus Tech Tips:

Who Can Find the Weirdest PC Parts on AliExpress?

Latest From Tech Quickie:

Ethernet Is Named After Something Really Dumb (and other tech stories)

Latest From TechLinked:

Oh, Snap

Latest From GameLinked:

Will Assassin's Creed Shadows be good? - Gamers 2 Gamers

Latest From ShortCircuit:

I think y’all overlooked something… - Pixel 8a

Latest From Mac Address:

Why did you buy an Apple Vision Pro?

Latest From Channel Super Fun:

I Swapped the CEO's Assistant For a Day!

My Activity Streams