aetles + layout   9

* { box-sizing: border-box } FTW « Paul Irish
One of my least favorite parts about layout with CSS is the relationship of width and padding. You're busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And 'lo and behold, you now are subtracting pixels from your original width so the box doesn't expand.

Ugh. If I say the width is 200px, gosh darn it, it's gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Wikipedia has a great history of this box model.

Anyway, I have a recommendation for your CSS going forward:

/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
This gives you the box model you want. Applies it to all elements. Turns out many browsers already use border-box for a lot of form elements (which is why inputs and textareas look diff at width:100%;) But applying this to all elements is safe and wise.
css  html  layout  webdesign 
february 2012 by Aetles
How to get Fixed Header and Footer Toolbars in jQuery Mobile 1.0
After extensively testing both of the primary scrolling options for jQuery Mobile I feel like the jQuery Mobile Scrollview is the best solution. It was very easy to install and configure, offered great support on iPhone and Android devices, and has more options and configurations available to customize your application. In addition, it may at some point be integrated into jQuery mobile as default functionality to serve as a bridge until position:fixed and overflow are full supported by the majority of active smartphones.
mobileweb  ios  jquery  smartphones  mobilesafari  android  layout  design 
november 2011 by Aetles
Medieordlista
Adda att lägga till någon/något till sin kontaktlista. Vanligt på sociala nätverkssajter och chattar.

Ansvarig utgivare den som är juridiskt ansvarig för tidningens innehåll

Artikel tidningstext som är längre än en notis

Appar/Applikationer programvaror som man kan välja att ladda hem eller köpa till sin mobil

Banner en webbannons som ofta länkar till annonsörernas webbplats

Berliner tidningsformat som är något större än tabloid

Bildtext text som kompletterar en bild
typografi  publicering  tidningsbranschen  layout  termer 
february 2011 by Aetles
Yahoo! UI Library: Grids CSS
Yahoos fria bibliotek av testade CSS-baserade layouter.
css  grid  layout  kolumner  Webbutveckling 
may 2006 by Aetles
In search of the One True Layout
One True Layout syftar på att få flera delmål uppfyllda i samma layout. Total flexibilitet, lika höga kolumner och kontroll över vertikal placering.
positioniseverything  css  layout  kolumner  columns  Webbutveckling 
january 2006 by Aetles
Comments: Behind the Scenes -
En artikel om hur den fixerade kommentarsrutan på snook.ca fungerar.
css  fixed  comments  fixerad  layout  Webbutveckling 
october 2005 by Aetles
Fixed or fluid width? Elastic!
Roger Johansson på 456 Berea Street skriver om elastisk bredd på layouten (till skillnad från fast eller flytande).
css  layout  fixed  fluid  elastic  456  Berea  Street  Webbutveckling 
may 2005 by Aetles
dsandler.org
En snygg och lättläst WordPress-blogg som framförallt har en del smarta lösningar.
snygg  blog  wordpress  css  layout  Inspiration 
november 2004 by Aetles
Dead Centre
Ett exempel på hur att placera något exakt i mitten på en sida, både horisontellt och vertikalt.
centrera  css  layout  Aetles 
november 2004 by Aetles

Copy this bookmark:



description:


tags: