Re: [css-d] is this possible in RWD?

[David Hucklesby]

[...]

On 2/17/15 1:54 PM, Sara Haradhvala wrote:

Am wondering - is it possible to have a responsive layout that has a
main column and an optional sidebar where text from the main column
flows under the sidebar - but where the sidebar drops under the main
column in mobile view? Not using flexbox (need to support IE8 and
IE9). Is JS necessary?




On Feb 17, 2015, at 6:43 PM, David Hucklesby 
wrote:


Float the sidebar and give it a percent width, with that width set to
100% on narrow windows (via media query) perhaps?


On 2/17/15 4:50 PM, Sara Haradhvala wrote:

doesn't that require the sidebar div to come first in the HTML? If so,
then on mobile, it will also come first. Or is there another option?


You are right of course. To move the sidebar below the main content on
narrow screens, see if this code works for you:




On 2/20/15 7:48 AM, Sara Haradhvala wrote:

Hi David,

Thanks - that's an interesting solution - I would never have thought of
using table-caption for this!  For the moment, I ended up using flexbox -
only on mobile so IE9 didn't really matter. It seems good, but may have
issues on older androids (before 4.4) - if that turns out to be a problem for
us - I'll give this a shot.




Good thinking. The beauty of flexbox is that you can usually combine it with
other methods that work as fallback. Not only does the "display" value of the
parent use "flex" in browsers that understand it, but each child becomes a flex
item, no matter its assigned "display" value.

--
Cordially,
David
__
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] is this possible in RWD?

[Sara Haradhvala]

Hi David,

Thanks - that's an interesting solution - I would never have thought of using 
table-caption for this!  For the moment, I ended up using flexbox - only on 
mobile so IE9 didn't really matter. It seems good, but may have issues on older 
androids (before 4.4) - if that turns out to be a problem for us - I'll give 
this a shot. 

Sara


On Feb 18, 2015, at 3:01 PM, David Hucklesby  wrote:

> On 2/17/15 4:50 PM, Sara Haradhvala wrote:
>> doesn't that require the sidebar div to come first in the HTML? If so,
>> then on mobile, it will also come first. Or is there another option?
>> --
>> Sara Haradhvala
>> Manager, Harlen Web Consulting LLC
>> s...@harlenweb.com
>> 
>> 
>> 
>> On Feb 17, 2015, at 6:43 PM, David Hucklesby  wrote:
>> 
>>> On 2/17/15 1:54 PM, Sara Haradhvala wrote:
 Am wondering - is it possible to have a responsive layout that has a main
 column and an optional sidebar where text from the main column flows under
 the sidebar - but where the sidebar drops under the main column in mobile
 view? Not using flexbox (need to support IE8 and IE9). Is JS necessary?
 
>>> 
>>> Float the sidebar and give it a percent width, with that width set to 100% 
>>> on
>>> narrow windows (via media query) perhaps?
>>> 
> 
> You are right of course. To move the sidebar below the main content on narrow
> screens, see if this code works for you:
> 
> 
> 
> -- 
> Cordially,
> David
> __
> 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] is this possible in RWD?

[David Hucklesby]

On 2/17/15 4:50 PM, Sara Haradhvala wrote:

doesn't that require the sidebar div to come first in the HTML? If so,
then on mobile, it will also come first. Or is there another option?
--
Sara Haradhvala
Manager, Harlen Web Consulting LLC
s...@harlenweb.com



On Feb 17, 2015, at 6:43 PM, David Hucklesby  wrote:


On 2/17/15 1:54 PM, Sara Haradhvala wrote:

Am wondering - is it possible to have a responsive layout that has a main
column and an optional sidebar where text from the main column flows under
the sidebar - but where the sidebar drops under the main column in mobile
view? Not using flexbox (need to support IE8 and IE9). Is JS necessary?



Float the sidebar and give it a percent width, with that width set to 100% on
narrow windows (via media query) perhaps?



You are right of course. To move the sidebar below the main content on narrow
screens, see if this code works for you:

 

--
Cordially,
David
__
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] is this possible in RWD?

[David Hucklesby]

On 2/17/15 1:54 PM, Sara Haradhvala wrote:

Am wondering - is it possible to have a responsive layout that has a main
column and an optional sidebar where text from the main column flows under
the sidebar - but where the sidebar drops under the main column in mobile
view? Not using flexbox (need to support IE8 and IE9). Is JS necessary?



Float the sidebar and give it a percent width, with that width set to 100% on
narrow windows (via media query) perhaps?

Incidentally, I don’t think IE8 and IE9 occur on mobile devices, do they?

--
Cordially,
David
__
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] is this possible in RWD?

[Karl DeSaulniers]

I would say just an @media and swap z-index.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Feb 17, 2015, at 3:54 PM, Sara Haradhvala  wrote:

> Am wondering - is it possible to have a responsive layout that has a main 
> column and an optional sidebar where text from the main column flows under 
> the sidebar - but where the sidebar drops under the main column in mobile 
> view? Not using flexbox (need to support IE8 and IE9). Is JS necessary?
> 
> Thanks so much,
> Sara
> 
> 
> __
> 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/

[css-d] is this possible in RWD?

[Sara Haradhvala]

Am wondering - is it possible to have a responsive layout that has a main 
column and an optional sidebar where text from the main column flows under the 
sidebar - but where the sidebar drops under the main column in mobile view? Not 
using flexbox (need to support IE8 and IE9). Is JS necessary?

Thanks so much,
Sara


__
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] Is this possible with CSS?

[Gunlaug Sørtun]

Gunlaug Sørtun wrote:

> I mark up for XHTML served as 'application/xhtml+xml', and then serve it
> as 'text/html' since IE doesn't support it otherwise.

"Close tabs" mistake :-)

For XML capable browsers:


HTML for IE:


Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@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] Is this possible with CSS?

[Gunlaug Sørtun]

Geoffrey Hoffman wrote:

> Unrelated question... what is the purpose of:
> 
> /*

Re: [css-d] Is this possible with CSS?

[Geoffrey Hoffman]

>-Original Message-
>From: css-d-boun...@lists.css-discuss.org on behalf of Gunlaug Sørtun
>Sent: Sat 3/28/2009 9:12 PM
>To: Geoffrey Hoffman
>Cc: css-d@lists.css-discuss.org
>Subject: Re: [css-d] Is this possible with CSS?
> 
>Geoffrey Hoffman wrote:
>
>> Specifically, I want the  bullet to turn a color when I hover on 
>> the  inside it.
>
>With CSS only, yes, but browser support is a bit weak.
>
>As an example: we can play with generated content...
><http://www.gunlaug.no/tos/moa_43.html>
>...and get the effect you want - in supporting browsers.
>
>regards
>   Georg
>-- 
>http://www.gunlaug.no
>


Georg, 
I know you get this a lot, but, "You Rock."
Your example works in FF3.0.8 for me.
I have a strong suspicion if I implement it this way
the client will moan about it not working in IE6
so I will likely try the background-image position
trick on a:hover, but I like the technique.


Unrelated question... what is the purpose of:

/**/

inside the style block?




__
css-discuss [cs...@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] Is this possible with CSS?

[Gunlaug Sørtun]

Philippe Wittenbergh wrote:

> [...] Using generated content has a lot to go, if you want a simple 
> type of bullet. More decorative list markers are unfortunately still 
> a graphics thing (unless SVG can be used ! Hmm, inline SVG, yumyum).

Should also be possible to resize images inserted through generated
content.
Haven't really bothered to test apart from that I had to add sizes to a
"generated content" image while testing Safari 4PB since Safari - new
and old - has an irritating bug in that they size such replacing images
to the space of the replaced one by default.

We may also get background resizing in CSS3, which will provide even
more options. Have only tested that in Opera with an -o- test property,
and it's working fine.

> Thing is, most people have problems with all that code forking :-).

I can't see why :-)After all: with a bit of care it's just a
"progressive enhancement" matter, where we just add the various bits of
code in the right order, and leave to browsers to pick and make the most
out of what each of them can handle. Got to have intimate knowledge
about the inner workings and standards support of all major browsers
though - including slightly older versions, which may be a problem...

Standards support is improving across browser-land, and for that to
continue and work to our advantage, we simply _have to_ fork and add
enhancements, fall-backs and various workarounds now and then.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@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] Is this possible with CSS?

[Philippe Wittenbergh]

Gunlaug Sørtun wrote:

> Philippe Wittenbergh wrote:
>
>>> 
>
>> Works as well in Fx 3. You could improve it: set the generated
>> content to display:inline-block and give it a small margin-right.
>
> This will improve bullet positioning in much older Geckos too, when  
> the
> right -mos- replacement for 'inline-block' is added.

That would be -moz-inline-box or similar. This might be a problem  
though. Those don't really behave as inline-block. A quick test using - 
moz-inline-box caused Gecko 1.8.x to display the bullet on its own  
line. Not exactly what you want :-)

Luckily, those older Gecko's are disappearing, except for older OS.
Otoh, in the more simple situation from the OP (one line list-items),  
just leaving the generated content to default (inline) and using a  
little bit of padding will work.

>> The alternative, more cross-browser friendly way (aka, support for
>> old IE): set the  to display:block, give it some padding-left and
>> fill it with a background-image that changes on hover.
>
> Ideally I'd use such a "sprite" solution only as an addition/ 
> alternative
> for older IE, since images can't be resized along with text. The  
> perfect
> IE-fix is one that simply doesn't work outside old IE, and therefore
> becomes obsolete along with those older versions :-)

Oh, I don't disagree here. Using generated content has a lot to go, if  
you want a simple type of bullet. More decorative list markers are  
unfortunately still a graphics thing (unless SVG can be used ! Hmm,  
inline SVG, yumyum).
Thing is, most people have problems with all that code forking :-).

> FWIW: I've also noticed that when text size is changed in browser, IE8
> only resizes the generated content (the bullet in this case) and
> corrects its line box and thereby its visual position, after a reload.
> We can note this down as a bug in IE8.

Noted. Another one of those pesky little things.

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@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] Is this possible with CSS?

[Gunlaug Sørtun]

Philippe Wittenbergh wrote:

>> 

> Works as well in Fx 3. You could improve it: set the generated 
> content to display:inline-block and give it a small margin-right.

This will improve bullet positioning in much older Geckos too, when the
right -mos- replacement for 'inline-block' is added.

> The alternative, more cross-browser friendly way (aka, support for 
> old IE): set the  to display:block, give it some padding-left and 
> fill it with a background-image that changes on hover.

Ideally I'd use such a "sprite" solution only as an addition/alternative
for older IE, since images can't be resized along with text. The perfect
IE-fix is one that simply doesn't work outside old IE, and therefore
becomes obsolete along with those older versions :-)

FWIW: I've also noticed that when text size is changed in browser, IE8
only resizes the generated content (the bullet in this case) and
corrects its line box and thereby its visual position, after a reload.
We can note this down as a bug in IE8.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@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] Is this possible with CSS?

[Philippe Wittenbergh]

On Mar 29, 2009, at 1:12 PM, Gunlaug Sørtun wrote:

> As an example: we can play with generated content...
> 
> ...and get the effect you want - in supporting browsers.

Works as well in Fx 3. You could improve it: set the generated content  
to display:inline-block and give it a small margin-right.

The alternative, more cross-browser friendly way (aka, support for old  
IE): set the  to display:block, give it some padding-left and fill  
it with a background-image that changes on hover.

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@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] Is this possible with CSS?

[Gunlaug Sørtun]

Geoffrey Hoffman wrote:

> Specifically, I want the  bullet to turn a color when I hover on 
> the  inside it.

With CSS only, yes, but browser support is a bit weak.

As an example: we can play with generated content...

...and get the effect you want - in supporting browsers.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@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] Is this possible with CSS?

[Bobby Jack]

--- On Sun, 3/29/09, Geoffrey Hoffman  wrote:

> I just can't make the bullet change on hover.
> I think it's due to how selectors work.

The CSS I supplied should do just that - turns off the bullets on the whole 
list by default, turns them back on for each li, much as your example does.

> In short, the hover is happening on  
> but I'm trying to change the color of 
> (a's parent)

To do this (without javascript or) requires the :hover to apply to the li. This 
shouldn't, practically, be a problem (other than the possible old-version-of-IE 
issue I mentioned previously).

- Bobby
__
css-discuss [cs...@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] Is this possible with CSS?

[Geoffrey Hoffman]

Geoffrey D. Hoffman
President, Global Interactive Minds, LLC
398 S. Mill Ave. #303
Tempe, AZ 85281
Office: 480-921-3171
Fax: 480-921-3139
Mobile: 480-231-8323

G | M | M
Global Media Minds




--- On Sun, 3/29/09, Geoffrey Hoffman  wrote:

> From: Geoffrey Hoffman 
> Subject: [css-d] Is this possible with CSS?
> To: css-d@lists.css-discuss.org
> Date: Sunday, March 29, 2009, 3:20 AM
> I'm trying to replicate the effect done (with tables,
> images and Javascript) in the left column of this page...
> 
> http://holdenluntz.com/artist.htm
> 
> ... with CSS only.
> 
> Specifically, I want the  bullet to turn a color
> when I hover on the  inside it. (Ignore the images
> that show up on hover in the right-hand column). I've
> recoded it as a simple link list, e.g
> 
> 
> Link
> One
> Link
> Two
> Link
> Three
> 
> 
> I know that it's possible to use a re-positioned
> background image to achieve this effect, but I was wondering
> if it is possible to do with CSS only. I've tried
> several of the obvious things without any luck.
> 
> Any suggestions?
> 
> TIA,
> 
> Geoff
> 
>  
> -Original Message-
> From: css-d-boun...@lists.css-discuss.org on behalf of Bobby Jack
> Sent: Sat 3/28/2009 7:35 PM
> To: css-d@lists.css-discuss.org
> Subject: Re: [css-d] Is this possible with CSS?
>  
> 
> Hi Geoffrey,
> 
> Have you tried something like the following?
> 
>   ul { list-style-type: none; color: #fff; }
>   li:hover { list-style-type: disc; color: #f7c30e; }
>   li:hover a { color: #f7c30e; }
>   a { text-decoration: none; color: #fff }
> 
> (The "li:hover a" and "a { color: ... }" seem to be required by IE7 - gah. 
> Other browsers handle inherit properly)
> 
> Probably won't work in IE6, although I haven't tested it; 
> one version of IE doesn't like :hover on anything but a, but I cannot 
> remember which
> 
> - Bobby


Yeah, I can get the colors I want to change on hover on the text...
that's just a simple a{ } and a:hover{ }

I just can't make the bullet change on hover.
I think it's due to how selectors work.

In short, the hover is happening on  
but I'm trying to change the color of  (a's parent)

Even when I try to make an li:hover rule,
a different color it doesn't seem to work.
It doesn't matter if it has an  inside it or not.

I'm testing on FF 3.0.7, Win XP





__
css-discuss [cs...@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] Is this possible with CSS?

[Bobby Jack]

Hi Geoffrey,

Have you tried something like the following?

ul { list-style-type: none; color: #fff; }
li:hover { list-style-type: disc; color: #f7c30e; }
li:hover a { color: #f7c30e; }
a { text-decoration: none; color: #fff }

(The "li:hover a" and "a { color: ... }" seem to be required by IE7 - gah. 
Other browsers handle inherit properly)

Probably won't work in IE6, although I haven't tested it; one version of IE 
doesn't like :hover on anything but a, but I cannot remember which

- Bobby

--- On Sun, 3/29/09, Geoffrey Hoffman  wrote:

> From: Geoffrey Hoffman 
> Subject: [css-d] Is this possible with CSS?
> To: css-d@lists.css-discuss.org
> Date: Sunday, March 29, 2009, 3:20 AM
> I'm trying to replicate the effect done (with tables,
> images and Javascript) in the left column of this page...
> 
> http://holdenluntz.com/artist.htm
> 
> ... with CSS only.
> 
> Specifically, I want the  bullet to turn a color
> when I hover on the  inside it. (Ignore the images
> that show up on hover in the right-hand column). I've
> recoded it as a simple link list, e.g
> 
> 
> Link
> One
> Link
> Two
> Link
> Three
> 
> 
> I know that it's possible to use a re-positioned
> background image to achieve this effect, but I was wondering
> if it is possible to do with CSS only. I've tried
> several of the obvious things without any luck.
> 
> Any suggestions?
> 
> TIA,
> 
> Geoff
> 
>  
> 
> __
> css-discuss [cs...@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 [cs...@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] Is this possible with CSS?

[Geoffrey Hoffman]

I'm trying to replicate the effect done (with tables, images and Javascript) in 
the left column of this page...

http://holdenluntz.com/artist.htm

... with CSS only.

Specifically, I want the  bullet to turn a color when I hover on the  
inside it. (Ignore the images that show up on hover in the right-hand column). 
I've recoded it as a simple link list, e.g


Link One
Link Two
Link Three


I know that it's possible to use a re-positioned background image to achieve 
this effect, but I was wondering if it is possible to do with CSS only. I've 
tried several of the obvious things without any luck.

Any suggestions?

TIA,

Geoff

 

__
css-discuss [cs...@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] Is this possible?

[Kit Grose]

Simply put: yes it is.

Set the pale yellow as the background image of the body (create a 1px- 
high sliver of yellow and position it with background: #fff url(../ 
images/myyellowsliver.gif) 140px 0 repeat-y; assuming you want 140px  
of white sidebar to the left (it's a guess))


Make a DIV for the primary nav (with an unordered list for the nav  
itself), a div for the testimonial customer names, and a DIV for the  
content (give that last one a unique ID). Float all three DIVs left  
and give them the appropriate width.


How you want to implement the logo is up to you (I'd be inclined to  
use a positioned h1 tag with an image tag for the text inside it so I  
could put it first in the source order), but for pragmatism's sake,  
you could put it into the third DIV, right above an image tag (for  
the photo), and two more floated DIVs (to form the columns of content).


You could change the text in the third DIV using Javascript quite  
easily (but remember to provide fall-back links for non JS users).


Hope that helps,

Kit__
css-discuss [EMAIL PROTECTED]
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] Is this possible?

[Thierry Koblentz]

> I have been handed this job by a designer and I am wracking my brains
trying to work out if it is possible using CSS. Have a look at 
> http://www.ratking.co.uk/testim.jpg for the layout. What I need to know
is...

> 1. Is this layout possible? I can see 6 divs, which looks like a nightmare
to position correctly. I can do it using tables, but I am trying to get 
> away from the Dark Side.
> 2. As you can see, there is a nav bar on the far left which will be common
to every page, but to the right of that is a second one exclusive to that >
page. What I need to do is, when someone clicks on a customer's name both
the picture and the text below needs to change, in 3 divs. I would like to >
re-load the divs rather than the whole page, I think it will look smoother,
but can it be done? I know JavaScript and ASP if that helps.

I see just four DIVs, four columns.
You can either use a background image for that large image or an IMG element
that you can position with position:absolute 

-- 
Regards,
Thierry | http://www.TJKDesign.com




__
css-discuss [EMAIL PROTECTED]
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] Is this possible?

[Kevin Stevens]

Hi Gang
   I have been handed this job by a designer and I am wracking my 
brains trying to work out if it is possible using CSS. Have a look at 
http://www.ratking.co.uk/testim.jpg for the layout. What I need to know is...

1. Is this layout possible? I can see 6 divs, which looks like a nightmare to 
position correctly. I can do it using tables, but I am trying to get away from 
the Dark Side.
2. As you can see, there is a nav bar on the far left which will be common to 
every page, but to the right of that is a second one exclusive to that page. 
What I need to do is, when someone clicks on a customer's name both the picture 
and the text below needs to change, in 3 divs. I would like to re-load the divs 
rather than the whole page, I think it will look smoother, but can it be done? 
I know JavaScript and ASP if that helps.

Many thanks

Kevin Stevens
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
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] Is this possible at all...

[KJ'[EMAIL PROTECTED]]

Excellent. Just what I was looking for. Thank you very much.

Gunlaug Sørtun skrev:
> KJ'[EMAIL PROTECTED] wrote:
>> I'm trying to get a fixed width div and an elastic div play together
>>  inside an elastic wrapper div. So now I'm wondering is that possible
>> at all?
>
> Yes, but you've locked up 'width' too much for your version to work.
> Better take the following (found through the CSS-D WIKI)...
> 
> ...and modify that until it suits you.
>
> I use that method a lot - like here...
> 
> ...but it isn't all that obvious since I have added so much *garbage*
> err... *styleable elements* into the mix :-)
>
> regards
> Georg
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Is this possible at all...

[Gunlaug Sørtun]

KJ'[EMAIL PROTECTED] wrote:
> I'm trying to get a fixed width div and an elastic div play together
>  inside an elastic wrapper div. So now I'm wondering is that possible
> at all?

Yes, but you've locked up 'width' too much for your version to work.
Better take the following (found through the CSS-D WIKI)...

...and modify that until it suits you.

I use that method a lot - like here...

...but it isn't all that obvious since I have added so much *garbage*
err... *styleable elements* into the mix :-)

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Is this possible at all...

[KJ'[EMAIL PROTECTED]]

Hi Eric,

That makes the content div drop below the sidebar... thanks a lot though.

Kim

KJ'[EMAIL PROTECTED] skrev:
> Hi Eric,
>
> That makes the content div drop below the sidebar... thanks a lot though.
>
> Kim
>
> Éric Vesque skrev:
>> KJ'[EMAIL PROTECTED] a écrit :
>>> Hi,
>>>
>>> I'm trying to get a fixed width div and an elastic div play together 
>>> inside an elastic wrapper div. So now I'm wondering is that possible 
>>> at all?
>>>
>>> What I have working is this...
>>>
>>> HTML:
>>> 
>>> This is the content
>>> This is the sidebar
>>> 
>>> 
>>>
>>> CSS:
>>> #wrapper{margin:0 auto;text-align:left;width:90%;position:relative}
>>> #content {float:left;width:65%;padding:20px 0 40px;line-height:1.5em}
>>> #sidebar { 
>>> padding:10px;width:25%;font-size:.9em;overflow:hidden;float:right;background:#fef1fe;margin:
>>>  
>>> 30px 0 20px;}
>>>
>>>
>>> What I want is the below CSS... but that doesn't work because the 
>>> sidebar drops below the content div. If I put the fixed width 
>>> sidebar on the left and the elastic content div to the right it 
>>> works fine... but that is not what I need.
>>>
>>> CSS
>>> #wrapper{margin:0 auto;text-align:left;width:90%;position:relative}
>>> #content {float:left;width:65%;padding:20px 0 
>>> 40px;line-height:1.5em;margin-right:320px}
>>> #sidebar 
>>> {padding:10px;width:280px;font-size:.9em;overflow:hidden;float:right;background:#fef1fe}
>>>  
>>>
>>>
>>> Anyone...?
>>>
>>> Kim
>>
>> Hi Kim,
>> did you try this:
>> HTML:
>> 
>> This is the sidebar 
>> 
>> This is the content
>> 
>> 
>>
>> I think that should work as you want.
>> Regards,
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Is this possible at all...

[KJ'[EMAIL PROTECTED]]

Hi,

I'm trying to get a fixed width div and an elastic div play together 
inside an elastic wrapper div. So now I'm wondering is that possible at 
all?

What I have working is this...

HTML:

This is the content
This is the sidebar



CSS:
#wrapper{margin:0 auto;text-align:left;width:90%;position:relative}
#content {float:left;width:65%;padding:20px 0 40px;line-height:1.5em}
#sidebar { 
padding:10px;width:25%;font-size:.9em;overflow:hidden;float:right;background:#fef1fe;margin:
 
30px 0 20px;}


What I want is the below CSS... but that doesn't work because the 
sidebar drops below the content div. If I put the fixed width sidebar on 
the left and the elastic content div to the right it works fine... but 
that is not what I need.

CSS
#wrapper{margin:0 auto;text-align:left;width:90%;position:relative}
#content {float:left;width:65%;padding:20px 0 
40px;line-height:1.5em;margin-right:320px}
#sidebar 
{padding:10px;width:280px;font-size:.9em;overflow:hidden;float:right;background:#fef1fe}
 


Anyone...?

Kim
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Is this possible?

[Christian Montoya]

On 1/18/06, Jarod Watkins <[EMAIL PROTECTED]> wrote:
> Hello list!
> Been subscribed for a while, and love the list so far! anyway, i have
> a question. I have a website i am making for a customer , Sky-Vue
> Skateland, and i want to do something with the Current Events section
> ( http://www.skyvueskateland.com/v2/ ). If you notice, there are the
> events as links then the dates in the calendar are links also. Is
> there anyway that if someone hovers over the link at the top, that
> the corresponding link inside the calendar changes its color too, as
> if it was being hovered over too? I tried putting them in the same
> class but that didn't work. If anyone has any ideas it would be
> greatly appreciated.

The reason why you don't want to do this with CSS is that for one item
to affect another on a state like :hover, you have to connect those
items by traversing everything between them. That is, if I have:

- link1
- link2
- link3

I have to do the following to get link3 to change when link1 is hovered:

link1:hover+link2+link3 { effect; }

by using the adjacent selector. See what I mean? Now imagine how many
objects you have to go through to get from those links in the top to
the items in the calendar. Oh, and by the way, this won't work in most
browsers.

To see how serious this gets, see: http://cssmaze.christianmontoya.com
(preferably with Firefox or another mozilla browser)

Now, if you use Javascript, this probably isn't hard at all, since
Javascript has no trouble going through all the objects and playing
around with the behavior. But I'm not the person to give you a
Javascript solution, and I don't think this is the list for it either.

> Also any comments on the design are also
> welcomed. Thanks!

I think corners can in fact be too rounded. If you reduce the radius
of those corners they might look better.

--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Is this possible?

[Seona Bellamy]

On 19/01/06, Jarod Watkins <[EMAIL PROTECTED]> wrote:
>
> Is there anyway that if someone hovers over the link at the top, that
> the corresponding link inside the calendar changes its color too, as
> if it was being hovered over too? I tried putting them in the same
> class but that didn't work. If anyone has any ideas it would be
> greatly appreciated.


Hi Jarrod,

I'm not 100% certain, but I don't think this is something that can be done
just with CSS. On the other hand, it sounds like the perfect opportunity for
some JavaScript - it's adding an enhancement to the site, rather than a
necessary function that people without JS enabled will find a problem to be
without.

If you haven't seen it already, take a look at
http://www.onlinetools.org/articles/unobtrusivejavascript/ for some really
good tips on how to write JS that enhances the usability fo your site
without getting in the way of the basic functions.

Cheers,

Seona.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Is this possible?

[Jarod Watkins]

Hello list!
Been subscribed for a while, and love the list so far! anyway, i have  
a question. I have a website i am making for a customer , Sky-Vue  
Skateland, and i want to do something with the Current Events section  
( http://www.skyvueskateland.com/v2/ ). If you notice, there are the  
events as links then the dates in the calendar are links also. Is  
there anyway that if someone hovers over the link at the top, that  
the corresponding link inside the calendar changes its color too, as  
if it was being hovered over too? I tried putting them in the same  
class but that didn't work. If anyone has any ideas it would be  
greatly appreciated. Also any comments on the design are also  
welcomed. Thanks!

Jarod Watkins
252.908.0853
[EMAIL PROTECTED]
www.jxxtech.net
Indemand Solutions for an Ondemand World




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Is this possible?

[Mindy]

I have addressed all of your (Jesper's) comments below – the green bar now
looks proper in all apps! However... when I close the birdseed div above the
contents (before it closed after the contents div) it causes the sidebar to
drop below the content div on the left hand side of the page. This doesn't
happen in IE6 or Safari 1.2.4, it happens in Firefox,Mozilla.

Here are the links to the html and css
www.blueaardvark.ca/YMA/index_b.html
www.blueaardvark.ca/YMA/styles_b.html

I am still having problems with the background in Firefox 1.0.7 and Mozilla.
[The background stretches as it should in Firefox 1.5(beta), Opera8.5, IE6,
and Safari (1.2.4)]

Any thoughts? Thank you for all of your help so far.

Mindy


I have an approximately 2px thick white line on top of the nav. in
> Mozilla 1.7.12 (bottom seems to be neat, 1px) and the same 2px top +
> about 4px bottom in MSIE
>
> Neat green background on them both, but in Mozilla there's a remarkable
> difference in the right column background right beside the end of the
> green local navigation bar.
>
> Looking into the code, I find it a little tricky to find out how that
> difference can get there in Mozilla. I've tried my Opera too, it has the
>   same looks with a different "bar" cutting through the 3rd column.
>
> BUT that was not your specified problem :-). I suppose that you're aware
> that the green #birdseed image is 1px white-bordered on top and bottom?
> First of all, I would use a 10x10px green image, and the let browser
> repeat for full background effect. The border in top + bottom is easily
> taken care of with a css border.
>
> You use
> padding: 0 0 0 0;
> margin:0 0 0 0;
>
> a number of times,
>
> padding: 0;
> margin: 0;
>
> would do just as nicely :)
>
> You have declared #birdseed to be 28px high, but you have a 28px picture
> and a 92px (news.jpg) picture in the div, which, on top, you do not
> close until after the content div.
>
> Your HTML doesn't validate, but it's only a missing alt-tag on the
> fulllength_green. Much worse, your CSS has a number of errors.
> <
> http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.blueaardvark.ca/YMA/index.html
> >
> I'm not confident that they are without influence in your troubles.
>
> Try closing your #birdseed div immediately after it's use, look into
> your validation errors, then let's see how it fares, we might be lucky :)
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Is this possible?

[Jesper Brunholm]

Hi Mindy and CSS-d

Mindy wrote:
> Thanks for your help, Jesper. I did fiddle with it and have it sort it out.
> It still has problems (thick white line in IE 6; background disappears in
> Firefox 1.0, but not in the 1.5 beta!)

 > I don't know how you're previewing this, –here's the new link:
 > www.blueaardvark.ca/YMA/index.html

I have an approximately 2px thick white line on top of the nav. in 
Mozilla 1.7.12 (bottom seems to be neat, 1px) and the same 2px top + 
about 4px bottom in MSIE

Neat green background on them both, but in Mozilla there's a remarkable 
difference in the right column background right beside the end of the 
green local navigation bar.

Looking into the code, I find it a little tricky to find out how that 
difference can get there in Mozilla. I've tried my Opera too, it has the 
  same looks with a different "bar" cutting through the 3rd column.

BUT that was not your specified problem :-). I suppose that you're aware 
that the green #birdseed image is 1px white-bordered on top and bottom?
First of all, I would use a 10x10px green image, and the let browser 
repeat for full background effect. The border in top + bottom is easily 
taken care of with a css border.

You use
padding: 0 0 0 0;
margin:0 0 0 0;

a number of times,

padding: 0;
margin: 0;

would do just as nicely :)

You have declared #birdseed to be 28px high, but you have a 28px picture 
and a 92px (news.jpg) picture in the div, which, on top, you do not 
close until after the content div.

Your HTML doesn't validate, but it's only a missing alt-tag on the 
fulllength_green. Much worse, your CSS has a number of errors. 

 
I'm not confident that they are without influence in your troubles.

Try closing your #birdseed div immediately after it's use, look into 
your validation errors, then let's see how it fares, we might be lucky :)

> I appreciate your comments about the navigation. Unfortunately, I have no
> control over the site's design, I'm just coding it. 

Poor you - all the fun is taken ;-)

> I'm new to CSS and I'm
> finding the workarounds for various browsers challenging.

I believe you, I often find them tricky too. I think it is worthwile to 
make a design that looks ok, but not similar, in the main browsers, with 
only very little browser-specific ajustment near the very end... :)

> Thank you for your response, Jesper. All help is appreciated. I'm sorry I
> took so long to respond, I didn't see your comment. I thought my question
> had left the radar.

I'l send this one directly to you too, so you don't have to look for it 
this time :)

Best regards, hope this helps

Jesper Brunholm
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Is this possible?

[Mindy]

Thanks for your help, Jesper. I did fiddle with it and have it sort it out.
It still has problems (thick white line in IE 6; background disappears in
Firefox 1.0, but not in the 1.5 beta!)

I appreciate your comments about the navigation. Unfortunately, I have no
control over the site's design, I'm just coding it. I'm new to CSS and I'm
finding the workarounds for various browsers challenging.

I don't know how you're previewing this, –here's the new link:

www.blueaardvark.ca/YMA/index.html

Thank you for your response, Jesper. All help is appreciated. I'm sorry I
took so long to respond, I didn't see your comment. I thought my question
had left the radar.

Mindy


On 11/20/05, Jesper Brunholm <[EMAIL PROTECTED]> wrote:
>
> Mindy wrote:
> > I have included two links one is the page before adding a sub-nav, the
> other
> > is a link after attempting to add the sub-nav.
> >
> > http://www.blueaardvark.ca/yma/2index.html
> > http://www.blueaardvark.ca/yma/sub_nav.html
> >
> > I'm attempting to place a sub-nav in the green bar across the top, but
> when
> > I place an additional div (in this case an unordered list) it breaks and
> I
> > can't sort out how to fix it. Is this possible? If so, how.
>
> I don't see why it should not be possible, and actually neither that it
> breakes - have you fixed it?
>
> If you haven't fixed it, post again with a little more specs on what you
> expect/want and what you miss ;-)
>
> A tiny comment on your concept: I think (I'm not shure...) that the
> sub-navigation is more easily recognised as such if it's detached from
> the navigation. This furthermore makes it easy to repeat it (perhaps
> together with "top" links) further down on the page.
> Eg: A complete list of Hans Christian Andersens fairy tales translated
> into English by Jean Hersholt
> 
>
>
> Kind regards
>
> Jesper Brunholm
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Is this possible? Background image fill the screen

[Christian Heilmann]

> Hi
>
> Could someone tell me if they think this is actually possible?
> http://www.virtuallee.co.uk/client_area/screenshot.gif
>
> The problem lies with the main picture. Obviously it cannot expand to
> fill the screen. I could create a very wide main image (3000px) and set
> it as a background, but the island itself actually needs to be centred
> within the screen.

You can use the very wide image and center it on the body

body{
 background:url(iHopeYouLikeDownloadingAndUnreadableText.jpg) top center #fff;
}

This is basically how all the centered backgrounds are done.
For example on my blog:
http://www.wait-till-i.com/blueback.gif

--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Is this possible? Background image fill the screen

[Virtuallee]

Hi

Could someone tell me if they think this is actually possible?
http://www.virtuallee.co.uk/client_area/screenshot.gif

The problem lies with the main picture. Obviously it cannot expand to 
fill the screen. I could create a very wide main image (3000px) and set 
it as a background, but the island itself actually needs to be centred 
within the screen.

Does anyone have any ideas on how to do this?

Much appreciated!
Lee
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Is this possible?

[Jesper Brunholm]

Mindy wrote:
> I have included two links one is the page before adding a sub-nav, the other
> is a link after attempting to add the sub-nav.
> 
> http://www.blueaardvark.ca/yma/2index.html
> http://www.blueaardvark.ca/yma/sub_nav.html
> 
> I'm attempting to place a sub-nav in the green bar across the top, but when
> I place an additional div (in this case an unordered list) it breaks and I
> can't sort out how to fix it. Is this possible? If so, how.

I don't see why it should not be possible, and actually neither that it 
breakes - have you fixed it?

If you haven't fixed it, post again with a little more specs on what you 
expect/want and what you miss ;-)

A tiny comment on your concept: I think (I'm not shure...) that the 
sub-navigation is more easily recognised as such if it's detached from 
the navigation. This furthermore makes it easy to repeat it (perhaps 
together with "top" links) further down on the page.
Eg: A complete list of Hans Christian Andersens fairy tales translated 
into English by Jean Hersholt 



Kind regards

Jesper Brunholm
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Is this possible?

[Mindy]

Hi,

I have included two links one is the page before adding a sub-nav, the other
is a link after attempting to add the sub-nav.

http://www.blueaardvark.ca/yma/2index.html
http://www.blueaardvark.ca/yma/sub_nav.html

I'm attempting to place a sub-nav in the green bar across the top, but when
I place an additional div (in this case an unordered list) it breaks and I
can't sort out how to fix it. Is this possible? If so, how.
(I haven't placed the background images in the "sub_nav.html" page —yet, I'm
afraid to)

Thanks in advance for your help.

Mindy
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/