How to convert this to CSS

On 08/01/2006 08:09, Barbara de Zoete wrote:

[snip]

Well, the comon abbrevation for Firefox is FF [...]

True, but it's not the officially preferred one.
<http://www.mozilla.org/support/firefox/faq.html#spell-abbreviate>

[snip]

Reading the other post: I'm thinking it's a bug, and not a bug in my
page, since the described behaviour doesn't happen in other situations.

Yes, probably a reflow bug, though I too see it in Fx 1.5 and 1.0.7, but
not Opera 8.51 (for what it's worth).

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

On Sun, 08 Jan 2006 21:33:31 +0100, Michael Winter
<m.winter (AT) blueyonder (DOT) co.uk> wrote:

On 08/01/2006 08:09, Barbara de Zoete wrote:

Well, the comon abbrevation for Firefox is FF [...]

True, but it's not the officially preferred one.
http://www.mozilla.org/support/firefox/faq.html#spell-abbreviate

Okay. Didn't know that. As a matter of fact I've never seen it used
before, besides by Gus. Just shows that the creators of FF can prefer all
they want, in the organized chaos of the web these sort of things take
their own direction.

Reading the other post: I'm thinking it's a bug, and not a bug in my
page, since the described behaviour doesn't happen in other situations.

Yes, probably a reflow bug, though I too see it in Fx 1.5 and 1.0.7, but
not Opera 8.51 (for what it's worth).

Hmm, I couldn't know how to begin to fix it. I don't even get to see it.
Maybe someone who does, can work on the example page
<URL:http://home.wanadoo.nl/b.de.zoete/_test/simulating_tables.html>
and/or check the bug reports with FF.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.

weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

musicmouse wrote:

Els, Thanks for the suggestion. I tested it with colored blocks (it is
at http://www.classiccat.net/test7.htm), but unfortuately it does not
work. The Google ad is placed below the the main block.

I forgot to add "top:0;" to the styles of the google block.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

I applied the update. However, the result is that the two blocks
overlap when the window becomes too small.

musicmouse


Els schreef:

musicmouse wrote:

Els, Thanks for the suggestion. I tested it with colored blocks (it is
at http://www.classiccat.net/test7.htm), but unfortuately it does not
work. The Google ad is placed below the the main block.

I forgot to add "top:0;" to the styles of the google block.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

musicmouse wrote:

Els schreef:
musicmouse wrote:

Els, Thanks for the suggestion. I tested it with colored blocks (it is
at http://www.classiccat.net/test7.htm), but unfortuately it does not
work. The Google ad is placed below the the main block.

I forgot to add "top:0;" to the styles of the google block.

I applied the update. However, the result is that the two blocks
overlap when the window becomes too small.

Yup - so that didn't work.
I see you're saying that Barbara's example works, except for the ads
column dropping below the page on narrow windows. Maybe that could be
helped with a min-width on the outer container? "min-width" won't work
on IE though, but there are workarounds for that.

IMO, the simplest option is just to let go of the idea that the Google
ads need to be on the far right of the window. I'd just have them on
the right of the page, and have the total (page + ads) centered.
Easier to do, and better to look at ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els wrote:

musicmouse wrote:

In my website (www.classiccat.net) the basic layout consists of two
elements:
- a centered block that has a fixed with of 720
- a right-aligned Google advertising block.

When the visitor has a screen that is less than 720 wide the Google
block is simply pushed off the screen to the right. This is the
intended behaviour. With tables it was easy to make. But I cannot find
a way to get the same effect in CSS. Either it will push the
advertisement below the main block (with display:inline and float) or -
even worse - it will let the two overlap each other (with
position:absolute).

Is there a way to make this layout in CSS?

Probably - but so far I haven't seen your attempt yet.
My first idea (based on a Google ads column width of 150px):
HTML:
div id="container"
div id="content"
page content
/div
div id="google"
googe ads
/div
/div

CSS:
#container{
width:870px;
margin:auto;
}
#content{
width:720px;
float:left;
}
#google{
margin-left:720px;
}

Or, if you insist on having the google ads to the far right with the
actual page centered in the remainder of the horizontal space:
HTML:
div id="container"
div id="content"
page content
/div
/div
div id="google"
googe ads
/div

#container{
margin-right:150px;
}
#content{
width:720px;
margin:auto;
}
#google{
position:absolute;
right:0;
width:150px;
}

None of the above tested - that's your job ;-)

#container may need an actual border (set it to the same colour as the
background if you don't want it visible) for IE, but I'm not sure. Try
that if it doesn't work without.

Quite apart from the "how", presumably the Google ads are there to earn you

revenue. What does Google think of the idea?

Doug.
--
Registered Linux User No. 277548. My true email address has hotkey for
myaccess.
Love can heal the world, and forgiveness is the catalyst to make it happen.
- John Gray, author of Men are from Mars, women are from Venus.