Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
| From | Dale <dalekellytoo@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 16:08 -0400 |
| Organization | https://www.dalekelly.org/ |
| Message-ID | <10a4j0i$lmn4$1@dont-email.me> (permalink) |
| References | (10 earlier) <10a2um9$5jp1$1@dont-email.me> <10a3fo4$b62o$2@dont-email.me> <10a3oit$e6bb$1@dont-email.me> <10a40jl$fn9j$1@dont-email.me> <10a41nt$hgbu$1@dont-email.me> |
Cross-posted to 4 groups.
On 9/13/2025 11:14 AM, Jonathan N. Little wrote:
> 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.
THANK YOU !
Works Great !
https://www.dalekelly.org/
https://www.dalekelly.org/mystyle2.css
With such quick responses you seem like an expert !
For now I am going to edit one more thing. I will be comparing my two
CSS files and any styles within the index file.
My CSS has three main menu designs based on browser window size:
1) computer size, a vertical menu on the left
2) pad size, a horizontal menu on the top
3) smart phone size, a vertical menu that is centered
The (1) menu has space above it when I scroll down, leaving the <h1> behind.
Does not happen with previous CSS:
https://www.dalekelly.org/mystyle.css
https://www.dalekelly.org/indexbackup.html
THANK YOU AGAIN !
--
Mystery? -> https://www.dalekelly.org/
Back to alt.html | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll 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