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

Jan. 30th, 2011 03:16 pm
marahmarie: my initials (MM) (Default)
[personal profile] marahmarie posting in [community profile] style_system

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.

Date: 2011-01-30 08:41 pm (UTC)
foxfirefey: Fox stealing an egg. (Default)
From: [personal profile] foxfirefey
How would you feel about us tweaking the code I gave you instead of doing it exclusively with CSS, to make it easier?
Edited Date: 2011-01-30 08:41 pm (UTC)

Date: 2011-01-30 11:18 pm (UTC)
foxfirefey: A guy looking ridiculous by doing a fashionable posing with a mouse, slinging the cord over his shoulders. (geek)
From: [personal profile] foxfirefey
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>
    """;
}

Date: 2011-01-31 01:12 am (UTC)
foxfirefey: A guy looking ridiculous by doing a fashionable posing with a mouse, slinging the cord over his shoulders. (geek)
From: [personal profile] foxfirefey
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 Date: 2011-01-31 01:12 am (UTC)

Date: 2011-01-31 02:37 am (UTC)
foxfirefey: A picture of GIR. (gir)
From: [personal profile] foxfirefey
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>
    """;
}

Date: 2011-01-31 04:23 am (UTC)
foxfirefey: Fox stealing an egg. (Default)
From: [personal profile] foxfirefey
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.

Profile

Dreamwidth style system discussion

August 2017

S M T W T F S
   12345
6789101112
13141516171819
20212223242526
2728293031  

Page Summary

Style Credit

Expand Cut Tags

No cut tags
Page generated Aug. 22nd, 2017 02:52 pm
Powered by Dreamwidth Studios