3 Replies Latest reply on Mar 2, 2012 3:44 PM by bramb76

    just a question

    bramb76

      Hello everybody!

      My dad asked me to make a simple website for his store, just an easy little website with all the information for his customers.

       

       

      Now i'm looking for a template like this, I tried to create something like this, but I couldn't make the boxes ''floating'' on the background, the background just fits in the text box. It needs to be a background who is really behind these text boxes.

       

      This is what I'm looking for:

      voorbeeld.png

       

       

      And if It could I would like it to keep centrated on the screen, because not everybody does have the same screen resolution.... the collums doesnt need to be really big, just small boxes.

       

       

      I hope somebody could help me!

       

      Kind regards,

      Bramb76

        • 1. Re: just a question
          martcol Level 4

          http://www.searchenginefriendlylayouts.com/layouts/2_column_fixed_width_layout,_left_side_ menu,_no_header,_no_footer_1.html

           

          I think you should be able to adapt that but if not they're looked to be a host of other options

           

          Martin

          • 2. Re: just a question
            Nancy OShea Adobe Community Professional & MVP

            2-Column, Centered Layout.  Copy & Paste this into a new, HTML document.

             

             

            <!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>Basic 2-Column, Centered Layout</title>
            
            <style type="text/css">
            /**Zero out default browser settings on everything**/
            * {margin: 0; padding: 0; border: 0; font-size: 90%; line-height:100%;}
            
            body {
            font-family: Verdana, Arial, Helvetica,sans-serif;
            background-color: #FFCCCC;
            }
            
            #container {
            width : 1000px; /**adjust width in px, % or ems**/
            margin : 0 auto; /**with width, auto centers page**/
            text-align : left;
            background: #669999;
            overflow:hidden; /**float containment**/
            }
            
            #header {
            width: 100%;
            min-height: 100px; /**same height as background image; if none; remove height**/
            _height: 100px; /**for IE only**/
            background: #000 url(../Images/your-logo.jpg) left top no-repeat;
            padding:0;
            color: #FFF;
            }
            
            #header h1 {
            margin: 0;
            padding: 10px 20px;
            font-size: 14px;
            text-transform:uppercase;
            }
            
            #header address {
            padding: 0 20px;
            font-size: 14px;
            font-weight:bold;
            }
            /**Left column**/
            #sidebar1 {
            width: 175px;
            background: silver;
            padding: 15px 0;
            float: left;    
            }
            
            /* BEGIN Vertical List Menu */
            #navlist-vert ul{
            padding-left: 0;
            margin-left: 0;
            border-bottom: 1px solid gray;
            width: auto;
            font-size: 14px;
            }
            
            #navlist-vert li{
            list-style: none;
            margin: 0;
            padding: 0.25em;
            border-top: 1px solid gray;
            }
            
            #navlist-vert li a {
            text-decoration: none;
            display: block;
            font-weight: bold;
            line-height: 2;
            }
            #navlist-vert li a:link {color:#0080C0 }
            #navlist-vert li a:visited { color:#666666}
            #navlist-vert li a:hover, #navlist-vert li a:active, #navlist-vert li a:focus{ color:#FFF; background: #0080C0;}
            
            /* END vertical navlist */
            
            /**middle columns**/
            #mainContent { 
            margin: 0 0 0 175px; /**margin-left = sidebar width**/
            background: #FFFFCC ;
            padding: 10px;
            }
            
            #footer {
            padding: 0 10px;
            background:#DDD;
            }
            #footer p {
            margin: 0;
            padding: 10px 0;
            font-size: 12px;
            color: #CC3300;
            text-align: center;
            } 
            /**TEXT STYLES**/
            h1, h2, p {
            line-height: 1.4;
            margin: 5px;
            padding: 5px;
            }
            #sidebar1 p,#sidebar1 h3{
            margin: 10px;
            padding: 5px;
            }
            
            /**RE-USABLE CLASSES**/
            .left {text-align: left}
            .center {text-align: center}
            .right {text-align:right}
            
            /**FLOATS, CLEARING**/
            .FlRt {
            float:right;
            width: 165px;
            border: 1px dotted red;
            background: #FFF;
            margin-left: 10px;
            }
            
            .FlLt {
            float:left;
            width: 165px;
            border: 1px dotted green;
            background: #FFF;
            margin-right: 20px;
            }
            
            .clearing {
            clear:both; 
            height: 1px; 
            visibility: hidden}
            
            
            </style>
            <!--[if IE]>
            <style type="text/css">
            /* place css fixes for all versions of
            IE in this conditional comment */
            body {font-size: 76%}
            #sidebar1 { 
            padding-top: 30px; word-wrap: break-word; }
            
            #mainContent { zoom: 1; padding-top: 15px; }
            
            /* the above proprietary zoom property
            gives IE the hasLayout it needs to avoid several bugs */
            
            </style>
            
            <![endif]-->
            </head>
            
            <body>
            <div id="container">
            
            <div id="header">
            <h1 class="right">Company Name </h1>
            <address class="right">
            address, city, state,
            telephone</address>
            <!-- end #header --> </div>
            
            <!--begin #sidebar -->
            <div id="sidebar1">
            <h2>#sidebar1 = width: 175px<br />
            float: left</h2>
            
            <div id="navlist-vert">
            <ul>
            <li><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
            <li><a href="#">Menu Item 4 </a></li>
            </ul> 
            </div> <!--end navlist-vert -->
            <p>&lt;end of sidebar1&gt; </p>
            <!--end sidebar1 --> </div> 
            
            
            <!--begin mainContent -->
            <div id="mainContent">
            <h1 class="right"> Basic 2-column CSS Layout</h1>
            <h2>#mainContent = margin-left: 175px (same as sidebar width) </h2>
            
            <h2>View Page Source in Browser to see the CSS and HTML Code.</h2>
            
            <div class="FlLt">
            <p>floatLeft, width: 165px </p>
            <p>your text or image here</p>
            <!--end FlLt --></div>
            
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam 
            ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
            
            <div class="FlRt">
            <p>floatRight, width: 165px </p>
            <p>your text or image here</p>
            <!--end FlRt --></div>
            
            <h2>H2 level heading </h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo
            porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
            
            <p class="center">&lt;end of mainContent&gt; </p>
            
            <!-- end #mainContent --></div>
            
            <!--begin #footer -->
            <div id="footer">
            <p>&copy; 2012.  Your footer text goes here</p>
            <!-- end #footer --> </div>
            <!-- end #container --> </div>
            </body>
            </html>
            
            

             

             

            Nancy O.

            Alt-Web Design & Publishing

            Web | Graphics | Print | Media  Specialists 

            http://alt-web.com/

            http://twitter.com/altweb

            • 3. Re: just a question
              bramb76 Level 1

              Thanks alot guys.