css
Fixed position div isn’t staying fixed in Chrome
I was working on a little menu specifically for mobile devices. It was intended that this menu stay fixed at the bottom of the screen. It usually worked, but in some instances in chrome, it would be thrown all the way to the bottom of the document, not the bottom of the window. It looks […]
Read MoreRGBA Color Format
Just a sample RGBA color format. This will make a black line (rgb 0, 0, 0), but with .3 opacity: .sample-class{ border-right: 1px solid rgba(0,0,0,0.3); }
Read MoreTargeting the Submit Button with CSS
Yeah, I always forget how to apply styles to just the submit button. It\’s of course easy, but I can never get it to stick around in my brain for the next time I need to use it: input[type=”submit”]
Read MoreVertical Center an Image Within a Link (or Div)
How to vertically center an image within a div: <style> .valign-helper{ display: inline-block; height: 90px; } a img{ display: inline-block; vertical-align: middle; } </style> <a title=”my title” href=”#”> <span class=”valign-helper”></span> <img src=”image-path” /> </a>
Read Morewhy is 100% width body or div wider than the screen on mobile?
I’d been struggling with this one for quite a bit. I figured it was something stupid, but no matter what I did, whenever I set the width of my body, html, and/or div tag to 100% (I’d totally stripped down my testing page to the simplest of elements to see why it wasn’t working), the […]
Read MoreAn updated 2 Column (Fluid Fixed) Layout
An alternate method for 2 columns, with a fixed column on the right and fluid on the left. The main goal here was to be able to have the secondary column (\’.col-right\’) appear above the main column (\’.col-main’) when the screen width was decreased. This wan\’t possible with the other method for achieving the column […]
Read MoreIncluding Border and Padding In Box Dimensions
Generally when I’m assigning a width or height to a div, I want it to be that width or height. Yet some genius, whoever came up with the CSS box model, decided that the width of the box wouldn’t actually include the padding or border as part of the width. Fortunately, we can now include […]
Read MoreThree Column List
The Action: A simple list, with three columns. Other Notes: 1. The middle columns fills the available space, each end column is fixed width. 2. Elements inside each of the columns are centered vertically Example: http://www.localhost:10010/examples/el_list_3columns.html
Read MoreResponsive Tiles
For a couple of projects, I wanted to create tiles that automatically resized themselves based on the screen size, or space available within the page. If there is enough room, I wanted the system to automatically insert another tile to the row. The javascript/jquery: //Resizes tiles to completely fill the width of a container div […]
Read MoreFixed Column on Left, Fluid Column on the Right
A two-column setup, with a fixed width column on the left, and a fluid main column that fills out the rest of the space on the left: <head> <style> .clear{ clear: both; } .col-secondary{ float: left; width: 190px; background: blue; min-height: 100px; } .col-main{ margin-left: 200px; box-sizing: border-box; background: green; min-height: 200px; } </style> </head> […]
Read More