* { box-sizing: border-box } FTW « Paul Irish
february 2012 by Aetles
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
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.
february 2012 by Aetles
How to get Fixed Header and Footer Toolbars in jQuery Mobile 1.0
november 2011 by Aetles
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
february 2011 by Aetles
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
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
february 2011 by Aetles
Yahoo! UI Library: Grids CSS
may 2006 by Aetles
Yahoos fria bibliotek av testade CSS-baserade layouter.
css
grid
layout
kolumner
Webbutveckling
may 2006 by Aetles
In search of the One True Layout
january 2006 by Aetles
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 -
october 2005 by Aetles
En artikel om hur den fixerade kommentarsrutan på snook.ca fungerar.
css
fixed
comments
fixerad
layout
Webbutveckling
october 2005 by Aetles
dsandler.org
november 2004 by Aetles
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
november 2004 by Aetles
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
related tags
Aetles ⊕ android ⊕ Berea ⊕ blog ⊕ centrera ⊕ columns ⊕ comments ⊕ css ⊕ design ⊕ elastic ⊕ fixed ⊕ fixerad ⊕ fluid ⊕ grid ⊕ html ⊕ Inspiration ⊕ ios ⊕ jquery ⊕ kolumner ⊕ layout ⊖ mobilesafari ⊕ mobileweb ⊕ positioniseverything ⊕ publicering ⊕ smartphones ⊕ snygg ⊕ Street ⊕ termer ⊕ tidningsbranschen ⊕ typografi ⊕ Webbutveckling ⊕ webdesign ⊕ wordpress ⊕Copy this bookmark: