CLHarrison

I've been out of pocket a bit as we are frantically packing up the house to move. It looks like it might be the end if June before I'm settled in again and have time to pick this back up. I will say again that I really appreciate all the help you have given me, it has made a huge impact and I've learned a lot from your suggestions and resource suggestions.

Thanks I will.

Here is the basis of what the setup looks like for a couple of the pages. The other pages have a single column. The split between them is what I'm concerned with. But I may be overthinking it. If I don't specifically denote two columns, I think I will only get one that will go 100% width and not be impacted by the statement that setups the two columns. The rest I more or less have figured out I think. * { box-sizing: border-box; } /* Add a background image with some padding */ .body { font-family: 'Cairo', sans-serif; padding: 30px; margin: 20px; background-image: url("images/Blue_Background.webp"); } #wrapper1 { padding-left: 360px; padding-right: 360px; padding-top: 30px; padding-bottom: 30px; } img { display: block; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; } /* Header/Blog Title */ .header { padding: 10px; font-size: 40px; text-align: center; background: white; } img { float: right; } .topnav { overflow: hidden; background-color: #0000b2; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .active { background-color: #008bff; color: white; } .topnav .icon { display: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #0033ff; color: white; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } /* Create two unequal columns that floats next to each other */ /* Left column */ .leftcolumn { float: left; width: 75%; } /* Right column */ .rightcolumn { float: left; width: 25%; padding-left: 20px; margin-bottom: 30px; } /* Add a card effect for articles */ .card { background-color: white; padding: 20px; margin-top: 20px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Footer */ .footer { padding: 40px; text-align: center; background: #ddd; margin-top: 60px; } /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; padding: 0; } </style> </head> <div id="wrapper1" <div class="body"> <div class="header"> <img src="images/TWP_Large.webp" alt="Train With a Purpose Logo" style="width:300px;height:220px;"> <h1>Train With A Purpose</h1> <p style="font-size:72%;"><i>"When in training or in practice, have specific improvement goals as the outcome".</i></p> </div> <div class="topnav" id="myTopnav"> <a href="home.html" class="active">Home</a> <a href="blogpage2.html">Head Games</a> <div class="dropdown"> <button class="dropbtn">Tutorial Musings <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="AboutThatStance.html">About That Stance</a> <a href="HandgunPresentation.html">Handgun Presentation</a> <a href="TheProperGrip.html">The Proper Grip</a> </div> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </div>

The wrapper... Here is what I did: <style> * { box-sizing: border-box; } /* Add a background image with some padding */ .body { font-family: 'Cairo', sans-serif; padding-left: 30px; background-image: url("images/Blue_Background.webp"); } #wrapper1 { padding-left: 360px; padding-right: 360px; padding-top: 30px; padding-bottom: 30px; } Then, at the portion of each page where I closes style and head, but above the header and the navbar: <div id="wrapper1" Notice there is not a > at the end. If I put that in, I get a offset container that is not correct and you can't see my background image. But I don't believe the code is correct like it is. Any idea of what I'm doing wrong? I thought maybe I had a <div> or </div> not where it needed to be but if it, I've been unable to find it. Yet the page looks and acts just like I want it to with the missing >.

Hi, I'm new to HTML and CSS. I've created 5 web pages and with the help of some on this forum I have them more or less as I want them. But I've come to realize that I should really be using a CSS stylesheet to manage them. My question is, can I create a CSS style sheet to include things like the header and navigation bar that I want to have the same on each page? I've not seen any examples of that so I'm not sure if there is a way to do it or not inside the CSS stylesheet. It would just save me time whenever I need to update the navbar menu across all pages. Thanks for any info on this.

Yep, I read the how to. Just have to take the time to attempt it. I'm a bit reluctant after all the work I've done for the 5 pages and I'm working on the 6th. But I know in the long run it's the way to go. I am a bit concerned about the fast that I've used two columns in two of the pages and just one in the other pages, not sure how that will work, or if it will even matter. But I'll figure it out eventually. Thanks again.

I meant to also mention that I really need to learn how to create an external CSS stylesheet. I can see that doing so will eventually save me a lot of work. I understand the process of linking them, but I've never attempted to do a style sheet.

Yes, clearing the cache was the first thing I did. Kind of frustrating as this is not going to fly well if it won't work on a phone. I was able to take your suggestion and use the "wrapper" with mixed results. One page works fine, another it sort of works, but the background that I wanted to stay full screen is suppressed only showing at the edges of the wrapper. I've not found out why so far. The other page was one I was just starting on for the forum and on that page using the wrapper just like I want it to. I suspect I have a <div> or </div> somewhere it shouldn't be, or have not put one somewhere it should be. I can't see anything obvious in the code but the pages are long enough that matching up all the open and close tags is a bit problematic.

So, don't do what I did which is this: /* Add a background image with some padding */ .body { font-family: 'Cairo', sans-serif; padding-left: 360px; padding-right: 360px; padding-top: 30px; padding-bottom: 30px; background-image: url("images/Blue_Background.webp"); LoL! That figures, but what you say makes sense. I'll try it. I'm using Notepad++ for almost everything at the moment. I'm considering trying Atom but not sure if it makes that big a difference. I'll check out the links you provided. Any ideas on why my phone just tells me that the content is blocked? This started after I renamed some of the pages. Thanks again for all your help. I'm not there yet but it is coming along. I figured I'd start with the free hosted from W3schools and determine if I need to get the paid level. For the forum, I've downloaded but not yet played SQL Express.

Nope, just a website. I'm doing a little refinement. For instance, the white borders you see on this forum on the left and right. I didn't put that and it has a background image. I can easily limit the width of the body, header and footer. But I've yet to figure out how to limit the width of the background image. This narrower width bugs me as I like have the real estate, but I know that with smaller displays, the narrow width that actually holds content does make sense. I'd like to keep my background image but I don't want it to be full screen either. I've got my page divided into two, uneven columns. If the content of those columns is not a great match, one is longer than the other. You can add <br> as much as needed to get them lined up, but every little change in your content means you have to realign by either adding or remove them from one side or the other. I'm wondering if there is a way to keep them so that lowest section of the each row stays aligned without having to fool with it. Next I'm going to attempt to make a forum, much like this one. It will require a database to do I think. Unfortunately I'm not really finding much other using an app from sources like WordPress to do this. I'd rather write the code and get better with the code. It will take longer but I'll be better for it. The website will also have video content but I'll likely just upload that to my YouTube account and then embed it. Unfortunately the file size limit here makes it difficult to share. I've not stood this up yet so they are just files on my OneDrive.

Ok, I think I have a bit more figured out. The Home page is working like want, and looks the way I want. My #2 and #3 pages are also looking good. All three pass the code validator without issues. I think I may have figured out what to do so that the images resolve correctly on smaller screens, but I am not sure. My process when updating the pages is to make a copy of page that works correctly, the replace pictures and written content. Then rename the old page, and finally rename the updated page to the same name the original had. But this seems to break something. At least on my phone. I keep getting a message stating "content" links are blocked -- It may have been moved, edited or deleted - ERR_FILE_NOT_FOUND. I also have noticed that icon displayed on the files now looks different on those pages I have renamed. I've attempted to google this but so far no luck.

I compared and example of a how the horizontal menu work against what I had got the menu to work. But that made something else not work. I have it set to create two, uneven columns. /* Create two unequal columns that floats next to each other */ /* Left column */ .leftcolumn { float: left; width: 75%; } /* Right column */ .rightcolumn { float: left; width: 25%; padding-left: 20px; margin-bottom: 30px; } Above that is the setting for the header, and just under that is the float for an image in the header: * Header/Blog Title */ .header { padding: 20px; font-size: 40px; text-align: center; background: white; margin-top: 20px; margin-left: 20px; margin-right: 20px; margin-bottom: 20px; } img { float: right; } The columns are no longer working, there is a single, page width column. After a bit of trial and error, I found that if I remove the img { float: right' } I get the columns back but the horizontal menu is hosed again. I apparently have a basic lack of understanding how seemingly unrelated elements are impacting each other.

I have everything working now except for the horizontal navigation bar. Two of the three code validators are showing everything is good, the one still doesn't like the carriage return. The links show up for the navigation bar, but the bar itself is not there. There is one that has a drop down with three links under it, and those links also appear below the initial links. I have tried changing up and using a different method to do this but I'm getting the same results. I also need for the the navigation bar to be responsive like the text so that it behaves properly on tablets and phones. I can tell you that I've made so many changes, (most them really needed to be made) based on the help I have gotten from here, that I will rebuild the other pages and not use them as they are. They don't even vaguely resemble the home page anymore, even though they all look the way I want them to in a web browser. I just started trying to learn HTML and CSS about six weeks ago so I'm still in the infant stages, but I'm slowly gaining some better understanding. While the free tutorials here are great, I either haven't found it, or there is not really anything on a specific order for lining out code, and that is what has been my biggest hurdle to figure out. I just need to keep with it. I've got several other things on my plate, including putting my house on the market, that is take up a lot of my spare time so I'm not able to spend as many hours on this as I'd like.

Actually it works without the brackets and won't work with them. Part of my confusion.

Continuing with the unending errors, I found that the curly brackets around the parse error were indeed set wrong. I set them to what I assume is correct as an open and after the statement, a close. That made the error go away but the navigation bar changed colors. The bar still works. But when I navigated to a different page, then navigated back, the bar was the correct color. I closed the page and opened it again, and it was again the wrong color. Weird. { background-color: white; } If I remove the lower curly bracket or turn it around, the color is correct, but I get the parse error. wrong color Correct color Not sure just where the "white" comes in.

I just figured that out. However now I have different issue that wasn't showing up before. I didn't even have <body></body> in the page, yet I was getting an error from the code validator that <style> couldn't be a child element of <body>. What I do have is this: body { background-image: url("images/Blue_Background.webp"); img { max-width: 100%; } </style> The only place that body appears on the page. The code validator doesn't like it. This only showed up after I fixed the issue with having <style> as a child of <div>. Without the background image the page doesn't look nearly as nice. I see how to apply the background image to other things, but using it like I have is the only way I've found to have the image display on the entire page like I want. I'm also getting parse errors on adding a color: HMM, after I cut and pasted this in, I can't get under it to finish. But the error appears to be due to a carriage return. Not sure what to do about that. Error: CSS: Parse Error. At line 104, column 26 d-color: white;↩}↩ul {↩ list- Error: CSS: Parse Error. At line 105, column 2 color: white;↩}↩ul {↩ list-s

Removing <style> from the equation does remove the error. It also removes the header that I had. So found a place to put <style> to get the header back, but my horizontal menu is now missing. So I got that back, but the Home is not hosed up. The code validator keeps telling me "No space in "home.html". Well there is no space there, not even a hidden one and on the menu it instead of just displaying Home, it displays, "home.html">Home. I didn't change this line at all and am not sure why it suddenly displays so oddly. But I'm getting closer. Wolflord, I haver no idea, I'm a newbie to all this and struggling just to get a few pages ready for prime time.

That is what I was slowly coming to realize. However, when I removed <style> from where it exists, it completely hoses up the way the page is presented. I'll need to find just where to put it back. Also, I had something of an epiphany and realized I had a lot of unnecessary stuff in the page and cleaned up a bunch of it. So I am slowly gaining on it. I still am unable to find a way to get the pictures to display on tablets and phones however. I thought using on .webp image format was going to do the trick but it made no difference at all. I also tried to use (CSS) RWD and it still no luck.

Well you may have nailed it. There are 13 <div.. and only 12 </div.. An opening <div is just a few lines above the <style> in question at line 88. The opening <div is for <div class="header"> and the next couple of lines put in the log graphics and a title. The the <style> is there and that is followed by part of the code that puts in a small set of dropdown menus. Just the part that sets up the behavior and the look, but not the links and the names of the links There is a </style>before that portion and then at the end of the portion that puts in the links and names, there is a </div>. I suspect that may be where my issue is, but I'm not sure. Since it's about 80 lines, I'm hesitant to post all of that but here is the beginning and then end of it. <div class="header"> <img src="images/TWP_Large.webp" alt="Train With a Purpose Logo" style="width:300px;height:220px;"> <h2>Train With A Purpose</h2> <p style="font-size:65%;"><i>"When in training or in practice, have specific improvement goals as the outcome".</i></p> <style> _______________________________________________________________________ </style> <ul> <li><a href="BlogMainPage.html">Home</a></li> <li><a href="blogpage2.html">Page 2</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Tutorial Musings</a> <div class="dropdown-content"> <a href="AboutThatStance.html">About That Stance</a> <a href="HandgunPresentation.html">Handgun Presentation</a> <a href="TheProperGrip.html">The Proper Grip</a> </div> I'm guessing that the <style> either has to be completely in between the starting and ending <div> or that it needs to be the other way around with the starting and ending <div> being inside the starting and ending <style>. But if so, I still need to find the missing </div> or the extra <div> since I don't think correcting the style -div problem I've outlined here will impact that. Thank you again for you help and patience with me.

Thank so much for the help. I've got pretty all that cleared up still have one oddity. Element “style” not allowed as child of element “div” in this context. (Suppressing further errors from this subtree.) From line 93, column 1 to line 93, column 7 Code Extract: </i></p>↩<style>↩ul { If I remove <style> it messes up the page badly. Everything is displaying the way it on a full-sized monitor. This is the only error three different code validators are finding at this point. I tried to add </div> to close above this line but it just makes a different mess. Now, if I attempt to open the page on my phone, I get a message say that "content links are blocked". I'm not sure what this is referring to. I also attempted to use the style="max-width:100%; height:auto; in the line with the images but the images are then blow way up and rather than my formatted two columns I have a single column. It may look different on my phone, once I manage to figure out the previous issue I mentioned.

I have now cleared all but two errors: Element “head” is missing a required instance of child element “title”. From line 90, column 1 to line 90, column 20 Code Extract: </style>↩<div class="header">↩ <i and Element “style” not allowed as child of element “div” in this context. (Suppressing further errors from this subtree.) From line 94, column 1 to line 94, column 7 Code Extract: .</i></p><style>↩ul { Here are the lines the errors are referring to: <div class="header"> <img src="images/TWP_Large.webp" alt="Train With a Purpose Logo" style="width:300px;height:220px;"> <h2>Train With A Purpose</h2> <p style="font-size:65%;"><i>"When in training or in practice, have specific improvement goals as the outcome".</i></p> <style> I'm not sure, but the top one seems to be extracting "head" out of header. If I remove the entire line, the page doesn't display properly at all. Is this not really an error but just something the code validator is picking up erroneously? The second one has me baffled. If I remove the <style> that's claiming is an error, the whole page is messed up. It may be something I've done, not having something in the right place, something out of order or something is missing. But without it, this is not going to work unless I can find it. I see where it says that "style is not allowed as a child element of div in this context". I just have no idea what to do about it. And now that I have rectified all of the other errors, I can't even open the page with my phone anymore, LoL!

I ran me code through the both code validators. I was able to rectify a number of the "errors" that were pointed out. However, the "Tidy" website's validator completely removed the page formatting and everything was in a single, full width vertical column. In addition, when I removed a specific <style> about halfway down the page, much of the page no longer displayed and what was displayed, didn't display correctly. Yet both of the code validator and a third one I tried all state that it's an error. I don't doubt that it is, but with the way I did the page, it won't work without it. So far, despite cleaning up about two dozen errors, the pictures still do not display properly on a phone or tablet but will display just fine on a PC screen. The adaptive resolution is working as expected though. I think using .webp image format probably decreases bandwidth utilization but it's not helping any resizing the images so that they will display. I am going to have to figure out another solution that just using .webp. Thanks again for responding to me questions. I'm slowly learning.....

Thank you both for your feedback. I really appreciate it. I'll work on this when I get home tonight and see if can resolve my issues. The code validator sounds like it could be exceedingly helpful for a newbie like me as well.

Here is the code down to the line I pasted in earlier. <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } /* Add a gray background color with some padding */ body { font-family: Arial; padding: 40px; background: #f1f1f1; } /* Header/Blog Title */ .header { padding: 30px; font-size: 40px; text-align: center; background: white; } img { float: right; } /* Create two unequal columns that floats next to each other */ /* Left column */ .leftcolumn { float: left; width: 75%; } /* Right column */ .rightcolumn { float: left; width: 25%; padding-left: 20px; } /* Fake image */ .fakeimg { background-color: #aaa; width: 100%; padding: 20px; } /* Add a card effect for articles */ .card { background-color: white; padding: 20px; margin-top: 20px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Footer */ .footer { padding: 40px; text-align: center; background: #ddd; margin-top: 20px; } /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; padding: 0; } } body { background-image: url("images/Blue_Background.jpg"); </style> <style> img { width: auto ; max-width: 100% ; height: auto ; } </style> <picture> <Source meida="(min-width: 300px)" srcset="images/TWP Large.webp"> <source media </head> <body> <div> <div class="header"> <img src="images/TWP Large.webp" alt="Train With a Purpose Logo" style="width:300px;height:220px;"> <h2>Train With A Purpose</h2> <p style="font-size:65%;"><i>"When in training or in practice, have specific improvement goals as the outcome".</i></p> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #0000b2; } background-color:white; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #38444d; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; font-size:20px; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: blue; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #b4b4b4;} .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <ul> <li><a href="Blog Main Page Setup-ITDIR.html">Home</a></li> <li><a href="blog page 2.html">Page 2</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Tutorial Musings</a> <div class="dropdown-content"> <a href="About That Stance.html">About That Stance</a> <a href="Handgun Presentation.html">Handgun Presentation</a> <a href="The Proper Grip.html">The Proper Grip</a> </div> </li> </ul> </style> </div> <div class="row"> <div class="leftcolumn"> <div class="card"> <h2>IF You Are New to Shooting, Start Here</h2> <h5>March, 2022</h5> <img src="images/shooting_dummy.webp" alt="Shooting Dummy" style="height:300px;width:900px; hspace=9 vspace=7">

Ok, I'm afraid that didn't help.