The 'How did they do that?' Section.

Discussion in 'HTML & Website Design' started by detz, Aug 22, 2007.

  1. #1
    I'm writing up a series of articles oh 'How did they do that..." and I need some more ideas. There are some posts that I see over and over on forums of people wondering how a certain effect or design is done so I thought I would do some write ups on some. Is there anything related to html/css/javascript that you are wondering about or have noticed a lot of people asking?
     
    detz, Aug 22, 2007 IP
  2. wyrd33

    wyrd33 Peon

    Messages:
    45
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I can toss a few ideas at you:

    - Horizontal centering with CSS
    - CSS rollovers that don't flicker
    - Drop down menus without using JavaScript (pure CSS drop downs)
     
    wyrd33, Aug 22, 2007 IP
  3. PHPGator

    PHPGator Banned

    Messages:
    4,437
    Likes Received:
    133
    Best Answers:
    0
    Trophy Points:
    260
    #3
    This one isn't really one that I don't know, but I know there is a demand for it. Rollovers so that when you put your mouse over an image it makes another image on the page change.
     
    PHPGator, Aug 22, 2007 IP
  4. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #4
    Those that you mentioned have been done to DEATH, you just need to look around.

    Faux columns have been done.
    Simple 2-3 Floated layouts have been done ( to death).
    Negative margin layouts with floats to get content first have been done.
    Absolute positioning with relative parent element have been done.
    Rollover techniques have been done.
    PNGs with HTC or filter property have been done..
    Star ratings have been done...
    Universal reset check..
    Clearing floats using invisible period or overflow property and haslayout trigger have been done...
    CSS Frameworks haven't been done that much (I can only think of Blueleaf and Jeff Croft's other than the one we use at work)...
    Holy grail layouts have been done... although I don't think there will ever be a "holy grail"
    shorthands have been done...
    rounded borders have been done...

    I don't think I've seen a tutorial yet that has a good fix for 1px dotted borders which would be to just use a parent element and background image and fill in the child element..

    Various form articles have been done but you can always do that.. I would like to see more complex form layouts.

    Maybe an article on very complex graphics like diagonal lines and the wrapper having dropshadows, possibly without having to resort to PNGs (doubt its possible though)

    A sIFR alternative that's easy to use would also be cool.

    Horizonal centering has been done to death and there are a few vertical centering articles but if you could make one that has a fix for vertically centering with an unknown height on the parent element without using display:table-cell and possibly in IE, that'd be great.

    I can't think of something that hasn't.. hmm
     
    soulscratch, Aug 22, 2007 IP
  5. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #5
    That would probably be javascript, unless the element is like absolutely positioned layered on top (bad idea) and large and the background switches from top left to bottom right and say the dimensions are 800 x 500.. with js it's just onmouseover or onclick and then get another element's display property set to a value other than none.
     
    soulscratch, Aug 22, 2007 IP
  6. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #6
    float list menu - I get loads of questions how to do that, should really write a tut myself.
    rollover images - when rollover an image it changes to something else

    Just putting some simple ideas out there.
     
    twistedspikes, Aug 22, 2007 IP
  7. detz

    detz Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    True, those have been beaten to death but people still ask. :p
     
    detz, Aug 22, 2007 IP
  8. detz

    detz Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Like this?
    http://www.detz.net/monkey.htm
     
    detz, Aug 22, 2007 IP
  9. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #9
    Aye, that kind of thing.

    I use them all the time for menus.
     
    twistedspikes, Aug 22, 2007 IP
  10. wyrd33

    wyrd33 Peon

    Messages:
    45
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    It's the internet, everythings been done to death. What I gave were suggestions, no one said he had to follow them.
     
    wyrd33, Aug 23, 2007 IP
  11. AfterHim.com

    AfterHim.com Peon

    Messages:
    1,923
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I'd like to see a menu that opens upwards instead of down. Don't know if it's even possible...
     
    AfterHim.com, Aug 24, 2007 IP
  12. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Well of course it can... if it can be opened downwards then it can be done upwards. The only problem and reason it's not done this way is that there is only so much space upwards, so you have to make sure there's enough room vertically for your menu. Other than that, it's really just a design choice, there are no actual limits in the code preventing you from moving the menu up above the button... lol.
     
    GWiz, Aug 24, 2007 IP
  13. live-cms_com

    live-cms_com Notable Member

    Messages:
    3,128
    Likes Received:
    112
    Best Answers:
    0
    Trophy Points:
    205
    Digital Goods:
    1
    #13
    Bottom aligning a div with CSS. margin-top: auto;? vertical-align: bottom; ? Nope. I can't work it out.
     
    live-cms_com, Aug 24, 2007 IP