Recent Posts

1

HTML / CSS / Re: Handling Logos in Website Footers

« Last post by romsen on Today at 03:25:00 am »

Thank you for your answer, it helped me a lot for clarity.

2

HTML / CSS / Re: Handling Logos in Website Footers

« Last post by Jason Knight on 20 Sep 2022, 06:27:10 am »

If the logo isn't in an anchor, I would treat it as presentation. Thus, it has no business in an IMG tag and would/should be applied via the CSS.

The logo's for the social media links kind of get the same thing. They are a presentational affectation for the site names, so rather than confuse screen readers, braille readers, and the like hoping that magically ALT text does it's job.

Also multiple NAV on a page seems to make things really hard to navigate on my braille reader and non-apple screen readers.

 I'd have that code something more like

Code: [Select]

<footer>
<hr>
<address>...</address>
<ul class="socialMenu">
<li class="facebook"><a href="#"><span>Facebook</span></a></li>
<li class="instagram"><a href="#"><span>Instagram</span></a></li>
</ul>
<ul class="legal">
<li><a href="#">Privacy</a></li>
<li><a href="#">Imprint</a></li>
</ul>
</footer>
Where the HR provides a landing / subject break for legacy UA's, and the span would be absolute positioned off-screen with generated content with webfonts or SVG backgrounds used to apply the icons. None of those images qualify enough as content to be in the markup.

Fun part is you could use the span as styled tooltips on hover / focus. See what I did at the bottom of this rewrite of one of FailwindUI's templates:

https://cutcodedown.com/for_others/medium_articles/failwindUI/resalient/resalientFontIcons/resalient.fontIcons.html

3

HTML / CSS / Handling Logos in Website Footers

« Last post by romsen on 20 Sep 2022, 03:26:45 am »

Hello,

I wonder how to handle the client's logo in the page footer.

Shoud it be just an <img>, or an <img> inside a <figure> or text inside a <h2> and the logo is a background-image ?


Here is my actual code:

Code: [Select]

<footer>
  <img src=".." alt="client's logo">
  <address>...</address>
  <nav class="social-media">
   <ul>
    <li><a href="#"><img src="..." alt="Facebook"></a></li>
    <li><a href="#"><img src="..." alt="Instagram"></a></li>
   </ul>
  </nav>
  <nav class="legal">
   <ul>
    <li><a href="#">Privacy</a></li>
    <li><a href="#">Imprint</a></li>
   </ul>
  </nav>
</footer>


4

HTML / CSS / Re: Handling Subheadlines

« Last post by GrumpyYoungMan on 18 Sep 2022, 05:02:45 pm »

You could use CodePen, or paste the actual HTML code using the code tag…

5

HTML / CSS / Re: Handling Subheadlines

« Last post by coothead on 18 Sep 2022, 04:15:59 pm »

As soon as I can upload a example screenshot, I'll do.

I think Jason would really prefer that you uploaded your HMTL and included it's content.

coothead

6

HTML / CSS / Re: Handling Subheadlines

« Last post by romsen on 18 Sep 2022, 01:21:10 pm »

As soon as I can upload a example screenshot, I'll do.
But you are right, I guess "subheadline" is the wrong term to describe, what I mean.

7

HTML / CSS / Re: Handling Subheadlines

« Last post by Jason Knight on 17 Sep 2022, 02:06:26 pm »

I think I need to see actual content for this, as I have more questions than answers. What makes the "subheading" a paragraph? If it's a SUB heading, why is it before the actual heading? Typically for logical document order the actual heading, the one you put into a H2, would be before any "sub heading". How is it a sub-heading or sub-headline if it's BEFORE the actual one?

8

HTML / CSS / Handling Subheadlines

« Last post by romsen on 17 Sep 2022, 12:17:42 pm »

Hello,

I ask myself how to handle subheadlines in Sections.
Do I use a <span> inside the <h2> or do I use a separate <p> before the <h2>?

Code: [Select]

<section>
  <h2><span>Subheadline</span> Headline</h2>
  <p>...</p>
</section>


Code: [Select]

<section>
  <p class="subhead">Subheadline</p>
  <h2>Headline</h2>
  <p>...</p>
</section>


9

Websites / Re: Site Review

« Last post by AndrewTraub on 29 Aug 2022, 06:06:04 pm »

Thanks!

10

Websites / Re: Site Review

« Last post by Jason Knight on 26 Aug 2022, 12:04:05 pm »

I could use help on determining why the "Get Directions" button at the bottom seems to have an unequal top and bottom.

See how your icon is correctly centered? It's 2EM tall. Your line-height is only 1.5em.

Vertical-align:middle on the parent container might fix it, though often the best solution is to just set the line-height of the parent the same as the icon size, with the icon set to 1em line-height.

Assuming:

Code: [Select]

<a class="_icon_directions featured" href="//maps.google.com/?daddr=8701%20Shoal%20Creek%20Blvd%20Austin%20TX" target="_blank" style=""> Get Directions</a>
I would do

Code: [Select]

._icon_directions.featured {
  line-height:2em;
}

.icon_directions.featured:before {
  font-size:2em;
  line-height:1em;
  vertical-align:top;
}

Just because vertical-align:middle is such unreliable crap. I'd also suggest ditching the 16px padding for 1rem. Remember, mixing and matching em fonts with px anything is just asking for the page to break, and of course using PX at all is an epic /FAIL/ at accessibility.