CLHarrison Posted May 3, 2022 Author Share Posted May 3, 2022 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 3, 2022 Share Posted May 3, 2022 Can't help! All I got here is missing closing braces for body selector and missing selector with braces and properties? If that's how you currently have it! Then it's no wonder it doesn't work. If you have style elements scattered within the body that is another problem caused by you placing these within the body, when you have been shown to place these in a single <style>...</style> element within the <head>...</head> or stylesheet file that is linked to. Link to comment Share on other sites More sharing options...
WolfLord Skywalker Posted May 3, 2022 Share Posted May 3, 2022 Perhaps you should omit body altogether I.e <p style="background-image: url('img_girl.jpg');"> If you want the correct url go to the search bar, search for Blue background.webp, copy the filepath and place it in place of img_girl.jpg Link to comment Share on other sites More sharing options...
WolfLord Skywalker Posted May 3, 2022 Share Posted May 3, 2022 Perhaps you should omit body altogether I.e <p style="background-image: url('img_girl.jpg');"> If you want the correct url go to the search bar, search for Blue background.webp, copy the filepath and place it in place of img_girl.jpg Link to comment Share on other sites More sharing options...
WolfLord Skywalker Posted May 3, 2022 Share Posted May 3, 2022 Or just replace <body> with this body {background-color: coral;} Link to comment Share on other sites More sharing options...
CLHarrison Posted May 5, 2022 Author Share Posted May 5, 2022 On 5/3/2022 at 1:42 PM, dsonesuk said: Can't help! All I got here is missing closing braces for body selector and missing selector with braces and properties? If that's how you currently have it! Then it's no wonder it doesn't work. If you have style elements scattered within the body that is another problem caused by you placing these within the body, when you have been shown to place these in a single <style>...</style> element within the <head>...</head> or stylesheet file that is linked to. Actually it works without the brackets and won't work with them. Part of my confusion. Link to comment Share on other sites More sharing options...
CLHarrison Posted May 5, 2022 Author Share Posted May 5, 2022 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 5, 2022 Share Posted May 5, 2022 Then its wrong! must be using braces and styling properties from further on. Link to comment Share on other sites More sharing options...
CLHarrison Posted May 5, 2022 Author Share Posted May 5, 2022 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. Link to comment Share on other sites More sharing options...
CLHarrison Posted May 5, 2022 Author Share Posted May 5, 2022 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. Link to comment Share on other sites More sharing options...
WolfLord Skywalker Posted May 6, 2022 Share Posted May 6, 2022 Is it like an app ur making Link to comment Share on other sites More sharing options...
CLHarrison Posted May 6, 2022 Author Share Posted May 6, 2022 53 minutes ago, WolfLord Skywalker said: Is it like an app ur making 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. Link to comment Share on other sites More sharing options...
WolfLord Skywalker Posted May 7, 2022 Share Posted May 7, 2022 12 hours ago, CLHarrison said: 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. I think the thing to do would be to specify the width directly as shown here <h2>HTML Image</h2> <img src="pic_trulli.jpg" alt="Trulli" width="500" height="333"> For alignment, I strongly advise not using word or wordpad, as it will alter the code. If the <br> doesn't help I'm not sure what will but I'll keep looking. As for the forum, php and mysql is a great option. I'm obsessed with them. However, w3schools only provides a one-way chat system. For the full tutorial, I hope these help: https://dev.to/bhupendra1011/build-a-chat-application-in-javascript-194p https://css-tricks.com/jquery-php-chat/ Link to comment Share on other sites More sharing options...
dsonesuk Posted May 7, 2022 Share Posted May 7, 2022 (edited) My experience is that you should never mess with html or body element widths, they rely on each other for scrolling and the body is used for applying fullwidth background image or color, also menu navigation, body content and footer. I find leaving the body as is and creating a inner div so you can adjust the width to your needs and center much better. <body> <div id="wrapper"> </div> </body> Never use br tag for alignment, br tags adust to font size, use container elements with appropriate matching padding and margins. Inline width and height of images (img) is mainly used to match the size of parent container so it does not jump in size from original small image to larger parent container size. CSS max-width: 100%; height: auto; or width: 100%; height: auto; are mainly used for images to total width of parent and adjust height proportionately. Media queries adjust column widths 4 to 1 depending on device width, and can adjust background image sizes too. Edited May 7, 2022 by dsonesuk Link to comment Share on other sites More sharing options...
WolfLord Skywalker Posted May 7, 2022 Share Posted May 7, 2022 That's good👍. It'll also help Link to comment Share on other sites More sharing options...
CLHarrison Posted May 9, 2022 Author Share Posted May 9, 2022 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. 1 Link to comment Share on other sites More sharing options...
WolfLord Skywalker Posted May 9, 2022 Share Posted May 9, 2022 Ok cool. Hope atom works out. As for the phone thing, I've tries it too and it's really annoying. Phone's can't process filepaths, no matter how specific you are. You have to work with pc's. Again I wish you good luck with atom and css Link to comment Share on other sites More sharing options...
dsonesuk Posted May 9, 2022 Share Posted May 9, 2022 I suppose you have cleared cache or history? Google don't like duplicate content so if has two pages with same content that could be the reason. There used to be add-on which would check every link on the page and give traffic light indication on if they are correct or not. Link to comment Share on other sites More sharing options...
CLHarrison Posted May 9, 2022 Author Share Posted May 9, 2022 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. Link to comment Share on other sites More sharing options...
CLHarrison Posted May 9, 2022 Author Share Posted May 9, 2022 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 9, 2022 Share Posted May 9, 2022 Then that means you haven't used normalize.css. Most browsers use different margins and paddings etc compared to others for elements, normalize.css set's elements styling to be the same. Also make sure you use recommended meta tag settings for viewport. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 10, 2022 Share Posted May 10, 2022 https://www.w3schools.com/css/css_howto.asp Link to comment Share on other sites More sharing options...
CLHarrison Posted May 10, 2022 Author Share Posted May 10, 2022 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. Link to comment Share on other sites More sharing options...
CLHarrison Posted May 11, 2022 Author Share Posted May 11, 2022 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 >. Link to comment Share on other sites More sharing options...
WolfLord Skywalker Posted May 12, 2022 Share Posted May 12, 2022 20 hours ago, CLHarrison said: 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 >. So, I think you should link each part of the page to each parameter of css. For example the way HTML has <h1>, <h2>, and <p> (different parameters), you can also link multiple divs (I hope my English isnt too complicated). For example scrap '>' and do: <!DOCTYPE html> <html> <head> <style> div.ex1 { width: 500px; margin: auto; border: 3px solid #73AD21; } div.ex2 { max-width: 500px; margin: auto; border: 3px solid #73AD21; } </style> </head> <body> <h2>CSS Max-width</h2> <div class="ex1">This div element has width: 500px;</div> <br> <div class="ex2">This div element has max-width: 500px;</div> <p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference between the two divs!</p> </body> </html> The div ex1 specifies the particular part of html to act on Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now