div tag aligning images and text [Archive]

View Full Version : div tag aligning images and text

saghir69

09-09-2004, 07:59 PM

I'm creating a new home page for my site and the top of the page needs to have

pic1 then some text "ewfwerfef" then pic2

i want pic1 aligned left
the text aligned center and middle
and pic 2 aligned right

i tried using a table with 3 colums to do it but the right align don't work properly and the pic2 is not all the way right of the page.

can someone help?

Arcane

09-09-2004, 08:52 PM

Well, since you're not against using tables, that is the easiest way to do it.

Unfortunately, you didn't give me a width to work with, so I will assume a 100% table. I will also assume that each image is 100px wide.

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="100"><img src="imgsrc.src" height="30" width="100" alt="Left" /></td>

<td align="center">ewfwerfef</td>

<td width="100" align="right"><img src="imgsrc.src" height="30" width="100" alt="Right" /></td>
</tr>
</table>

That markup will work. It is also XHTML 1.0 Transitional compliant.

Yes, I know about the "roomer" that tables are not intended for images, rather tubular data, however nesting images inside tables is acceptable by XHTML 1.1 standards, and thus is entirely acceptable.

stripeyteapot

09-09-2004, 08:54 PM

.fl
{
float: left;
}

.fr
{
float: right;
}

Add the above to your CSS. Use the below code for it to work.

<div align="center">

<img src="" alt="title" title="title" class="fl">

I love pmoduk2 soooo much.

<img src="" alt="title 2" title="title 2" class="fr">

</div>

Corey Bryant

09-09-2004, 08:58 PM

or even:

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="33%">
<img style="float:left" border="0" src="images/adobe.gif" width="88" height="31" ></td>
<td style="text-align:center;" width="24%">Txxt here</td>
<td width="43%">
<img style="float:right" border="0" src="images/echeck.gif" width="250" height="45"></td>
</tr>
</table>

saghir69

09-09-2004, 09:31 PM

Originally posted by Arcane
Well, since you're not against using tables, that is the easiest way to do it.

Unfortunately, you didn't give me a width to work with, so I will assume a 100% table. I will also assume that each image is 100px wide.

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="100"><img src="imgsrc.src" height="30" width="100" alt="Left" /></td>

<td align="center">ewfwerfef</td>

<td width="100" align="right"><img src="imgsrc.src" height="30" width="100" alt="Right" /></td>
</tr>
</table>

That markup will work. It is also XHTML 1.0 Transitional compliant.

Yes, I know about the "roomer" that tables are not intended for images, rather tubular data, however nesting images inside tables is acceptable by XHTML 1.1 standards, and thus is entirely acceptable.

hi i used this code it works but there is about a centimeter gap from the top , left and right between where the table starts and the page.

have a look here www.asianchitchat.com/in.htm

saghir69

09-09-2004, 09:33 PM

Originally posted by Arcane
Well, since you're not against using tables, that is the easiest way to do it.

Unfortunately, you didn't give me a width to work with, so I will assume a 100% table. I will also assume that each image is 100px wide.

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="100"><img src="imgsrc.src" height="30" width="100" alt="Left" /></td>

<td align="center">ewfwerfef</td>

<td width="100" align="right"><img src="imgsrc.src" height="30" width="100" alt="Right" /></td>
</tr>
</table>

That markup will work. It is also XHTML 1.0 Transitional compliant.

Yes, I know about the "roomer" that tables are not intended for images, rather tubular data, however nesting images inside tables is acceptable by XHTML 1.1 standards, and thus is entirely acceptable.

hi i tried it but the alignment is not right, have a look at this page
www.asianchitchat.com/in.htm

Arcane

09-09-2004, 09:33 PM

This "gap" is called a margin (or in Opera, padding).

The best way to fix this problem (ignoring Netscape 4 renderability) is to give the body the following style:

margin: 0px; padding: 0px;

This can either be done inline, or externally.

Inline:
<body style="margin: 0px; padding: 0px;">

Externally:
body { margin: 0px; padding: 0px; }

saghir69

09-09-2004, 10:00 PM

^ ok thanks that worked but is there any chance i can use the same html as in http://www.asianchitchat.com/forum/index.php
i can get the source of the file but it doesn't be formated as it should be, maybe i need to put the style sheet in the same location as the htm file. but even that don't work.

i can put the style sheet here if u like?

but this is the mainbit i want to work
#header-box {
background-image: url(images/blue/logo_bg.gif);
}

#navigation {
background-image: url(images/blue/logo_bg2.gif);
}

saghir69

09-10-2004, 09:45 AM

anyone? ..