Re: [css-d] CSS beginner seeking help
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
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
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/
[css-d] CSS beginner seeking help
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/
Re: [css-d] CSS beginner seeking help
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/
Re: [css-d] CSS beginner seeking help
At 11:21 AM 7/18/2006, you wrote: On 18/07/06, Janet Chang mailto:[EMAIL PROTECTED][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/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.jpghttp://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.ukhttp://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
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/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/
