473,706 Members | 2,651 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

variable-width spacer between fixed size pictures

Hi everybody,

I'm scratching my head with a CSS problem.

I want to have the following (the two pics have these size for
a good reason, the whole point of the page is basically to show
these pices at these fixed sizes) :

spacer - fixed size picture - spacer - fixed size picture - spacer

Height alignment doesn't matter, all I want is the "horizontal spacer"
to have a variable width.

And I'd like each of the three "spacer" to use one third of the
"remaining width". For example, if the first picture as a width of
350 pixel, the second a width of 250 and the viewable area a
width of 1002 pixels, I'd like to have each spacer taking :

(viewable area width - (350 + 250)) / 3

402 / 3 = 134 pixels

I can do it using a really ugly JavaScript hack (hence not only
ugly but also working only when the browser has JavaScript),
but I want to do it using CSS.

If I'm working only in %, I can do it easily, but here I'm forced
to deal with fixed-size picture and I'm lost.

I gave an example with 3 spacers / 2 fixed-size picture, but it
can be 4 spacers / 3 fixed-size pictures, etc.

Any hint is greatly appreciated,

Driss

Dec 7 '06 #1
2 4059
On 2006-12-07, ne******@yahoo. fr <ne******@yahoo .frwrote:
Hi everybody,

I'm scratching my head with a CSS problem.

I want to have the following (the two pics have these size for
a good reason, the whole point of the page is basically to show
these pices at these fixed sizes) :

spacer - fixed size picture - spacer - fixed size picture - spacer

Height alignment doesn't matter, all I want is the "horizontal spacer"
to have a variable width.

And I'd like each of the three "spacer" to use one third of the
"remaining width". For example, if the first picture as a width of
350 pixel, the second a width of 250 and the viewable area a
width of 1002 pixels, I'd like to have each spacer taking :

(viewable area width - (350 + 250)) / 3

402 / 3 = 134 pixels

I can do it using a really ugly JavaScript hack (hence not only
ugly but also working only when the browser has JavaScript),
but I want to do it using CSS.
This is a tricky one.

The only thing I can think of is to use a table. Give the whole
table a width (1002 pixels say), put each image in a cell on its own,
and between the image cells, put empty cells for the spacers. Set the
widths of the spacer cells to 1002.

Most UAs will make the spacers as wide as possible to get them as close
as they can to the 1002 you've asked for, but will give them all equal
width, and hence will divide up whatever width is left of the total
originally available (1002 pixels) after setting each of the cells with
an image in it to its minimum content width (which should be the width
of the image) equally between the spacers.

This is relying on behaviour that isn't specified anywhere official that
I can find though, although it works in Firefox, Opera and Konqueror.
Dec 7 '06 #2
Hi,
This is a tricky one.
ah damn :(

I hoped I was missing something obvious...

Thanks a lot for your answer

Dec 7 '06 #3

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

Similar topics

1
4558
by: Scott | last post by:
I have an XML Document in a format like: <Variable name="Bob">ABCDEFG</Variable> <Variable name="Steve">QWERTYUI</Variable> <Variable name="John">POIUYTR</Variable> <Variable name="Tim">ZXCVBNM</Variable> <Function id="1"> <Parameter type="String">Bob</Parameter> <Parameter type="String">Steve</Parameter>
4
3246
by: Frederik Sørensen | last post by:
I include a xslt stylesheet with variables for all the error messages in my system. <xsl:variable name="Banner_error_1"> errormessage 1 for banner </xsl:variable> <xsl:variable name="Banner_error_2"> errormessage 2 for banner </xsl:variable>
134
7876
by: James A. Donald | last post by:
I am contemplating getting into Python, which is used by engineers I admire - google and Bram Cohen, but was horrified to read "no variable or argument declarations are necessary." Surely that means that if I misspell a variable name, my program will mysteriously fail to work with no error message. If you don't declare variables, you can inadvertently re-use an variable used in an enclosing context when you don't intend to, or
10
2251
by: Blaxer | last post by:
There is probably a really easy way to do this, so please forgive me but I would like to set the value of a variable from a variable, an example would be... function Calculate_Something(ByVal multiplyer as integer, ByVal variable as ___?) variable = 5 * multiplyer end function What I would like this function to do is take the name of the incoming variable and assign a calculated value to it. Any help would be greatly appreciated, TIA!!
23
19196
by: Russ Chinoy | last post by:
Hi, This may be a totally newbie question, but I'm stumped. If I have a function such as: function DoSomething(strVarName) { ..... }
3
3961
by: rls03 | last post by:
I have the following which creates a variable containing a relative path where <xsl:value-of select="."/returns a portion of the filename: <xsl:variable name="fileName">../../data/models/<xsl:value-of select="."/>.xml</xsl:variable> I want to use this variable as an argument of the document function: <xsl:apply-templates mode="coordinates" select="document( REFERENCE
1
25689
pbmods
by: pbmods | last post by:
VARIABLE SCOPE IN JAVASCRIPT LEVEL: BEGINNER/INTERMEDIATE (INTERMEDIATE STUFF IN ) PREREQS: VARIABLES First off, what the heck is 'scope' (the kind that doesn't help kill the germs that cause bad breath)? Scope describes the context in which a variable can be used. For example, if a variable's scope is a certain function, then that variable can only be used in that function. If you were to try to access that variable anywhere else in...
2
3679
by: Florian Loitsch | last post by:
hi, What should be the output of the following code-snippet? === var x = "global"; function f() { var x = 0; eval("function x() { return false; }"); delete x; alert(x); }
37
5468
by: minkoo.seo | last post by:
Hi. I've got a question on the differences and how to define static and class variables. AFAIK, class methods are the ones which receives the class itself as an argument, while static methods are the one which runs statically with the defining class. Hence, my understanding is that static variables must be bound to the class defining the variables and shared by children of parent class where the variable is defined. But, please have a...
112
5439
by: istillshine | last post by:
When I control if I print messages, I usually use a global variable "int silent". When I set "-silent" flag in my command line parameters, I set silent = 1 in my main.c. I have many functions that may print some messages. foo(...) { if (!silent)
0
8772
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
8692
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
9141
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9038
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
8982
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7895
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...
0
4441
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3140
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2493
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.