Re: [css-d] desktop. tablet. mobile.

2012-01-31 Thread David Laakso 
On Mon, Jan 30, 2012 at 9:31 PM, David Laakso  wrote:
First pass: 
Constructive comments and suggestions are always appreciated.

Best,
~d

---

Thanks to all who took time to look at the site and share your opinions.

Best,

~d
“Finish each day and be done with it. You have done what you could.
Some blunders and absurdities no doubt crept in, forget them as soon
as you can. Tomorrow is a new day, you shall begin it well and
serenely...”
-- Ralph Waldo Emerson


-- 
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] lines not moving...

2012-01-31 Thread G.Sørtun 

On 31.01.2012 23:13, Michael Beaudoin wrote:

> www.ba-doyn.com/junk/sweep_review

If I understood you right,

.legalLinks {
font-size: 11px;
clear: left;
padding-left: 82px;
}

...seems to work.

regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] lines not moving...

2012-01-31 Thread David Laakso 
On Tue, Jan 31, 2012 at 5:13 PM, Michael Beaudoin  wrote:

I'm sure this is a simple one...

 link is: www.ba-doyn.com/junk/sweep_review

Michael


I'm not so sure it is a simple one...
Try:
.legalLinks {
float:right!important;
font-size: 11px;
}
Best,
SomeYoungGuy
Hanoi

-- 
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] lines not moving...

2012-01-31 Thread Michael Beaudoin 
Hi all,

I'm sure this is a simple one...

I'm editing a file that someone else has created and I'm trying to get the 
final 
lines at the bottom (rules, privacy policy, and terms) to align with the 
release 
line of copy. I've tried many things and can't seem to get them to move over. 
Whenever I try either nothing happens or they go haywire.

link is: www.ba-doyn.com/junk/sweep_review

Thanks,
Michael
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] multiple columns

2012-01-31 Thread John 
thank you, David and Ghodmode..

this looks like excellent information about what I'm trying to achieve.


John
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FW: An elementary question on absolute positioning

2012-01-31 Thread Tim Arnold 
On Tue, Jan 31, 2012 at 10:10 AM,   wrote:
> On the page at  http://www.maireadnesbitt.com/index_next_tt.html  I have a 
> group of absolutely positioned thumbnails.
>
> I expected them to appear within the containing block called left_third. 
> Instead they appear to be positioned on the page. Is that a question of some 
> attribute that I need to specify for left_third?
>
> Thanks for any assistance.
>
> Bruce

Just add "position: relative" to the styles for #left-third and you're
good to go.  Absolutely positioned blocks set their position relative
to the next ancestor container *that is also positioned*.  Right now,
none of the ancestors are, so they are positioning relative to the
 tag.

Best,
Tim

-- 

tim.arn...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] FW: An elementary question on absolute positioning

2012-01-31 Thread bruce . somers 
On the page at  http://www.maireadnesbitt.com/index_next_tt.html  I have a 
group of absolutely positioned thumbnails.

I expected them to appear within the containing block called left_third. 
Instead they appear to be positioned on the page. Is that a question of some 
attribute that I need to specify for left_third?

Thanks for any assistance.

Bruce
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Make logo GIF active in CSS

2012-01-31 Thread Chris Morton 
You're terrific, Vince. Thank you!

On Mon, Jan 30, 2012 at 9:56 PM, Ghodmode  wrote:

> On Tue, Jan 31, 2012 at 6:31 AM, Chris Morton 
> wrote:
> > Please consider dev.eigen.com, using Google Chrome.
> >
> > It used to be that a viewer could click on the company logo in the upper
> > left corner and be taken to the site's home page. Somewhere along the way
> > this link relationship has become broken.
> >
> > Any ideas how to fix it within the CSS stylesheet?
>
> It's not really a CSS problem.  You currently have this in your HTML:
>
>innovation by Eigen
>
> But the link won't work unless the h1 is inside the anchor.  Like this:
>
>innovation by Eigen
>
> It's because of the negative text indent you're using to hide the text
> of the heading while still making it accessible to screen readers:
>/* http://dev.eigen.com/css/homepage.css (line 107) */
>h1 {
>text-indent: -9009px;
>}
>
> When the link is inside the heading, it's 9009 pixels over to the left
> because the link is just the text.  But when the heading is inside the
> anchor, the whole h1 is the link, not just the text.
>
> --
> Vince Aggrippino
> a.k.a. Ghodmode
> http://www.ghodmode.com
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] multiple columns

2012-01-31 Thread David Laakso 
On Mon, Jan 30, 2012 at 10:15 PM, John  wrote:
 I would like to arrange some text into multiple columns...I'm
thinking 4 or 5; the text in question lends itself to that.

John


Good morning, John...

I don't see any reason why one could not use CSS to create a layout of
more than three columns. Granted, it gets a little problematic in
terms of readability in narrow windows, but nowadays media queries
comes to the rescue for that-- and for most all of us IE/6 and down
are no longer an issue. But hack your way from here to eternity if
need be. Either way, an easy way to do this is to use this layout
generator and add a column[s]:


Another possibility may be to use "CSS tables." These are not table
layouts -- in the traditional sense of that concept -- they just look
and behave like them.

This is a simple example of a "css table" layout I did with three
columns that folds to one column for mobile-handsets.


It is based on this concept of an equal height column layout by Georg
Sortun and is easily adaptable for more than three columns--

[if you read the article -- see link at bottom of his page-- he'll
show you how to adapt it for lower-life out of Redmond, too].

Good luck and best wishes,
~d


-- 
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] desktop. tablet. mobile.

2012-01-31 Thread Peter H. 
> El 31/01/2012, a las 03:31, David Laakso escribió:
> 
> First pass: 
> Constructive comments and suggestions are always appreciated.
> Thanks.
> 

designery comments: really like the feel of it, nice sparseness, tasty use of 
colour, intriguing, slightly enigmatic even. Great images. 

On the puzzling side, though, the desktop pages look more like mobile pages 
poorly adapted to big screen. The primary content is pushed too far down the 
window by less important stuff - gives a strange hierarchy to the links. If I 
was the client I wouldn't be happy having 'About' almost at the very end.

On the phone, there's too much scrolling down to do before arriving at the 
primary content.

I like the League Gothic but, as always, the letter spacing for the web font is 
clunky. Me, I'd use an image for the gallery logo so as to control the kerning 
and make it look nice.

On the desktop there's a double rule under Dakota which maybe isn't intended - 
the thin white rule being very slightly wider than the grey one.

Hope this is useful feedback, Peter
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] multiple columns

2012-01-31 Thread Ghodmode 
On Tue, Jan 31, 2012 at 11:15 AM, John  wrote:
> I would like to arrange some text into multiple columns...I'm thinking 4 or 
> 5; the text in question lends itself to that.
>
> Looking at the tutorial linked below, it says IE doesn't support it. It 
> doesn't specify IE 6 or 5, just IE, and I assume it means ANY IE, which isn't 
> too cool.
>
> Can anyone recommend a method of arranging text in multiple columns that IE 
> does support...at least the newer versions?
>
> thank you!
>
> John
>
> http://www.w3schools.com/css3/css3_multiple_columns.asp

The old way is to use separate elements to contain the different
columns, then use floating or positioning to get the desired layout.

There's an even older way that actually still works, but if I even
mention tables here I'll get burned to a crisp... oops... I hope no
one heard that :)

The main benefit of the new CSS3 way is that you can let the browser
figure out where to start the new column.

If you already know where you want your columns to break, just use the old way.

Otherwise, you could use the columns for the browsers that support it
and think of the IE rendering as a graceful degradation.  I think this
is the option I would choose.

In general, I wonder if the combination of Firefox and Chrome users
have enough market share that we can begin to consider a limited
deprecation of IE-specific code... Ya I know... That's probably just
wishful thinking.

Don't forget about Google Chrome frame:
http://blog.chromium.org/2011/06/introducing-non-admin-chrome-frame.html
http://code.google.com/apis/libraries/devguide.html#chrome-frame

http://www.chromium.org/developers/how-tos/chrome-frame-getting-started#TOC-Detecting-Google-Chrome-Frame-and-P

I copied this from the HTML5 Boilerplate code:



It'd be a pain in the butt, but it would probably be possible to
emulate columns using Javascript.  It might be an interesting
experiment, but I guess it would be a waste of time in the grand
scheme of things.

--
Vince Aggrippino
a.k.a. Ghodmode
http://www.ghodmode.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] desktop. tablet. mobile.

2012-01-31 Thread Ghodmode 
On Tue, Jan 31, 2012 at 10:31 AM, David Laakso  wrote:
> First pass: 
> Constructive comments and suggestions are always appreciated.
> Thanks.

Giving it the benefit of the doubt, I'll call it a "mobile first"
design.  It looks pretty good on a mobile screen, but I have to scroll
to see the pic of the naked lady with the full body tattoo (Ms April).
If there were a full 12 months there, it would probably be more
scrolling up and down than I'd want to do to see all of the pics.

For this layout, I'd recommend moving the nav closer to the top as the
first child of the article element and make it horizontal.  Then put
the contact information on the right.  You might want to consider
horizontal month tabs, too.

So, now what are you going to do with media queries to adapt the
design to wider screens?

For wider layouts, I'd recommend putting the nav on the left
(vertically, like it is now).  Also put the month tabs on the side
vertically and change their display so that the active one has an
inverse white bg and #99a7b4 letters and maybe give it an arrow-like
end to point at the container.  So, left would be the nav.  Then the
month tabs in a narrow vertical strip on either side of the container.
div#container in the middle, and contact info farthest right.

Here's a CSS-only arrow-type thing that might inspire you:
ul#tabs li a.tab {
  padding-left: 1em;
}

ul#tabs li a.tab.active {
  background-color: white;
  border: 0 none !important;
  color: #99A7B4 !important;
  height: 1.9em !important;
  line-height: 1.9em !important;
  padding: 0;
}

ul#tabs li a.tab.active:before {
  border-bottom: 0.97em solid #99A7B4;
  border-right: 1em solid white;
  border-top: 0.97em solid #99A7B4;
  content: "";
  display: block;
  float: left;
  overflow: hidden;
}

Note that the !importants are in there to override the !importants in
the site's current code.

If you really like the narrow layout, consider complementing it with
some kind of
tileable abstract background for the div.page which contains the
article.  Or you could do something neat with gradients.

DISCLAIMER: I'm a coder.  I've never been accused of being a designer :)

--
Vince Aggrippino
a.k.a. Ghodmode
http://www.ghodmode.com

> Best,
> ~d
>
> --
> Chelsea Creek Studio
> http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/