1
mixmaster
Images inside <div>
  • 2005/1/23 23:01

  • mixmaster

  • Just popping in

  • Posts: 28

  • Since: 2005/1/21


I have 3 images inside a
tag. I want the first to be fixed width, the second to be variable width (repeat-x), and the third to be fixed width. Any idea how to do this?

For example, this is what I have at the moment:
<div class="whatever"><img src="Image#1>Image#2>
<img src="Image#3>


Any suggestions would be appreciated.

2
LazyBadger
Re: Images inside

3 div with 3 different classes?!

3
mixmaster
Re: Images inside
  • 2005/1/23 23:31

  • mixmaster

  • Just popping in

  • Posts: 28

  • Since: 2005/1/21


I tried that, but it places the images beneath each other, not inline.

4
tjnemez
Re: Images inside
  • 2005/1/24 2:18

  • tjnemez

  • Home away from home

  • Posts: 1594

  • Since: 2003/9/21


try adding this:

float: left

you can float all divs left, but you will have to ckeck with ie6 and firefox. you may need to play with this a bit.

to control width place all 3 divs in main div:






5
AAINC
Re: Images inside
  • 2005/1/24 2:52

  • AAINC

  • Not too shy to talk

  • Posts: 121

  • Since: 2003/10/18


Can you use html?
<div="whatever">
<
table  border="0" cellpadding="0" cellspacing="0">
<
tr>
<
td width="whatever" height="whatever">
<
img src="Image#1" >
td>
<
td width="100%" height="whatever">
<
img src="Image#2" >
td>
<
td width="whatever" height="whatever">
<
img src="Image#3" >
td>
td>
tr>
table>
div>


or maybe put images in the td bg:

<div="whatever">
<
table border="0" cellpadding="0" cellspacing="0" width="100%" height="23" >
<
tr>
<
td background="Image#1" width="16" height="23">
<
td background="Image#2" width="100%" height="23" >
<
td background="Image#3" width="26" height="23">
td>
tr>
table>
div>


or

<div="whatever">
<
table border="0" cellpadding="0" cellspacing="0" width="100%" height="23" >
<
tr>
<
td background="<{$xoops_imageurl}>images/Image#1" width="16" height="23">
<
td background="<{$xoops_imageurl}>images/Image#2"width="100%" height="23" >
<
td background="<{$xoops_imageurl}>images/Image#3" width="26" height="23">
td>
tr>
table>
div>


or maybe something like



<div="whatever">

<
img src="Image#1" width="whatever">
<
div align="center"><img src="Image#2" width="100%">div>
<
div align="right"><img src="Image#3" width="whatever">div>

div>

6
Draven
Re: Images inside
  • 2005/1/24 3:17

  • Draven

  • Module Developer

  • Posts: 337

  • Since: 2003/5/28


Here's what you can do...
<div id='container'>
    <
div id='leftImage' style='float:left; width: 100px'><img src='...' width='100'>div>
    <
div id='rightImage' style='float:right; width: 100px;'><img src='...' width='100'>div>
    <
div id='centerImage'><img src='...' width='100%'>div>
div>


This should work in IE, Mozilla Firefox, Mozilla and netscape. Floats should always appear before the 'center' item since it has no alignment. Post the exact items if you can't get it to work, I'll guide you through it.

7
tjnemez
Re: Images inside
  • 2005/1/24 3:23

  • tjnemez

  • Home away from home

  • Posts: 1594

  • Since: 2003/9/21


@draven - cool, this is good to know.

8
Draven
Re: Images inside
  • 2005/1/24 3:37

  • Draven

  • Module Developer

  • Posts: 337

  • Since: 2003/5/28


Quote:

tjnemez wrote:
@draven - cool, this is good to know.


no problem, glad to help.

I'm considering holding a XOOPS theme Q & A on some chat server where I'll answer any questions people have about theme development and customing module templates. Just need to find a decent Chat service to get a room from.

9
LazyBadger
Re: Images inside

Quote:

I'm considering holding a XOOPS theme Q & A on some chat server where I'll answer any questions people have about theme development and customing module templates. Just need to find a decent Chat service to get a room from.

I hate web-chats, and can suggest
- IRC
- Jabber
(and install any of these daemons for you... on your host , because I haven't free servers now, which can be IRC-dedicated host)

Login

Who's Online

356 user(s) are online (240 user(s) are browsing Support Forums)


Members: 0


Guests: 356


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Nov 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits