margin-right problem html5

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

Donnerstag, 12. Januar 2012, 14:27

margin-right problem html5

Hi,

i have the problem that the margin-right:10px; does not work on idevices. margin-left does work.

Quellcode

<plugin name="text" 
	url="../plugins/textfield.swf"		
	keep="true"
	alpha="1"
	html="[div style='color:#333366;width:100%;height:100%;  font: 12px Verdana;text-align:left;margin-left:10px;margin-right:10px;']
	[br]
I Looove krpano
[br][br]

[/div]"

	align="righttop" x="-280" y="32"
	background="true"		
	backgroundcolor="0xFFFFFF"
	width="280"
	height="130"
	zorder="100"
		
	ondown="capt_close();"		
/>

any idea, or workaround for this?

i this case i'm on version .14 (2011-10-21)

cheers

Tuur *thumbsup*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

Donnerstag, 12. Januar 2012, 14:43

when i do

	Quellcode
1	... font: 12px Verdana;text-align:left;margin-left:10;margin-right:10;']

without px the right margin works but the left not
when i do

	Quellcode
1	... font: 12px Verdana;text-align:left;margin-left:10px;margin-right:10;']

the right margin doesn't work..

Tuur *thumbsup*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

Donnerstag, 12. Januar 2012, 15:02

You have width: 100%

margin left pushes this 10 px from the left (but width is still 100% so it actually becomes 100%+10px. ) But margin-right cant pushes this in, which is not possible. Imagine putting a big box in a smaller box. Sure Youll get the left side in, but the right side will be out of the small box (which either shows a scrollbar or overflow = hidden or stretches the small box so its ugly). Anyway you cant put a width 100% + 2x 10px margin in a 100% container.

What I usually do is create an outer div with width: 100% and then an inner div with no width but only margins

<div style="width="100%"><div style="margin: 10px">contents</div></div>

Im not sure if this works in krpano though.

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

Donnerstag, 12. Januar 2012, 15:09

He Zephyr,

live safer! ;-)

i read your box reaction and laughed. Good explenation for dummy's (like me)

i now just changed 100% to 95% et voila!

	Quellcode
1	html="[div style='color:#333366;width:95%;height:100%; font: 12px Verdana;text-align:left;margin-left:10px;margin-right:10;']

that works perfect

Thanx a milion times.
new 43 credits: +10 and growing ;-)

Cheers
Tuur *thumbsup*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

Donnerstag, 12. Januar 2012, 15:37

doing that probally removes the need for margin-right :P

10px margin left + 93% = +/- 100% of the width

If you change the margin-left to 5px, you have to alter the width to for example 95%. This is not ideal if you work with fluid width tours.