Posts

Showing posts with the label HTML

Columns side-by-side or stacked -- CSS to adjust for screen width

Image
I recently had to brush up on my CSS skills to develop a solution where two buttons would appear side-by-side unless the viewport was less than 480 pixels, in which case they should then display stacked. Through a bit of research, I found a couple of solutions. When I tried to implement the solutions as presented, the buttons didn't appear side-by-side, but instead on separate rows -- I'm sure something I must have overlooked, but nevertheless, I, therefore, came up with my own modified solution. My particular example used 3 columns -- the middle just for space, which could be done with padding and/or margin. The key is using "@media." By default the widths of the columns were all set for 100% -- configured for stacking. When the screen was 480 pixels or larger, using "@media" the widths are adjusted 45%, 10%, and 45%. If you're not sure what each of these CSS properties does for you, try searching "css [property]" such as " css clear

Displaying special characters in your HTML and JavaScript

Occasionally I have the need to display umlauts or other non-standard Latin and Kanji characters in my HTML, JavaScript, and as a URL parameter. Each form have their own rules for encoding the characters to display correctly. HTML: Use the HTML name or HTML number. For example & and " for ampersand and quote, respectively. JavaScript: Use the Unicode equivalent. For example \u00E4 and \u00FC to add an umlaut over an 'a' or 'u', respectively. URL Parameter: Use HEX codes. For example, %20 and %2F for a space and forward slash, respectively. Here's a great reference from ascii.cl for the necessary codes.