Sent by Roger Roelofs on 31 January 2005 23:11
Robert,
On Jan 31, 2005, at 12:19 AM, Robert Neville wrote:
>> Actually it is centered :) The li containing
> 'Select File > New is not
>> as wide as the rest of the li because it has to make
> room for the right
>> floated articleID. If you add the following style
> to your stylesheet
>> it will illustrate what I mean.
>
> Again, here’s a scenario where experience allude to
> the answer. What technique should I use center the
> DIV? The situation is not paramount. I may left align
> all images at the end of the day, but my curiosity
> yearns to understand CSS better.
I you don't want the articleID to affect the width of the list items
next to it, you could position it absolutely instead. Floated elements
are taken out of the normal document flow, but they 'push' other
content over to make room. Absolutely positioned content has no effect
on the position of the content around it. The key to absolutely
positioning something is to set 'position: relative;' on its parent,
This sets a positioning 'context' so that as the relatively positioned
parent flows on the page the absolutely positioned 'child' will stick
to it.
>> I think the background below the curve on that
> graphic is transparent
>> and is letting the background color show through.
>
> The background curve in the footer graphic is on a
> transparency. The original graphic from the “A List
> Apart” example was on a transparency as well.
I'm not sure I'm entirely understanding what you mean, so I'm going to
be a bit 'general.' As you know, images and bg images that have
transparent/translucent sections allow the background color to show
through. If you use background images for a visual effect, you usually
want the outside edge to be opaque to cover the bg color, and the
inside edge to be transparent to let the bg color show through. If you
use images in your html for the visual effect, you often want the
inside edge to be opaque and the outside edge to be transparent because
the inside edge 'touches' the thing you are trying to style. (Keep in
mind that 'visual effect' images belong in the css, not in the html if
at all possible).
>> Unfortunately, my css debugging environment (Web
> developer toolbar in ff) isn't playing
>> well with geocities so I can't verify this easily.
>
> Do other options for economical web hosting exist for
> testing HTML/CSS? Again, I have not reached the point
> where additional expense for web hosting is merited.
> But I will gladly place the site somewhere else in the
> effort of debugging.
I'm sure they do, but I don't have any personal experience here. My
isp provides limited hosting, and my employer runs several servers I
can put stuff on from time to time.
> You mentioned the Web Developer toolbar in Firefox. My
> toolbar remains curial in debugging web page even on
> Geocities. After playing around with the toolbar, I
> noticed several odd occurrences. Check out the
> outlining feature on my web page; “Outline Block level
> Element.” The block elements bleed into each other;
> particularly the div.Article and div.ArticleBody
> styles (Outline > Outline Block Element)(Information >
> Display ID & Class Details) . Then Left and Middle ID
> are smaller than the actual graphic elements (denote
> by the red outline). Could this be healthy situation
> or impending doom?
That is fairly typical. Nothing to worry about.
> Whenever you scale the browser window, the layout
> scales as well. This behavior is by design; yet the
> images step outside the graphic boundaries of the
> Article Body, which is not desirable. Can I keep the
> images in the Article Body while having the layout
> scale?
Yes, you have two choices.
Choice 1: (the most common one) Set a min-width on article-body to the
width of the widest picture (add extra for the left margin next to the
picture because it is in a list). ie/win doesn't support this, but for
your situation, that doesn't really matter.
Choice 2: You can actually set the width of the pictures in percent
and the picture will grow or shrink as necessary. this tends to
produce ugly pictures, so be aware :) If you want to go really crazy,
you could set its width in percent and its min and max width in px.
I'm not sure about support for min/max width in the current version of
safari, so you will have to test for that if you choose this route.
hth
Roger,
Roger Roelofs
Know what you value.
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/