css
Three 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.drempd.com/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 MoreFixed Column on Right, Fluid Column on the Left
This code produces a 2-column layout, with a fixed column to the right, and a column to the left that fills the remaining space. To change the width of the right column, just adjust anywhere in the code below that has 250px to match whatever width you want (someday we’ll have variables in CSS!). <style> […]
Read MoreCentering Multiple Floated Elements
The need was to have multiple floated fixed-width elements, sometimes two, sometimes three, to stay centered on the page without needing to adjust the html code. Not as easy as one would think. Of course its easy if you know how many elements you are going to have, and thus know the width that the […]
Read MoreVertical Aligning Within a Div
Vertically aligning text within a div really isn’t too bad — its just not very intuitive. There is the css tag ‘vertical-align’, but this only applies to a small range of instances where this actually works (this tag really should apply to actually vertically aligning all possibilities). To vertically align within a div, just give […]
Read MoreCSS Drop Shadows
Adding drop shadows to elements with CSS is fairly easy: .shadow { box-shadow: 3px 3px 4px #000; } Theoretically, you just need the bottom declaration (box-shadow), but older browsers that don\’t fully support it utilize the other declarations. The format for all of these is the same: box-shadow: x-offset y-offset shadow blur radius color ; […]
Read MoreCSS Rounded Corners
Rounding All Corners of an Element: Basic rounded corners (all corners of the element will be rounded): #example { -moz-border-radius: 15px; //Mozilla tag border-radius: 15px; //Standard tag for all browsers } Targeting Specific Corners: Both W3C and Mozilla specifications are given. Both will need to be listed for the rounded corners to […]
Read MoreTop Margin Stolen From Child Element And Added to Parent (Margin Collapsing)
One of the biggest frustrations that I have encountered with my time dealing with CSS is the Collapsing Margin Bug. It technically isn’t a bug, because for some reason, this was actually intentional, but here it goes: The Issue: For this example, imagine that you have a child element (layer, paragraph text, heading, etc…) contained […]
Read More-
Adventure
-
The Built Environment
-
Locations
-
Web Dev