marahmarie: (M In M Forever) (Default)
MM Writes ([personal profile] marahmarie) wrote in [community profile] style_system2011-01-30 03:16 pm
  • Add Memory
  • Share This Entry
Entry tags:

Hi, [community profile] style_systemers, a question about link positioning...

A few weeks ago [personal profile] foxfirefey gave me wonderful code that produces a link back to the top of the page (Transmogrified normally lacks this link). I love it and have gently coaxed it to do everything I want except stop moving around. It has a mind of its own so depending on what resolution you use, it will hop, skip and jump all over the place.

I've been unable to conjure any CSS and/or HTML that will keep it in place.

The only resolution it currently behaves at is 1440 x 900 - my native res - because I beat it down hard until it did. But when you change screen res, it waltzes off wherever the heck it feels like it.

Examples at three resolutions:



at 1440 x 900


at 1280 x 768


at 800 x 600


Can anyone tell me how to make it behave? I've tried floats, absolute positioning, margins, padding, text-align:center - it's all failed to tame it.

Threaded | Top-Level Comments Only
foxfirefey: A fox colored like flame over an ornately framed globe (Default)

[personal profile] foxfirefey 2011-01-30 08:41 pm (UTC)(link)
How would you feel about us tweaking the code I gave you instead of doing it exclusively with CSS, to make it easier?
Edited 2011-01-30 20:41 (UTC)
marahmarie: (M In M Forever) (Default)

[personal profile] marahmarie 2011-01-30 08:48 pm (UTC)(link)
I'd be fine with that. It's my day off so I have all the time in the world to mess with the s2. Thanks! :)
foxfirefey: A guy looking ridiculous by doing a fashionable posing with a mouse, slinging the cord over his shoulders. (geek)

[personal profile] foxfirefey 2011-01-30 11:18 pm (UTC)(link)
Alright, see if this makes it easier:

function Page::print()
{
    """
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>""";
        $this->print_head();
        $this->print_stylesheets();
        $this->print_head_title();    
    println "</head>";
    $this->print_wrapper_start();
    $this->print_control_strip();
    """
            <div id="container">
            <div id="top"></div>
            <div id="header">
    """;
    """
                <a name="top">
    """;
    $this->print_global_title();
    """
                </a>
            </div>
    """;
    $this->print_module_section("one");
    """
            <div id="wrap">
            <div id="content">
    """;
    $this->print_body();

    """ <div class="top"><a href="#top">Top of Page</a></div>
        </div>
    """;
    """
            </div>
    """;
    $this->print_module_section("two");
    """
            </div><div style="clear:both;"></div>
        </div>
        <div id="footer">
    """;
    $this->print_module_section("three");
    $this->print_wrapper_end();
    """
    </html>
    """;
}
marahmarie: (M In M Forever) (Default)

[personal profile] marahmarie 2011-01-31 01:09 am (UTC)(link)
Um, it broke my sidebar (shoved it about half a foot to the right and stuck an extra page background in between drastically widened the sidebar background - sorry) and there's no back-to-top link anymore. I have my original s2 code backed up at Bravenet so no worries if this is not fixable- I'm asking you for code I don't even know the first thing about, so I thank you very much for your efforts. :)
Edited 2011-01-31 01:10 (UTC)
foxfirefey: A guy looking ridiculous by doing a fashionable posing with a mouse, slinging the cord over his shoulders. (geek)

[personal profile] foxfirefey 2011-01-31 01:12 am (UTC)(link)
Hmmm, it's there, but I bet your current CSS styling of it is the thing hiding it. It's right under the #entries div. Try taking out the current CSS styling for div.top and see what happens.

Not sure about what it's done to the sidebar, though! I'm hoping it's related to the CSS applied on the div.top, though, and that taking it away will fix it.
Edited 2011-01-31 01:12 (UTC)
marahmarie: (M In M Forever) (Default)

[personal profile] marahmarie 2011-01-31 01:18 am (UTC)(link)
It's under .top, and it's not affecting anything. I'm leaving the page broken so you can see what I mean when you view it in my style, and I can update the CSS to remove the code completely if you want, but it makes no difference. I already deleted it using web dev and...same problem.

This is the current (probably no-longer-applicable but also not-breaking-anything code):

.top /* thanks to foxfirefey for the s2 this CSS hooks to */
{background: url("http://intoolate.files.wordpress.com/2011/01/return-to-top1.png");
background-repeat: no-repeat; padding-left:1.6em; position:absolute!important;left: 21.8em; right: 0em;
margin-top: -18em; font-family: corbel, "trebuchet ms", sans-serif;letter-spacing: 1px;}
.top a {color: #8d8d8d!important;font-size: 1em;font-variant: small-caps; font-style: oblique;font-weight:bold;}
.top a:hover {color: #af230c!important;}
.page-entry .top, .page-reply .top,.page-archive .top, .page-month .top, .page-day .top, .page-tags .top, .page-read .top, .page-network .top {margin-top: -12em;}

ETA: Just to be clear, I found the back-to-top link on the entry view (still don't see it on recent) (finally found it buried in the last paragraph of the last entry on the page - whew) but the page is broken from the new s2 whether I leave in the current .top CSS or take it out.

ETA 2: I'll take out my .top CSS now just to make sure it's not something on my end.

ETA 3: Took it out - same deal - except now the back-to-top link is more viewable, instead of floating around in entry text and comment boxes, but the sidebar is still broken.
Edited (more info) 2011-01-31 01:32 (UTC)
foxfirefey: A picture of GIR. (gir)

[personal profile] foxfirefey 2011-01-31 02:37 am (UTC)(link)
I think I found my silly mistake, try this:

function Page::print()
{
    """
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>""";
        $this->print_head();
        $this->print_stylesheets();
        $this->print_head_title();    
    println "</head>";
    $this->print_wrapper_start();
    $this->print_control_strip();
    """
            <div id="container">
            <div id="top"></div>
            <div id="header">
    """;
    """
                <a name="top">
    """;
    $this->print_global_title();
    """
                </a>
            </div>
    """;
    $this->print_module_section("one");
    """
            <div id="wrap">
            <div id="content">
    """;
    $this->print_body();
    """
            <div class="top"><a href="#top">Top of Page</a></div>
            </div>
    """;
    $this->print_module_section("two");
    """
            </div><div style="clear:both;"></div>
        </div>
        <div id="footer">
    """;
    $this->print_module_section("three");
    """
        </div>
    """;
    $this->print_wrapper_end();
    """
    </html>
    """;
}
marahmarie: (M In M Forever) (Default)

[personal profile] marahmarie 2011-01-31 03:00 am (UTC)(link)
Yes, that completely fixes the problem, and I see you did a lovely thing: that link stays in place now, at any resolution. Thank you so much!

BTW, I'm thinking all the new s2 code you've given me needs to be archived somewhere besides my journal and Bravenet. Are most of the codes you've given me over time on DW for Transmogrified only? Because I'm thinking of starting another journal or a comm solely for archiving these codes so others can use them, so it would help to know if they automatically work on all styles or just mine.
foxfirefey: A fox colored like flame over an ornately framed globe (Default)

[personal profile] foxfirefey 2011-01-31 04:23 am (UTC)(link)
Depends on the code--this one is pretty much only for Transmo or another Transmo based style (see the style structure overview).

Custom links one should work on most any style, though.
marahmarie: (M In M Forever) (Default)

[personal profile] marahmarie 2011-02-01 12:23 am (UTC)(link)
That page looks really useful - thanks. :)
Threaded | Top-Level Comments Only