Posts

Showing posts with the label CSS

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

Force fit an HTML Table

My previous post had a table that the browser pushed outside the defined dimensions, making half of it un-viewable. Beside the rather narrow body for the blog, which by-the-way makes it easier to read, most browsers just don't know how to break text strings that do not have white space. Turns out there is some CSS code that can be used that will correct this in most browsers. Use the following two CSS properties in your table definition (adjust width to meet your need). table-layout: fixed; width: 425px; Surprisingly, if you use Firefox, it shortens the width correctly but it still has trouble wrapping some lines, while IE and Safari seems to render the entire table correctly. Visit the W3C site to get details on other table options .

Test your knowledge of CSS and JavaScript

From my experience, many web developers do not know the finer points of HTML, JavaScript, and/or CSS. They've relied on a combination of built-in language tags (e.g. in place of JavaScript) and designers to do this work for them. How good are you? The W3schools.com site (which I find to be a good reference site) has a 20 question CSS quiz and 20 question JavaScript quiz that will separate the knowledgeable from the not so. On the CSS quiz I scored 17 of 20 -- 2 of the 3 were syntax questions that I know I don't know, and always find myself looking up. For the other miss, I learned something new. For the JavaScript quiz, I scored 18 of 20 -- one being a math function that I missed, and I would expect to have to look up. The other... I shouldn't have missed. Give it a shot and see how you score. Have fun.