[css-d] Getting Social Icons to Reposition Properly in Responsive Layout

2012-06-23 Thread Gates, Jeff 
I'm new to responsive web design. I am trying to get a row of social media 
icons to move to the correct positions using a responsive WordPress template as 
you make the screen smaller. But I'm having trouble. You can see the website in 
progress at http://outtacontext.com/wp2 The row of social media icons is in the 
upper area of the right sidebar. 

The css in the layout.css is:

#top #sidebar_bg .social_bookmarks{
position: absolute;
right:143px;
z-index: 152;
margin-top:120px;
}

That looks good when the screen is the largest. However, as you make the window 
smaller, the sidebar reduces in width and you can see that the icons don't move 
accordingly. So I created a style using media queries for one of the smaller 
viewport sizes to test it out:

@media only screen and (max-width: 959px) {}
#top #sidebar_bg .social_bookmarks {
margin-top: 80px;
position: absolute;
right: 100px;
z-index: 152;
}

However, when I add that style, the @media style controls the large viewport as 
well and the original style is ignored. I tried making media query styles for 
each max-width but it didn't make any difference. I believe the last style in 
the list was always the one that was followed. (Now, at a certain point, the 
social media icons become hidden as the screen goes even smaller. That's fine. 
It's just the intermediary sizes that are presenting a problem.) Firebug helps 
me see the icons shift as I change the parameters however, it doesn't help me 
figure out why the row of icons isn't shifting properly at each size. 

I have taken the media query style out so that you can see the original issue. 
However, I'd like to know why my css for max-width: 959px isn't working right 
as well. And I'd love to learn how to solve this problem. Thanks.

Jeff


__
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] css3 animations

2012-06-23 Thread Sandy 



http://sandyfeldman.com/tests/animation/css3animation.html

http://jigsaw.w3.org/css-validator/validator turns up 80 errors on
the css, all connected to @-moz-keyframes and -moz-animation



Under 'options', you can turn vendor prefixed stuff to 'warning'.

thanks.



You do know that WebKit browsers, Opera and IE10 also support
animations with the appropriate prefixes, I hope…


Philippe, thank you much for taking the time to look at this. I am going 
to look for the appropriate prefixes and try again.


best regards and thanks again,
Sandy
__
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] Getting Social Icons to Reposition Properly in Responsive Layout

2012-06-23 Thread Tom Livingston 
On Sat, Jun 23, 2012 at 9:02 AM, Gates, Jeff gat...@si.edu wrote:
 I'm new to responsive web design. I am trying to get a row of social media 
 icons to move to the correct positions using a responsive WordPress template 
 as you make the screen smaller. But I'm having trouble. You can see the 
 website in progress at http://outtacontext.com/wp2 The row of social media 
 icons is in the upper area of the right sidebar.

 The css in the layout.css is:

 #top #sidebar_bg .social_bookmarks{
 position: absolute;
 right:143px;
 z-index: 152;
 margin-top:120px;
 }

 That looks good when the screen is the largest. However, as you make the 
 window smaller, the sidebar reduces in width and you can see that the icons 
 don't move accordingly. So I created a style using media queries for one of 
 the smaller viewport sizes to test it out:

 @media only screen and (max-width: 959px) {}
                #top #sidebar_bg .social_bookmarks {
                margin-top: 80px;
                position: absolute;
                right: 100px;
                z-index: 152;
                }

 Jeff



I use the following media queries in projects:

media=screen (base style)
media=only screen and (min-width: 480px)
media=only screen and (min-width: 600px)
media=only screen and (min-width: 768px)
media=only screen and (min-width: 992px)

and I build/style the layout starting with the mobile width(s) first.

Also, there is a lot of use of absolute positioning. This seems like
it would be much more tricky to use in a responsive layout. For the
social icons, i suggest relative positioning so it moves with the
layout and adjust margin/padding as needed... maybe let the stack at
narrower widths if desired. I also would suggest display: none; on
narrow widths as opposed to the large negative margin to hide the
icons.

HTH


-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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/