|
|
Posted by Ben C on 01/31/07 21:58
On 2007-01-31, al jones <alfredmjones@shotmail.com> wrote:
> On Tue, 30 Jan 2007 16:21:10 -0600, Ben C wrote:
>
>> On 2007-01-30, al jones <alfredmjones@shotmail.com> wrote:
>> [snip]
>>> Since I've uploaded two pages which have a few more changes to them I've
>>> noticed that trying to move the list to the left to fill in the space
>>> normally occupied by the 'list marker' (circle, dot, square, etc) move my
>>> list on the home page - well, off the page partially. Need to revisit
>>> that.
>>
>> That just looks like the margin-left:-12px on div#leftbit, which isn't a
>> list item anyway-- do you mean "Family Group Sheets", "WWvA Letters",
>> "Civil War Links" etc. on the left of the home page?
> Please explain 'not a list item anyway' - seems like a logical list to me
> ...
I meant it wasn't a <li> or element with display:list-item on it. It's a
<div> containing a series of <p>.
>>> I've added the 'European quote' marks to use as previous page / next page
>>> (so we don't have to keep hopping into that long index) I have float:left
>>> and float: right - associated with them in css, but they aren't behaving as
>>> I would expect, the symbol on the right is a 'line' too low.
>>
>> Put both floats first, i.e. like this:
>>
>> <a class="ppage" href="http://aljones.us/630809va1.html">«</a>
>> <a class="npage" href="http://aljones.us/630816va1.html">»</a>
>> <h2>Diary Entries August 11th, 1863 </h2>
>>
>> Firefox (and I think someone said also IE7) always puts floats down on
>> the next line, unless they occur before any of the inline content. This
>> is incorrect behaviour, but if FF and IE both do it it looks like it's
>> here to stay.
> Well, two of you gave me the same suggestion - implemented it and the
> results weren't exactly what I expected - see 08/??/63 WWvA and
> 08/11/63 WWvA Diary each line of the trio of lines is on a new line.
That's expected given your markup: one float, then the <h2> block box,
then the other float.
If you want the << and >> either side of the <h2> you'll have to put the
floats in the <h2>-- it's a block box.
Like this:
<h2>
<a class="ppage" href="#">«</a>
<a class="npage" href="http://aljones.us/630801gn1.html">»</a>
Undated letter, 1863
</h2>
If the << and >> are in the <h2> they get a big font-size anyway, so it
looks better if you lose the font-size:1.4em you're setting on them at
the moment.
>>> All of this has again brought up the problem of the image and text
>>> drifiting to the right if the text is shorter than the associated image -
>>> and I'm at a loss as to why.
>>
>> I don't understand the description of the problem.
> When looking at the diary pages, if the text which is to the right of the
> image is shorter than the associated image, the following image shifts to
> the right with the text to the right of that ... you'll probably need to
> set font size smaller and / or the viewport wider to see it.
I see what you mean. That's just what floats do.
You could set "clear:left" on .letterunit.
But that would create a new problem, because your "div#leftbit" is a
float, so all your letterunits will clear #leftbit, not what you want.
This is just the same thing dorayme encountered with her "drop caps"
example. See http://tinyurl.com/3yrtb9, and earlier messages in that
thread (I don't know how to work Google Groups) for the explanation.
So alternatively you can set float:left on .letterunit. That will make
each letterunit a "block formatting context root", with the consequence
that it grows vertically to fit its floats in, preventing them from
banging against one another. In your case there don't seem to be any bad
sideffects, but you'd need to check that.
Another way to turn .letterunit into a BFC root (with theoretically
fewer sideffects) is to set display:table on it. Then it should behave
like a block box (it'll get an anonymous table row and table cell inside
it) apart from having shrink-to-fit width (which you don't want, but
which doesn't matter in this case) and growing vertically to fit the
floats.
Navigation:
[Reply to this message]
|