Centering absolute placed images with CSS?

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Zeke Koos
    #1

    Centering absolute placed images with CSS?

    <body>

    <div style="position :absolute; left:0px; top:0px; width:780px;
    height:42px; ">
    <img src="images/CW---Webpage_01.png" width=780 height=42>
    </div>
    <div style="position :absolute; left:0px; top:42px; width:52px;
    height:488px; ">
    <img src="images/CW---Webpage_02.png" width=52 height=488>
    </div>

    </body>


    How do I make this appear in the center of the page so it will work on
    different screen widths. I know you can do it with tables, but I'd
    like to use CSS.

    Thanks
    Tags: None
    • Zeke Koos
      #2
      Re: Centering absolute placed images with CSS?

      Headless <invalid_addres s@dna.ie> wrote in message news:<ia27jvc85 sro3girdoikdqll cf0i940pf5@4ax. com>...[color=blue]
      > zekekoos@softho me.net (Zeke Koos) wrote:
      >[color=green]
      > ><body>
      > >
      > ><div style="position :absolute; left:0px; top:0px; width:780px;
      > >height:42px; ">
      > > <img src="images/CW---Webpage_01.png" width=780 height=42>
      > ></div>
      > ><div style="position :absolute; left:0px; top:42px; width:52px;
      > >height:488px ; ">
      > > <img src="images/CW---Webpage_02.png" width=52 height=488>
      > ></div>
      > >
      > ></body>
      > >
      > >
      > >How do I make this appear in the center of the page so it will work on
      > >different screen widths. I know you can do it with tables, but I'd
      > >like to use CSS.[/color]
      >
      > <head>
      > <style type="text/css">
      > img.class{displ ay:block;margin :0 auto}
      > </style>
      > </head>
      > <body>
      > <img src="img1.png" width="780" height="42" class="class" alt="">
      > <img src="img2.png" width="52" height="488" class="class" alt="">
      > </body>
      >
      > Use suitable alt content, name the class appropriately, make sure IE is
      > not in quirk mode.[/color]


      That does not work with absolutely placed images, thanks for replying though :)

        Comment

        • Els
          #3
          Re: Centering absolute placed images with CSS?


          "Zeke Koos" <zekekoos@softh ome.net> schreef in bericht
          news:e579120b.0 308082004.15c57 1c0@posting.goo gle.com...[color=blue]
          > Headless <invalid_addres s@dna.ie> wrote in message[/color]
          news:<ia27jvc85 sro3girdoikdqll cf0i940pf5@4ax. com>...[color=blue][color=green]
          > > zekekoos@softho me.net (Zeke Koos) wrote:
          > >[color=darkred]
          > > ><body>
          > > >
          > > ><div style="position :absolute; left:0px; top:0px; width:780px;
          > > >height:42px; ">
          > > > <img src="images/CW---Webpage_01.png" width=780 height=42>
          > > ></div>
          > > ><div style="position :absolute; left:0px; top:42px; width:52px;
          > > >height:488px ; ">
          > > > <img src="images/CW---Webpage_02.png" width=52 height=488>
          > > ></div>
          > > >
          > > ></body>
          > > >
          > > >
          > > >How do I make this appear in the center of the page so it will[/color][/color][/color]
          work on[color=blue][color=green][color=darkred]
          > > >different screen widths. I know you can do it with tables, but[/color][/color][/color]
          I'd[color=blue][color=green][color=darkred]
          > > >like to use CSS.[/color]
          > >
          > > <head>
          > > <style type="text/css">
          > > img.class{displ ay:block;margin :0 auto}
          > > </style>
          > > </head>
          > > <body>
          > > <img src="img1.png" width="780" height="42" class="class" alt="">
          > > <img src="img2.png" width="52" height="488" class="class" alt="">
          > > </body>
          > >
          > > Use suitable alt content, name the class appropriately, make sure[/color][/color]
          IE is[color=blue][color=green]
          > > not in quirk mode.[/color]
          >
          >
          > That does not work with absolutely placed images, thanks for[/color]
          replying though :)

          I couldn't read your original post anymore, so I'm guessing at what
          you want to achieve,
          but if I understand it right, you could use the following code:
          <body>
          <div style="width:78 0px; margin-right:auto; margin-left:auto;
          margin-top:0px; padding:0px; text-align:left;">
          <div style="position : relative; top: 0px; left: 0px;">
          <div style="position :absolute; left:0px; top:0px;
          width:780px;hei ght:42px;"><img src="images/CW---Webpage_01.png"
          width=780 height=42></div>
          <div style="position :absolute; left:0px; top:42px;
          width:52px;heig ht:488px;"><img src="images/CW---Webpage_02.png"
          width=52 height=488></div>
          </div>
          </div>
          </body>




            Comment

            Previous template Next
            Working...