Off-center representative line



  • One of our sites has a few divisional 'links' pages that:

    • Are static HTML
    • Began their life over a decade ago in FrontPage
    • Have suffered too much sloppy cut'n'paste & search'n'replace maintenance over the years
    • Are being re-written/replaced soon... but not soon enough.

    There is plenty of bad in there, but every once in a while a bit of code jumps out, opens its raincoat and shows just how ugly this site can be...

    </center></div><div align="center"><center>



  • <center align="center" style="text-align:center; vertical-align: middle; margin:auto">

    ...just to be sure



  • @Xyro said:

    <center align="center" style="text-align:center; vertical-align: middle; margin:auto">

    I'm pretty sure that's the W3C recommended way to do it.



  • Also get Javascript to invoke some COM application to check the screen resolution so you can pad that element on both sides, to make it even more sure.



  • @Xyro said:

    <center align="center" style="text-align:center; vertical-align: middle; display:table-cell;margin:auto">

    ...just to be sure

     

    vertical-align only works on cells. DUHHHHH You didn't KNOW that???!?!1

     



  • [quote user="Renan "C#" Sousa"]Also get Javascript to invoke some COM application to check the screen resolution so you can pad that element on both sides, to make it even more sure.[/quote]I'm pretty sure the "proper" method these days is to use JQuery to dynamically create the element at the appropriate position.


  • Garbage Person

    [quote user="Renan "C#" Sousa"]Also get Javascript to invoke some COM application to check the screen resolution so you can pad that element on both sides, to make it even more sure.[/quote] Why does that sound like something you've actually seen?

     

    .... Can you invoke COM from Javascript? It sounds so stupid it's almost CERTAINLY a Javascript feature.



  • @dhromed said:

    vertical-align only works on cells. DUHHHHH You didn't KNOW that???!?!1

    But with cells, margin:auto won't work unless they're in a table. I think. Once, I made this atrocity:

    @dhromed said:

    html { display:table; height:100%; margin:auto; }
    body { display:table-cell; vertical-align: middle; }

    Disgustingly, it worked. WUT, 2297 installs, 1 question and 4 thumbs ups??? WHY?



  • @dhromed said:

    vertical-align only works on cells. DUHHHHH You didn't KNOW that???!?!1

    Also something about inline thingies (not sure if it's just inline blocks or not); vertical-align'ing a paragraph does things to embedded images. ... Or is it the other way around, and you need to vertical-align the image? Ah whatever, CSS sucks.



  • Pfft, good FP code centers stuff the real way:

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>Weee</span>


  • @superjer said:

    [quote user="Xyro"]
    <center align="center" style="text-align:center; vertical-align: middle; margin:auto">

    I'm pretty sure that's the W3C recommended way to do it.[/quote]

    Yeah, but if you want cross-browser support, the CSS is going to have to be

    -webkit-text-align: center; -moz-text-align: center; -o-text-align: center; text-align: center; -webkit-vertical-align: middle; -moz-vertical-align: middle; -o-vertical-align: middle; vertical-align: middle; -webkit-margin: auto; -moz-margin: auto; -o-margin: auto; margin: auto;


  • But you never know - there are different degrees of center: dead center, slightly left(right) of center, slightly more L(R) of center, ... It's important to be precise!



  • And since this is CSS, there remains the open question: center [i]of what?[/i] The page? The element? The parent? Are we centering the element, or the element's children? Does that include margin? Padding? Children's margin and padding? Parent's margin and padding? Are the margins getting centered, too, if they are not of equal sizes? How would overflow be effected? Would overflowing text offset the centering?

    Ah screw it, just use tables.


  • 🚽 Regular

     @snoofle said:

    But you never know - there are different degrees of center: dead center, slightly left(right) of center, slightly more L(R) of center, ... It's important to be precise!

    You should use political analogies, then.

    <MichaelMoore>I am the ever-important left-aligned navigation bar</MichaelMoore>

    <JohnKerry>If you mouse over me, I'll reposition myself randomly! Give it a try!</JohnKerry>

    <Moderates>This is the content. This is the content. This is the content.</Moderates>

    <TimPawlenty>Usually they put tag clouds in me, to the right.</TimPawlenty>

    <GlennBeck>Hey, where am I? Oh, whoops, adding me automatically and irrevocably adds a horizontal scrollbar to your page.</GlennBeck>



  • <marquee direction="right"><JoeLieberman>Marquee!</JoeLieberman></marquee>


  • ♿ (Parody)

    @Xyro said:

    <JoeLieberman ArlenSpecter>Marquee!</JoeLieberman ArlenSpecter>

    FTFY


  • 🚽 Regular

    <Blago>Blink, marquee, and glow with background midi</Blago>



  • @boomzilla said:

    @Xyro said:
    <JoeLieberman ArlenSpecter>Marquee!</JoeLieberman ArlenSpecter>

    FTFY

    Pff, he was always a Democrat, even when he was a Republican.


  • ♿ (Parody)

    @Xyro said:

    @boomzilla said:
    @Xyro said:
    <JoeLieberman ArlenSpecter>Marquee!</JoeLieberman ArlenSpecter>

    FTFY

    Pff, he was always a Democrat, even when he was a Republican.

    Alternatively: <CharlieChrist>Marquee!</CharlieChrist>

    <MarionBarry>iframe<MarionBarry>


Log in to reply