Re: Chrome on Windows 10 error ?

From	"Jonathan N. Little" <lws4art@gmail.com>
Newsgroups	alt.html, comp.infosystems.www.authoring.html, comp.infosystems.www.authoring.stylesheets, misc.phone.mobile.iphone
Subject	Re: Chrome on Windows 10 error ?
Date	2025-09-13 11:14 -0400
Organization	LITTLE WORKS STUDIO
Message-ID	<10a41nt$hgbu$1@dont-email.me> (permalink)
References	(9 earlier) <10a2f60$h7d$1@dont-email.me> <10a2um9$5jp1$1@dont-email.me> <10a3fo4$b62o$2@dont-email.me> <10a3oit$e6bb$1@dont-email.me> <10a40jl$fn9j$1@dont-email.me>

Cross-posted to 4 groups.

Show all headers | View raw

Dale wrote:
> On 9/13/2025 8:37 AM, Jonathan N. Little wrote:
>> Dale wrote:
>>>
>>> Couldn't get some headers and lines centered.
>>
>> If you are talking about the H3 headers then just add CSS rule:
>>
>> h3 { text-align: center; }
>>
>>> They were partially under the main menu too. Just removed those for
>>> now.
>>
>> BTW I would put all that stuff withing MAIN
>>
>> Not sure to which you are referring to.
>>
>>>
>>> The horizontal list of social media icons was partially below the main
>>> menu too. Will have to learn how to center these. Just removed those for
>>> now.
>>
>> I would suggest just using a list and giving it a class "social". Also
>> you don't need to tell people to click on social media icons, Everyone
>> knows to do that now ;-)
>>
>> <!-- Start of Social Icons -->
>> <ul class="social">
>>    <li>
>>      <a href="https://www.facebook.com/dalekellytoo/">
>>        <img src="https://www.dalekelly.org/images/facebook_icon32.jpg"
>> alt="facebook" width="32" height="32">
>>      </a>
>>    </li>
>>    <li>
>>      <a href="https://www.instagram.com/dalekellytoo/">
>>        <img src="https://www.dalekelly.org/images/Instagram_Icon32.png"
>> alt="instagram" width="32" height="32">
>>      </a>
>>    </li>
>>    <li>
>>      <a href="https://www.twitter.com/@dalekellytoo/">
>>        <img src="https://www.dalekelly.org/images/twitter_icon32.jpg"
>> alt="twitter" width="32" height="32">
>>      </a>
>>    </li>
>>    <li>
>>      <a href="https://www.pinterest.com/dalekellytoo/">
>>        <img src="https://www.dalekelly.org/images/pinterest.png"
>> alt="pinterest" width="32" height="32">
>>      </a>
>>    </li>
>>    <li>
>>      <a href="https://www.youtube.com/@dalekellytoo">
>>        <img src="https://www.dalekelly.org/images/youtube_icon32.png"
>> alt="youtube" width="32" height="32">
>>      </a>
>>    </li>
>>    <li>
>>      <a href="https://linkedin.com/in/dalekellytoo">
>>        <img src="https://www.dalekelly.org/images/linkedin_icon32.jpg"
>> alt="linkedin" width="32" height="32">
>>      </a>
>>    </li>
>>    <li>
>>      <a href="https://github.com/dalekellytoo">
>>        <img src="https://www.dalekelly.org/images/github_icon32.jpg"
>> alt="github" width="32" height="32">
>>      </a>
>>    </li>
>>    <li>
>>      <a href="https://www.tiktok.com/@dalekellytoo">
>>        <img src="https://www.dalekelly.org/TikTok.jpg" alt="TikTok"
>> width="32" height="32">
>>      </a>
>>    </li>
>>    <li>
>>      <a href="https://www.reddit.com/user/dalekellytoo/">
>>        <img src="https://www.dalekelly.org/Reddit.jpg" alt="Reddit"
>> width="32" height="32"></a>
>>    </li>
>>    <li>
>>      <a href="mailto:dale@dalekelly.org">
>>        <img src="https://www.dalekelly.org/images/email_icon_32.jpg"
>> alt="email" width="32" height="32">
>>      </a>
>>    </li>
>> </ul>
>> <!-- End Social Icons -->
>>
>>
>> Then just had this one rule into your CSS:
>>
>> .social {
>>    list-style: none;
>>    display: flex;
>>    gap: 5px;
>> }
>>
>>
>>>
>>> For the rest of the pages I could use the old CSS file ...
>>
>>
> 
> WOW ! WOW ! WOW !
> 
> Thank You for the detailed suggestion!
> 
> I followed it.
> 
> The headers are now all centered.
> 
> https://www.dalekelly.org/
> 
> But the new social media icon line isn't yet centered.
> 
> This is added to CSS:
> 
> .social {
>   list-style: none;
>   display: flex;
>   gap: 5px;
> }
> 
> https://www.dalekelly.org/mystyle2.css
> 
> Happening same as with old codes.
> 
> https://www.dalekelly.org/indexbackup.html
> 
> https://www.dalekelly.org/mystyle.css
> 
> 
> THANK YOU AGAIN !
> 
> 

Very simple, just add "justify-content: center;" to the flex container,
i.e.:

.social {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 5px;
}

To learn more see:

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container>

or

<https://css-tricks.com/snippets/css/a-guide-to-flexbox/>

With flex you can align left, right or center, or evenly space them
across the width.
-- 
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Thread

Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-10 02:56 -0400
  Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-10 02:59 -0400
  Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-10 13:28 -0400
    Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-10 16:19 -0400
      Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-10 21:08 -0400
        Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-12 12:52 -0400
          Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-12 14:21 -0400
            Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-12 14:45 -0400
              Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-12 17:35 -0400
                Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-12 18:45 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-12 20:51 -0400
                Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-13 01:15 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 06:07 -0400
                Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-13 08:37 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 10:54 -0400
                Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-13 11:14 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 16:08 -0400
                Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-13 16:45 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 18:41 -0400
                Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-13 21:40 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 22:12 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-14 18:57 -0400
                Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-14 19:43 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-14 20:43 -0400
                Re: Chrome on Windows 10 error ? Jolly Roger <jollyroger@pobox.com> - 2025-09-15 16:08 +0000
                Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-16 10:06 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 06:05 -0400

csiph-web