Skip to content
  • home
  • portfolio
  • web design journal
  • blog
    • adventure
    • san diego
    • projects
    • website design
    • code notes

css

Fixed position div isn’t staying fixed in Chrome

April 9, 2015   |   Web Dev

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 More

RGBA Color Format

April 8, 2015   |   Web Dev

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 More

Targeting the Submit Button with CSS

December 29, 2014   |   Web Dev

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 More

Vertical Center an Image Within a Link (or Div)

June 17, 2014   |   Web Dev

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 More

why is 100% width body or div wider than the screen on mobile?

April 26, 2014   |   Web Dev

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 More

An updated 2 Column (Fluid Fixed) Layout

April 24, 2014   |   Web Dev

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 More

Including Border and Padding In Box Dimensions

March 7, 2014   |   Web Dev

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 More

Three Column List

February 24, 2014   |   Web Dev

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 More

Responsive Tiles

January 31, 2014   |   Web Dev

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 More

Fixed Column on Left, Fluid Column on the Right

December 21, 2013   |   Web Dev

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

Posts navigation

Older posts
Newer posts

drempd | san diego, ca


home contact

adventures san diego projects stream website design

portfolio resume san diego web design freelance web designer

custom web design responsive web design website maintenance