7 Replies Latest reply on Sep 29, 2008 4:10 PM by CaryD

    what is the best way to put this page together??

    marmaladewhale
      Hi there,
      I am putting together a new website at the moment. the only problem is that the index page layout is all over the place and cant really be put into a table because it would be way too complex. so was going to use layers, but then by doing that i cant center the page. here is a test version using layers www.marmaladewhale.co.uk test . is it in any way possible to put this design into tables? or is there any way of centering the page using layers? or just any suggestions in general would be very very helpful?

      thanks very much
      Ed
        • 1. Re: what is the best way to put this page together??
          Level 7
          Just make it a single image and then use an image map. I selected just the
          page portion containing the skeleton and the text and JPEGed to 63K, not bad
          size-wise.

          --

          Walt


          "marmaladewhale" <webforumsuser@macromedia.com> wrote in message
          news:gbolni$k02$1@forums.macromedia.com...
          > Hi there,
          > I am putting together a new website at the moment. the only problem is
          > that
          > the index page layout is all over the place and cant really be put into a
          > table
          > because it would be way too complex. so was going to use layers, but then
          > by
          > doing that i cant center the page. here is a test version using layers
          > http://www.marmaladewhale.co.uk/test . is it in any way possible to put
          > this
          > design into tables? or is there any way of centering the page using
          > layers? or
          > just any suggestions in general would be very very helpful?
          >
          > thanks very much
          > Ed
          >


          • 2. Re: what is the best way to put this page together??
            CaryD Level 2
            Something completely different...

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns=" http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
            <title>I spoke bad about SUSIE</title>
            <style type="text/css">
            <!--
            body {
            background: url(images/background.jpg) center top;
            text-align: center;
            margin: 0;
            padding: 0;
            }
            #menu {
            width:1024px;
            position: relative;
            margin: 0 auto;
            height: 768px;
            padding: 0;
            list-style: none;
            background: url(images/indexbackground.jpg);
            }
            #menu li {
            margin: 0;
            padding: 0;
            }
            #menu a img {
            border: none;
            }
            #menu a:focus img, #menu a:hover img {
            filter: alpha(opacity=0); /* used by IE 6 */
            opacity:0; /* used by all modern browsers */
            }
            #menu #about {
            position:absolute;
            width:94px;
            height:40px;
            left: 214px;
            top: 149px;
            background: url(images/aboutbutton2.jpg);
            }
            #menu #news {
            position:absolute;
            width:74px;
            height:28px;
            left: 231px;
            top: 70px;
            background: url(images/newsbutton2.jpg);
            }
            #menu #photographs {
            position:absolute;
            width:157px;
            height:46px;
            left: 117px;
            top: 295px;
            background: url(images/photographs2.jpg);
            }
            #menu #shop {
            position:absolute;
            width:86px;
            height:36px;
            left: 157px;
            top: 469px;
            background: url(images/shopbutton2.jpg);
            }
            #menu #drawings {
            position:absolute;
            width:129px;
            height:54px;
            left: 819px;
            top: 168px;
            background: url(images/drawingsbutton2.jpg);
            }
            #menu #movingImages {
            position:absolute;
            width:201px;
            height:40px;
            left: 736px;
            top: 284px;
            background: url(images/movingimages2.jpg);
            }
            #menu #contact {
            position:absolute;
            width:107px;
            height:34px;
            left: 798px;
            top: 438px;
            background: url(images/contact2.jpg);
            }
            #menu #links {
            position:absolute;
            width:77px;
            height:36px;
            left: 761px;
            top: 653px;
            background: url(images/linksbutton2.jpg);
            }
            -->
            </style>
            </head>
            <body>
            <ul id="menu">
            <li id="about"><a href=" http://www.marmaladewhale.co.uk/about"><img src="images/aboutbutton.jpg" alt="About" width="94" height="40" /></a></li>
            <li id="news"><a href=" http://www.marmaladewhale.co.uk/home"><img src="images/newsbutton.jpg" alt="News" width="74" height="28" /></a></li>
            <li id="photographs"><a href=" http://www.marmaladewhale.co.uk/photographs"><img src="images/photographs.jpg" alt="Photographs" width="157" height="46" /></a></li>
            <li id="shop"><a href=" http://www.marmaladewhale.co.uk/shop"><img src="images/shopbutton.jpg" alt="Shop" width="86" height="36" /></a></li>
            <li id="drawings"><a href=" http://www.marmaladewhale.co.uk/drawings"><img src="images/drawingsbutton.jpg" alt="Drawings" width="129" height="54" /></a></li>
            <li id="movingImages"><a href=" http://www.marmaladewhale.co.uk/movingimages"><img src="images/movingimages.jpg" alt="Moving Images" width="201" height="40" /></a></li>
            <li id="contact"><a href=" http://www.marmaladewhale.co.uk/contact"><img src="images/contact.jpg" alt="Contact" width="107" height="34" /></a></li>
            <li id="links"><a href=" http://www.marmaladewhale.co.uk/links"><img src="images/linksbutton.jpg" alt="Links" width="77" height="36" /></a></li>
            </ul>
            </body>
            </html>
            • 3. Re: what is the best way to put this page together??
              marmaladewhale Level 1
              that is great! exactly what i wanted. thanks so much, what was it you did to the code? just so i can do it to the other pages? thanks again, its taken me so long to try and find a way of doing it. do you have a website or anything i can add to the my links page as a thanks for helping me out?
              • 4. Re: what is the best way to put this page together??
                Level 7
                "marmaladewhale" <webforumsuser@macromedia.com> wrote in message
                news:gbolni$k02$1@forums.macromedia.com...
                > Hi there,
                > I am putting together a new website at the moment. the only problem is
                > that
                > the index page layout is all over the place and cant really be put into a
                > table
                > because it would be way too complex. so was going to use layers, but then
                > by
                > doing that i cant center the page. here is a test version using layers
                > http://www.marmaladewhale.co.uk/test . is it in any way possible to put
                > this
                > design into tables? or is there any way of centering the page using
                > layers? or
                > just any suggestions in general would be very very helpful?

                You should make sure to include proper alt text for your images.
                This is always important, but here even more as your images are used as/in
                *links*.


                --
                Thierry
                http://www.TJKDesign.com/go/?0 | Articles and Tutorials


                http://divahtml.com/products/scripts_dreamweaver_extensions.php | Extensions
                that keep your markup clean
                http://www.fourlevel.com/ | CSS Menus, Gallery, Tab Panels, etc
                --

                • 5. Re: what is the best way to put this page together??
                  CaryD Level 2
                  quote:

                  Originally posted by: marmaladewhale... what was it you did to the code? just so i can do it to the other pages? thanks again, its taken me so long to try and find a way of doing it...


                  I put your image links into an unordered list. Notice it includes the alt text as Thierry suggested. This way the links are useful even if one is using a screen reader or a text browser.

                  The styling applies the swap images as backrounds to the li elements so the normal images are hiding their swap images. The opacity styling makes the hovered or focused image completely transparent so the alternate, background-applied image is seen underneath.

                  Absolute positioning is still used for the li tags to position the image links. The list styling removes the bullets. The index background is applied to the ul tag which is styled with the same dimensions as the background image. Auto margins are used with ul#menu to center it on the page, and position:relative styling means all the absolutely positioned li's will move with ul#menu as its position shifts with wider and narrower pages.
                  • 7. Re: what is the best way to put this page together??
                    CaryD Level 2
                    The "moving images" link isn't being rendered quite right in IE6. Adding the following styling fixes it:

                    #menu a {float:left}