Printable Version of Topic

Posted by: TW Allen Dec 10 2023, 03:19 PM

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.

Posted by: Christian J Dec 11 2023, 07:31 AM

In the CSS, this is commented out:


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


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:


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




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.

Posted by: Christian J Dec 11 2023, 10:12 AM

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.

Posted by: TW Allen Dec 11 2023, 11:19 AM

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.

Posted by: TW Allen Dec 11 2023, 11:21 AM

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.

Posted by: TW Allen Dec 11 2023, 12:04 PM

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%2F%2Fallendesigns.com%2F%2Findex.html
Still no bullets.

Posted by: Christian J Dec 11 2023, 03:52 PM

Seems this is fixed now?

Posted by: Christian J Dec 11 2023, 03:59 PM

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

Posted by: TW Allen Dec 11 2023, 06:54 PM

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

Posted by: Christian J Dec 12 2023, 06:53 AM

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


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

Posted by: TW Allen Dec 12 2023, 02:51 PM

I'll give that a try.

What if this is the issue?

Posted by: Christian J Dec 12 2023, 04:04 PM

Come again?