> Le 25 juil. 2010 à 12:08, Jesse <[email protected]> a écrit :
>
>> Thanks Jordan,
>>
>> ... It is not really standards, just more of what I have seen in practice.
>> In my experience people give up too early on finding the relative positioned
>> solution, and go straight to absolute. Absolute will work, but if in the
>> future, you decide you want an iPad version you will need to supply new
>> absolutes... If the world will always be 320px wide then it absolutely
>> doesn't matter.
>
> This is not true.
> absolute positioning is the only solution here, and
(bloody touch device...)
... and this will not have any screen size issue.
#loading_div {
display: block;
position: absolute;
top: 150px;
left: 50%;
margin-left: -100px; /* half than width */
width: 200px;
padding: 150 17 30 17;
height: auto;
color: rgba(255,255,255,.7);
font-size: 24px;
font-weight: bold;
background: rgba(0,0,0,.7) url(loading_spin.gif) no-repeat center center;
z-index: 99;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
Typing this directly on the iPhone so not 100% sure it works :)
R.
>> Sorry for hijacking this thread, Alex.
>>
>> Sent from my iPad
>>
>> On 2010-07-24, at 6:42 PM, Jordan Dobson <[email protected]> wrote:
>>
>>> @alex - I'm glad it worked out for you!
>>>
>>> @Jesse - Comments inline below...
>>>
>>> On Sat, Jul 24, 2010 at 5:08 PM, Jesse <[email protected]> wrote:
>>>> http://www.bluerobot.com/web/css/center1.html
>>>> CSS can do the work for you. Your percentage based approach should work as
>>>> well. I am not sure about the iUI implications, I am speaking strictly
>>>> from
>>>> a web standards point of view when I say avoid absolute positioning. If you
>>>> only care about iPhone+iUI then go ahead...
>>>
>>> I'm pretty into standards and consider myself an extremely skilled CSS
>>> wizard. :P Also I respect your work very much! However, I don't see
>>> where absolute positioning comes into play with web standards.
>>>
>>> I use that approach frequently and never have issues nor do I think
>>> it's something you should avoid. It's very reliable method to apply
>>> especially when you need to have layers of content. Maybe I'm
>>> misinterpreting your comment on web-standards however.
>>>
>>> I think the main issues people have with absolute positioning is they
>>> don't understand how to apply the right properties to parent elements
>>> and so on to get the desired effect. I know I had a hard time with it
>>> cross browser at first until I dug in more.
>>>
>>>
>>>>
>>>> On Sat, Jul 24, 2010 at 3:19 PM, Jordan Dobson <[email protected]>
>>>> wrote:
>>>>>
>>>>> Or are you saying just don't use pixels? That I can understand.
>>>>>
>>>>> So something like this would work without pixels.
>>>>>
>>>>> .foo{
>>>>> position: absolute;
>>>>> left: 50%;
>>>>> width: 80%;
>>>>> margin-left: -40%;
>>>>> }
>>>>>
>>>>> Make sure the parent has position: relative.
>>>>>
>>>>> --
>>>>> Jordan Dobson
>>>>>
>>>>> (425) 444-8014
>>>>> http://Twitter.com/JordanDobson
>>>>>
>>>>> On Jul 24, 2010, at 2:21 PM, Jesse MacFadyen <[email protected]>
>>>>> wrote:
>>>>>
>>>>>> -1
>>>>>> Do NOT use absolute values, use margin auto and make sure the parent
>>>>>> element is width 100% plus text-align center. Your solution will then
>>>>>> work
>>>>>> in any browser.
>>>>>>
>>>>>>
>>>>>> On 2010-07-24, at 1:08 PM, Alex Zylka <[email protected]> wrote:
>>>>>>
>>>>>>> @Jordan: Your suggestion works perfectly, although I would still like
>>>>>>> to know if percents in CSS are from the body, the viewport, or the
>>>>>>> containing element.
>>>>>>>
>>>>>>> Thanks,
>>>>>>> Alex Zylka
>>>>>>> http://www.zylka.us
>>>>>>>
>>>>>>> On Jul 24, 2:30 pm, Remi Grumeau <[email protected]> wrote:
>>>>>>>> +1 !
>>>>>>>> don t forget to put text-align: center to body and to left to the
>>>>>>>> targeted div.
>>>>>>>>
>>>>>>>> Remi Grumeauhttp://www.remi-grumeau.com
>>>>>>>>
>>>>>>>> Le 24 juil. 2010 à 19:28, Jordan Dobson <[email protected]> a
>>>>>>>> écrit :
>>>>>>>>
>>>>>>>>> You'll likely want to use absolute positioning for this type of
>>>>>>>>> approach.
>>>>>>>>
>>>>>>>>> If the width is 300px you push it out 50% and then negative margin
>>>>>>>>> back half the width.. so -150px.
>>>>>>>>
>>>>>>>>> That's a better way than using margin percentages.
>>>>>>>>
>>>>>>>>> --
>>>>>>>>> Jordan Dobson
>>>>>>>>
>>>>>>>>> (425) 444-8014
>>>>>>>>> http://Twitter.com/JordanDobson
>>>>>>>>
>>>>>>>>> On Jul 24, 2010, at 9:45 AM, Alex Zylka <[email protected]> wrote:
>>>>>>>>
>>>>>>>>>> Hi there again. Right now, I'm messing around with a way to
>>>>>>>>>> automatically download updates (new cache manifest files) to webapps
>>>>>>>>>> using a native-looking loading box like the one here (http://
>>>>>>>>>> www.macnotes.de/gimages/saurik/cydia-nachladen.jpg). I was wondering
>>>>>>>>>> if anyone knew if using a percent with margin-right/margin-left is a
>>>>>>>>>> percent of the body width, or the screen width. I ask this because I
>>>>>>>>>> am attempting to center the loading box on the page. I achieved this
>>>>>>>>>> by adding margin-right: 18%; to loading.css (which deals with the
>>>>>>>>>> loading box). This solution works just alright. The box looks
>>>>>>>>>> centered
>>>>>>>>>> on the screen. But, when you turn the iPhone/ iPod Touch and the
>>>>>>>>>> screen rotates to landscape mode, the loading box is way too far to
>>>>>>>>>> the right side and NOT centered.
>>>>>>>>>> My test app is here (with the loading box continuosly showing for
>>>>>>>>>> debugging):http://www.zylka.us/test
>>>>>>>>
>>>>>>>>>> Thanks,
>>>>>>>>>> Alex Zylka
>>>>>>>>>> http://www.zylka.us/
>>>>>>>>
>>>>>>>>>> --
>>>>>>>>>> You received this message because you are subscribed to the Google
>>>>>>>>>> Groups "iPhoneWebDev" group.
>>>>>>>>>> To post to this group, send email to [email protected].
>>>>>>>>>> To unsubscribe from this group, send email to
>>>>>>>>>> [email protected].
>>>>>>>>>> For more options, visit this group
>>>>>>>>>> athttp://groups.google.com/group/iphonewebdev?hl=en.
>>>>>>>>
>>>>>>>>> --
>>>>>>>>> You received this message because you are subscribed to the Google
>>>>>>>>> Groups "iPhoneWebDev" group.
>>>>>>>>> To post to this group, send email to [email protected].
>>>>>>>>> To unsubscribe from this group, send email to
>>>>>>>>> [email protected].
>>>>>>>>> For more options, visit this group
>>>>>>>>> athttp://groups.google.com/group/iphonewebdev?hl=en.
>>>>>>>
>>>>>>> --
>>>>>>> You received this message because you are subscribed to the Google
>>>>>>> Groups "iPhoneWebDev" group.
>>>>>>> To post to this group, send email to [email protected].
>>>>>>> To unsubscribe from this group, send email to
>>>>>>> [email protected].
>>>>>>> For more options, visit this group at
>>>>>>> http://groups.google.com/group/iphonewebdev?hl=en.
>>>>>>>
>>>>>>
>>>>>> --
>>>>>> You received this message because you are subscribed to the Google
>>>>>> Groups "iPhoneWebDev" group.
>>>>>> To post to this group, send email to [email protected].
>>>>>> To unsubscribe from this group, send email to
>>>>>> [email protected].
>>>>>> For more options, visit this group at
>>>>>> http://groups.google.com/group/iphonewebdev?hl=en.
>>>>>>
>>>>>
>>>>> --
>>>>> You received this message because you are subscribed to the Google Groups
>>>>> "iPhoneWebDev" group.
>>>>> To post to this group, send email to [email protected].
>>>>> To unsubscribe from this group, send email to
>>>>> [email protected].
>>>>> For more options, visit this group at
>>>>> http://groups.google.com/group/iphonewebdev?hl=en.
>>>>>
>>>>
>>>> --
>>>> You received this message because you are subscribed to the Google Groups
>>>> "iPhoneWebDev" group.
>>>> To post to this group, send email to [email protected].
>>>> To unsubscribe from this group, send email to
>>>> [email protected].
>>>> For more options, visit this group at
>>>> http://groups.google.com/group/iphonewebdev?hl=en.
>>>>
>>>
>>>
>>>
>>> --
>>> Jordan Dobson
>>> Owner + Director
>>> MadeBySquad.com | Glue.Pro | SquadBlog.com
>>> (425) 444-8014
>>>
>>> Follow me on twitter at http://Twitter.com/JordanDobson
>>>
>>> --
>>> You received this message because you are subscribed to the Google Groups
>>> "iPhoneWebDev" group.
>>> To post to this group, send email to [email protected].
>>> To unsubscribe from this group, send email to
>>> [email protected].
>>> For more options, visit this group at
>>> http://groups.google.com/group/iphonewebdev?hl=en.
>>>
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "iPhoneWebDev" group.
>> To post to this group, send email to [email protected].
>> To unsubscribe from this group, send email to
>> [email protected].
>> For more options, visit this group at
>> http://groups.google.com/group/iphonewebdev?hl=en.
>>
--
You received this message because you are subscribed to the Google Groups
"iPhoneWebDev" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/iphonewebdev?hl=en.
