Tag Archives: CSS

HTML and Centering Block Elements

Posted on by
Reply

Someday, I’ll eventually figure out how to properly position elements on a web page. Always seems like when I think I know what I’m doing, and then I get something that I just can’t seem to display where I want it to on a page.

Case in point, I was trying to center a <section> element that contained three images side-by-side horizontally. Had no issues getting the images to display how I wanted them in the element; but didn’t seem to matter what I did, I couldn’t get the <section> to center. Did some digging and found the most common answer I came across was to use this CSS style for the block elements like sections:

margin:auto;

So, I added this to the style for my <section> element containing the photos, and nothing. After looking at a few other examples, it finally clicked. Technically, my <section> element was “centered”. It just happened to be the full width of the page with the images left justified. Without defining a set width for the block element, it defaults to the full width of the page, not what is in it.

Sure, I could have tried to center the images within the block element, but still figured centering the block element would be easier. So, I set a defined a width for my <section>, just enough so the images remained side-by-side, and bingo. All three images are now centered in the page.

section.imgcenter {
    width:775px;
    margin:auto;
}

Granted, I then came across https://www.w3.org/Style/Examples/007/center.en.html, and thinking I could have just used left and margin-right styles set to 50% and -50% respectively to get the same effect. This just points out I have to keep in mind the default behavior of each element.

CSS Cleanup Complete!

Posted on by
Reply

Task accomplished. While still trying to get myself into a better better habit of working on my personal projects, I have completed the first task of my May sprint. I finally removed the custom CSS styles I added within WordPress and updated the actual stylesheet on the server.

Lessons learned, Chromium based browsers like to cache stylesheets apparently. Both Chrome and the Chromium based Edge browser refused to see my CSS changes until I cleared the temp files. However, the current Edge browser was much more forgiving, just needed to reload the page. Granted, there might have been another way to address this, but I’m still learning.

Along with that, the Developer tools are a web designers best friend. Always knew they existed, but never really had a need to use them. While trying to update a 3000+ line stylesheet that I didn’t write, it makes a world of difference being able to highlight an element on the page, see what styles control it, and even see what line that code starts at in the actual file. Honestly, it was way easier to mess with the WordPress CSS code just editing the actual stylesheet vs trying to override it via the WordPress interface.

Next two tasks I want to complete this sprint, setup a failover page if my site goes down and setup a backup plan in the case my site goes completely belly up. Outside of working on my web development project, I’m planning on starting on a game development project. Setup Unity and downloaded some tutorials. Just need to follow them and start making something.

CSS Cleanup Project

Posted on by
Reply

Okay, so using something like WordPress to build out my blog was easy. Moving over to my own AWS instance and setting up my own WordPress server is a whole different story. Especially when the WordPress Theme doesn’t migrate as expected.

I’ve been doing what I can in the WordPress admin page to add custom CSS styles to tweek the look; but realizing this doesn’t cut it so well when I’m trying to override the existing CSS styles that are part of the theme. Then I remembered this is my own server. I don’t have to use the custom CSS feature in WordPress itself, I can edit the actual CSS files on the server itself.

Still new to HTML/CSS, so why not just dive into the deep end with tweeking a website far more complex then anything I’ve actually created. Just need to figure out my plan of attack, create backups of the files (not my first rodeo), and start to dig through some CSS.