Re: [css-d] CSS beginner seeking help

2006-07-21 Thread Janet Chang 
At 12:14 AM 7/21/2006, David Sharp wrote:


>>I actually originally had the background image on the header, but when I 
>>did that, it created a white space between the header and the subheader 
>>that I couldn't figure out how to get rid of. When I moved the background 
>>image to the wrapper, that's when the white space disappeared.
>>
>
>The white space is the bottom margin of div#header h1. Because the margin 
>of #header is 0, this margin sticks out past the header creating the 
>unsightly gap. padding-bottom on the #header would be a better solution.
>>Even if the image was moved into the header, wouldn't the text squeeze 
>>out anyway when the browser is shrunk significantly b/c the image is a 
>>fixed size?
>>
>Perhaps the pattern you currently have could fade to a solid colour at the 
>top. Then give the #header this colour, and position your background image 
>at the bottom.
>div#header {
>background : #33 /* or whatever your colour is */ 
> url(whatever.gif) bottom left repeat-x;
>}
>This way your page will look "ideal" at the default text size, but will 
>still look pretty good when text is bumped up.
>Alternately you could make the background bigger than it needs to be - due 
>to the nature of the "N" taking space from the top and bottom (as will be 
>the case at default text size) will leave it still looking like an "N". In 
>this case align the background with the center of the header using 
>{background-position : 0% 50%}. In this case I would still give the header 
>the solid background colour in case the text is bumped higher than your 
>image can handle.
>
>I think the key is to allow the page to accommodate changes gracefully - 
>it won't always look pixel perfect. But your site is looking really good. 
>I wish my first sites looked half as decent!
>
>Hope this helps.
>D#

Hi David,
Thanks so much for the helpful tips. I just implemented them and it looks 
great! I moved the background to the div#header,and adjusted the header 
margins/padding. Also used your first suggestion of setting a background 
color behind the image, and I think it looks perfectly adequate for 
significantly resized windows.

Very grateful for your help,
Janet



__
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] CSS beginner seeking help

2006-07-20 Thread David Sharp 

>
> I actually originally had the background image on the header, but when I 
> did that, it created a white space between the header and the subheader 
> that I couldn't figure out how to get rid of. When I moved the background 
> image to the wrapper, that's when the white space disappeared.
>   

The white space is the bottom margin of div#header h1. Because the 
margin of #header is 0, this margin sticks out past the header creating 
the unsightly gap. padding-bottom on the #header would be a better solution.
> Even if the image was moved into the header, wouldn't the text squeeze out 
> anyway when the browser is shrunk significantly b/c the image is a fixed size?
>   
Perhaps the pattern you currently have could fade to a solid colour at 
the top. Then give the #header this colour, and position your background 
image at the bottom.
div#header {
background : #33 /* or whatever your colour is */ 
url(whatever.gif) bottom left repeat-x;
}
This way your page will look "ideal" at the default text size, but will 
still look pretty good when text is bumped up.
Alternately you could make the background bigger than it needs to be - 
due to the nature of the "N" taking space from the top and bottom (as 
will be the case at default text size) will leave it still looking like 
an "N". In this case align the background with the center of the header 
using {background-position : 0% 50%}. In this case I would still give 
the header the solid background colour in case the text is bumped higher 
than your image can handle.

I think the key is to allow the page to accommodate changes gracefully - 
it won't always look pixel perfect. But your site is looking really 
good. I wish my first sites looked half as decent!

Hope this helps.
D#
__
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] CSS beginner seeking help

2006-07-20 Thread Janet Chang 
At 06:26 AM 7/20/2006, Natalie Downe wrote:

>>Nice layout and a marvellous 'first real try'.

Thanks for the compliments. I'm quite proud of myself, too, for being able 
to get this far. I just wish I had a better clue as to how to troubleshoot 
the little problem areas...but I guess that's what this listserv is for!

>>All I would say (in addition to what has been said) is to move your
>>background image from the wrapper and put it in the header. That way,
>>when anyone resizes the text significantly, the background remains
>>throughout the height of the header - whereas now it stops and the text
>>goes down below it.
>
>I would agree with this, good work on your first attempt, and yeah the
>background image on the header would make resizing the text work more
>smoothly.

I actually originally had the background image on the header, but when I 
did that, it created a white space between the header and the subheader 
that I couldn't figure out how to get rid of. When I moved the background 
image to the wrapper, that's when the white space disappeared.

Even if the image was moved into the header, wouldn't the text squeeze out 
anyway when the browser is shrunk significantly b/c the image is a fixed size?

>Regarding getting the line to stretch to the bottom of the page
>regardless of the length for either column, there are a number of ways
>of getting it to work and I'm sure everyone has their favourite, in
>this case I would personally be tempted to use a background image on
>the container of your nav and content, (possibly have a go putting it
>on the body) where the image consists is 1px by 1px and is the colour
>of the line you want, then set the background-repeat to be repeat-y
>and then play around with background-position till you have it where
>you want it. If however you could guarantee that the content is always
>going to be longer than the navigation just use a border-left on the
>content div.

The background image solution seems to be what many people have suggested. 
I was going to test setting border-right on the nav and adjusting the 
relative positioning of the nav contents, but I may end up just going with 
the background image idea as neither the content nor the navigation can be 
guaranteed to be a specific length once we implement this template across 
all of our clinic center sites.


>I like the design you are working from, it is nice and clear, to get
>your implementation to look a little more like the design you might
>want to look at changing the line-height up to perhaps 1.3em, see what
>looks best. You might also want to think about whether using tables
>for layout for some areas of the page could be perhaps changed to
>something with with a bit more semantic meaning.
>
>Good luck, and have fun finishing it off,
>
>Natalie
>--


__
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] CSS beginner seeking help

2006-07-20 Thread Designer 
Janet Chang wrote:
> Hi,
>
> I just joined the listserv and am seeking help on a new site I am coding 
> for my organization. I took an intro to CSS class a few months ago so I'm 
> still quite a newbie, but would like to build my experience using CSS.
>
> Since this is a brand new site, I was able to start from scratch and build 
> it up following the basic procedures we learned in my class. However, when 
> I get to the more complicated layout stuff, that's when I feel like I'm 
> starting to resort to trial and error instead of actually knowing what I'm 
> doing.
>
> If someone wouldn't mind taking a look at what I've done so far and letting 
> me know if there are any glaring errors I've made or improvements I could 
> make, I would be most grateful.
>
> Also, I'm having trouble figuring out how to get a border separating my 
> mainnav div and my content div that stretches from the subheader to the 
> footer regardless of length of text in either box. Any help on this would 
> be most appreciated!
>
> Here's the draft of the site so far: 
> http://www3.law.northwestern.edu/macarthur/
>
> Here is the designed template I'm more or less basing it on: 
> http://www3.law.northwestern.edu/macarthur/graphics/MacArthur_website.jpg
> (it doesn't show well in the image, but there is supposed to be a grey line 
> separating the nav area and the content area)
>
> Thanks!
> Janet 
>
>
> __
> 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/
>
>
>
>   
Hi Janet,

Nice layout and a marvellous 'first real try'.

All I would say (in addition to what has been said) is to move your 
background image from the wrapper and put it in the header. That way, 
when anyone resizes the text significantly, the background remains 
throughout the height of the header - whereas now it stops and the text 
goes down below it.

-- 
Best Regards,

Bob McClelland

Cornwall (UK)
www.gwelanmor-internet.co.uk


__
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] CSS beginner seeking help

2006-07-18 Thread David Laakso 
Janet Chang wrote:
>> If someone wouldn't mind taking a look at what I've done so far and letting
>> me know if there are any glaring errors I've made or improvements I could
>> make, I would be most grateful.
>> 
Welcome to the list. You are doing exceptionally well, Janet :-) !
>> Also, I'm having trouble figuring out how to get a border separating my
>> mainnav div and my content div that stretches from the subheader to the
>> footer regardless of length of text in either box. Any help on this would
>> be most appreciated!
>> 
Check the list wiki(the uri is at the bottom of this mail). See 'any 
column longest, particularly the 'faux col' link.
>> Here's the draft of the site so far:
>> http://www3.law.northwestern.edu/macarthur/
>>
>>
>> Janet

Best wishes,
~dL

PS If you are interested in trivial pursuits, you could unlock the fonts 
in IE(ie can't scale pixel based font-size except in 'accessibility 
mode'.). This is a step in that general direction:
body {/*font-size: 12px;*/font-size: 100%;}
/*p,*/ ul {font-size: 80%/*12px*/;}
/*let p inherit default from body*/
p { margin: 0 30px; }
div#search a:link { font-size: 90%;}
div#header h1 {font-size: 200%;/*30px*/;}
div#header h2 {font-size: /*20px*/130%;}
div#subheader h3 {font-size: /*16px*/100%;}
div#mainnav p {/*font-size: 11px;*/font-size: 80%;}   
div#content h4 {font-size: /*13px*/95%;}   
div#footer p {font-size: /*11px*/85%;}

-- 

http://chelseacreekstudio.com/ca/ccs/pow/pow.html

__
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] CSS beginner seeking help

2006-07-18 Thread Janet Chang 
At 11:21 AM 7/18/2006, you wrote:


>On 18/07/06, Janet Chang 
><[EMAIL PROTECTED]> wrote:
>Hi,
>
>I just joined the listserv and am seeking help on a new site I am coding
>for my organization. I took an intro to CSS class a few months ago so I'm
>still quite a newbie, but would like to build my experience using CSS.
>
>Since this is a brand new site, I was able to start from scratch and build
>it up following the basic procedures we learned in my class. However, when
>I get to the more complicated layout stuff, that's when I feel like I'm
>starting to resort to trial and error instead of actually knowing what I'm
>doing.
>
>If someone wouldn't mind taking a look at what I've done so far and letting
>me know if there are any glaring errors I've made or improvements I could
>make, I would be most grateful.
>
>Also, I'm having trouble figuring out how to get a border separating my
>mainnav div and my content div that stretches from the subheader to the
>footer regardless of length of text in either box. Any help on this would
>be most appreciated!
>
>Here's the draft of the site so far:
>http://www3.law.northwestern.edu/macarthur/
>
>Here is the designed template I'm more or less basing it on:
>http://www3.law.northwestern.edu/macarthur/graphics/MacArthur_website.jpg
>(it doesn't show well in the image, but there is supposed to be a grey line
>separating the nav area and the content area)
>
>Thanks!
>Janet
>You could try giving #content a height, or use min-height (which is not 
>supported in IE as yet, maybe IE7)
>
>--
>http://www.web-buddha.co.uk
>http://www.projectkarma.co.uk

Would it have to be a fixed height? My concern is what happens when on some 
pages the content text is longer than the set height?
__
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] CSS beginner seeking help

2006-07-18 Thread Dave Goodchild 
On 18/07/06, Janet Chang <[EMAIL PROTECTED]> wrote:
>
> Hi,
>
> I just joined the listserv and am seeking help on a new site I am coding
> for my organization. I took an intro to CSS class a few months ago so I'm
> still quite a newbie, but would like to build my experience using CSS.
>
> Since this is a brand new site, I was able to start from scratch and build
> it up following the basic procedures we learned in my class. However, when
> I get to the more complicated layout stuff, that's when I feel like I'm
> starting to resort to trial and error instead of actually knowing what I'm
> doing.
>
> If someone wouldn't mind taking a look at what I've done so far and
> letting
> me know if there are any glaring errors I've made or improvements I could
> make, I would be most grateful.
>
> Also, I'm having trouble figuring out how to get a border separating my
> mainnav div and my content div that stretches from the subheader to the
> footer regardless of length of text in either box. Any help on this would
> be most appreciated!
>
> Here's the draft of the site so far:
> http://www3.law.northwestern.edu/macarthur/
>
> Here is the designed template I'm more or less basing it on:
> http://www3.law.northwestern.edu/macarthur/graphics/MacArthur_website.jpg
> (it doesn't show well in the image, but there is supposed to be a grey
> line
> separating the nav area and the content area)
>
> Thanks!
> Janet
> You could try giving #content a height, or use min-height (which is not
> supported in IE as yet, maybe IE7)
>



-- 
http://www.web-buddha.co.uk
http://www.projectkarma.co.uk
__
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/