LogFAQs


Board 8 > Need help from coding people

Topic List
Page List: 1
INCEPTlON
10/15/21 2:44:31 PM
#1:


Working on a class assignment right now, and I'm trying to figure out why my footer keeps showing up at the top of the page. My HTML file is

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Come on a Journey</title>
<meta name="description" content="My favorite video game of all time.">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" media="screen" href="css/style.css">
<link rel="stylesheet" media="print" href="css/print.css">

<style>

.container {

font-size: 5em;
}

.container div {
border: 5px solid blue;
padding-bottom:1px

}

</style>

</head>

<body>
<nav class="primary-menu">
<ul id="testmenu">
<li><a href="index.php">Table</a></li>
<li><a href="list.php">List</a></li>
<li><a href="intrapage.php">Intra-page Links</a></li>
</ul>
</nav>

<div class="all-wrapper">

<main>
<a href="#Journey">Journey</a>
<a href="#second">Second heading</a>
<a href="#third">Third heading</a>

<header class="bannertest">
<img class="bud" src="friend.jpg" alt="logo" >
<h1 id="Journey"> Journey </h1>

<p> Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well.I'll just copy and paste this now, so that I can make the page larger and test out the links at the top. Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well.Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well.Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well.Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well.Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well.Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well.Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well.Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well.Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well. </p>

<h2 id="second"> Second heading </h2>

<P> I should give my headings more obvious IDS for now on, for my own benefit. Makes it easier to keep track of. The more of these assignments I complete, the more I appreciate the concept of semantic coding. Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well.Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well.Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well.Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well.Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well. </P>

<h3 id="third"> Third heading </h3>

<p>I decided to remove the excess imagery I had on this page, from the previous copy and paste of assignment 8. I understand that you are grading on specific parameters, but I would still much prefer to give you something that is easier on your eyes. As you said, it is best practice, and I think it is just simply courteous. Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well.Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well.Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well.Testing my text. Look at all these test words. I really should just use one of the Ipsum resources you provided, but it's kind of fun to ramble some nonsense as well. Ahh well. </p>

</header>

</main>
</div>

<footer class="footers">

<?php include('includes/footer.php');?>

</footer>

</body>
</html>

CSS File in following post

---
FC: SW-8288-8096-1115
... Copied to Clipboard!
INCEPTlON
10/15/21 2:44:46 PM
#2:


* {
box-sizing:border-box;

}

body {
margin: 0;
background-color: aqua

}

.bannertest h1 { margin: 0; text-align: center; font-family: "Papyrus", Arial; font-size: 30px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 50px; }

.bannertest { background-color: red;
height: 50px;
border: 1px solid blue;
position: relative;
}

.mountains {
display: block;
height:auto;
padding-top: 10px;
max-width:100%;
margin-left: auto;
margin-right: auto;
width: 50%;
}

.bud {

height:40px;
max-width:100%;
position: absolute;
right: 88%;
top:5px;

}

oI,uI {

list-style:none;
margin:10px;
width:900px;
font-family: sans-serif;
color: blue;

}

#testmenu li {

display:block;
width: 125px;
float: left;
margin-left: 3px;
border: 1px blue;

}

#testmenu a {
display:block;
padding:2px;
text-decoration:none;
background-color:red;
color:#009;
}

#testmenu a:hover {
background-color:white;
color:black;
}

p {
padding: 6px
}

.sidebars {
padding:10px
}

.table-test, .table-test td,.table-test th {
border: 1px solid #000;
border-collapse: collapse;
padding: 10px;
background-color: red

}

.table-test {
margin-left: auto;
margin-right: auto;

}

ul {
list-style: square;
}

main ul ul li {
color: purple;
font-weight: bold;
}

@media (min-width: 800px) {

body {
font-size: 125%
}

.all-wrapper {

max-width: none;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto auto minmax(auto,auto);

}

.bannertest {
grid-column: 1 / 3;

}

.bannertest h1 {
grid-column: 1 / 3;

}

main {
grid-column: 1 / 2;

}

.sidebars {
grid-column: 2 / 3;

}

.footers {
grid-column: 1 / 3;
}

.container {
display:flex;
justify-content: center;

}

}


---
FC: SW-8288-8096-1115
... Copied to Clipboard!
masterplum
10/15/21 2:50:02 PM
#3:


I would run it and inspect the webpage and mess around in the inspect element screen

Edit: Oh I think its because you have the footer in the first column

---
https://pbs.twimg.com/media/BdWiElvIQAAQpBt.jpg
... Copied to Clipboard!
INCEPTlON
10/15/21 3:00:40 PM
#4:


masterplum posted...
I would run it and inspect the webpage and mess around in the inspect element screen

Edit: Oh I think its because you have the footer in the first column


hmm, that didnt do it

---
FC: SW-8288-8096-1115
... Copied to Clipboard!
INCEPTlON
10/15/21 3:58:36 PM
#5:


Bump

---
FC: SW-8288-8096-1115
... Copied to Clipboard!
BlackDra90n
10/15/21 4:06:16 PM
#6:


Your bannertest element is set to height: 50px so your text is overflowing past where your footer is.

---
http://psnprofiles.com/Drayxs
... Copied to Clipboard!
INCEPTlON
10/15/21 4:32:16 PM
#7:


appreciate all the suggestions!

---
FC: SW-8288-8096-1115
... Copied to Clipboard!
GANON1025
10/15/21 4:40:08 PM
#8:


Might be unrelated, but you seem to have the true body of your page, the paragraph text, in the header. Which is, uh, weird. I would argue that even having the header in the body is odd, but maybe that's a legit way of doing it.

---
https://imgur.com/G17qCv1
... Copied to Clipboard!
INCEPTlON
10/15/21 9:31:50 PM
#9:


GANON1025 posted...
Might be unrelated, but you seem to have the true body of your page, the paragraph text, in the header. Which is, uh, weird. I would argue that even having the header in the body is odd, but maybe that's a legit way of doing it.


Nope! That was definitely wrong on my part. Thank you :). This is all for an intro to coding course

---
FC: SW-8288-8096-1115
... Copied to Clipboard!
Scrappymatt10
10/15/21 9:40:09 PM
#10:


Btw coding people are called programmers

---
<::::::::::::::||:|xx[|)
(|]xxx[|:|];;;:::::::::::::::::::::::::::::::>
... Copied to Clipboard!
StealThisSheen
10/15/21 10:57:54 PM
#11:


Is there a particular reason you're using a grid instead of flex? Like, is it part of the assignment/what you were taught? Just curious.

---
Seplito Nash, Smelling Like the Vault since 1996
Step FOUR! Get Paid!
... Copied to Clipboard!
StealThisSheen
10/15/21 11:04:14 PM
#12:


The reason I ask is it looks like you could achieve what you're looking for with some simple flex. Put the entire thing (body elements and footer) in a div with flex-direction: column, then the inner parts that you want in-line above the footer in a div with flex-direction: row. This basically breaks it down into two elements: Your "body" and your footer, which the first div tells to stack, and then the div containing the "body" tells the stuff to be in a row.

Flex is much more versatile in general, so if you don't HAVE to use a grid, I'd suggest not to, as that's what appears to be breaking things, though I can't tell where, at a glance.

EDIT: I guess you'd actually probably want to have three elements in the "column," header/body/footer, but it depends how you actually have things laid out, which is tough to tell without actually seeing it.

---
Seplito Nash, Smelling Like the Vault since 1996
Step FOUR! Get Paid!
... Copied to Clipboard!
Topic List
Page List: 1