1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.


Discussion in 'Web Development & Web Hosting' started by CIW XHTML CSS, Aug 10, 2007.


    CIW XHTML CSS New Member

    I recently saw this website http://www.uf3k.com/v7/index.php and since then I have wanted to re-produce it for myself. I E-mailed the owner of the site to ask whether he would explain to me how it was done but all I got was "Use divs". Would it be possible for you to have a look at the site and possibly write some code for me as I have only used tables to design my layouts to date and don't really know where to start.

    I particually like the opacity effect at the top of the page.


    WIP: CIW
  2. nellyp123

    nellyp123 Byte Poster

    Hi wayne.

    If you want to learn css layout with all the hard work done for you? then you should check out this web site:http://www.cssdrive.com/index.php/examples/

    Should get you started with using css. But if you want my advice, then you should knuckle down and start from the top, or bottom as they say. I wanted to reproduce a flash site that i saw two weeks ago, so i went and brought a whole bunch of video tutorials on flash so i can learn the basics of flash and more importantly....Actionscript. I reckon it will take me three to four months to get anywhere near that site i saw.

    Good luck m8! :biggrin
    Certifications: CIW Professional
  3. dmarsh

    dmarsh Terabyte Poster

    DHTML is trivial to reverse engineer due to the fact that the source is all right there for you !

    Theres an interesting script include :-


    The opacity script uses a microsoft extension, interestingly this seems to also work in firefox :-


    The layout is performed by using divs with id's as is standard with css.

    styles/layout.css seems to have most of the important layout styles in it.

    Just save to page locally and look at the source and includes to find out more.
  4. tripwire45
    Honorary Member

    tripwire45 Zettabyte Poster

    I'm probably just saying the same as the others using different words, but what you are seeing on this fellows site is produced by a combination of CSS stylesheets and JavaScript. When I was developing my promotional site, I played around with opacity quite a bit. I've pretty much abandoned it in the current site with just a minor touch in the main container:

    <style type="text/css">
    background-color: transparent;
    font: normal 14px Arial;
    color: #191970;
    margin-top: 20px;
    margin-bottom: 0px;
    border: 0px;
    FILTER:Alpha(Opacity=95); /* IE */
    opacity:0.95; /* Safari, Opera */
    -moz-opacity:0.95; /* FireFox */


    That bit of styling is placed between the head tags and allows about 95% of the main container to be visible. You'll see the filter is set up for multiple web browsers since the effects you get can vary widely by browser type.

    Frankly, if you want to duplicate this person's efforts, you'll need to locally save the source for the html, css, and javascript and then just start playing around with it.

    I wish I had the time to modify my current set up but I just don't have the time. I didn't take very long to get the basic structure of my site set up but it took months to tweak it to get it to work right in both IE and Firefox. There are still a few minor bugs but they'll have to wait.

    Oh...here's my site if you want to take a look. Probably pretty plain-vanilla compared to what you'd like to accomplish but I built it from scratch and it was my first serious website.

    Certifications: A+ and Network+

Share This Page