New GUI, maps and video hotspot

  • Some may remember I posted a "walk in Tasmania" tour a little while ago ? From the comments there I have changed the GUI and also added a video hotspot. I think the video fits in quite well, but since I turned off the 'loop' option it doesn't rewind so can't be played again ! (I will post this as a bug)

    Anyway, the new simple GUI is my own 'revolt' against the icon craze. Again all comments on this revision are very welcome.

    http://www.multimediaaction.com/wetlands.html

  • Hi Richard,

    I like... your GUI have good looking and it is functional *smile* .... But, let me do a suggestion *wink* . I think the GUI is something really important into a Virtual Tour, but the pano itself is more important than the GUI. Your Gui takes a lot of space area in the pano... this is why I suggest you add an option to hide all or part of the gui. Do not you think so? *rolleyes*

    Salut.

  • site and gui look better. but i have to say, center your website! maybe its just me but i cant stand when websites are offset to the left. it should be centered on any monitor. add a containing DIV around everything and center that. Just my opinion.

  • site and gui look better. but i have to say, center your website! maybe its just me but i cant stand when websites are offset to the left. it should be centered on any monitor. add a containing DIV around everything and center that. Just my opinion.


    It's also my opinion. I center all my sites since about 5 or 6 years with a simple div and css associated.

    Ma *smile*

  • I do agree with you. It would be better centered. But I hand-coded that site so am now unsure how I'd wrap the contents of every page in a new centered div. I think it would be very tedious...


    Write me in private (we're a bit far from what's interesting most of us in this forum). I'll give you some tips to center horizontally and vertically all your following sites...


    "Ma"

    info@arrets-sur-images.com

  • hi Ma,

    Quote

    we're a bit far from what's interesting most of us in this forum

    Perhaps, but, sure there is somebody interested in such tips also in this forum... to learn more about something is always welcome. Don't you think so? *wink*

    Salut.

  • C E N T E R I N G M Y W E B S I T E


    First, you have to create a css file named “css” and a css style inside named “style.css” (apart your html pages) for the whole of your site and insert following code in the style.css :

    #page{
    position:absolute;
    left:50%;
    top:50%;
    width:1000px;
    height:600px;
    margin-left:-500px;
    margin-top:-300px;
    border:1px solid #d0cfa3;
    visibility: visible;
    z-index: 2;
    background-color: #282723;
    }

    body{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:10px;color:#000000; background-color: #000000}

    Of course, you must adapt different parameters to your web site : colours, background, border and especially sizes.

    In this example, I choose 1000 x 600 pixels but if you choose another size, you will have to divide by 2 width and height and adapt the margin-left and the margin-top to your selected size.


    Then, you make a link in the head and in the body of your html page with your style.css like this :

    <html>

    <head>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    </head>

    <body>
    </div id="page">

    <div id="the whole content of my site">
    </div>
    </div>

    </body>
    </html>

    Note :

    You must know the basis of html and I recommend Dreamweaver, a rather good soft. The whole of your site will be contained inside the <div id="page"></div>
    After you drew your structure, you can insert different div inside the major div named page. That’s all !

    Ma *smile*

  • Hi Richard,

    I have tried the ccs code from matrekker on your page http://www.multimediaaction.com/wetlands.html
    And it works well *attention*
    Only some little change to make it match your needs ( like matrekker advised )

    Quote

    Of course, you must adapt different parameters to your web site : colours, background, border and especially sizes.

    The changes will be:
    - no need of vertically center the page. Then we remove margin-top:-300px; and top:50%;
    - we change the width:1000px; to your page width , width:996px;
    - we change the height:600px;; to your page height, height:1178px;
    - the background-image:url(images/background-996.jpg); from your body {... must be removed
    - we put the background-image:url(images/background-996.jpg); into the #page {....

    The resulting code will be:


    For me it work like expected.
    Try it. *wink*

    Hope this can help. (thank you Ma *wink* )

    Salut.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!