• Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.

Can you guys help me with this HTML code.

Status
Not open for further replies.
D

Dinokill

Member
Here is my problem. The footer is overlapping when it should be at the bottom of the page.

E1Rv599.png
Click to expand...

Here the HTML code

Code: 
<!DOCTYPE HTML>

<html lang="eng">

<head>
	<meta charset="UTF-8">
	
	<meta name="description"
	content="Apparel for the young and reckless">
	
	<meta name="kerwords"
	content="Tshirts, sales, new, creation, sports, hats">
	
	<title>The New Creation Company</title>
	
	<link href="w3.css" rel="stylesheet" type="text/css">
	<link href="website.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
	<header class="w3-container w3-teal w3-large">
		<ul class="w3-navbar w3-teal">
			<li><a href="website.html"><i class="fa fa-home"></i></a></li>
			<li><a href="team.html">Team</a></li>
			<li><a href="contact.html">Contact</a></li>
			<li class="w3-dropdown-hover">
				<a class="w3-green" href="#">Shop</a>
				<div class="w3-dropdown-content w3-teal w3-card-4">
					<a href="tshirts.html">T-Shirts</a>
					<a href="#">Shorts</a>
					<a href="#">Hats</a>
				</div>
			</li>
			<li><h1>New Creation</h1></li>
		</ul>		
	</header>
	
	<div class="w3-row-padding w3-margin-top">
		
		<div class="w3-quarter w3-center">
			<div class="w3-card-2">
				<img class="w3-section" src="tshirts/t1.jpg">
				<div class="w3-container">
					<p class="bold">Long Sleeve Shirt</p>
					<p class="bold">Price: $19.99</p>
				</div>
			</div>
		</div>
	
		<div class="w3-quarter w3-center">
			<div class="w3-card-2">
				<img class="w3-section" src="tshirts/t2.jpg">
				<div class="w3-container">
					<p class="bold">Compression Long Sleeve Shirt</p>
					<P class="bold">Price: $15.99</p>
				</div>
			</div>
		</div>
		
		<div class="w3-quarter w3-center">
			<div class="w3-card-2">
				<img class="w3-section" src="tshirts/t3.jpg">
				<div class="w3-container">
					<p class="bold">Full Zip Fleece</p>
					<p class="bold">Price: $10.99</p>
				</div>
			</div>
		</div>
		
		<div class="w3-quarter w3-center">
			<div class="w3-card-2">
				<img class="w3-section" src="tshirts/t4.jpg">
				<div class="w3-container">
					<p class="bold">T-shirt</p>
					<p class="bold">Price: $9.99</p>
				</div>
			</div>
		</div>

	</div>
	
	<div class="w3-row-padding w3-margin-top w3-margin-bottom">
			
		<div class="w3-quarter w3-center">
			<div class="w3-card-2">
				<img class="w3-section" src="tshirts/t5.jpg">
				<div class="w3-container">
					<p class="bold">Hoodie</p>
					<p class="bold">Price: $29.99</p>
				</div>
			</div>
		</div>

		<div class="w3-quarter w3-center">
			<div class="w3-card-2">
				<img class="w3-section" src="tshirts/t6.jpg">
				<div class="w3-container">
					<p class="bold">Sweatshirt</p>
					<p class="bold">Price: $35.99</p>
				</div>
			</div>
		</div>
		
		<div class="w3-quarter w3-center">
			<div class="w3-card-2">
				<img class="w3-section" src="tshirts/t7.jpg">
				<div class="w3-container">
					<p class="bold">Base Layer Shirt</p>
					<p class="bold">Price: $44.99</p>
				</div>
			</div>
		</div>
		
		<div class="w3-quarter w3-center">
			<div class="w3-card-2">
				<img class="w3-section" src="tshirts/t8.jpg">
				<div class="w3-container">
					<p class="bold">Fitted Sleeveless Shirt</p>
					<p class="bold">Price: $25.99</p>
				</div>
			</div>
		</div>
	</div>
			
	<footer class="w3-container w3-teal">
		<p class="foot">&copy; The New Creation Company</p>
	</footer>

</body>

</html>

Here is the CSS

Code: 
h1
{
	color: black;
	float: right;
	position: absolute;
	top: -15px;
	right: 30px;
}

.mySlides
{
	width: 400px;
	position: relative;
}

footer
{	
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	padding: 1px;
}

.ok
{
	width: 10%;
	margin: auto;
	font-weight: bold;
}

.avatars
{
	width: 50%;	
	position: relative;
	left: 200px;
}

p.bold
{
	font-weight: bold;
}

The footer in the other pages works fine. The problem with this particular page is that the content is larger than the screen. I want the footer to be always on the bottom and disappear when the content is too large for the screen and only appear when you scroll down(As should be in this particular page).
 
C

ClosingADoor

Member
Bit difficult to say without the actual test page. There is probably a 100% height on your html or body that is keeping it at 100% of the viewport instead of the total content, and that footer is relative to that.

Right click -> inspect and see how high the element wrapping the footer is and go from there.
 
C

collige

Banned
Per MDN, position: absolute is applied relative to the element's closest positioned ancestor, which doesn't exist in this case because body is position: static by default. This is why your footer ends up being a glitchy mess. From your description, I'm not sure exactly what you want but I'm guessing it's either position: fixed or position sticky (or some JS implementation of it that works cross-browser).
 
D

Dinokill

Member
collige said:
Per MDN, position: absolute is applied relative to the element's closest positioned ancestor, which doesn't exist in this case because body is position: static by default. This is why your footer ends up being a glitchy mess. From your description, I'm not sure exactly what you want but I'm guessing it's either position: fixed or position sticky (or some JS implementation of it that works cross-browser).
Click to expand...


Thanks!

I added this to my .css file and everything works.

Code: 
body
{
	position: relative;
	min-height: 100%;
	margin: 0;
       padding-bottom: 4rem;
}
 
GuyKazama

GuyKazama

Member
Setting the footer to fixed and adding a margin to the bottom of body should also work.





Edit: vvv Bootstrap is a good recommendation.
 
D

digdug2k

Member
You should also put stuff like this on jsfiddle.com (or something like it) so that people can see your actual code and edit it (with you if you want).
 
Status
Not open for further replies.

Similar threads

  • Locked
I need PHP help :(
3
704
Jill Sandwich replied
Tokyo Xanadu |Import OT| - Can You Xanadu?
2 3 4 5 6
279
48K
Bebpo replied
  • Locked
Final Fantasy XIV |OT7| 1000 years DRAGONSONG War
266 267 268 269 270
13K
800K
Aeana replied
Yakuza Zero: The Promised Land |Import OT| - Party like its 1988!
8 9 10 11 12
555
95K
Grim Patron replied
  • Locked
COMICS! |OT| June 2014. Bringing you great father-son bonding moments since 1940.
106 107 108 109 110
5K
311K
Furyous replied
Top Bottom