![]() |
![]() ![]() |
![]() |
TW Allen |
![]()
Post
#1
|
Member ![]() ![]() ![]() Group: Members Posts: 42 Joined: 12-April 21 Member No.: 27,890 ![]() |
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 |
![]()
Post
#2
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 ![]() |
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. QUOTE 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> QUOTE 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 |
![]()
Post
#3
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 ![]() |
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 |
![]()
Post
#4
|
Member ![]() ![]() ![]() Group: Members Posts: 42 Joined: 12-April 21 Member No.: 27,890 ![]() |
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. QUOTE 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 |
![]()
Post
#5
|
Member ![]() ![]() ![]() Group: Members Posts: 42 Joined: 12-April 21 Member No.: 27,890 ![]() |
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 |
![]()
Post
#6
|
Member ![]() ![]() ![]() Group: Members Posts: 42 Joined: 12-April 21 Member No.: 27,890 ![]() |
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 |
![]()
Post
#7
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 ![]() |
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 |
![]()
Post
#8
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 ![]() |
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 |
![]()
Post
#9
|
Member ![]() ![]() ![]() Group: Members Posts: 42 Joined: 12-April 21 Member No.: 27,890 ![]() |
[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 |
![]()
Post
#10
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 ![]() |
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 |
![]()
Post
#11
|
Member ![]() ![]() ![]() Group: Members Posts: 42 Joined: 12-April 21 Member No.: 27,890 ![]() |
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 |
![]()
Post
#12
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 ![]() |
|
![]() ![]() |
![]() |
Lo-Fi Version | Time is now: 27th April 2024 - 08:47 AM |