C
Charles Banas
i've got two very quick and simple questions, but i didn't want to
bother posting in separate messages. seems easier to me for myself and
anyone reading to just have one post to deal with. especially since the
post has to do with the same site.
i'm working on a default stylesheet for a site, so i've decided to work
the site in such a way that it will only require a simple stylesheet
change to customize the appearance for the site's visitors. as such,
i've been doing a lot of tweaking to get things identical to the
original (and messy) table-based layout.
one of the things incorporated in the default layout is a large logo
image (it's actually 800px wide and rather tall, IMO, but it's not my
fault, i swear). so this is my first question: i'm considering using
the background-image property of the container div to set the logo image
so it can be easily changed for new stylesheets. since i expect the
majority of the stylesheets to use the intained image, would it be safe
to simply hide the image when not needed? for example:
div#logo img { visible: hidden; }
div#logo { background-image: url(images/newlogo.png); }
would the common UAs be intelligent enough to not bother downloading the
hidden image? or would it still incur the download time?
my second question: below, i've used a container div to keep three
other divs in line. one of the divs contains a great deal of text:
div#contenttop { position: relative; height: 16em; }
div#contenttop div#headlines { position: absolute; height: 15.5em;
width: 248px; overflow: auto; }
div#contenttop div#overview { position: absolute; height: 15.5em;
width: 282px; left: 250px; overflow: auto; }
div#contenttop div#affiliates { position: absolute; height: 15.5em;
width: 228px; left: 544px; overflow: auto; }
and the (simplified for clarity) HTML:
<div id="contenttop">
<div id="headlines">some headlines</div>
<div id="overview">about 15 lines of text at the default font size;
more with larger font sizes.</div>
<div id="affiliates">some pretty pictures.</div>
</div>
<div id="content">more content down here, but not positioned at all.</div>
now the problem i've run into, is that #overview is not always going to
be 15 lines or less. if the user resizes text, then the typical UA will
render it with a scrollbar. that isn't so bad, but i'm curious if
there's another way. i'd like all the divs in #contenttop (including
#contenttop itself) to resize reasonably without causing the overflow in
#overview. is there a sane way to do this without changing the flow of
#content?
if i'm unclear, i apologize. here's the test page i'm working on:
http://greyfade.org/otakulist.com/
have fun resizing the text to see what i'm talking about.
keep in mind this is a work in progress, and i try to maintain
validation with all my CSS and HTML, so i /expect/ it to break in half
the browsers out there. but i have tested with Opera 7, Mozilla Firefox
0.8, and versions of IE after 3. (i must say i'm surprised how good it
looks in 4, 5, and 5.5 despite the problems those versions have.) so
unless you have a Mac, i don't want to hear how bad it looks.
thanks for looking.
bother posting in separate messages. seems easier to me for myself and
anyone reading to just have one post to deal with. especially since the
post has to do with the same site.
i'm working on a default stylesheet for a site, so i've decided to work
the site in such a way that it will only require a simple stylesheet
change to customize the appearance for the site's visitors. as such,
i've been doing a lot of tweaking to get things identical to the
original (and messy) table-based layout.
one of the things incorporated in the default layout is a large logo
image (it's actually 800px wide and rather tall, IMO, but it's not my
fault, i swear). so this is my first question: i'm considering using
the background-image property of the container div to set the logo image
so it can be easily changed for new stylesheets. since i expect the
majority of the stylesheets to use the intained image, would it be safe
to simply hide the image when not needed? for example:
div#logo img { visible: hidden; }
div#logo { background-image: url(images/newlogo.png); }
would the common UAs be intelligent enough to not bother downloading the
hidden image? or would it still incur the download time?
my second question: below, i've used a container div to keep three
other divs in line. one of the divs contains a great deal of text:
div#contenttop { position: relative; height: 16em; }
div#contenttop div#headlines { position: absolute; height: 15.5em;
width: 248px; overflow: auto; }
div#contenttop div#overview { position: absolute; height: 15.5em;
width: 282px; left: 250px; overflow: auto; }
div#contenttop div#affiliates { position: absolute; height: 15.5em;
width: 228px; left: 544px; overflow: auto; }
and the (simplified for clarity) HTML:
<div id="contenttop">
<div id="headlines">some headlines</div>
<div id="overview">about 15 lines of text at the default font size;
more with larger font sizes.</div>
<div id="affiliates">some pretty pictures.</div>
</div>
<div id="content">more content down here, but not positioned at all.</div>
now the problem i've run into, is that #overview is not always going to
be 15 lines or less. if the user resizes text, then the typical UA will
render it with a scrollbar. that isn't so bad, but i'm curious if
there's another way. i'd like all the divs in #contenttop (including
#contenttop itself) to resize reasonably without causing the overflow in
#overview. is there a sane way to do this without changing the flow of
#content?
if i'm unclear, i apologize. here's the test page i'm working on:
http://greyfade.org/otakulist.com/
have fun resizing the text to see what i'm talking about.
keep in mind this is a work in progress, and i try to maintain
validation with all my CSS and HTML, so i /expect/ it to break in half
the browsers out there. but i have tested with Opera 7, Mozilla Firefox
0.8, and versions of IE after 3. (i must say i'm surprised how good it
looks in 4, 5, and 5.5 despite the problems those versions have.) so
unless you have a Mac, i don't want to hear how bad it looks.
thanks for looking.