Re: [css-d] best way to handle footer image sliding up under content
Den 13.02.2014 03:03, skrev Debbie Campbell:
I hope that makes sense - I don't want a big gap between the content
and bottom image, I want them to overlap just a bit, but not too much.
Add...
#body-container {overflow: hidden;}
#footer-container {padding-top: 25%; margin-top: -400px;}
...and see if that's close enough for comfort.
The first line "corrects" line-up in IE & Firefox by making
body-container contain its children.
Second line adjusts space for background-image so it grows with
window-width, and pulls the footer-container high enough to produce some
overlapping.
Adjust values to taste ... I have only tested in windows from about
1000px to about 4000px in width.
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/
[css-d] Fixed image, fixed box, flexible wrapper div
Hello all, I have two problems. First of all, I need a little help with a button image on our site: http://xifin.com/ As you may notice, the site is fixed width and the "to XIFIN Radiology" button just runs over the menu items when reduced or enlarged. I need it to stay fixed. That doesn't seem to be a big problem, but the second issue is probably greater. When viewed over a phone or tablet, the site is cut off on the left and right and not pinchable/scrollable. We are planning to create separate mobile versions but for now just need help with this. Thanks! -- J.C. Berry, M.A. UI Developer 619.306.1712(m) jcharlesbe...@gmail.com http://www.mindarc.com This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. ?? 2510-2521 and is legally privileged. This information is confidential information and is intended only for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. __ 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] best way to handle footer image sliding up under content
>>
>>
>> I hope that makes sense - I don't want a big gap between the content and
>> bottom image, I want them to overlap just a bit but not too much.
>
> Does it do what you want if you change the background-image alignment from
> “bottom” to “top” beyond a certain viewport width ?
>
> Currently you have
>> @media only screen and (min-width: 960px) {
>> #footer-container {
>> background: #fff url(images/body-bg.jpg) center bottom
>> no-repeat;
>> background-size: 100% auto;
>
> you could add
>
> @media only screen and (min-width: 1160px) {
> #footer-container {
> background: #fff url(images/body-bg.jpg) center top
> no-repeat; /* <—- change to top here */
> background-size: 100% auto;
>
> I made a wild guess as for the value of the MQ – it could be a little more
> or a little less. Test… :=)
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com
>
>
>
I think Philippe's suggestion is worth a try, but to me you have some
things working against you. Since you are scaling the image
proportionally it's relation to the content is going to change. On a
really wide monitor (1600x900 for example) you run out of image top
that blends with the rest of the page and you end up with a visible
hard line. Narrower, and you have a lot of room below the content.
Is it worth a try having the image in an overall page wrapper instead
of the footer? So you have a background color on body (or html)
element and in the page wrap you have the image. This will prevent the
top of the image from getting cropped by footer-wrapper and you may
get more of the image peeking up behind your content.
Just a thought. HTH.
--
Tom Livingston | Senior Front-End 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/
Re: [css-d] best way to handle footer image sliding up under content
Le 13 févr. 2014 à 11:02, Debbie Campbell a écrit :
http://redkitecreative.com/dev/gardensweet/farmers-markets/
>>>
>>>
>>> I'd like to have the large image that's currently in #footer-container slide
>>> up so that it's
>>>
>>> 1) on top of #container and #body-container
>>>
>>> 2) 'underlapping' the bottom of the page content a bit so some of the color
>>> shows behind the content.
>>>
>
> Yes - here's an example of what I'd like to have:
>
>> http://redkitecreative.com/dev/gardensweet/ex1.jpg
>
> See how the bottom image is moved up behind/under the main content area so
> some of the blue/grey shows behind the text?
>
> But this is what I don't want:
>
>> http://redkitecreative.com/dev/gardensweet/ex2.jpg
>
> When the browser's at full width, the background image rides up too far and
> the top is cut off. This is Chrome.
>
>
>
>
> I hope that makes sense - I don't want a big gap between the content and
> bottom image, I want them to overlap just a bit but not too much.
Does it do what you want if you change the background-image alignment from
“bottom” to “top” beyond a certain viewport width ?
Currently you have
> @media only screen and (min-width: 960px) {
> #footer-container {
> background: #fff url(images/body-bg.jpg) center bottom
> no-repeat;
> background-size: 100% auto;
you could add
@media only screen and (min-width: 1160px) {
#footer-container {
background: #fff url(images/body-bg.jpg) center top no-repeat;
/* <—- change to top here */
background-size: 100% auto;
I made a wild guess as for the value of the MQ – it could be a little more or
a little less. Test… :=)
Philippe
--
Philippe Wittenbergh
http://l-c-n.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] best way to handle footer image sliding up under content
On 2/12/2014 6:17 PM, Tom Livingston wrote: On Wed, Feb 12, 2014 at 5:55 PM, Debbie Campbell wrote: In this page: http://redkitecreative.com/dev/gardensweet/farmers-markets/ I'd like to have the large image that's currently in #footer-container slide up so that it's 1) on top of #container and #body-container 2) 'underlapping' the bottom of the page content a bit so some of the color shows behind the content. Hi Debbie, Having a little trouble understanding what you're after. Do you have a link to an image of the effect you are typing to achieve that we can see? Yes - here's an example of what I'd like to have: http://redkitecreative.com/dev/gardensweet/ex1.jpg See how the bottom image is moved up behind/under the main content area so some of the blue/grey shows behind the text? But this is what I don't want: http://redkitecreative.com/dev/gardensweet/ex2.jpg When the browser's at full width, the background image rides up too far and the top is cut off. This is Chrome. http://redkitecreative.com/dev/gardensweet/ex3.jpg And this is IE, in this one the background image is too far below the content and there's a big gap. I hope that makes sense - I don't want a big gap between the content and bottom image, I want them to overlap just a bit, but not too much. -- Debbie __ 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] best way to handle footer image sliding up under content
On 2/12/2014 6:17 PM, Tom Livingston wrote: On Wed, Feb 12, 2014 at 5:55 PM, Debbie Campbell wrote: In this page: http://redkitecreative.com/dev/gardensweet/farmers-markets/ I'd like to have the large image that's currently in #footer-container slide up so that it's 1) on top of #container and #body-container 2) 'underlapping' the bottom of the page content a bit so some of the color shows behind the content. Hi Debbie, Having a little trouble understanding what you're after. Do you have a link to an image of the effect you are typing to achieve that we can see? Yes - here's an example of what I'd like to have: http://redkitecreative.com/dev/gardensweet/ex1.jpg See how the bottom image is moved up behind/under the main content area so some of the blue/grey shows behind the text? But this is what I don't want: http://redkitecreative.com/dev/gardensweet/ex2.jpg When the browser's at full width, the background image rides up too far and the top is cut off. This is Chrome. I hope that makes sense - I don't want a big gap between the content and bottom image, I want them to overlap just a bit but not too much. -- Debbie __ 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] best way to handle footer image sliding up under content
On Wed, Feb 12, 2014 at 5:55 PM, Debbie Campbell wrote: > In this page: > >> http://redkitecreative.com/dev/gardensweet/farmers-markets/ > > > I'd like to have the large image that's currently in #footer-container slide > up so that it's > > 1) on top of #container and #body-container > > 2) 'underlapping' the bottom of the page content a bit so some of the color > shows behind the content. > Hi Debbie, Having a little trouble understanding what you're after. Do you have a link to an image of the effect you are typing to achieve that we can see? -- Tom Livingston | Senior Front-End 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/
[css-d] best way to handle footer image sliding up under content
In this page: http://redkitecreative.com/dev/gardensweet/farmers-markets/ I'd like to have the large image that's currently in #footer-container slide up so that it's 1) on top of #container and #body-container 2) 'underlapping' the bottom of the page content a bit so some of the color shows behind the content. Right now I have a negative margin on #footer-container but that's not working (rather it only works in Chrome/FF when the browser window is not full-sized). Can someone please give me some direction on a better way to do this? -- Debbie Campbell __ 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] Site Performance
On Tue, Feb 11, 2014 at 9:33 AM, Tom Livingston wrote: > What I am after are good easy to understand resources or clear easy to > understand samples/instruction for how to go about increasing site > performance. > A good place to start if you want to measure the performance of a site and get tips on how to increase your load times: https://developers.google.com/speed/pagespeed/insights/ How best to deal with large style sheets, multiple styles > sheets as well as things like loading scripts only when needed (like > on desktop only,etc.). Smashing Magazine is great resource for stuff like this: http://mobile.smashingmagazine.com/2013/04/03/build-fast-loading-mobile-website/ Try searching the rest of the site for more resources. -- Jon Reece jon.re...@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/
