Noobie help for CSS Options

[TW Allen]

I'm a noobie and trying my best to grasp CSS. I get the purpose of CSS and have "bought into" the concept. I'm just struggling with a few specific issues. I had some help on the HTML forums, but I'm still having difficulty.

In allendesigns.com/index.html, I can't get the section under "types of projects" to align left and have an unordered list with bullets. I believe the problem with the bullets has something to do with the help I got with #mainmenu in my css file (allendesigns.com/css/allen.css but I'm not sure. I got it to align left, but still no bullets. I DO want everything else to be centered.

allendesigns.com/residential_remodel_projects.html looks fine both on my monitor and my phone, even though the "types of projects" is centered. The appearance on my phone is the most important thing to me as Google Ads says 90% of my clicks come from mobile devices.

However, when I go to a specific project, such as allendesigns.com/projects/22310/22310.html, the image size (600px) pushes all of the text to the left even though the images are the same (600px) size as the one on allendesigns.com/residential_remodel_projects.html. They are all centered on my monitor, but not on my mobile device.

What am I missing?

Thanks in advance.

This post has been edited by TW Allen: Dec 10 2023, 03:21 PM

[Christian J]

In allendesigns.com/index.html, I can't get the section under "types of projects" to align left

In the CSS, this is commented out:

CODE

.left {
    /* text-align:left; */
}

--if you remove the comment, it will take effect.

and have an unordered list with bullets.

The HTML shows OL elements (ordered list), use UL for unordered lists. The bullets may not appear because the OL (UL) and LI padding is reset in the CSS:

CODE

html,body,div,p,h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dt,dd,form,fieldset,caption,legend,
table,tr,td,th,address,blockquote,img {
    margin:0;
    padding:0;
}

They OL (UL) elements are also nested incorrectly, each nested OL (UL) needs to be in an LI element:

CODE

<ol>
<li>foo
    <ol>
    <li>bar</li>
    </ol>
</li>
</ol>

allendesigns.com/residential_remodel_projects.html looks fine both on my monitor and my phone, even though the "types of projects" is centered. The appearance on my phone is the most important thing to me as Google Ads says 90% of my clicks come from mobile devices.

However, when I go to a specific project, such as allendesigns.com/projects/22310/22310.html, the image size (600px) pushes all of the text to the left even though the images are the same (600px) size as the one on allendesigns.com/residential_remodel_projects.html. They are all centered on my monitor, but not on my mobile device.

Using my desktop browser's small screen simulation, it seems the content is indeed centered within the BODY element; but for some reason the BODY element does not expand to fill the entire viewport, so the the larger images spill out of BODY.

[Christian J]

for some reason the BODY element does not expand to fill the entire viewport, so the the larger images spill out of BODY.

Perhaps a workaround could be to limit those images to say 100% width, so that they can't spill out of the BODY element, but I haven't tested.

[TW Allen]

In allendesigns.com/index.html, I can't get the section under "types of projects" to align left

In the CSS, this is commented out:

CODE

.left {
    /* text-align:left; */
}

--if you remove the comment, it will take effect.

and have an unordered list with bullets.

The HTML shows OL elements (ordered list), use UL for unordered lists. The bullets may not appear because the OL (UL) and LI padding is reset in the CSS:

CODE

html,body,div,p,h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dt,dd,form,fieldset,caption,legend,
table,tr,td,th,address,blockquote,img {
    margin:0;
    padding:0;
}

They OL (UL) elements are also nested incorrectly, each nested OL (UL) needs to be in an LI element:

CODE

<ol>
<li>foo
    <ol>
    <li>bar</li>
    </ol>
</li>
</ol>

I changed to OL to see if that made a difference (it didn't).
I commented out the reset on ol, ul and li in the css file. That fixed the problem when I open the local html file with a browser, but the bullets don't appear when I publish. I opened with Chrome and Edge with the same results. It's not a cache problem because, when I make other edits, they appear quickly.

[TW Allen]

for some reason the BODY element does not expand to fill the entire viewport, so the the larger images spill out of BODY.

Perhaps a workaround could be to limit those images to say 100% width, so that they can't spill out of the BODY element, but I haven't tested.

Do I do that in the css file or the html file? In the past, I got errors when I run the page through the W3C Markup Validation Service by specifying the image size in anything but pixels.

[TW Allen]

for some reason the BODY element does not expand to fill the entire viewport, so the the larger images spill out of BODY.

Perhaps a workaround could be to limit those images to say 100% width, so that they can't spill out of the BODY element, but I haven't tested.

Do I do that in the css file or the html file? In the past, I got errors when I run the page through the W3C Markup Validation Service by specifying the image size in anything but pixels.

I edited the html file as follows:
<p><img src="22124-3d-view.jpg" alt="22124 3D View" width="95%"></p>
This fixed the problem, but, as I suspected, I got an error with the html checker (W3):
https://validator.w3.org/nu/?doc=https%3A%2...2F%2Findex.html
Still no bullets.

[Christian J]

I commented out the reset on ol, ul and li in the css file. That fixed the problem when I open the local html file with a browser, but the bullets don't appear when I publish. I opened with Chrome and Edge with the same results. It's not a cache problem because, when I make other edits, they appear quickly.

Seems this is fixed now?

[Christian J]

for some reason the BODY element does not expand to fill the entire viewport, so the the larger images spill out of BODY.

Perhaps a workaround could be to limit those images to say 100% width, so that they can't spill out of the BODY element, but I haven't tested.

Do I do that in the css file or the html file? In the past, I got errors when I run the page through the W3C Markup Validation Service by specifying the image size in anything but pixels.

Seems HTML5 does not allow percent values for WIDTH (unlike HTML4.01), so that leaves CSS. What you have now seems OK to me:

CODE

img {
    max-width:95%;
    height:auto;
}

[TW Allen]

[quote name='Christian J' date='Dec 11 2023, 03:52 PM' post='146788']
[quote name='TW Allen' post='146785' date='Dec 11 2023, 05:19 PM']
I commented out the reset on ol, ul and li in the css file. That fixed the problem when I open the local html file with a browser, but the bullets don't appear when I publish. I opened with Chrome and Edge with the same results. It's not a cache problem because, when I make other edits, they appear quickly.
[/quote]
Seems this is fixed now?

Yes. Although I'm not sure why/how. I put the images and descriptions within a section calling a tag .h2-center in the css file:

.h2-center {
text-align: center;
margin: auto;
width:95%;
}

What is frustrating for me, is that it looks right on my local machine, but not on a browser after I've uploaded it to my site. Some of the edits work right away. I've tried clearing cache. For my phone, I've had to restart it to get the results. Certainly a "reload" isn't doing it for me, particularly with this kind of formatting. If I fix spelling, etc., it shows up right away. Frustrating.

[Christian J]

If I fix spelling, etc., it shows up right away. Frustrating.

Do you mean that changes to the HTML files show up right away, but not changes to the CSS files? One trick that may work is to add a querystring to the CSS file's URL (not its file name):

CODE

<link rel="stylesheet" href="css/allen.css?v=1" media="screen">

and then change the querystring value in the HTML every time changes have been made to the CSS file.

[TW Allen]

If I fix spelling, etc., it shows up right away. Frustrating.

Do you mean that changes to the HTML files show up right away, but not changes to the CSS files? One trick that may work is to add a querystring to the CSS file's URL (not its file name):

CODE

<link rel="stylesheet" href="css/allen.css?v=1" media="screen">

and then change the querystring value in the HTML every time changes have been made to the CSS file.

I'll give that a try.

What if this is the issue?

[Christian J]

What if this is the issue?

Come again?