Footer code confusion

OBXjuggler · January 23, 2023, 1:59am

ok

for my footer, please

please see

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

see the content shifted to the left

i am trying

my apologies if this was the key! couldnt get it

i tried PaulOB’s advice and removed a <div>

same problem

so sorry, but i am lost

i kindly ask some one to provide the correct code that will work, as have done for me before, please leave a comment so i can learn and follow

please let me know where my problem is and how to fix it

i have tweaked and took some time away, no go

i honestly dont see any difference between https://forallthetime.com/DEMO/index.html

and

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

i have validated the HTML, 2 errors i couldnt follow, could this be my issue?

i have validated the CSS… a whole bunch of

undefined

seriously, I thank you!

PaulOB · January 23, 2023, 8:34am

Just open the devtools window in chrome and look at the html. The error sticks out like a sore thumb.

You 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 last closing section tag after the footer closes.

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

e.g.

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

OBXjuggler · January 23, 2023, 8:39pm

it works!

thank you!

the full footer is now there, but content is off to the left and there is a border around my media icons…

yes i have tried

i tried copying and pasting from https://forallthetime.com/DEMO/index.html CSS

the entire footer… stuck

Paul, please know i am grateful! for helping me and not making me feel
stupid

PaulOB · January 24, 2023, 8:29am

On that page you have set up a rule for all images (a big mistake) and it is that rule that interferes with the image in your footer.

You have this rule:

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

You will now have to negate the rules for the image in your footer like this:

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

You must be careful with your global rules as that defines all instances of that element and is rarely what you want. Either add a simple class (the easiest method) to the element or style it with a descendant selector that targets its current context only as in the footer.

OBXjuggler · January 24, 2023, 11:10pm

many thanks

i think i caught the problem

i set the img on line 309

thats the only img i found, i looked more than once

could this be my rule for all images?

anyways, i deleted

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

and did not use your

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

and the footer is where i want it exactly

your $0.02 please

i know i keep saying this to you… and i dont want to sound irratating… but i thank you

PaulOB · January 25, 2023, 4:05pm

It still looks broken to me.

You have this rule at line 299 in 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 */

That sets all images using that stylesheet to float:left and have a width of 50%.

You then have this css at line 265 which adds a border to all images.

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

Unless you use the code I gave those rules will still break the footer.

OBXjuggler · January 26, 2023, 5:56am

first, the code above you presented to me works!

please see

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

footer

i have been trying, puting in the time to figure this out myself

i am after the icons lined up as on other pages

i tried using display: grid and display: flex

no go

please pass on the proper code, and i ask for comments so i can learn

THANKS!!!

PaulOB · January 26, 2023, 11:04am

I don’t know why you have opted for this convoluted more advanced layout as it will only cause you more problems due to its complexity and stacking logic. Even the original author says not to use in a production site?

There is nothing wrong from the footer(apart from the fact that you have still used height!! I;m not sure how many times I can say don’t use height without sounding angry I have given you examples of why it is broken because your footer is taller than the height you gave it. Stop using height for fluid content.

Apart from that the footer is working but its the rest of the page that is broken. Did you not see the massive horizontal scrollbar on the viewport which breaks the header and footer and all the columns?

The images in the middle of the page need to be sized to fit the container and you have omitted the rule from the original that does this. (width:100% and height:auto on the images in the middle).

The original rule was global and would break the footer (as I said before a big mistake to style something globally unbless you are sure it should always be like that).

A fix would be to do this:

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

But the proper solution is to add a class to the images when you want to add a special style and use the class instead of styling all images.

OBXjuggler · January 26, 2023, 6:48pm

so sorry,

i will remove that entire HTML and CSS page

an explanation… the height continues to be a problem because i did not look thoroughly at the code.

i am embarresed to say this… i got on code pen and searched, responsive, flex and grid layouts

looking back now, that was a mistake

i take full resposnsibility for not going through that code, also, even if i did these concepts are beyond my comfort zone anyways

i am not sure what to do here. my ultimate goal is to be a freelance front end web developer.

these codepens may be innapropriate for me… i do not understand the code… THIS is why i am not finding the height problems

every page from code pen had its unique code (oubviously) and therfore its unique height code

apologies for upsetting you! please believe me… i am upset too! i have bitten off more than can chew here

whats your best advice to me?

you have been so good to me for a long time now and i truly feel bad for you repeating your self on the height problem

and any other advice i screwed up

where do i go from here? i do have access to the site point library… not sure what to do here…

please help

again, i am truly sorry for frustrating or irratating or generaly p*ssing you off

PaulOB · January 26, 2023, 8:02pm

Just take it one step at a time rather than copying some complicated layout from the internet.

You should build your own from scratch but first familiarise yourself with grid and flex. Make simple demos so that you know how the structure works. Practice is the key. No one gets it first time and no one knows it all.

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

By all means copy any demos you see but try and reverse engineer them so you understand how they work. There’s a lot to be said for not using anything you don’t understand if you are wanting to modify it.

In the end it’s just practice until you have a sound grasp of the basics.

I don’t mind as long as I know you are genuinely trying to learn. These days there’s more to know than when I first started so there is quite a steep initial learning curve.

Just keep coding

OBXjuggler · January 28, 2023, 12:56am

thats what i needed to hear!

excelent advice!

i am glad you think that way!

i have gone back to the basics of CSS grid

i appreciate your advice!

system · April 29, 2023, 7:56am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.