7 Replies Latest reply on Jul 16, 2009 10:04 AM by Nancy OShea

    Div container? Making it transparent

    woeislife

      So i am a noob to dream weaver and still working out its power especially since i use to use front page anyway here is what i am hoping to learn how to do,

      So i have My main page background with a div container on top,centred that will contain the site content... i am using a template for this and just modifying it to suit my need... cheating lol owell.. the term div container i am just using from the template thats what it calls it anyway im not experienced enough to know what it is.

      So i want to make this 'div container' tranparent. so that i can see my page background though it how do i go about that??

      If this makes no sense ther is an image to show the template that i am using and the desired transparent effect i am trying to obtain..


      Am i going about this completely wrong??

       

      Also off the transparent topic and probably more important then

      The templates sets it up so that the 'centre frame ' so to speak is a <div #container> do i just use this as my target frame for my content to load in?

       

      And is there away to lock the height of the div container to a specific height because at the moment i control the width but the height of the div container is subject to what content is inside of it...

       

      Any help would be much appreciated this is all new to me but something i want to do...

      thanks

      david

        • 1. Re: Div container? Making it transparent
          DwFAQ Level 4

          Opacity of a div can be accomplished using CSS3. Look here for info and examples. Basically your div container should have an opacity style set. So for inline styling your div will look something like this:

           

           

          <div style="opacity: 0.5;">
          Something Here
          </div>
          

           

           

           

          That will have a div with %50 opacity.

          1 person found this helpful
          • 2. Re: Div container? Making it transparent
            Nancy OShea Adobe Community Professional & MVP
            So i want to make this 'div container' tranparent. so that i can see my page background though it how do i go about that??    

            Add the background property to your CSS:

             

            #container {

                 background: transparent;

            }

            <div #container> do i just use this as my target frame for my content to load in?

             

            Don't use FRAMES at all. You don't need them.  Just build a basic first page with headers, menus, footers, etc...  Then use that basic page as your template for successive site pages. F1, Dreamweaver Help > Working with DW Templates. (.dwt files).

             

            And is there away to lock the height of the div container to a specific height because at the moment i control the width but the height of the div container is subject to what content is inside of it...

             

            Yes and no.  You shouldn't set a height property on a content division that may be long on some pages and short on others.  Build your pages logically from top to bottom. Let content flow naturally into the web space.  Don't ever try to force content into some arbitrarily restrictive box.  Forget everything you ever learned about designing printed pages. Web pages need to be flexible to render well on various devices, screen, text and browser settings.

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists
            www.alt-web.com/
            www.twitter.com/altweb

            • 3. Re: Div container? Making it transparent
              woeislife Level 1

              Thanks for all the teriffic help,

              when you refer to using my original page as a template this involves me loading the whole new page everytime a link is clicked to access site content?

               

              This i dont like the idea of very much because im constantly re loading backgrounds and site banners etc which increase load time... ???

               

              Is there away around this basically i want to target everything into the div container my background and logo copyirght info etc dont have to reload each time....

              • 4. Re: Div container? Making it transparent
                woeislife Level 1

                i have tried placing the div tags like you said but i am not getting any result

                were specifically in the code should i be placing the statement??

                 

                ----------------- code-------------------------------

                <!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=utf-8" />
                <title>Untitled Document</title>
                <style type="text/css">
                <!--
                body  {
                    font: 100% Verdana, Arial, Helvetica, sans-serif;
                    background: #666666;
                    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
                    padding: 0;
                    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
                    color: #000000;
                    background-color: #6F0;
                }
                .thrColAbsHdr #container {
                    position: relative;
                    width: 780px;
                    background: #FFFFFF

                 

                    margin: 0 auto;
                    border: 1px solid #000000;
                    text-align: left;
                    background: #6f0;
                    padding: 0 10px 0 20px;  \
                }
                .thrColAbsHdr #sidebar1 {
                    position: absolute;
                    top: 60px;
                    left: 0;
                    width: 150px;
                    background: #EBEBEB;
                    padding: 15px 10px 15px 20px;
                }
                .thrColAbsHdr #sidebar2 {
                    position: absolute;
                    top: 60px;
                    right: 0;
                    width: 160px;
                    background: #EBEBEB;
                    padding: 15px 10px 15px 20px;
                }
                .thrColAbsHdr #mainContent {
                    margin: 0 200px;
                    padding: 0 10px;
                }
                .thrColAbsHdr #footer {
                    padding: 0 10px 0 20px;
                    background=;
                }
                .thrColAbsHdr #footer p {
                    margin: 0;
                    padding: 10px 0;
                }
                .fltrt {
                    float: right;
                    margin-left: 8px;
                }
                .fltlft {
                    float: left;
                    margin-right: 8px;
                }
                -->
                </style></head>

                • 5. Re: Div container? Making it transparent
                  Nancy OShea Adobe Community Professional & MVP

                  LAYOUT -

                  Have a look at this 3 column CSS layout. View Page Source to see the CSS and HTML code.

                  http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml


                  USE MARGINS & FLOATS; NOT AP DIVS -

                  Notice my layout sidebars use margins & floats instead of the more problematic Absolutely Positioned Divisions (AP Divs). Read why AP Divs are not an ideal primary layout method below:

                  http://apptools.com/examples/pagelayout101.php


                  FRAMES -

                  In HTML 5.0 (which is already here) Frames are no longer supported.  Don't build your site around a dated 1990's frame convention because you think it will be easier to maintain your site.  It won't.  More reasons to avoid Frames:

                  http://apptools.com/rants/framesevil.php


                  SSI & EXTERNAL STYLESHEETS -

                  As an alternative to Frames, use Server-Side Includes along with External CSS. Edit one page, upload to server and the entire site is populated with changes.  Nothing could be simpler.

                  http://www.smartwebby.com/web_site_design/server_side_includes.asp

                   

                   

                  Good luck with your project. 

                   

                   

                  Nancy O.
                  Alt-Web Design & Publishing
                  Web | Graphics | Print | Media  Specialists
                  www.alt-web.com/
                  www.twitter.com/altweb

                  • 6. Re: Div container? Making it transparent
                    woeislife Level 1

                    probably getting sick of me but anyway

                     

                    I am trying to use SSI i understand what it is and why to use it but its not working for me were in the script do i insert it

                     

                    I inserted it into the body to start with i am just using insert function that dreamweaver uses. and i get a stupid block at the top for my head script

                    so i inserted it into the head of the document and i get the desired presentation.

                    But how do i add content to the page after inserting the ssi?  Its as if the ssi has created the template but its layered over the top of everything so i cant click on anything in design view and i added some text to the body in the code but nothing....

                    what am i missing here

                    sorry...

                    • 7. Re: Div container? Making it transparent
                      Nancy OShea Adobe Community Professional & MVP

                      Include files are nothing more than snippets of html code. An include statement is inserted into the parent page where you want the content to appear.  For this demo, I have three pre-built SSI files in my Includes folder:

                       

                      1. HeadMenu.ssi
                      2. LeftLinks.ssi
                      3. Footer.ssi 

                       

                      My parent page has been saved as Untitled.shtml (.shtml or .shtm tells the server there are include statements in the page). You may also use .php or .asp however those include statements look different than the ones in this demo.

                       

                      <!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=UTF-8" />
                      <title>Untitled Document</title>
                      
                      
                      <link href="style.css" rel="stylesheet" type="text/css" />
                      
                      </head>
                      
                      <body>
                      <div id="container">
                      
                      <div id="header">
                      <!--#include virtual="Includes/HeadMenu.ssi" -->
                      <!--end header --> </div>
                      
                      <div id="sidebar1">
                      <!--#include virtual="Includes/LeftLinks.ssi" -->
                      <!--end sidebar1 --> </div>
                      
                      <div id="mainContent">
                      <h1>Main Content H1</h1>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing odio.</p>
                      <!--end mainContent --> </div>
                      
                      <div id="footer">
                      <!--#include virtual="Includes/Footer.ssi" -->
                      <!--end footer --> </div>
                      
                      <!--end container --> </div>
                      </body>
                      </html>
                      

                       

                      My HeadMenu.ssi file looks like this:

                       

                      <div id="menu">
                      
                      <a href="#content">skip menu &gt;</a>
                      
                      <a class="intro" href="index.shtml">home</a>
                      
                      <a class="gallery" href="gallery.shtml">gallery</a>
                      
                      <a class="tools" href="tools.shtml">tools</a>
                      
                      <a class="portfolio" href="portfolio.shtml">portfolio</a>
                      
                      <a class="fees" href="Fees.shtml">fees</a>
                      
                      <a class="links" href="links.php">links</a>
                      
                      <a class="contact" href="contact.shtml">contact</a>
                      
                      </div> <!--end menu -->
                      

                       

                       

                      You can see a working example of this on my website:  http://alt-web.com

                       

                      One last thing, you won't see includes appear on the page until you publish to a server.  If you want to test pages ahead of time, install a local testing server on your computer.  Ask your server host if they support SSIs. If they don't, find a different host.

                       

                       


                      Nancy O.
                      Alt-Web Design & Publishing
                      Web | Graphics | Print | Media  Specialists
                      www.alt-web.com/
                      www.twitter.com/altweb