SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Non-Member Classified's Avatar
    Join Date
    Oct 2003
    Location
    Detention Room :-(
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How did they do it?

    I like this setup, http://www.webwizguide.info/default.asp. I like the green-esh banner at the top, but it looks like part of the page, althought it sizes with the page.

    I wanted to include some files with my webpages for the them, I can include header.htm and footer.htm with no problems they stay where they need to be. But I need a Left.htm and Right.htm. I try to import them but if they don'y show up, like the left.htm shows up on the left side but then pushes all the text underneith it, I've seen people use tables right next to each other before, but I can only use one, the other ones always show up above or under the other tables, not beside them.. They do it over and over again on that webside... How can I setup something like that?

    I was going to use frames but I was told a lot of browsers don't show them.

    I thought those folder tabs and stuff were all images, but I right click on them and they look to be part of the page. Pluss there is a menu hover effect, and I don't notice any flash applications.. what did they do? I wanted to created something like that.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    For the "stretchy" background, they have the pinstripes as a repeating background image in their header area, and their logo has a transparent background which lets the pinstripes show through. It's rather easy to do that.

    Edit:

    And stay away from frames! In 99% of cases they're bad for accessibility and usability, bookmarking, and just about everything

  3. #3
    Non-Member Classified's Avatar
    Join Date
    Oct 2003
    Location
    Detention Room :-(
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    For the "stretchy" background, they have the pinstripes as a repeating background image in their header area, and their logo has a transparent background which lets the pinstripes show through. It's rather easy to do that.
    Not for me [img]images/smilies/frown.gif[/img] I didn't even know you could put stuff in the header besides the title.

    I looked at the source looks, like there all tables, but then how did they get those tab effects in the tables? I know there's not a fill effect to do that...
    Last edited by Classified; Oct 16, 2003 at 22:53.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    Singapore
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    Non-Member Classified's Avatar
    Join Date
    Oct 2003
    Location
    Detention Room :-(
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE='biggulp']It's a background image
    http://www.webwizguide.info/images/tab_bar_image_off.gif [/QUOTE]

    do they just load it into the table?? There must be two images, because one side has a little curve on it.

  6. #6
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Classified
    Not for me [img]images/smilies/frown.gif[/img] I didn't even know you could put stuff in the header besides the title.

    I looked at the source looks, like there all tables, but then how did they get those tab effects in the tables? I know there's not a fill effect to do that...
    You are a little confused, vgarcia did not mean the header as in the bit in the mark-up between <head> and </head> but the visual page header as in the the title at the top with the site logo and search facility.

    Many things can go in the mark-up header (<head>...</head>) including but not necessarily limited to
    • The title, <title> ... </title>
    • Links to external files, <link ... />
    • Meta tags to provide extra page information, <meta ... />
    • Scripting code, like Javascript for example, <script> ... </script>
    • CSS style code, <style> ... </style>


    The menu rollover effects you are talking about are achieved with CSS (Cascading Style Sheets), this is the direction that the web is headed in and if you do not know CSS then it is worth learning (W3School CSS Tutorial ).

    The page title is achieve, as has already been said, by having the logo with a transparent background over the top of a repeating background image in a table cell. This is OK but I think the whole thing could probably been achieved more simply using CSS and applying the background image to a div.

    The Tabs on the table are achieved by having 2 tabe cells, the first with a background colour and the tab text and the second containing a graphic of a small triangle in the correct colour. Again this could be achieve using CSS (2 divs should do it I think). The problem with the way it is done is that a user with a low number of colours as there set-up may end up seeing the graphic triangle as the browser may render the background colour and graphic differently (although I have not see that in practice).

    This site has done what I thing a lot of people have done, picked the bits of CSS that are easy to use but not gone th whole way. That is it uses CSS for setting text display properties and menu rollovers but is still using nested tables for positioning rather than CSS.

  7. #7
    Non-Member Classified's Avatar
    Join Date
    Oct 2003
    Location
    Detention Room :-(
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoo Hooo.

    Ok, I know how they did it now, you must have a weird way of explaining things. I saved that web page so I can look at it when I get home, I dont know anything about CSS. Plus I don't know what tht Div tag is that people keep talking about.

    Thanks

  8. #8
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The div tag is a general purpose block level tag similar to the p tag, although there are some differences.

    It is the basic building block of a CSS laid out page.

  9. #9
    Non-Member Classified's Avatar
    Join Date
    Oct 2003
    Location
    Detention Room :-(
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BenANFA
    The div tag is a general purpose block level tag similar to the p tag, although there are some differences.

    It is the basic building block of a CSS laid out page.
    Oh. I've seen it used a lot but never knew what it did.

    Thanks

  10. #10
    SitePoint Enthusiast Parse_error's Avatar
    Join Date
    Sep 2003
    Location
    Florida, great place to vacation but I live here.
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can do an amazing amount of things with a .div

    One of my favorite things is "stacking" them one on top of the other with a "tab" at the top of each...sort of like a "file cabinet". You click the tab you want and it brings that "file" to the top. Saves a ton of space for like a help menu or tips or whatever.
    ~ Theres one in every crowd! ~

  11. #11
    Non-Member Classified's Avatar
    Join Date
    Oct 2003
    Location
    Detention Room :-(
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Parse_error
    you can do an amazing amount of things with a .div

    One of my favorite things is "stacking" them one on top of the other with a "tab" at the top of each...sort of like a "file cabinet". You click the tab you want and it brings that "file" to the top. Saves a ton of space for like a help menu or tips or whatever.
    that sounds really cool, can you give me an example of how to do something like that?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •