Footer Code Confusion – HTML & CSS – SitePoint Forums

have understood

my footer please

please look

https://forallthetime.com/DEMO/visit_drp2.html

See content shifted left

doing

Sorry if this is the key!couldn’t get it

I tried PaulOB’s advice, <div>

same problem

sorry i’m lost

I would like someone to provide the correct code that works, as they have done for me before. Please leave a comment.

Please tell me where is my problem and how to fix it

I spent some time tweaking it.

I honestly don’t understand the difference https://forallthetime.com/DEMO/index.html

When

https://forallthetime.com/DEMO/visit_drp2.html

I validated the HTML and couldn’t track down two errors. is this my problem?

I validated the CSS…lots of

undefined

Seriously, thank you!

Just open a devtools window in Chrome and check the html. Errors stick out like thumbs.

I have this html structure.

<section class="flex-container">
  <section class="flex-item">
    <img src="https://via.placeholder.com/500x350" alt="">
    <div class="caption">
      <h1>Item 1</h1>
      <p>Lorem ipsum dolor sit amet, consecetur adipiscing elit. Cras pharetra metus vitae pellentesque.</p>
    </div>
  </section>
  <section class="flex-item">
    <img src="https://via.placeholder.com/500x350" alt="">
    <div class="caption">
      <h1>Item 2</h1>
      <p>Lorem ipsum dolor sit amet, consecetur adipiscing elit. Cras pharetra metus vitae pellentesque.</p>
    </div>
  </section>
  <section class="flex-item">
    <img src="https://via.placeholder.com/500x350" alt="">
    <div class="caption">
      <h1>Item 3</h1>
      <p>Lorem ipsum dolor sit amet, consecetur adipiscing elit. Cras pharetra metus vitae pellentesque.</p>
    </div>
  </section>
  <section class="flex-item">
    <img src="https://via.placeholder.com/500x350" alt="">
    <h1>Item 4</h1>
    <p>Lorem ipsum dolor sit amet, consecetur adipiscing elit. Cras pharetra metus vitae pellentesque.</p>
  </section>
  <section class="flex-item">
    <img src="https://via.placeholder.com/500x350" alt="">
    <div class="caption">
      <h1>Item 5</h1>
      <p>Lorem ipsum dolor sit amet, consecetur adipiscing elit. Cras pharetra metus vitae pellentesque.</p>
    </div>
  </section>
  <section class="flex-item">
    <img src="https://via.placeholder.com/500x350" alt="">
    <div class="caption">
      <h1>Item 6</h1>
      <p>Lorem ipsum dolor sit amet, consecetur adipiscing elit. Cras pharetra metus vitae pellentesque.</p>
    </div>
  </section>

  <!-- layout ends-->
  <footer>
    <div class="grid-container">
      <div class="item1">
        PO Box 7531<br>
        Any Town USA<br>
        ZIP 1357
      </div>
      <div class="item2">252 555 7531</div>

      <div class="item4">
        <a href="#"><img src="ICONS/black_(17).png" alt="media"></a>
        <a href="#"><img src="ICONS/black_(20).png" alt="media"></a>
        <a href="#"><img src="ICONS/black_(14).png" alt="media"></a>
        <a href="#"><img src="ICONS/black_(23).png" alt="media"></a>
        <a href="#"><img src="ICONS/black_(12).png" alt="media"></a>
        <a href="#"><img src="ICONS/black_(83).png" alt="media"></a>
        <a href="#"><img src="ICONS/black_(19).png" alt="media"></a>
      </div>
    </div>
  </footer>
</section>

Notice the final closing section tag after the footer closes.

it shouldn’t be there. It should be closed before the footer starts.

for example

<p>Lorem ipsum dolor sit amet, consecetur adipiscing elit. Cras pharetra metus vitae pellentesque.</p>
    </div>
  </section>
</section><!-- it is moved to here -->
<!-- layout ends-->
<footer>
  <div class="grid-container">
    <div class="item1">
      PO Box 7531<br>
      Any Town USA<br>
      ZIP 1357
    </div>
    <div class="item2">252 555 7531</div>

    <div class="item4">
      <a href="#"><img src="ICONS/black_(17).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(20).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(14).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(23).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(12).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(83).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(19).png" alt="media"></a>
    </div>
  </div>
</footer>

can!

thank you!

The entire footer is now visible, but the content is shifted to the left and there is a border around the media icons…

yes i tried

https://forallthetime.com/DEMO/index.html I tried to copy and paste from CSS

Whole footer…stuck

Paul, please know that I am grateful! Help me and don’t make me feel
fool

On that page, I set a rule for all images (big mistake), but that rule interferes with the footer image.

Here are the rules:

img {
    width: 50%;
    float: left;
}

You need to disable the footer image rule like this:

.grid-container .item4 img {
    width: 45px;
    height: auto;
    margin: 2rem;
    border: none;
    float: none;
}

You should be careful with global rules, as they define all instances of that element. and rarely what you wantAdd a simple class (the easiest way) to the element, or style it with a descendant selector that targets only the current context, like the footer.

Thank you very much

i think i caught the problem

I img line 309

That’s all img found, seen many times

Is this my rule for all images?

Anyway, I removed

img {
display: block;
border: 0;
width: 100%;
height: auto;
}

and didn’t use you

.grid-container .item4 img {
    width: 45px;
    height: auto;
    margin: 2rem;
    border: none;
    float: none;
}

And the footer is exactly where I want

$0.02 please

I know I keep telling you this…and I don’t want to sound annoyed…but I appreciate

It still looks broken to me.

This rule is on line 299 of visit_drp2.css.

@media screen and (min-width: 800px) {
  div.caption {
    width: 50%;
    float: left;
    padding-left: 1em;
  }
  img {
    width: 50%;
    float: left;
  }
}
/* lay out ends */

This will set all images using that stylesheet to float:left and give them a width of 50%.

Then put this css on line 265 to add a border to all images.

img {
  width: 100%;
  border: 1px solid black;
}

Those rules still break the footer unless you use the code I specified.

First, the above code you presented me works!

please look

https://forallthetime.com/DEMO/events_sub7.html

footer

I have spent time trying to figure this out myself

Icons are lined up like other pages

tried it display: grid When display: flex

no Trespassing

Please give me the correct code.Ask for comments so we can learn

thank you! ! !

I don’t know why I chose this complicated and advanced layout. It just creates more problems due to its complexity and stack logic. Does the original author also say not to use it at the production site?

There is nothing wrong with the footer (except for the fact that it still uses height!! I don’t know how many times I can say that don’t use height without yelling I gave an example why it’s broken because the footer is taller than the specified height. Stop using liquid content height.

Apart from that, the footer is working, but the rest of the page is broken. Doesn’t the viewport display headers and footers and giant horizontal scrollbars dividing all the columns?

The image in the center of the page should resize to fit the container, and I left out the original rule to do this. (Width: 100%, Height: Auto for center image).

The original rule was global and broke the footer (as I said before, styling something globally is a big mistake).

The fix is ​​to do this:

img:not(footer img){display:block;width:100%}

But the proper solution is to add a class to the image if you want to add some special styling and use that class instead of styling all images.

I’m sorry but,

Delete that entire HTML and CSS page

Explanation… I haven’t looked closely at the code, height is still an issue.

I’m ashamed to say this… get a codepen, search, responsive, flex, grid layout

Looking back now it was a mistake

I take full responsibility for not running that code.Also even doing these concepts is beyond my comfort zone anyway

I don’t know what to do here. My ultimate goal is to become a freelance front end web developer.

These codepens may be inappropriate for me…I don’t know the code…this is why I can’t find the height problem

Every page in the codepen (apparently) had a unique code and therefore a unique height code

Sorry for upsetting you! Trust me… I’m upset too!I’ve chewed on more than I can chew here

What’s your best advice for me?

You have been very kind to me for a long time and I really feel sorry for you repeating yourself about height issues

and other advice i messed up

Where do I go from here? I have access to the sitepoint library… not sure what to do here…

Help me

Again, I very sorry for irritating, irritating you and generally offending you

Do it one at a time instead of copying complex layouts from the internet.

You’ll have to create your own from scratch, but get familiar with grid and flex first. I will create a simple demo so that you can understand how the structure works. Practice is key. No one understands for the first time, and no one knows everything.

Patience and a methodical approach will allow you to understand what’s going on.

Be sure to copy the displayed demo. But try to reverse engineer them so you can understand how they work. A lot has been said about not using something you don’t understand if you want to change it.

Ultimately, practice until you have a solid understanding of the basics.

As long as I know you’re serious about learning, I don’t mind. The initial learning curve is very steep these days as I have to know more than when I first started.

just keep coding