Re: [Web-Technology-of-Frederick] CSS Positioning Issue

From: Max M.
Sent on: Tuesday, March 20, 2012 12:13 PM
Hi all,

Just wanted to share my suggestion to Stephen, that avoid the use of position:relative, which can bring issues (with z-indexes on IE<=8, still too many people :( )
You can actually set a position absolute without setting their with top/left/bottom/right, only by offsetting their position with margin, which can be negative

In Stephen's case, you can do for instance
<div id="content-wrapper">
    <a rel="prev" style="float:left;" href="...">
       <img style="position:absolute; margin-top:350px; margin-left:-14px;" ...>
    </a>
    <a rel="next" style="float:right;" href="...">
        <img style="position:absolute; margin-top:350px; margin-left:-14px;" ...>
    </a>
    ...
(floats guarantees the alignment to the edges of the div#content-wrapper, whatever its width
And if you want to align the arrows at X pixels from the bottom of the image, as nicely done by Kevin, just put the arrows after the image, and set a negative margin-top.

Maybe that can help someone :)

Max

On Fri, Mar 16, 2012 at 12:01 PM, Stephen <[address removed]> wrote:
Kevin,

Thanks - I will try that later today when I get take the time to edit it.

Hope I did not open a can of worms for you.

Stephen

On Fri, Mar 16, 2012 at 11:48 AM, Kevin Bruce <[address removed]> wrote:
> stephen,
> It looks like the placement of your arrows. they need to be placed inside your <div id="comic"> with that div set to position="relative".
> Then set your left arrow styles to this:
>
>        bottom: 23px;
>        left: -17px;
>        margin: 0;
>        padding: 0;
>        position: absolute;
>        z-index: 5000;
>
> and you right arrows to this:
>
>        bottom: 23px;
>        right: -17px;
>        margin: 0;
>        padding: 0;
>        position: absolute;
>        z-index: 5000;
>
> On Mar 16, 2012, at 9:37 AM, Stephen Sell wrote:
>
>> Kevin,
>>
>> Take a look at this site:
>>
>> http://happylies.com/
>>
>> The trouble is with the light green arrows that are inside the comic
>> itself. They are supposed to be JUST outside the comic to the left and
>> to the right. These arrows are to function as links to the previous
>> comic and to the next comic.
>>
>> If you look at it in the absolute latest and greatest versions of ALL
>> browsers (i.e. Safari, IE, Firefox, Chrome) it looks great. However,
>> if you go backward to earlier versions ( in some cases just going back
>> to the very previous version of a browser) it looks horrible and not
>> aligned.
>>
>> I have done several things with absolute, relative positioning
>> including setting the parent container to be relative. I would prefer
>> to use float instead.
>>
>> I have attached a mockup that the client wants that might help.
>>
>> By the way, this is in a word press install but so far I have been
>> able to work within that with no problems so I don't think that word
>> press itself is the issue.
>>
>> Any ideas would be VERY much appreciated.
>>
>> Stephen Sell
>>
>> On Fri, Mar 16, 2012 at 8:54 AM, Kevin Bruce <[address removed]> wrote:
>>> What's the issue Stephen? I may be able to help.
>>> On Mar 16, 2012, at 8:53 AM, Stephen wrote:
>>>
>>>> Hey everyone
>>>>
>>>> I have a minor CSS positioning situation that is driving me insane. If
>>>> anyone thinks they can help with a positioning issue across browsers -
>>>> shoot me an email. Thanks!
>>>>
>>>> --
>>>> Stephen
>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> Please Note: If you hit "REPLY", your message will be sent to everyone on this mailing list ([address removed])
>>>> http://www.meetup.com/FredWebTech/
>>>> This message was sent by Stephen  ([address removed]) from Frederick Web Technology Group.
>>>> To learn more about Stephen , visit his/her member profile: http://www.meetup.com/FredWebTech/members/5827599/
>>>> Set my mailing list to email me
>>>>
>>>> As they are sent
>>>> http://www.meetup.com/FredWebTech/list_prefs/?pref=1
>>>>
>>>> In one daily email
>>>> http://www.meetup.com/FredWebTech/list_prefs/?pref=2
>>>>
>>>> Don't send me mailing list messages
>>>> http://www.meetup.com/FredWebTech/list_prefs/?pref=0
>>>> Meetup, PO Box 4668 #37895 New York, New York[masked] | [address removed]
>>>>
>>>
>>
>>
>>
>> --
>> Stephen
>> <HappyLiesTemplate.jpg>
>
>
>
>
> --
> Please Note: If you hit "REPLY", your message will be sent to everyone on this mailing list ([address removed])
> http://www.meetup.com/FredWebTech/
> This message was sent by Kevin Bruce ([address removed]) from Frederick Web Technology Group.
> To learn more about Kevin Bruce, visit his/her member profile: http://www.meetup.com/FredWebTech/members/7751742/
> Set my mailing list to email me
>
> As they are sent
> http://www.meetup.com/FredWebTech/list_prefs/?pref=1
>
> In one daily email
> http://www.meetup.com/FredWebTech/list_prefs/?pref=2
>
> Don't send me mailing list messages
> http://www.meetup.com/FredWebTech/list_prefs/?pref=0
> Meetup, PO Box 4668 #37895 New York, New York[masked] | [address removed]
>



--
Stephen



--
Please Note: If you hit "REPLY", your message will be sent to everyone on this mailing list ([address removed])
http://www.meetup.com/FredWebTech/
This message was sent by Stephen  ([address removed]) from Frederick Web Technology Group.
To learn more about Stephen , visit his/her member profile: http://www.meetup.com/FredWebTech/members/5827599/
Set my mailing list to email me

As they are sent
http://www.meetup.com/FredWebTech/list_prefs/?pref=1

In one daily email
http://www.meetup.com/FredWebTech/list_prefs/?pref=2

Don't send me mailing list messages
http://www.meetup.com/FredWebTech/list_prefs/?pref=0
Meetup, PO Box 4668 #37895 New York, New York[masked] | [address removed]


Our Sponsors

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy