473,795 Members | 2,863 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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
Jul 20 '05 #1
2 2365
Headless <in************ *@dna.ie> wrote in message news:<ia******* *************** **********@4ax. com>...
ze******@softho me.net (Zeke Koos) wrote:
<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.


<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.

That does not work with absolutely placed images, thanks for replying though :)
Jul 20 '05 #2
Els

"Zeke Koos" <ze******@softh ome.net> schreef in bericht
news:e5******** *************** ***@posting.goo gle.com...
Headless <in************ *@dna.ie> wrote in message

news:<ia******* *************** **********@4ax. com>...
ze******@softho me.net (Zeke Koos) wrote:
<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 ondifferent screen widths. I know you can do it with tables, but I'dlike to use CSS.


<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.

That does not work with absolutely placed images, thanks for

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>


Jul 20 '05 #3

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

Similar topics

19
5750
by: George Ziniewicz | last post by:
.. I try to use CSS when possible, though I am still learning and don't maximize its use. In particular, I still use a table to provide for a centered image in a few slideshows (though table vertical align doesn't work in Mozilla): http://zintel.com/homepics.html I've used combinations of <center>, style align 'center', table cell align, valign and height='100%' to get what I want, but I wonder if CSS can do it by itself.
9
6256
by: Faz | last post by:
Hi I'm having some real trouble with a header I have created within a container. I have two problems; firstly the menu (a horizontal UL) will not centre within the surrounding header, despite attempts to use the following within the #header declaration: margin-left: auto; margin-right: auto; The image above the list is easily centred using the 'text-align' property,
5
2385
by: david hepworth | last post by:
I am in the process of creating a CSS tab style thing for my webpage. I have everything as i wish except that i cannot center the damn thing in the page. I am hoping someone out there can help. I am sure that it is a silly mistake but i have been staring at it for so long i am going stir-crazy! I have tried 'text-align: center;' in most parts of the CSS and in the div in the HTML but it does not like it. This is my CSS:...
2
2613
by: kevinC | last post by:
Hello, I know most of you are probably going seeing positioning:absolute; and centering in the title and saying, oh no! not again! Do a google search! Actually, I've found many helpful resources online and realize that my case may be a bit more challenging. I'm trying to create a table-less layout that looks something like:
3
3666
by: BT | last post by:
I have taken over the support of an existing webpage and I need to revise the page so that it is centered (left and right) on the screen instead of aligned on the left. I can do this easily, but there is a little JavaScript that doesn't work correctly after I center it. I have tried to realign the page with either <centertag or align="left" attribute, but the pictures displayed with the JavaScript get messed up with everything I've...
2
2232
by: tonsi | last post by:
I have a page but it wont center the div. Can anyone take a look at it and help. When I try to center in the body using text-align: center; it doesn't work with the main container (called Table_01). Please help! I would be ever so greatful. The page is located here: http://www.cpiequipment.com/test_site/index.html Here is the code: <html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...
14
2528
by: issentia | last post by:
I'm working on this site: http://www.essenceofsoy.com/redesign/index2.html and I'm having a few problems with getting the layout exactly right. 1) When the menu items are rolled over, they cannot be clicked as links unless the mouse pointer is below the word. This happens in both Firefox and IE6. 2) In Firefox, the pink quote banner and two gray form boxes above and below the content aren't centered in the "content" div, and I can't...
1
2287
by: =?Utf-8?B?ZnJhbmt5?= | last post by:
Hello, I've created a table that has two rows that are span across three columns. The third row has three columns, each with an image. The last row is also span accross three columns. The span rows are centering their data. however, the row with three columns, each with images (myimages1-3) are not centering with the rest of the table. Any idea why? Thanks in advance!
5
13384
matheussousuke
by: matheussousuke | last post by:
Hello, I'm using tiny MCE plugin on my oscommerce and it is inserting my website URL when I use insert image function in the emails. The goal is: Make it send the email with the URL http://mghospedagem.com/images/controlpanel.jpg instead of http://mghospedagem.comhttp://mghospedagem.com/images/controlpanel.jpg As u see, there's the website URL before the image URL.
0
9673
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9522
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10443
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10165
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9044
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7543
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6783
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5565
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
3
2921
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.