Stylesheets - Centered div with unknown width and floating elements inside

Author

Centered div with unknown width and floating elements inside

André Hänsel

2007-04-05, 6:18 pm

Hi,

I'm trying to make a centered box with an image and two links inside,
one link on each side.

Here is an image of what I want:
http://kundenweb.creations.de/usenet/katzen/box.jpg

I'm tempted to use a table but certainly there is a better way. :)

Regards,
Andr=E9

John Hosking

2007-04-05, 6:18 pm

André Hänsel wrote:
> Hi,
>
> I'm trying to make a centered box with an image and two links inside,
> one link on each side.
>
> Here is an image of what I want:
> http://kundenweb.creations.de/usenet/katzen/box.jpg
>
> I'm tempted to use a table but certainly there is a better way. :)

Resist temptation. Try this (or something like it):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Cats in sinks</title>

<style type="text/css">
body { margin: 0; padding:0; }
..outerContainer { width:900px; margin-left:auto; margin-right:auto;
background-color:#FF9900; }
..pageLink { font-family:Arial, sans-serif; font-weight:bold;
font-size:95%; color:#9F2D00; padding:1em 25px; }
..prev {float:left;}
..next {float:right;}
..outerContainer img { padding:0 25px 25px; }
</style>
</head>

<body>
<div class="outerContainer">
<a href="#" class="pageLink prev">Previous</a>
<a href="#" class="pageLink next">Next</a>
<img style="clear:both;"
src="http://kundenweb.creations.de/usenet/katzen/box.jpg"
alt="sample pic" width="850" height="578">
</div>
</body>
</html>

HTH.
--
John

dorayme

2007-04-05, 10:16 pm

In article <46156c73$1_1@news.bluewin.ch>,
John Hosking <John@DELETE.Hosking.name.INVALID> wrote:

> André Hänsel wrote:
>
> Resist temptation. Try this (or something like it):
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html><head><title>Cats in sinks</title>
>
> <style type="text/css">
> body { margin: 0; padding:0; }
> .outerContainer { width:900px; margin-left:auto; margin-right:auto;
> background-color:#FF9900; }
> .pageLink { font-family:Arial, sans-serif; font-weight:bold;
> font-size:95%; color:#9F2D00; padding:1em 25px; }
> .prev {float:left;}
> .next {float:right;}
> .outerContainer img { padding:0 25px 25px; }
> </style>
> </head>
>
> <body>
> <div class="outerContainer">
> <a href="#" class="pageLink prev">Previous</a>
> <a href="#" class="pageLink next">Next</a>
> <img style="clear:both;"
> src="http://kundenweb.creations.de/usenet/katzen/box.jpg"
> alt="sample pic" width="850" height="578">
> </div>
> </body>
> </html>
>

Perhaps OP will be confused by you using his whole pic (that
includes pic of browser window)! Try

src="http://members.optushome.com.au/droovies/pics/catinsink.jpg"

in your code and see what you are recommending to him. It is not
quite what he was picturing but perhaps you can adjust. If you
absolutely refuse, I will have to do it. I am feeling lazy. But I
liked the puss in the sink.

--
dorayme

John Hosking

2007-04-06, 6:19 pm

dorayme wrote:
> In article <46156c73$1_1@news.bluewin.ch>,
> John Hosking <John@DELETE.Hosking.name.INVALID> wrote:
>

<rest of my first code snipped>
[color=darkred]
[color=darkred]
>
> Perhaps OP will be confused by you using his whole pic (that
> includes pic of browser window)! Try
>
> src="http://members.optushome.com.au/droovies/pics/catinsink.jpg"
>
> in your code and see what you are recommending to him. It is not
> quite what he was picturing but perhaps you can adjust. If you
> absolutely refuse, I will have to do it. I am feeling lazy. But I
> liked the puss in the sink.

Okay, okay; how about this, new and improved:

http://mypage.bluewin.ch/jlh/CatsInSinks.htm

--
John

dorayme

2007-04-06, 10:15 pm

In article <4616368c$1_2@news.bluewin.ch>,
John Hosking <John@DELETE.Hosking.name.INVALID> wrote:

> dorayme wrote:
....[color=darkred]
>
> Okay, okay; how about this, new and improved:
>
> http://mypage.bluewin.ch/jlh/CatsInSinks.htm

That looks like you are cooking with gas now... I hope OP thanks
you.

--
dorayme

André Hänsel

2007-04-09, 6:19 pm

On 6 Apr., 14:01, John Hosking <J...@DELETE.Hosking.name.INVALID>
wrote:
> dorayme wrote:
>
>
>
> Okay, okay; how about this, new and improved:
>
> http://mypage.bluewin.ch/jlh/CatsInSinks.htm

Thanks for your effort, but hey, you cheated! ;) You set a width for
the container div.

The problem I had (and you came across, too) is, that I don't know the
width of the image. That was what I meant by "of unknown width".

Best regards,
Andr=E9

John Hosking

2007-04-10, 6:16 am

In-Reply-To: <1176156103.427366.239340@e65g2000hsc.googlegroups.com>
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Content-Transfer-Encoding: 8bit
NNTP-Posting-Host: 85.1.147.58
X-Original-NNTP-Posting-Host: 85.1.147.58
Message-ID: <461b4a3f$1_1@news.bluewin.ch>
X-Trace: news.bluewin.ch 1176193599 85.1.147.58 (10 Apr 2007 10:26:39 +0200)
Organization: Bluewin AG
Lines: 16
Complaints-To: abuse@bluewin.ch
X-Original-NNTP-Posting-Host: 127.0.0.1
Path: border1.nntp.dca.giganews.com!nntp.giganews.com!wns13feed!worldnet.att.net!164.128.36.58!news.ip-plus.net!newsfeed.ip-plus.net!news.bluewin.ch!not-for-mail
Xref: number1.nntp.dca.giganews.com comp.infosystems.www.authoring.stylesheets:105173

André Hänsel wrote:
> On 6 Apr., 14:01, John Hosking wrote:
>
>
> Thanks for your effort, but hey, you cheated! ;) You set a width for
> the container div.
>
> The problem I had (and you came across, too) is, that I don't know the
> width of the image. That was what I meant by "of unknown width".

Hmmm. Overlooked that part. In that case: <table>. :-(

--
John