 I can't seem to figure out why it's not displaying in 4 columns?, Trouble Shooting |
  |
| dariank |
 Jan 12 2023, 10:52 PM
Post
#1
|
|
Group: Members Posts: 6 Joined: 12-January 23 Member No.: 28,744  |
I have added all the code and output in the photos and files attached.
This post has been edited by dariank: Jan 12 2023, 10:58 PM Attached thumbnail(s)  Attached File(s) 
styles.css ( 3.63k )
Number of downloads: 38
packages.html ( 2.63k )
Number of downloads: 35 |
  |
 
|
| pandy |
Jan 12 2023, 11:04 PM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I'm confused. What exactly is it that you think would create 4 columns?
|
|
|
|
| Jason Knight |
Jan 13 2023, 02:29 AM
Post
#3
|
|
Advanced Member Group: Members Posts: 101 Joined: 25-December 22 Member No.: 28,719 |
I think your layout concerns are related to the ... outmoded and outdated way you've written your HTML. There's a lot wrong with your markup where to be frank, you've got what's often called "DIV soup". The DIV tag is semantically neutral, it applies no meaning to what you are wrapping. Your content just so happens to have a lot of meaning that needs to be conveyed, and thus 80% or so of your DIV should be another tag.
Take your abuse of H1. Your H1 (singular) should be the (singular) headING (singular) that everything on every page in a collection of pages (like a website) is a subsection of. That's why it's frowned upon to use more than one H1, or to use it for something that doesn't describe everything on the page. This is why the clowns who put their H1 into their "hero" or "banner" section just because the text is larger know exactly two things about writing HTML.... and Jack left town. That's why your DIV soup around the first image should be an H1 with text, the image applied via CSS so you have useful text for non-visual user-agents such as screen readers, braille readers, and of course search engines. All those H1 you have should be H2 marking the start of major subsections of the page -- what H2 means. Just as H3 mark the start of subsections of the H2 preceding them, H4 mark the start of a subsection of the H3 before it, and so forth down to H6. They do not mean fonts in different weights and sizes!!! That is simply their default appearance and a basic rule of HTML? If you choose any of your tags for what they look like, you're doing it all wrong. I extend this practice to my classes and ID's because that's how HTML and CSS are supposed to work. Thus saying things like "left" or "right" in the markup is wrong. Just like saying colours is wrong. Thus why I consider mind-numbing idiocy like bootcrap and failwind to drag development practices back in time 25 years! So let's do a rewrite of the markup before we worry about getting your columns in place. First up the HEAD CODE <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" media="print,screen" > <link rel="stylesheet" href="template.screen.css" media="screen"> <title>About</title> </head><body> A lot of this will be nitpicks, one big thing won't be. For the most part I just format the code differently to make it easier to work with. Condensing down doctype/html/head and head/body and body/html to single lines makes it easier to remember that those tags MUST appear in that order and that you should never paste anything between them. I liek to group my meta and link, and I restored the preconnects and full font stack for those google fonts which are important for speed. The important change here is the addition of media targets, aka the media attribute saying what type of devices the style is applied to. 99% of the time you see a rel="stylesheet" where there's no media attribute or it's set to media="all", you're looking at the pesky 3i of web development. Ignorance, incompetence, and ineptitude. Do not blindly send style to everything! I wrote an article about this on Medium: https://medium.com/codex/media-the-html-att...se-30766bf14beb Moving on to our body contents we have the header. As I said the first bit should me a H1 with text, and the logo image applied via CSS. CODE <header id="top"> <h1><a href="./">DARIAN KROST</a></h1> <nav id="mainMenu"> <ul> <li><a href="./">Home</a></li> <li><a href="#about.html">About</a></li> <li><a href="#packages.html">Packages</a></li> <li><a href="#book.html">Book</a></li> </ul> </nav> </header> This section is a HEADER, we have a tag for that. I give it the id #top so that later on if desired we can add a <a href="#top">Back To Top</a> link. The main menu of a website is a primary navigational section, that's the NAV tag's job. It is also a list of choices in no particular order, that's UL and LI's job. Because that's what those tags MEAN. Ignore the # in the href, I added those so my live demo wouldn't try to leave the page. The next major section of the page is your main content. We have a tag for that, it's called MAIN. I would also use a wrapping DIV for #packages on the assumption that there would be other sections inside the main content. DIV are neutral, they mean nothing, and only exist as hooks to say "this might receive some sort of appearance", not what that appearance is. I call it #packages since of course its' a wrapper, that's what DIV do. CODE <main> <div class="packages"> Each of your individual sections that follows are... well, sections. They are major subsections since we've got nothing labelling what the columns are, so that's H2 depth. There is nothing being done to waste time wrapping the IMG in a DIV, and if you want them in the same column they belong in the same SECTION not as kin to them. Finally, what the blazes makes three lines of separate thoughts/information a grammatical paragraph. A tag that quite literally means one or more sentences containing a complete thought? Again, HTML tags have meanings. Structural, grammatical... that's what "semantic markup" means. If anything "semantic markup" is a sick euphemism for "using HTML properly" that came into being so as not to insult the people who can't pull their craniums out of 1997's rectum. CODE <section> <h2>FilmMakerBasic</h2> <div> Contains:<br> Videographer, Editor, 30 Second Reel, Raw Footage<br> Price:$200 </div> <img src="images/Portfolio_2.jpg" width="100" length="100" alt="Describe this image, ALT is not optional!" > </section> The ONLY reason I included the DIV was so that the image can be pushed to an even line on the bottom of each section as I'll be using flex for the columns. Grid is great for micromanaging bad markup, but flex is far superior at everything else. Especially with flex-wrap on the table. Due to post size limits I'll do the CSS in another reply. |
|
|
|
| Jason Knight |
Jan 13 2023, 02:48 AM
Post
#4
|
|
Advanced Member Group: Members Posts: 101 Joined: 25-December 22 Member No.: 28,719 |
Ok, now to actually address your "problem", let's make a layout out of this. When working in CSS for screen I always start with a reset. 90% of cross-browser issues go away if you use a good one. There are smaller resets like * { margin:0; padding:0; border:0; } but it can wreak havoc with the sizing of form elements. There are larger ones like "reset reloaded" but those bloated messes are what gives resets a bad name.
The one I use: CODE /* START RESET */ 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; } img, fieldset { border:none; } blockquote, q { quotes:none; } body *, *:after, *:before { box-sizing:border-box; } button, label, summary { cursor:pointer; } html, body { height:100%; } body, button, input, table, textarea, select { font-size:1rem; line-height:1.5; font-family:inherit; } /* END RESET */ Is in the goldilocks zone, and sets up a few things I commonly use. A big important one in there is setting html and body to 100% height, which makes children of it able to have height and behaves like min-height. Little CSS rule they don't teach you? percentage heights on elements are ignored if the parent doesn't have a height. Now, as to making this a layout, let's start out with the body and header#top CODE body { font-family:lato,arial,helvetica,sans-serif; } #top { display:flex; align-items:center; width:100%; padding:0 1rem; } Set the font once, inherits into the reset. #top gets flex so we can position stuff easily. align-items adjust things on the axis opposite the direction of flex, lining up the menu and h1 vertically. The H1: CODE h1 { flex-grow:1; } h1 a { display:block; width:2.5em; height:2.5em; line-height:2.5em; position:relative; text-indent:-999em; text-decoration:none; /* use a SVG here if you have one */ background:url(images/logo.png) center left no-repeat; background-size:contain; } No classes or ID's needed as there would/should only ever be one h1. Setting it to flex-grow will make the H1 expand to push the menu over to the right. Wasn't sure if your left aligned menu was intentional or not. You want it left, remove the width:100% on #top and the flex-grow on H1. The text is hidden by sliding it off screen with text-indent, and then the image is applied and scaled. Notice I am doing EVERYTHING in EM or REM. This is because PX doesn't scale to user preference and is the least accessible measurement. Because EM or REM could be any size, this is why we've started to prefer vector images like SVG over rasters like PNG and JPG. They can be scaled to any size without getting blurry or pixellated. For the menu: CODE #mainMenu { flex-grow:0; } #mainMenu li { display:inline; list-style:none; margin-left:1rem; } #mainMenu li a { display:inline-block; text-decoration:none; font-size:1.25rem; color:#567; transition:color 0.3s, scale 0.3s; } #mainMenu li a:focus, #mainMenu li a:hover { color:#000; scale:1.2; } flex-grow:0 so it doesn't expand to fill empty space. The LI gets set inline moving them all to one line, and a left margin to push them apart, and of course list-style turning off the bullets. I specific "li a" for the anchors since when/if mobile menus get added you might have other anchors inside #mainMenu. They get inline-block so we can apply padding or transforms to it, turn off the underscore, bump the font size, and from there it's just colouration. I went the extra mile and added enlarging hovers, an effect I've become quite font of. FINALLY we can actually build your columns. CODE .packages { display:flex; justify-content:center; flex-wrap:wrap; justify-content:center; max-width:72rem; gap:2rem 1.5rem; padding:1.5rem; margin:0 auto; } .packages > section { flex:1 0 auto; display:flex; flex-direction:column; max-width:16rem; } We flex this container, say we want the items centered horizontally (direction of flex), and to automatically wrap them if there's not enough room. The max width is our desired width of 64em for four sections (16 each), the 4.5em of "gap" between them (1.5e per gap), and the outer padding of 3rem (1.5 per side), plus an extra half REM as "wiggle room". A good engineer always adds a wee bit of extra. After setting said padding and gaps, we then style the sections to also be flex containers if the text ends up different heights and they're in a row, this will let us push the images to all line up at the bottom for a more consistent appearance. Thus the flex-direction is column as we want these to work up and down. The real magic is setting flex-grow of 1, flex-shrink of zero (don't let flex make them smaller), and auto-basis. Combined with the flex-wrap on .packages this means that if the page isn't wide enough to fit the columns, they will auto-wrap. Boom, instant "responsive layout" without a media query in sight. Finally we just tidy up the appearance and behaviors. CODE .packages h2, .packages > section > img { flex-grow:0; } .packages h2 { font-size:1.5rem; line-height:1.2; } .packages > section > div { flex-grow:1; margin:1rem 0; } We don't want the heading or footer to enlarge, but we do want the DIV to do so. Easy-peasy. I put a live demo here: https://cutcodedown.com/for_others/darienk/...s/template.html the directory: https://cutcodedown.com/for_others/darienk/columns/ Is wide open for easy access to the gooey bits and pieces, and there's a .rar of the whole thing in there so you can just grab it in one file. Hope that helps. I know this is a lot to take in. Try it, fiddle with it, and if you have questions, ask. This post has been edited by Jason Knight: Jan 13 2023, 02:49 AM |
|
|
|
| dariank |
Jan 16 2023, 08:28 PM
Post
#5
|
|
Group: Members Posts: 6 Joined: 12-January 23 Member No.: 28,744 |
Thank you so much for this. This was extremely helpful. I have gone trough it all and applied it to my code.
I am very grateful! |
|
|
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 19th April 2024 - 10:22 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC