Coffeehouse Thread

18 posts

Help needed from HTML experts

Back to Forum: Coffeehouse
  • User profile image
    Minh

    I want to make a site that looks like this:

    http://rockandrollgeek.podshow.com/

    I'm going for the "page within the browser" look. But I don't even know what this technique is called. If you could throw out a few terms so I could Google them, it'd be much appreciated.

  • User profile image
    Rossj

    I think that might be one of the default templates in WordPress (blogging software) with a few tweaks.

  • User profile image
    Minh

    It's impressive. There's a CSS link element in there that when I omit, renders the page as formatless as 1990. I guess it's time I bit the bullet & try to get into CSS.

  • User profile image
    PDearmore

    Certainly you do need to get into CSS, but not necessarily to mock that page... The same page effect could be done with tables or CSS+tables.  You might want to check out the CSS Zen garden if you go the all-CSS route.  The page effect is simply done in photshop with styles (looks like a 2px border and a drop shadow).  There's also some "retro" or "wicked worn" (google those) design influences.

  • User profile image
    Cybermagell​an

    Minh wrote:
    I guess it's time I bit the bullet & try to get into CSS.


    Yeah you don't know what you've been missing without CSS. As for me...I'm just now jumping into manipulating XML with Javascript.

  • User profile image
    jamie

    i see a centered table - with shadows on each side
    (no matter what it actually is)


    if they were transparent GIFS (shadows) they would fade out over any background - albeit bitty - ly so.


    this is hopefully why png support is so important to ie

    (from what ive heard - we could have a normal table - with two inversed fades (png) - so even if they were on top of a photo background they wouldnt lose their photoshop/corel transparencies on shadows

    if this is what png can do for us designers i cant wait (psd layer for web pages)

    (im also hoping making your own window - any shape you like with shadows is made alot easier in Vista ..

    oh ya ..and fullscreen is fixed Tongue Out)

    PS - Q: What was the code for the last issue of Time Magazine?  True it was Quark Xpress - but what code did it generate?  What would it matter?  WYSIWYG rules [y]


  • User profile image
    jamie

    btw - why cant IE support psd layers? CDR files?

    whats with all this png stuff anyway?

    i vote psd! cdr!

    windows displays it - why not ie?

    one explorer i tell ya  phffft!  Smiley

    edit - adobe viewer for IE - Corel Viewer for IE

    you know this is just so obvious - please make it happen  (you already display all this in windows - why not the web? - make it mandatory in new win app certification that an ie UI viewer module is in place = the vendors would imediately have to offer the viewers of their files on the web ( not the creation tools - but the viewers)

    ?

  • User profile image
    Sven Groot

    Because the web != IE, so even if IE could show these proprietary, non-standardised image formats, none of the other browsers/platform could, you'd be locking out a significant part of the Internet's users from your page.

    PNG is necessary because GIF is tied up in patents. And PNG is better anyway.

  • User profile image
    Pimp Daddy

    PDearmore wrote:
    Certainly you do need to get into CSS, but not necessarily to mock that page... The same page effect could be done with tables or CSS+tables.


    Gah - tables? They should only be used for data and never for layout. If you want stuff for layout then use divs and spans.

  • User profile image
    jamie

    Pimp Daddy wrote:
    PDearmore wrote: Certainly you do need to get into CSS, but not necessarily to mock that page... The same page effect could be done with tables or CSS+tables.


    Gah - tables? They should only be used for data and never for layout. If you want stuff for layout then use divs and spans.


    unless you intend to fill them with many pieces of graphics....

  • User profile image
    W3bbo

    jamie wrote:
    unless you intend to fill them with many pieces of graphics....


    That's why CSS3 supports multiple backgrounds per box, image-based borders and corners (with multiple display options), flowing text-columns, and shaped text.

    ...what a shame you can't do those things in tables Wink

  • User profile image
    blowdart

    W3bbo wrote:
    jamie wrote:unless you intend to fill them with many pieces of graphics....


    That's why CSS3 supports multiple backgrounds per box, image-based borders and corners (with multiple display options), flowing text-columns, and shaped text.

    ...what a shame you can't do those things in tables


    Oh great, even more technology that will be broken the first time it appears and no-one will be able to use for years.

  • User profile image
    W3bbo

    blowdart wrote:
    Oh great, even more technology that will be broken the first time it appears and no-one will be able to use for years.


    Not really.

    Multiple-backgrounds, image-based corners & borders, and text-shaping can be emulated with existing implementations of CSS2.1 in a jiffy, (Although when over-done, it does give semantics the finger in the process)

    Its just a way to make life simpler and decrease the probability of generating "tag-soup"

  • User profile image
    billh

    W3bbo wrote:
    That's why CSS3 supports multiple backgrounds per box, image-based borders and corners (with multiple display options), flowing text-columns, and shaped text.

    ...what a shame you can't do those things in tables


    What would you use the "multiple backgrounds per box" feature for?  And how is that different from something like layers, or a z-index, or using tables? 

    By the way, here's the css off that page, but no, you do not have to use CSS to achieve that "look":

    http://rockandrollgeek.podshow.com/wp-content/themes/relaxation_3column/style.css

    The biggest advantage to using CSS is to save time if you want to change the general look of many pages on a website, because it consolidates the styles of various elements in one central location.

  • User profile image
    W3bbo

    billh wrote:
    The biggest advantage to using CSS is to save time if you want to change the general look of many pages on a website, because it consolidates the styles of various elements in one central location.


    That's the biggest advantage as far as people who still think of tables when desgining go for.

    To me, the biggest advantage is allowing you to maintain code purity.

  • User profile image
    W3bbo

    billh wrote:
    By "code purity" are you referring to "less tags" (i.e. <FONT> ) and more organization in general in the HTML?  Because certainly it can get pretty phracked up anyway when you start using Javascript, ActiveX, etc.  Once you move out beyond coding a page in Notepad, the whole concept of code purity sort of goes out the window sometimes.


    I'm refering to the practice of XML/HTML semantics.

    A <div> element is a document section division, not a "generic styling tag".

    That's what I'm on about Smiley

  • User profile image
    billh

    W3bbo wrote:
    billh wrote: The biggest advantage to using CSS is to save time if you want to change the general look of many pages on a website, because it consolidates the styles of various elements in one central location.
    That's the biggest advantage as far as people who still think of tables when desgining go for.

    To me, the biggest advantage is allowing you to maintain code purity.


    Until you run it through FrontPage. 

    By "code purity" are you referring to "less tags" (i.e. <FONT> ) and more organization in general in the HTML?  Because certainly it can get pretty phracked up anyway when you start using Javascript, ActiveX, etc.  Once you move out beyond coding a page in Notepad, the whole concept of code purity sort of goes out the window sometimes. 

    For a tiny website (a few pages), CSS can sometimes be overkill.  Although it makes it much easier to maintain once the site begins to grow.

    By the way, Channel 9 seems to use a lot of table tags.  And span tags.  And div tags.  It's quite a "code soup" to look at sometimes.

    Why bash on the poor "table" tag?  Why not pick on it's idiot kid brother the "marquee" tag?

  • User profile image
    Karim

    Minh wrote:
    I want to make a site that looks like this:

    http://rockandrollgeek.podshow.com/



    I went to that link and the lead story is that Robert Moog, inventor of the Moog synthesizer, is dead.

    I hate Mondays.

    http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?playlistId=40104911&selectedItemId=40104923

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.