in

Footer Code Confusion – HTML & CSS – SitePoint Forums

cf11b3ed553d6c359d3dcc08377cc4b121fe8bf0

[ad_1]

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 :slight_smile:

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>

Note 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 :grimace:

[ad_2]

Source link

What do you think?

Leave a Reply

Your email address will not be published. Required fields are marked *

GIPHY App Key not set. Please check settings

    128380316 c92c4cfb746f698633b771b30abe07cc1c823bb1

    Chris Mason: Trio of incidents pose big questions for Rishi Sunak

    128325364 zoohippos

    Egypt zoo overhaul plan raises animal welfare fears