tricky css question

grahamor

Hi,

Please see attached image. Basically it's a div with the map as a bg image,
The country markers are divs, i can forget the round corners and arrow for the moment.

The site i am making this for is available in more than 20 languages so i have to deal with translations messing up the layout of the marker divs, i.e. England turns into Gross Brittanien in German etc.

For certain markers i.e Ireland i need it to expand left and for Malta i need it to expand right when translated.

The css for a marker is like

.marker {
position:relative;
color:#fff;
left:350px; // position left on map
top:200px // position from top of map div
}

Is there a way i can specify which direction the marker div should expand ?

Thanks for any tips

deegs

grahamor wrote: »

Hi,

Please see attached image. Basically it's a div with the map as a bg image,
The country markers are divs, i can forget the round corners and arrow for the moment.

The site i am making this for is available in more than 20 languages so i have to deal with translations messing up the layout of the marker divs, i.e. England turns into Gross Brittanien in German etc.

For certain markers i.e Ireland i need it to expand left and for Malta i need it to expand right when translated.

The css for a marker is like

.marker {
position:relative;
color:#fff;
left:350px; // position left on map
top:200px // position from top of map div
}

Is there a way i can specify which direction the marker div should expand ?

Thanks for any tips

Hmm, dont think so, espcially not relatively?

Maybe if you have a mixture of absolute div's (to say 300px wide) and float divs inside either right (if you want it to expand to left) and left (if you want it to expand to right) to 150px it should expand when necessary ok.

grahamor

Thanks for the tip deegs, that seems to work. So the container is the max width of the translation, then there is another one inside it that floats left or right.

<div style="position:relative;float:left;width:150px;left:65px;top:130px;">
<div style="background:#000;padding:2px;color:#fff;float:left">
Canada
</div>
</div>

deegs

glad it helped.