Jump to content

CLHarrison

Members
  • Posts

    27
  • Joined

  • Last visited

  • Days Won

    1

CLHarrison last won the day on May 9 2022

CLHarrison had the most liked content!

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

CLHarrison's Achievements

Newbie

Newbie (1/7)

2

Reputation

  1. 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.
  2. 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>
  3. 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 >.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. Actually it works without the brackets and won't work with them. Part of my confusion.
  14. 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.
×
×
  • Create New...