Centered div with unknown width and floating elements inside

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • =?iso-8859-1?B?QW5kcukgSORuc2Vs?=
    #1

    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:
    404 Not Found
    http://kundenweb.creations.de/usenet/katzen/box.jpg


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

    Regards,
    André

    Tags: None
    • John Hosking
      #2
      Re: Centered div with unknown width and floating elements inside

      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:
      404 Not Found
      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><ti tle>Cats in sinks</title>

      <style type="text/css">
      body { margin: 0; padding:0; }
      ..outerContaine r { 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;}
      ..outerContaine r img { padding:0 25px 25px; }
      </style>
      </head>

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

      HTH.
      --
      John

        Comment

        • dorayme
          #3
          Re: Centered div with unknown width and floating elements inside

          In article <46156c73$1_1@n ews.bluewin.ch> ,
          John Hosking <John@DELETE.Ho sking.name.INVA LIDwrote:
          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:
          404 Not Found
          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><ti tle>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="outerCon tainer">
          <a href="#" class="pageLink prev">Previous</a>
          <a href="#" class="pageLink next">Next</a>
          <img style="clear:bo th;"
          src="http://kundenweb.creat ions.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.optusho me.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

            Comment

            • John Hosking
              #4
              Re: Centered div with unknown width and floating elements inside

              dorayme wrote:
              In article <46156c73$1_1@n ews.bluewin.ch> ,
              John Hosking <John@DELETE.Ho sking.name.INVA LIDwrote:
              >
              >>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:bo th;"
              >>src="http://kundenweb.creat ions.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.optusho me.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

                Comment

                • dorayme
                  #5
                  Re: Centered div with unknown width and floating elements inside

                  In article <4616368c$1_2@n ews.bluewin.ch> ,
                  John Hosking <John@DELETE.Ho sking.name.INVA LIDwrote:
                  dorayme wrote:
                  In article <46156c73$1_1@n ews.bluewin.ch> ,
                  John Hosking <John@DELETE.Ho sking.name.INVA LIDwrote:
                  >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.optusho me.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

                    Comment

                    • =?iso-8859-1?B?QW5kcukgSORuc2Vs?=
                      #6
                      Re: Centered div with unknown width and floating elements inside

                      On 6 Apr., 14:01, John Hosking <J...@DELETE.Ho sking.name.INVA LID>
                      wrote:
                      dorayme wrote:
                      In article <46156c73$...@n ews.bluewin.ch> ,
                      John Hosking <J...@DELETE.Ho sking.name.INVA LIDwrote:
                      >
                      >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é

                        Comment

                        • John Hosking
                          #7
                          Re: Centered div with unknown width and floating elements inside

                          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

                            Comment

                            Previous template Next
                            Working...