On Tuesday, September 17, 2013, Chris Rockwell wrote:
Seems to work for me. At full width I get a navigation with hover, at
narrow it's just stacked navigation items (no hover action).
Seems like a nice responsive site Tom, good work.
On Sun, Sep 15, 2013 at 1:08 PM, Tom Livingston
Seems to work for me. At full width I get a navigation with hover, at
narrow it's just stacked navigation items (no hover action).
Seems like a nice responsive site Tom, good work.
On Sun, Sep 15, 2013 at 1:08 PM, Tom Livingston tom...@gmail.com wrote:
Can you tell me the browser, version
On Tuesday, September 17, 2013, David Hucklesby wrote:
On 9/17/13 9:02 AM, Tom Livingston wrote:
On Tuesday, September 17, 2013, Chris Rockwell wrote:
Seems to work for me. At full width I get a navigation with hover, at
narrow it's just stacked navigation items (no hover action).
Seems
On 9/17/13 9:02 AM, Tom Livingston wrote:
On Tuesday, September 17, 2013, Chris Rockwell wrote:
Seems to work for me. At full width I get a navigation with hover, at
narrow it's just stacked navigation items (no hover action).
Seems like a nice responsive site Tom, good work.
On Sun, Sep
Can you tell me the browser, version and OS you were using? I'd like
to look into it.
On Sat, Sep 14, 2013 at 9:10 PM, David Hucklesby huckle...@gmail.com wrote:
On 9/14/13 9:30 AM, Tom Livingston wrote:
Fair point.
This one works with JS disabled:
http://www.discovermvp.com/employers/
Just curious, but why would you wrap a div in an anchor tag when you can just
use the onclick handler?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type
I'll answer with a question: why use JavaScript which, as you say, may not
be available, when there is a perfectly valid, semantic solution without it
that delivers the same user experience?
On Sep 14, 2013 5:25 AM, Karl DeSaulniers k...@designdrumm.com wrote:
Just curious, but why would you
I personally wouldn't want the main function of my navigation, on a
responsive site intended for many devices of varying ability, to be
dependent on JS. Added effects, progressively enhanced, maybe, but not the
main base function of navigating the site.
On Saturday, September 14, 2013, Karl
Tom Livingston wrote:
I personally wouldn't want the main function of my navigation, on a
responsive site intended for many devices of varying ability, to be
dependent on JS. Added effects, progressively enhanced, maybe, but not the
main base function of navigating the site.
100%
On 9/14/13 5:30 AM, Tom Livingston wrote:
I personally wouldn't want the main function of my navigation, on a
responsive site intended for many devices of varying ability, to be
dependent on JS. Added effects, progressively enhanced, maybe, but not the
main base function of navigating the site.
Fair point.
This one works with JS disabled:
http://www.discovermvp.com/employers/
On Sat, Sep 14, 2013 at 12:19 PM, David Hucklesby huckle...@gmail.com wrote:
On 9/14/13 5:30 AM, Tom Livingston wrote:
I personally wouldn't want the main function of my navigation, on a
responsive site
This is a solution I have referenced before :
http://m.netmagazine.com/tutorials/build-smart-mobile-navigation-without-hacks
My approach: without CSS a user sees a skip to navigation link“; with CSS
they get a pretty menu; with CSS animations they get a pretty menu that
opens and closes on click,
Well, I guess my response would be that the semantic solution you speak of is
limited to html5 browsers.
Anchors in html4 are not block level. So your doing the same thing as
javascript. Creating for a platform that must be there to work correctly.
However, the chances of the browser not
@Tom: Does your responsive site work with javascript disabled?
Is it responsive without it?
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
On Sep 14, 2013, at 10:36 AM, Philip Taylor wrote:
Tom Livingston wrote:
I personally wouldn't want the main function of my
The responsiveness does work with IE9 and above as well as the usual
good browsers. Carousels and the like won't, obviously.
On Sat, Sep 14, 2013 at 2:54 PM, Karl DeSaulniers k...@designdrumm.com wrote:
@Tom: Does your responsive site work with javascript disabled?
Is it responsive without it?
@Tom
Thanks for the response. So how does it react with say IE7, safari 1, firefox
3, etc?
Or javascript disabled browsers? I guess my point is that to have a responsive
website, normally the responsiveness is dependent on a javascript framework,
like bootstrap for example. No javascript no
I code mostly from scratch without a major framework. I guess you
could call my base starting point of a pre-made typical blank html
document a framework of sorts, but that's it. The responsiveness is
the result of a mobile-first approach using media queries. That's it.
There is a polyfill for IE
Karl,
Responsiveness should definitely not rely on JavaScript. At its simplest
form, responsiveness could be floated or inline-block elements set with
widths that are relative (e.g not pixel). Then again, with extensive media
queries you could use fixed widths.
On Sep 14, 2013 3:22 PM, Karl
At it's simplest, it's a page of text, but who's gonna really want
just that! ;-)
On Sat, Sep 14, 2013 at 3:33 PM, Chris Rockwell ch...@chrisrockwell.com wrote:
Karl,
Responsiveness should definitely not rely on JavaScript. At its simplest
form, responsiveness could be floated or inline-block
Touche`…
Id be interested in learning more about your workflow Tom (and anyone else
that cares to discuss). I'm torn between a method similar to what you
descibed and doing something with sass where you media queries are inline
with all CSS, like:
body {
...declarations
@media min-width {}
}
I prefer to deliver desktop only to older browsers, so your inline
MQs would make this more difficult as you would need to make/write a
separate sheet to pull this off. While my method uses a second sheet
for IE, i'm not actually writing another sheet because I am just
importing my main sheets a
To clarify, I'm delivering desktop only to old IE.
On Sat, Sep 14, 2013 at 3:59 PM, Tom Livingston tom...@gmail.com wrote:
I prefer to deliver desktop only to older browsers, so your inline
MQs would make this more difficult as you would need to make/write a
separate sheet to pull this off.
For inline style approaches using preprocessors, there's:
http://jakearchibald.github.io/sass-ie/
and:
https://github.com/himedlooff/media-query-to-type
For the less technique, there's a discussion here with some details:
https://github.com/himedlooff/media-query-to-type/issues/1
Just saw
Nice Micky. I'll have to dig into this when I get a chance. Thanks!
On Sat, Sep 14, 2013 at 4:08 PM, Micky Hulse mickyhulse.li...@gmail.com wrote:
For inline style approaches using preprocessors, there's:
http://jakearchibald.github.io/sass-ie/
and:
Ooops, just noticed, but it looks like the grunt-stripmq author is now
using the @content feature of SCSS:
https://github.com/jtangelder/grunt-stripmq/issues/3
__
css-discuss [css-d@lists.css-discuss.org]
On 9/14/13 9:30 AM, Tom Livingston wrote:
Fair point.
This one works with JS disabled:
http://www.discovermvp.com/employers/
On Sat, Sep 14, 2013 at 12:19 PM, David Hucklesby huckle...@gmail.com wrote:
On 9/14/13 5:30 AM, Tom Livingston wrote:
I personally wouldn't want the main function
What browser/version?
On Saturday, September 14, 2013, David Hucklesby wrote:
On 9/14/13 9:30 AM, Tom Livingston wrote:
Fair point.
This one works with JS disabled:
http://www.discovermvp.com/**employers/http://www.discovermvp.com/employers/
On Sat, Sep 14, 2013 at 12:19 PM, David
On 9/14/13 9:59 AM, Chris Rockwell wrote:
This is a solution I have referenced before :
http://m.netmagazine.com/tutorials/build-smart-mobile-navigation-without-hacks
My approach: without CSS a user sees a skip to navigation link“; with CSS
they get a pretty menu; with CSS animations they get a
Hey John - you understand correctly. Tom pointed that out earlier in the
thread.
On Fri, Sep 13, 2013 at 2:36 PM, john petroshius j...@prairiestudio.comwrote:
my understanding is that with HTML5 it IS now correct to wrap blocks with
an a tag...
...• Block-level links—Links can now be
my understanding is that with HTML5 it IS now correct to wrap blocks with an
a tag...
...• Block-level links—Links can now be placed around block-level elements. So
if you need to link an image, headline, and paragraph text to the same place
you can do it with just one link.
Here's an example.
Don't forget the good 'ol clearfix:
/* CLEARING */
/* For modern browsers */
.clear:before, .clear:after {content:; display:block;}
.clear:after {clear:both;}
.clear {zoom:1;}/* For IE 6/7 (trigger hasLayout) */
On Thu, Sep 12, 2013 at 2:25 PM, Chris Rockwell ch...@chrisrockwell.com wrote:
Maybe add margin: 0 auto 0 auto; ?
Just did a quick look...
On Thu, Sep 12, 2013 at 2:04 PM, Chip at Caliber Communications
chip.me...@calibercommunicationsllc.com wrote:
http://www.csbnow.com/mobile/index.html
http://www.csbnow.com/mobile/css/style-mobile.css
I am trying to get the grey
They are also floating left at narrow width.
On Thu, Sep 12, 2013 at 2:04 PM, Chip at Caliber Communications
chip.me...@calibercommunicationsllc.com wrote:
http://www.csbnow.com/mobile/index.html
http://www.csbnow.com/mobile/css/style-mobile.css
I am trying to get the grey boxes (Online
Tom's suggestion may work as well, but you will need to fix your container.
Due to all of the child elements being floated, you will need height:
100%;overflow:auto so that your container wraps the children
On Thu, Sep 12, 2013 at 2:21 PM, Tom Livingston tom...@gmail.com wrote:
They are also
If it were me, I would use media queries to make the width 100% at a
certain screen size. I don't know what your design calls for, so it may
not work for you
Codepen: http://codepen.io/chrisrockwell/pen/njyAr
You shouldn't wrap your div with an anchor tag, either.
SCSS:
.mobile-services {
http://www.csbnow.com/mobile/index.html
http://www.csbnow.com/mobile/css/style-mobile.css
I am trying to get the grey boxes (Online Banking, Online Bill Pay, etc.)
to center on the page so that when the viewport gets too small to
accommodate 2 columns, the remaining single column is centered.
Yeah, I don't think I've ever seen/notice it failing, I just prefer to do
it this way. Putting aside the fact that it's not correct, it just looks
funny, to me, to see an a around a bunch of content :)
On Thu, Sep 12, 2013 at 3:24 PM, Tom Livingston tom...@gmail.com wrote:
On Thu, Sep 12,
Sorry, meant to include a link to validation:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.csbnow.com%2Fmobile%2Findex.htmlcharset=%28detect+automatically%29doctype=Inlinegroup=0
On Thu, Sep 12, 2013 at 3:19 PM, Chris Rockwell ch...@chrisrockwell.comwrote:
a is an inline element and
I played around with lots of variations on this theme, but none worked. I
THINK the issue was that the container (.mobile-services) expands to fill
its own parent (main-content), and the children (.mobile-services div) are
floated left within it (which I need so that they form two columns at
a is an inline element and cannot contain block level elements (such as
div).
One way is:
.container {
position: relative;
}
a {
display: block;
position: absolute;
left:0;
top: 0;
width: 100%;
height: 100%;
text-indent: -em;
z-index: 1 /* or higher if necessary */
}
div
Slightly aged article, but relevant...
http://html5doctor.com/block-level-links-in-html-5/
On Thu, Sep 12, 2013 at 3:28 PM, Chris Rockwell ch...@chrisrockwell.com wrote:
Yeah, I don't think I've ever seen/notice it failing, I just prefer to do it
this way. Putting aside the fact that it's not
On Thu, Sep 12, 2013 at 3:19 PM, Chris Rockwell ch...@chrisrockwell.com wrote:
a is an inline element and cannot contain block level elements (such as
div).
One way is:
.container {
position: relative;
}
a {
display: block;
position: absolute;
left:0;
top: 0;
width: 100%;
Well dang it :D. I guess I'm going to be seeing those wrap content more
often now.
http://dev.w3.org/html5/markup/a.html and the relevant link to allowed
contents: http://dev.w3.org/html5/markup/common-models.html
Thanks for pointing this out!
On Thu, Sep 12, 2013 at 3:31 PM, Tom Livingston
43 matches
Mail list logo
