Managing CSS - Socoder

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|52\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Web Development -> Managing CSS
Tue, 01 Aug 2023, 08:15
Kuron	Spent an hour trying to figure out why some CSS code was not working and applying the fonts and the size. Had an } I had overlooked and not removed which was making that part of the code close two lines early. Old age and bad eyesight!
Tue, 01 Aug 2023, 08:15
cyangames	Pro Tip: Indenting CSS (small example below) can help with that sort of error, also this might help debug CSS https://jigsaw.w3.org/css-validator/ .clear{ clear: both; } .bold{ font-weight: 700; } div{ background: #eee; padding: 10px; border: 1px solid #ccc; } --v -=-=- Web / Game Dev, occasionally finishes off coding games also!
Tue, 01 Aug 2023, 14:51
Kuron	Although I use the validator for finished pages, at the last step, it wasn't even on my brain for testing code I am working on. Lesson learned. I did not write the original code, it is what was produced by WikiWriter and I was modifying it. This is what it was: body { background-color: #182038; color: #A3A6AF; margin-right: 3%; margin-left: 3%; } --v I modified it as such with the error: body { background-color: #182038; color: #A3A6AF; margin-right: 3%; margin-left: 3%; } font-family: verdana,helvetica,sans-serif; font-size: large; } --v My style would be closer to what you posted. I was just using Notepad which is not easy for me to read, but also I was tired and simply not paying attention. I agree with you about indenting and generally try and do that. The biggest issue for me is I am ungodly rusty at coding web stuff by hand. It has been a long, long time and a lot has changed. But, I know it is the only way I am going to be happy with my site is if I do it from scratch. It has been so long, late 90s, early 00s, that I guess I am insecure in a way. I used to know my shit. The last version of my BBS, I was using PowerBBS which included custom software for connection and the BBS was HTML capable. Then when I switched to the web, I coded from scratch and had a decent enough site, and even used some advanced things like image maps, and one script that if a visitor to the site had a POP3 email account, it would send me an email from their account, usually without them knowing. But, when Cool Page came along, it made it easy to create stunning sites that were very functional. I might have that in some of the backups I was able to bring, but the code it produces is grossly outdated. I do not like WordPress or databased sites in general. BandZoogle is great, but for what I am planning with massive info, it is not so great. RocketCake is VERY good, but the responsive design aspect does my head in, it is as annoying as DPI issues. And I do not like that it is project based and I can't work on individual pages. Website Painter is really good, not responsive and you can work on individual pages. However, for an info heavy site, it is going to be a LOT of extra work placing everything in a WYWISYG editor, especially one that does not have a grid or snap to grid function like CoolPage did. But the code produced by Website Painter is lean and tight. It is an excellent product. I like WikiWriter and the sites it produces and with the exception of graphics, the site adjusts fairly well to different sizes, but there are a couple of issues with it and the code it produces. It is no slight on the author Jerry who wrote some books on web design (Perl and VJ++). But, the code it produces is easy enough to write a similar style with a code editor and have it updated for modern standards. I used to use CoffeeCup back in the day, but it is bloated and not DPI aware. Even though it is DPI aware, I am not happy with Notepad++. Text Edit Plus by Vovsoft is my fave text editor and it does syntax highlighting. That said, I wanted a code editor for HTML. The only HTML editor I could find that I liked and was not solely project based was HTMLPad. So, I bought it. What I paid for one year with Bandzoogle will pay for two years of hosting with my new host as well as pay for HTMLPad. So, this is the road I am walking down. Coding from scratch and very nervous and unsure of myself and it has been so, so, long. And frankly, after what I went though with Carolyn, I am still a nervous wreck and so easily overwhelmed with things nowadays. But, it is the only way I can get the site the way I want it and will be the easiest to update and maintain with new and additional info. And being static pages, it will be small and fast.
Tue, 01 Aug 2023, 15:02
Jayenkai	I've never tried doing it in html/css, but I often find that a good way to get a grip of layout stuff is to build a Testcard generator that can scale to different sizes and ratios and whatnot, but still resemble a testcard. The square grid in the middle being how things should scale to fit inside the "safe zone" of the screen, always being square, but deciding on the best square size to give the most squares inside the grid.. The little colour bars around the edge being a specific number of elements that have to fit inside the area, everything being outside the "safe zone". Other elects fitting within a square ratio, even though the screen ratio isn't square. It's a fun way to practice getting things in the right place, so.. for example.. your Social Media floating icons don't ALWAYS end up being over the top of the site's content. .. God knows how often I see that. .. or I might just be obsessed with Testcards.. hmmm.. This version works on the Canvas. I can't honestly imagine how much harder that would be to achieve in CSS, but if you want a nice challenge, and something that would most definitely be a good training exercise, then I don't think you can go far wrong with that sort of thing. -=-=- ''Load, Next List!''
Tue, 01 Aug 2023, 20:11
Kuron	I am sticking to HTML/CSS and maybe JS if needed. I have a Wordpress blog over on Vivaldi, and Wordpress used to be easier until they moved to the block system. More that I am not used to it. Wordpress on Vivaldi is a more secure install and not as feature-rich. When it comes to security, Wordpress is like walking barefoot through a cow pasture. Sooner or later you are going to have a wet cow pie squishing up between your toes. They should use that as their marketing slogan. Truth in advertising! Not a month goes by where there is not a major security issue with Wordpress. Something that has existed forever and just been caught. Not to mention how bloated and slow it is.
Wed, 02 Aug 2023, 04:34
Kuron	@Jay This is a perfect example of what you were talking about. Zero excuse for the middle button looking like that.
Wed, 02 Aug 2023, 04:39
Jayenkai	My head can solve that in Canvas. Work out the widths of all three bits of text, and if any are too wide for the box, make the box double height and add a CR midway through the text. Job done. But doing that in CSS, though..!?! Eeek! A simple word-wrapping div would work, but then the middle box would be double height whilst the other two aren't. The other two are obviously inside their own outer divs, so I don't "believe" you can set them all to be the same height, without pre knowledge of how big all three are. CSS does my head in!!! -=-=- ''Load, Next List!''
Wed, 02 Aug 2023, 04:46
Kuron	The irony is this is a supposed professional company selling you a service. Basically a course hosting/marketing/selling service, where you can create a site and host things there.
Wed, 02 Aug 2023, 05:18
cyangames	They should have both done testing and then just used a media query, something like @media only screen and (max-width:499px){ .sellingdiv span{ min-height: 2em; max-height: 2em; height: 2em; font-size: small; padding: 10px; border: 3px solid #fff; border-radius: 20px; } } --v -=-=- Web / Game Dev, occasionally finishes off coding games also!
Wed, 02 Aug 2023, 05:23
Kuron	I am used to sizing in relation to pixels. I am still trying to wrap my head around what an em is and that a px, pt is as it pertains to sizes/sizing.
Wed, 02 Aug 2023, 08:30
Jayenkai	All the values are based on scaling, since if you zoom on the page, everything's going to scale, so .. Just assume everything!!! font sizes are generally either pt or em, with pt being something you set specifically, and em being a scale based on what size the font currently is.. (I think!!) If you set 12pt as the body and 24pt as the title, then your title should be twice the size as the body. Likewise if you set 12pt as the body and 2em as the title, then the title is 2x the current font. It then squirrels out of control if you keep changing it without closing things.. So, if you set a 12pt font, switch to 2em for the title, but forget to close the /span or /div or /font, then switch to a 1.5em for another section, the font will be 2em*1.5em, so will be 3 times bigger than your original font. .. I think.. Or does em always go back to the root font size?! Damn, I can't remember!! -=-=- ''Load, Next List!''
Wed, 02 Aug 2023, 14:24
cyangames	I've stuck with the old classic xx-small x-small small medium large x-large xx-large Mainly because they translated from the old <font size="1-7"> stuff really happily and I'm stuck in that routine. There used to be (in the long-long ago) issues with browser represnetations with font sizes which is now long gone thankfully so anything is fine. -=-=- Web / Game Dev, occasionally finishes off coding games also!
Wed, 02 Aug 2023, 14:57
Kuron	That is how I do it, too and there is also now XXX-large (But IIRC, older browsers like IE6 may not support that). I found two books on Amazon covering HTML/CSS, I will post the links here later for some opinions, but I am waiting to order them, as if I order them now, they will come while we are out on Friday getting our new pup.
Wed, 02 Aug 2023, 15:35
cyangames	yay puppers!
Wed, 02 Aug 2023, 15:47
Jayenkai	You might inadvertantly end up getting your site blacklisted if you write "XXX-Large" all over it! -=-=- ''Load, Next List!''
Wed, 02 Aug 2023, 16:12
cyangames	Ha! I mean, it could just be a humble brag
Wed, 02 Aug 2023, 16:44
Kuron	LOL Have started trying to put together a band here, working band name is 11 Soft. In a Cowboy and Indian town (literally) that name should go over well. For perspective, the "madame" who ran the whorehouse here back in the day, there is a big statue of her downtown. Here are those books. This one looks really good: https://www.amazon.com/dp/1636100007/ This one looks okayish but is a tad dated: Very interesting in that it has color pages although from the screenshots it comes off as a gimmick (the colored pages): https://www.amazon.com/dp/1118008189/ As to puppers, it is over a four hour round trip and she is like $985.00 A long and expensive trip, but you can't put a price on the years of love and companionship.
Wed, 02 Aug 2023, 17:03
Kuron	Pendleton, Oregon: Statue of Beloved Brothel Madam scroll to read all of it
Wed, 02 Aug 2023, 17:10
Jayenkai	Whatever happened to the good old "Worldwide web", eh!?! > Reveal 🔎 Site doesn't work over in the UK.. "The Amazon CloudFront distribution is configured to block access from your country." -=-=- ''Load, Next List!''
Wed, 02 Aug 2023, 17:14
Kuron	WTF? How are you gonna get people to come to America if the roadside America site is geoblocked? Statue of Beloved Brothel Madam The bawdy town of Pendleton was once famous for its bootlegging and brothels, 18 in all. The most popular was the Cozy Rooms, and its madam was Stella Darby, who ran it from 1928 until she retired in 1967. At the time the town was glad to see her go -- but as the years passed the town's opinion of Stella softened from condemnation to acceptance to appreciation. On August 27, 2014, Pendleton unveiled a life-size bronze statue of Stella outside the former entrance to her Main Street bordello. Sculpted by retired local art teacher Randy Gundlach, the metallic Darby wears oriental lounge attire and high heels.
Wed, 02 Aug 2023, 17:18
Jayenkai	OK.. Very good. .. shrugs Now stop procrastinating, and get back to figuring out that CSS!! -=-=- ''Load, Next List!''
Wed, 02 Aug 2023, 17:23
Kuron	Guess if you are working 39 years in the profession those are hard years and you are deserving of a bronze statue. Also my town is famous for cowboys and Indians and cattle drives. Also one of the oldest rodeos on the circuit. Round Up (coming up in September when over 50,000 sometimes as much as 100,000 folks descend on our town, and famous for the phrase Let 'Er Buck which goes back to the 1800s and in the early 1900s there was even a silent film made about the rodeo here and life back then then. Also a famous biker rally was last month and is a big yearly event. Cowboys, Indians, Rodeos and Hookers. Ole' Kuron thinks the wild west was pretty interesting back in the day. Thankfully today, the Indians (all whom I have met are lovely folks) and everybody else gets along wonderfully today.
Mon, 07 Aug 2023, 20:48
Kuron	Okies, ordered both the books above. The colored page one arrived today. Not as gimmicky as it looked, but it is dated as it talks about Flash. Ordered the spiral bound version of the other one which is very current and it should be here tomorrow.