HTML - Can't make image stay put when scrolling

EunSoo · December 19, 2016

Last summer I watched a youtube tutorial on how to make a HTML web page. I wanted to finish it during Winter break but I am stuck on one thing. I cannot get the logo to not move when scrolling. I was able to get everything else to stay put but not that logo. I have looked on the internet and none of the methods worked so is there something else I could do or is there a fundamental problem with the code. Also this is my first time touching any sort of code so if there is a glaring problem or mistake, please don't get too mad at me. Tnx guys. I'm not sure of the best way to give it to you so here is a OneDrive link to it:

https://1drv.ms/f/s!Aot9EJB9xd2uiPNtN8VWcSejVtIyYQ

If you download everything there and extract it from the compressed folder then it should work

79wjd · December 19, 2016

So you want it to be fixed at the top of the page so it's always visible at the top when you scroll down (like the LTT navigation bar)?

Just put the picture in a div that has "position: fixed" set.

Niemand · December 19, 2016

Paste the code, nobody wants to click that link.

EunSoo · December 19, 2016

1 minute ago, Niemand said:

Paste the code, nobody wants to click that link.

the entire page or just the part concerning the image?

Niemand · December 19, 2016

2 minutes ago, SCGazelle said:

the entire page or just the part concerning the image?

You can put all of it if it's a simple page (it sounds like it is). Have you tried djdwosk97's suggestion?

EunSoo · December 19, 2016

2 minutes ago, Niemand said:

You can put all of it if it's a simple page. Have you tried djdwosk97's suggestion?

Here is the HTML

<!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">
				<!-- Here is the Logo part -->
				<a href="Home.html">
						<img src="files/logo.png" class="logo">
				</a>
				<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>
				<div class="clear"> </div>
			</header>
			<section class="MainContent">
				<article>
					<h2>
						<strong>Title</strong>
					</h2>
						<p class="content">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Content that made the page longer so I could scroll but cut out so it wouldn't get in the way
						</p>
				</article>
			</section>
			<aside class="submenu">
				<h2><strong>Creations</strong></h2>
				<div>
					<ul>
						<li class="Links"><a href=""><button class="sidemenuselected">Menu 1</button></a></li>
						<li class="Links"><a href=""><button class="sidemenu">Menu 2</button></a></li>
						<li class="Links"><a href=""><button class="sidemenu">Menu 3</button></a></li>
						<li class="Links"><a href=""><button class="sidemenu">Menu 4</button></a></li>
						<li class="Links"><a href=""><button class="sidemenu">Menu 5</button></a></li>
					</ul>
				</div>
			</aside>
			<footer class="footer">
				
			</footer>
		</div>
	</body>
</html>

And here is my CSS. its a little sloppy but I tried to tell you which part is the logo part

*{
	margin:0px;
	padding:0px;
	list-style-type:none;
}
html{
	font-family:Century Gothic;
	background-image:url("bg.png");
	background-size:percentage;
	background-repeat: no-repeat;
    background-attachment: fixed;
	
}
footer{
	font-size:10px;
}
header,nav,article,section,footer,aside{
	display:block;
}

p{
	font-size:20px;
	
}
a{
	text-decoration:none;
}
.Date{
	font-weight:100;
}
/* Logo stuff here */
.logo{
	width:7%;
	height:auto;
	float:left;
	padding: 10px;
	
}
.menu{
	background-color: #383838;
    color: white;
	font-family:Century Gothic;
    padding: 16px;
    font-size: 16px;
	border: none;
	
}

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

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

.HomeB{
	background-color: white;
    color: #383838;
	font-family:Century Gothic;
    padding: 16px;
    font-size: 16px;
	border: none;
	
}

.HomeBSelected{
	background-color: white;
    color: #383838;
	font-family:Century Gothic;
    padding: 16px;
    font-size: 16px;
	border: none;
	
}

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


.C{
	font-size:20px;
}
.hi{
	font-size:20px;
	font-family:Century Gothic;
}
.P{
	padding-left:20px;
}

.clear{
	clear:both;
}

.RNavi{
	float:right;
	
}

.container{
	width:100%;
	margin:0px auto;
	min-height:50%;
	min-width:959px;
}


.top_nav{
	float:right;
	width:85%;
	background-color: #cc1818;
	overflow: hidden;
	display: block;
	display: inline-block;
	position: fixed;
}

.Navi{
	float:left;
	
}

.submenu{
	list-style-type: none;
    margin: 0;
    padding: 10px;
    width: 8%;
    background-color: #cc1818;
    position: fixed;
    height: 75%;
    overflow: hidden;
	color:white;
	
}

.sidemenu{
	display:block;
	background-color: #383838;
    color: white;
	font-family:Century Gothic;
    padding: 10px;
    font-size: 16px;
	border: none;
	margin-right:100%;
	padding-right:100%;;
	
}

.sidemenuselected{
	display:block;
	background-color: white;
    color: #383838;
	font-family:Century Gothic;
    padding: 16px;
    font-size: 16px;
	border: none;
	margin-right:100%;
	padding-right:100%;
	font-weight:bold;
	
}

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

.MainContent{
	float:right;
	width:85%;
	color:#383838;
	background-color: white;
	padding: 16px;
}

.bottom{
	background-color:white;
}

div.graphics {
    margin: 5px;
    border: 1px solid #383838;
    float: left;
    width: 180px;
}

div.graphics:hover {
    border: 1px solid #cc1818;
}

div.graphics img {
    width: 100%;
    height: auto;
}

div.graphics {
    padding: 15px;
    text-align: center;
}

.footer{
	clear:both;
	float:center;
	
	
}
.nav{
	font-size:25px;

}
.Links{
	font-size:20px;
	color: white;
	
}

.Links:hover{
	color: #cc1818;
	
}
	

.aboutme{
	font-size=25px;
	font-size=25px;
	
}
.art{
	margin=50px
}

EunSoo · December 19, 2016

Also a screenshot of what it looks like

MANIDY inc · December 19, 2016

so you want the gazelle logo to say in the top corner and when you scroll down you want it to stay on the top corner so you cant see it when you scroll down.

or when you scroll down do yu want to still see the logo and just have it say in the top corner

EunSoo · December 19, 2016

Just now, MANIDY inc said:

so you want the gazelle logo to say in the top corner and when you scroll down you want it to stay on the top corner so you cant see it when you scroll down.

or when you scroll down do yu want to still see the logo and just have it say in the top corner

THe second one. Right now it scrolls with the page

MANIDY inc · December 19, 2016

1 hour ago, SCGazelle said:

THe second one. Right now it scrolls with the page

so if you want it to stay at the top but still see it when you scroll you do what dj said,

just add the fixed prefix in the css for it

like this

.logo{
	position: fixed;
	width:7%;
	height:auto;
	float:left;
	padding: 10px;
	
}

EunSoo · December 19, 2016

25 minutes ago, djdwosk97 said:

So you want it to be fixed at the top of the page so it's always visible at the top when you scroll down (like the LTT navigation bar)?

Just put the picture in a div that has "position: fixed" set.

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.

EunSoo · December 19, 2016

1 minute ago, MANIDY inc said:
so if you want it to stay at the top but still see it when you scroll you do what dj said,

just add the fixed prefix in the css for it

like this
.logo{
	position: fixed;
	width:7%;
	height:auto;
	float:left;
	padding: 10px;
	
}

The Image disappears when I do that:

Niemand · December 19, 2016

Did you intend your page to scroll horizontally?

EunSoo · December 19, 2016

1 minute ago, Niemand said:

Did you intend your page to scroll horizontally?

no, just vertically

MANIDY inc · December 19, 2016

1 hour ago, SCGazelle said:

The Image disappears when I do that:

let me fuck around with it and see

Niemand · December 19, 2016

1 minute ago, SCGazelle said:

no, just vertically

i see now that's because you removed the content for me.

EunSoo · December 19, 2016

3 minutes ago, Niemand said:

i see now that's because you removed the content for me.

yeah, I didn't want to make that post really long

Niemand · December 19, 2016

Alright I put the image inside the aside.submenu element, and set the width to 100%.

    <aside class="submenu">
                <a href="Home.html">
                        <img src="files/logo.png" class="logo">
                </a>    
      ...

That's just a quick, sloppy fix.

There are a lot of things in the website that make it harder to position elements. You need to centralize your page.

EunSoo · December 19, 2016

4 minutes ago, Niemand said:
Alright I put the image inside the aside.submenu element.
    <aside class="submenu">
                <a href="Home.html">
                        <img src="files/logo.png" class="logo">
                </a>    
      ...
That's just a quick, sloppy fix.

There are a lot of things in the website that make it harder to position elements.

Ok, I'll do that with my version. The tutorial I followed was to make a much different style of a webpage but I thought it was boring so I tried to experiment to make it look better. That's probably why it is not very optimized

Niemand · December 19, 2016

1 minute ago, SCGazelle said:

Ok, I'll do that with my version. The tutorial I followed was to make a much different style of a webpage but I thought it was boring so I tried to experiment to make it look better. That's probably why it is not very optimized

It comes with its own problems as well.

EunSoo · December 19, 2016

9 minutes ago, Niemand said:
Alright I put the image inside the aside.submenu element, and set the width to 100%.
    <aside class="submenu">
                <a href="Home.html">
                        <img src="files/logo.png" class="logo">
                </a>    
      ...
That's just a quick, sloppy fix.

There are a lot of things in the website that make it harder to position elements. You need to centralize your page.

So that kinda worked. I'll have to mess with the other elements to make it work better. Is there any way I could make the code more optimized for this layout and make it easier to make changes to it in the future? Even if it is a complete overhaul, I would like to try it out.

Niemand · December 19, 2016

5 minutes ago, SCGazelle said:

So that kinda worked. I'll have to mess with the other elements to make it work better. Is there any way I could make the code more optimized for this layout and make it easier to make changes to it in the future? Even if it is a complete overhaul, I would like to try it out.

I'm doing some things here already, but it's complicated, there's a lot.

I'll put everything in a single container in the middle and make the top and side menus fixed. How about that?

EunSoo · December 19, 2016

1 minute ago, Niemand said:

I'm doing some things here already, but it's complicated, there's a lot.

I'll put everything in a single container in the middle and make the top and side menus fixed. How about that?

You're the expert here, not me. I'll take whatever I can get

Niemand · December 19, 2016

1 minute ago, SCGazelle said:

You're the expert here, not me. I'll take whatever I can get

I'm not an expert at all. I have very little experience.

EunSoo · December 19, 2016

Just now, Niemand said:

I'm not an expert at all. I have very little experience.

oh, well its probably better than what I can come up with. Anyway its just an educational project for me so I want to know the different methods to make a webpage

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

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

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

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