home.social

#footer — Public Fediverse posts

Live and recent posts from across the Fediverse tagged #footer, aggregated by home.social.

fetched live
  1. Ha. Well done to the World Cup winners. The other team showed themselves up. #footer

  2. Ha. Well done to the World Cup winners. The other team showed themselves up. #footer

  3. Roach Minor found on the interweb a suggestion that Mr Kane and M. Mbappé should connive to score 15 goals each to deny Old Rat Face the Boot of Gold in the men's footer world cup, and then just let the match be decided by extra time and penalties. #ENGFRA #FRAENG #footer #MrMessy

  4. Roach Minor found on the interweb a suggestion that Mr Kane and M. Mbappé should connive to score 15 goals each to deny Old Rat Face the Boot of Gold in the men's footer world cup, and then just let the match be decided by extra time and penalties. #ENGFRA #FRAENG #footer #MrMessy

  5. @ppk

    .entry + #footer {
    margin-top: 0;

    .entry:has(+ &) {
    padding-bottom: 0;
    }
    }

  6. @ppk

    .entry + #footer {
    margin-top: 0;

    .entry:has(+ &) {
    padding-bottom: 0;
    }
    }

  7. Weird CSS is weird.

    .entry:has(+ #footer) {
    padding-bottom: 0;

    & + #footer {
    margin-top: 0;
    }
    }

    Works, though.

  8. Weird CSS is weird.

    .entry:has(+ #footer) {
    padding-bottom: 0;

    & + #footer {
    margin-top: 0;
    }
    }

    Works, though.

  9. #winter{
    background-color:#ffffff;
    color:#ffffff;
    }
    #snow{
    height:30cm;
    z-index:999;
    }
    #footer{
    visibility:hidden;
    }
    <script
    var snowcolor=new Array(„#FFFFFF“) var snowmaxsize=22 var sinkspeed=0.6
    </script>

  10. Ower mony fittert aboot, luikin fer somethin, tae haud ontae. Anely, thay coudnae find onythin while reakin oot.

    ---
    (Ah'm nae native spikker.)

    #Scotstober 2025-02nt #footer
    #WriteInScots #Scots #Doric
    #WritingCommunity

    @DrMDempster
    @writingcommunity

  11. Ower mony fittert aboot, luikin fer somethin, tae haud ontae. Anely, thay coudnae find onythin while reakin oot.

    ---
    (Ah'm nae native spikker.)

    #Scotstober 2025-02nt #footer
    #WriteInScots #Scots #Doric
    #WritingCommunity

    @DrMDempster
    @writingcommunity

  12. Die Neugestaltung des Blogs war gestern bis auf ein Bereich fertig. Den wollte ich nun vervollständigen und hielt es für einen Klacks. Was habe ich mich doch getäuscht. Ist der Code bisher sauber wie aus dem Lehrbuch, verlangt die Navigation im #footer Klimmzüge und (erste) Brücken. Zudem macht die #flexbox nicht das, was sie ihrem Namen nach tun sollte.

    Ich bin ja bereit zu akzeptieren, dass das Unvermögen vorm Monitor sitzt. Aber wenn ich bei Null anfange, mich nach den Angaben aus dem Buch – immerhin aus der "für Dummies"-Reihe – richte und nicht das passiert, was passieren sollte – und ich wirklich nicht derart unterbelichtet bin, um Vorgaben nicht fehlerfrei abschreiben zu können –, dann kennt auch meine Geduld Grenzen. Unbefriedigend.

    #html #css #development

  13. @Elsental one ‘calls’ the function with something like this:

    let parent = document.querySelector('#footer > span');
    changeText(parent, 'Powered by', 'New text ');

    The first line is effectively “Find me the first child span element of an element with an id of 'footer'”.

    The second line is calling the changeText function and passing to it as variables:

    The selected parent
    The before text: 'Powered by'
    The after text: 'New text '

  14. @Elsental one ‘calls’ the function with something like this:

    let parent = document.querySelector('#footer > span');
    changeText(parent, 'Powered by', 'New text ');

    The first line is effectively “Find me the first child span element of an element with an id of 'footer'”.

    The second line is calling the changeText function and passing to it as variables:

    The selected parent
    The before text: 'Powered by'
    The after text: 'New text '

  15. HOW TO MAKE A HEADER / FOOTER ON EVERY PAGE WITHOUT STEPPING ON PAGE CONTENT

    #CSS #header #footer

    We've all wrestled with it, you want to print an HTML page that displays a header/footer right at the top/bottom of every page. But then that goal quickly gives way to a second goal: how do you make the content of your page NOT occupy the same space as your header/footer?

    After a lot of rasslin' with this, I noticed something about one of the tables in my content: its "thead" and "tfoot" section appeared on each page. That's when inspiration struck: suppose I contain my entire document inside one massive table in a single cell, and this table has "empty" thead and tfoot sections big enough to accommodate my header and footer?

    And it worked. Here is the page I came up with; download and enjoy.

    paprikash.com/headerfooter.htm

    Things to take note of:

    - I have this set up such that the header and footer display only when you print. So don't expect to see them on the screen. More on that later.

    - The body of this thing is composed of a "header" section, then a "div" that contains a table (which has a "thead" and a "tfoot"), and finally a "footer" section.

    - The header and footer are both "position:fixed" to the top and bottom respectively, and they each have a fixed height. They also contain a little bit of text.

    - The thead and tfoot in the table also have fixed heights, that match the heights of the header and footer. They're also empty other than a non-breaking space. This is so, technically, the thead and the tfoot will print on the same spot as the header and footer, but since they have no visible characters, all that gets printed is the header and the footer.

    - I'm making use of the "@media print" and "@media screen" to create classes called "screenonly" and "printonly". Any element with a class of "screenonly" will not be printed, and any element with a class of "printonly" will not be visible on the screen. My header, footer, thead, and tfoot are all "printonly", while the print button is "screenonly". This is a really great and simple trick.

    - I'm also making the text size bigger on the printed document. It looks better.

    - I am doing something that a lot of people don't like: I'm putting most of my CSS inline, rather than in the "style" section of the document or a separate stylesheet. For me anyway, it's clearer to see the style info right in the one element that it applies to, and I'm focused on clarity. You have my blessing to move the inline CSS to the "style" section.

  16. HOW TO MAKE A HEADER / FOOTER ON EVERY PAGE WITHOUT STEPPING ON PAGE CONTENT

    #CSS #header #footer

    We've all wrestled with it, you want to print an HTML page that displays a header/footer right at the top/bottom of every page. But then that goal quickly gives way to a second goal: how do you make the content of your page NOT occupy the same space as your header/footer?

    After a lot of rasslin' with this, I noticed something about one of the tables in my content: its "thead" and "tfoot" section appeared on each page. That's when inspiration struck: suppose I contain my entire document inside one massive table in a single cell, and this table has "empty" thead and tfoot sections big enough to accommodate my header and footer?

    And it worked. Here is the page I came up with; download and enjoy.

    paprikash.com/headerfooter.htm

    Things to take note of:

    - I have this set up such that the header and footer display only when you print. So don't expect to see them on the screen. More on that later.

    - The body of this thing is composed of a "header" section, then a "div" that contains a table (which has a "thead" and a "tfoot"), and finally a "footer" section.

    - The header and footer are both "position:fixed" to the top and bottom respectively, and they each have a fixed height. They also contain a little bit of text.

    - The thead and tfoot in the table also have fixed heights, that match the heights of the header and footer. They're also empty other than a non-breaking space. This is so, technically, the thead and the tfoot will print on the same spot as the header and footer, but since they have no visible characters, all that gets printed is the header and the footer.

    - I'm making use of the "@media print" and "@media screen" to create classes called "screenonly" and "printonly". Any element with a class of "screenonly" will not be printed, and any element with a class of "printonly" will not be visible on the screen. My header, footer, thead, and tfoot are all "printonly", while the print button is "screenonly". This is a really great and simple trick.

    - I'm also making the text size bigger on the printed document. It looks better.

    - I am doing something that a lot of people don't like: I'm putting most of my CSS inline, rather than in the "style" section of the document or a separate stylesheet. For me anyway, it's clearer to see the style info right in the one element that it applies to, and I'm focused on clarity. You have my blessing to move the inline CSS to the "style" section.

  17. @qaqelol Nice! I just added the following CSS rules to my Stylus extension for all URLs starting with stackoverflow.com/questions/:

    ```css
    header.s-topbar,
    #left-sidebar,
    #sidebar,
    #top-hero-div,
    #question-header .aside-cta,
    #post-form,
    #footer {
    display: none;
    }

    #content {
    border-left-width: 0;
    }
    ```

  18. @qaqelol Nice! I just added the following CSS rules to my Stylus extension for all URLs starting with stackoverflow.com/questions/:

    ```css
    header.s-topbar,
    #left-sidebar,
    #sidebar,
    #top-hero-div,
    #question-header .aside-cta,
    #post-form,
    #footer {
    display: none;
    }

    #content {
    border-left-width: 0;
    }
    ```

  19. #qotd, Joe Weisenthal: “If it’s true that they torched an $80 billion company cause they thought they were too close to building God, then that’s orders of magnitude the most punk rock thing I’ve ever heard of.”

    bloomberg.com/opinion/articles

  20. #qotd, Joe Weisenthal: “If it’s true that they torched an $80 billion company cause they thought they were too close to building God, then that’s orders of magnitude the most punk rock thing I’ve ever heard of.”

    bloomberg.com/opinion/articles

  21. @OBSProject i fixed your website for > 1080p monitors:

    ```css
    #footer, #wrapper {
    max-width: unset !important;
    }
    #header {
    max-width: 2200px;
    margin: 0 auto -60px;
    position: relative;
    }
    body {
    background: #0c1633 !important
    }
    ```

    #webdev

  22. @OBSProject i fixed your website for > 1080p monitors:

    ```css
    #footer, #wrapper {
    max-width: unset !important;
    }
    #header {
    max-width: 2200px;
    margin: 0 auto -60px;
    position: relative;
    }
    body {
    background: #0c1633 !important
    }
    ```

    #webdev

  23. #Design #Guidelines
    Best practices for website footer UX · More user engagement with a well-crafted website footer ilo.im/12ku8p

    “A website’s footer is often overlooked, but it can actually make a big difference in how easy it is for users to find what they need on your website.” — Eric Chung

    _____
    #ProductDesign #UxDesign #UiDesign #WebDesign #Website #Footer #Engagement #Testing

  24. #Design #Guidelines
    Best practices for website footer UX · More user engagement with a well-crafted website footer ilo.im/12ku8p

    “A website’s footer is often overlooked, but it can actually make a big difference in how easy it is for users to find what they need on your website.” — Eric Chung

    _____
    #ProductDesign #UxDesign #UiDesign #WebDesign #Website #Footer #Engagement #Testing

  25. Um zu zeigen, dass wir das Fediverse klar favorisieren, haben wir mal die Reihenfolge im #Footer unserer Webseite angepasst.

    #CiaoTwitter
    #HelloMastodon

  26. Um zu zeigen, dass wir das Fediverse klar favorisieren, haben wir mal die Reihenfolge im #Footer unserer Webseite angepasst.

    #CiaoTwitter
    #HelloMastodon

  27. For those about to dig into HTML or invent some javascript: You shouldn't necessarily be updating the #footer #copyright year annually. You don't need a footer date at all - if you do it should show when the content was first published.
    Articles can show their publication dates individually.
    If you're keen to have one, you can show original date through last-update date. Only showing the most recent year, you're implicitly releasing your prior work, which might be hard to defend later.

  28. One thing that annoys me the most are web apps/pages were you cannot access their imprint/privacy policy etc. without being logged out.

    Figma is such a service.

    #figma #ux #footer #imprint #privacy #policy

  29. @root
    $(document).ready(function(){
    var iframe = $("iframe")
    var contents = iframe.contents()
    var footer = contents.find("#footer")
    footer.hide();
    });

  30. anyone know anything about javascript and why it isn't giving me errors but does nothing?

    using html script tags with

    $(document).ready(function(){
    $("iframe").contents().find("#footer").hide();
    });

    names are correct but did i miss identifying something? does contents or function need to be defined?

  31. Skulls…

    So, in the last few weeks, I have been doing a lot of WordPress theme development. When I see something cool on the web, I want to implement it a new a cool way. Skulls is basically the end result of some tinkering on the web. Here are some of the methods that I used in this theme.

    1. Font Replacement

    I read a great article on CameronMoll.com called Exploring Cufón, a sIFR alternative for font embedding. Cufón is this rad javascript library that will exchange text with a font resides on your server. A friend of mine, Tyrel Kelsey showed me an example on a site that he designed using the script, and from there, I was set. Immediately, I  knew that I wanted to create a grungy WordPress theme that I could use this on.

    2. Fixed Footer

    Nothing terribly revolutionary, but after staring at Facebook everyday, I wanted to put a persistent footer, that would have a couple of quick links in it. To create a fixed footer, simple add the following code to your div.

    Make sure to add some bottom-margin to whatever div is going to be above it. You want to make sure you do that, so when you scroll to the bottom, you can see all of your content.

    [css]
    #footer {
    margin:auto;
    position:fixed;
    margin:auto;
    left:0;
    bottom:0;
    height:40px;
    width:100%;
    background:#242424;
    z-index:1999;
    }
    [/css]
    There are a couple of issues that in IE6 (Go figure…) But they can be resolved by adding this:
    [css]* html #footer {
    top:expression(eval(document.compatMode &amp;&amp; document.compatMode==’CSS1Compat’) ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
    position:absolute;
    }
    [/css]

    3. SUPER-ULTRA-RAD GRAPHICS

    I mentioned already the font replacement. I found some cool vector packs that had some skull designs in them. The post headers have a banner that overlays the other divs due to some negative margins. One thing to be aware of, if you follow a similar design, is to make sure that links have the coverage that they might need. I had them squeezed a lot tighter, but it was hard to click on the post links.

    So, all in all, I think that it turned out to be a pretty cool theme. Not for everyone, but I think that someone will get a kick out of it.

    Demo

    Download

    #cufon #development #fixedFooter #footer #theme #WordPress