473,325 Members | 2,872 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,325 software developers and data experts.

Centered div with unknown width and floating elements inside

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é

Apr 5 '07 #1
6 2564
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
Apr 5 '07 #2
In article <46**********@news.bluewin.ch>,
John Hosking <Jo**@DELETE.Hosking.name.INVALIDwrote:
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>
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
Apr 6 '07 #3
dorayme wrote:
In article <46**********@news.bluewin.ch>,
John Hosking <Jo**@DELETE.Hosking.name.INVALIDwrote:
>>André Hänsel wrote:
>>>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):
<rest of my first code snipped>
> <img style="clear:both;"
src="http://kundenweb.creations.de/usenet/katzen/box.jpg"
alt="sample pic" width="850" height="578">
>
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
Apr 6 '07 #4
In article <46**********@news.bluewin.ch>,
John Hosking <Jo**@DELETE.Hosking.name.INVALIDwrote:
dorayme wrote:
In article <46**********@news.bluewin.ch>,
John Hosking <Jo**@DELETE.Hosking.name.INVALIDwrote:
>André Hänsel wrote:

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

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
That looks like you are cooking with gas now... I hope OP thanks
you.

--
dorayme
Apr 7 '07 #5
On 6 Apr., 14:01, John Hosking <J...@DELETE.Hosking.name.INVALID>
wrote:
dorayme wrote:
In article <46156c73$...@news.bluewin.ch>,
John Hosking <J...@DELETE.Hosking.name.INVALIDwrote:
>André Hänsel wrote:
>>Here is an image of what I want:
http://kundenweb.creations.de/usenet/katzen/box.jpg

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é

Apr 9 '07 #6
André Hänsel wrote:
On 6 Apr., 14:01, John Hosking wrote:
>>
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".
Hmmm. Overlooked that part. In that case: <table>. :-(

--
John
Apr 10 '07 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Kai Grossjohann | last post by:
I have a table which contains a top-aligned table cell: .... <tr style="height:40"> ... <td colspan="1" rowspan="2" align="left" valign="top" style="overflow:hidden;">...
5
by: Haines Brown | last post by:
I want a centered body, 680px wide, having a red bottom margin. The following works well in galeon, but not in IE5, where the bottom margin steals the full width of the viewpoint. That is, the red...
8
by: Asad | last post by:
Hi, I am basically trying to accomplish drop down menus for navigation on a site. And I'm pretty much done except I am having one problem. The z-index is not working with relative positioning! ...
7
by: DaWoE | last post by:
Hi, I want to place a div centered of another div in IE. I get this to work in Mozilla, but not in IE. The code i use for mozilla is the following : <html> <head> <style type="text/css">
8
by: Freek te Water | last post by:
Hi, Hope no-one is offended by my probably noob question... Context: I have a web page design, which always centres in the middle of the screen (using a 100%*100% HTML-table). Now I also use...
4
by: yawnmoth | last post by:
The buy behind the csszengarden has a tutorial on how to center absolutely positioned elements. Here's the last example: http://www.mezzoblue.com/tests/centered-css/ex5.html I've tried...
17
by: Stian Lund | last post by:
Hello, I've been struggling with this problem for a while now, so I though I'd get some input from anyone more skilled with CSS than I am. I'm actually trying to accomplish two things with this:...
7
by: TheLongshot | last post by:
I just recently converted a few pages of my application to using master pages. Problem is, in all of my content pages, the contents are centered. I can't figure out why. The markup in the...
1
by: vunet.us | last post by:
Hello, I use a floating div with overflow:auto properties for specific reason (to avoid the bug of overlapping elements https://bugzilla.mozilla.org/attachment.cgi?id=125003). Anyway, the problem...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.