CSS layout box model?

Hi, I'm using Dreamweaver cs4. I downloaded a diablo 3
fansite kit from blizzard, and was looking at their code &
style sheets and such for reference while learning to use DIV to
layout new websites. I pretty much have the same DIV box going for
all the content in the middle. But when i click on their DIV box,
it shows margin on the left and the right, and while in design
view, automatically centers their DIV box.
I created a page, setup a div box 1000px wide, centered it,
and it does not give me a preview of it centered while in design
view, nor does it show me the margins & padding (displays
diagonal white transparant stripes where the padding & margins
goes). i made sure i clicked the "CSS Layout Box Model" in the
visual aid menu, but it does not want to work on my page, yet i can
turn it on and off on the fan site index page. How do i make it
work on my page?
Thx

Which page? Can we see the other one too?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"ZzarkZul" <[email protected]> wrote in
message
news:[email protected]...
> Heres the code for the .css document.
>
>
>
> /* Stylesheet 1 -------------------------------*/
>
> body { margin:0; font:12px Tahoma; color:#FFFFDD;
> background:url(../images/bg1.jpg) 50% 0 #170f05
repeat-x; }
>
> #ev_bg {
> background:url(../images/ev_bg1.gif) repeat-y;
> width:1064px;
> margin:auto;
> }
> #everything { width:1000px; margin:0 32px;
> background:url(../images/stone-dark.jpg); border:1px
solid black;
> border-width:0px 1px; }
>
> #header { height:162px;
background:url(../images/d3_header1.jpg) right
> no-repeat; padding:0 20px; }
> #header h1 {
> padding-top:115px;
> margin:0;
> color:white;
> }
>
> #middle { clear:both;
background:url(../images/borderb1.gif) repeat-x;
> padding:20px 10px; }
>
> #left_column { width:195px; float:left; }
> .horizontal #left_column { width:auto; float:none; }
> #navigation a { background:url(../images/button_bg1.gif)
no-repeat;
> width:170px; height:25px; display:block;
padding-left:25px; margin:5px 0;
> font-size:13px; color:white; text-decoration:none;
line-height:25px;}
> #navigation a:hover { background-position:0 bottom; }
> .horizontal #navigation a { float:left; }
> #more_information { padding-top:15px;}
>
> #middle_column { float:left; width:50%; margin:0px 20px;
> #middle_column.two_column { float:left; width:75%; }
> .horizontal #middle_column { width:auto; float:none; }
> .date_break { font-size:19px; border-bottom:1px solid
#680808;
> margin-bottom:10px; }
> .post { background:url(../images/leather-heavy.jpg);
border:1px solid
> #221100; margin-bottom:35px; line-height:18px; }
> .post h1 { background:url(../images/title_bg1.gif)
repeat-x #0d2368;
> padding:2px 10px; margin:0; font-size:15px;
color:white;}
> .post_body { padding:5px 15px; }
> .post .postedby { float:left; clear:both; }
> .post .timestamp { float:right }
>
> ul { margin:20px; padding:10px; }
> li { list-style:none;
background:url(../images/bullet.gif) 0 5px
> no-repeat;
> padding-left:30px; line-height:25px; }
> .list_left, .list_right { width:48%; float:left }
>
> .post_info { clear:both; padding-top:10px; }
>
> #right_column {
> width:26%;
> float:left;
> }
> .box { background:url(../images/leather-vdark.jpg);
border:1px solid
> #545454; margin:10px 0 25px 0; padding:10px; }
>
> #footer { clear:both; padding:20px }
> #subnav { margin:10px 0;}
> #subnav a { color:#7A0C0C; }
> #subnav a:hover { color:#E51414 }
> .copyright { font-size:10px;}
>

Similar Messages

  • Box model experts, why wouldnt this layout allow for a container div to fully expand?

    Box model experts, why wouldnt this layout allow for a container div to fully expand?
    Please see attached jpg.
    Live site is at http://www.theminnternet.com/

    You have an answer for the height issue, you may also be interested in this article that talks about cutting down on the stylesheet size... you have a lot of styles in your stylesheet that can really be trimmed down by using shorthand rules.
    http://www.communitymx.com/content/article.cfm?cid=A43B828960590F55

  • Flex-box model not correctly implemented in Dreamweaver CS5.5, pleas improve!

    Hi all,
    there is a good introduction to: Flexible Box Layout module
    see: http://www.css3.info/introducing-the-flexible-box-layout-module/
    I tried the same example in my new Version of Dreamweaver CS5.5
    --> surprise: Dreamweaver CS5.5 cannot show in a correct manner a following div:
    <div class="flex_box flex_stretch flex_vertical">
    where css are:
        .flex_box {
                            background: url('./img/box-model.png') no-repeat center center;
                            height: 180px;
                            margin-top: 16px;
                            width: 180px;
                .flex_stretch {
            display: -moz-box;
                            display: -webkit-box;
                            display: box;
            -moz-box-align: stretch;
                            -webkit-box-align: stretch;
            box-align: stretch;
                .flex_vertical {
            -moz-box-orient: vertical;
                            -webkit-box-orient: vertical;
                            box-orient: vertical;
    CS5.5 can only strech in 1 direction, when shown as in a browser (German "ENTWURF").
    In Firefox, sam is ok:
    I need a correct representation of these boxes, when will there be an improvement??????????
    WSteiner

    John,
    I misundrstood you response
    I entered http://localhost in my browser and recieved the following page:
    Asd you can see everything is working. I thought that when you called local host, it went to the www/ directory where I have my sites
    I still don't see a problem with my settings
    Server Folder: C:\TNG813onMowesII\www\
    Web URL: http://localhost/genealogy/
    I hate it when the tool is more trouble than the work.
    Larry Voyer
    Site Creator/Administrator
    http://larryvoyer.com/genealogy/

  • Box model/none absolute positioning with flash

    In recent years none-absolute positioning (or box model positioning) has become the norm with HTML/CSS
    this is uselfull for dynamic functions which appear on an event (such as an object which appears when a button is clicked on or a error message that appears when a form box is given invalid input because it automatically inserts itself it the right place.)
    One very important example of this is when you have a form which automatically produces an error message and the error message appears bellow the input area which caused it and the rest of the page is pushed down.
    With none absolute positioning the developer does not need to worry about this.
    But if the objects are given absolute position then it becomes a massive problem, the developer has to go about giving the objects differetn positions dependant on if dynamic objects appear or not
    potentially the developer has to consider all possible variables, and code if statements which determine the position of all static objects for all possible variables which dynamic objects could take.
    so does flash have a "none absolute positioning" solution to this problem.

    Before you get all happy and pleased with yourself, APDivs or Layers seldom work well as a primary layout method. Here are some reasons why:
    http://apptools.com/examples/pagelayout101.php
    You're much better off using default CSS positioning (which is no positioning at all) along with CSS margins, padding and floats.  If you don't believe me, check your page in non-IE browsers with increased/decreased text-sizes (zoom, text only).
    From  Tables to CSS Web Design Part 1 -
    http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com

  • Viewing Rules and Box Model Simultaneously in Firefox 20 Inspector

    I upgraded to Firefox 20 and now my inspector is confined to the bottom of the viewport in an iFrame that I can pop out.
    In previous versions, I could open up the CSS rules and box model visualization at the same time. This was one of the main reasons I considered the Firefox inspector superior to those of Opera, Chrome and Safari.
    I can't seem to figure out how to do this now.. do I need to click between the box model and the rules or is there some way to revert to the old inspector layout or one that is more like it?
    I'll code an add-on if I have to get this thing to work.
    Very disappointed that Firefox removed their old default inspector view.

    Yes, you can open open one tab at the time in the left pane (you will also get a Fonts tab).
    There will be a lot more tools added to the inspector window in future Firefox versions and opening all windows could reduce the screen available for web page to almost nothing.<br />
    So that is how it goes and you will have to adjust.
    * http://blog.mozilla.org/ux/2012/10/coming-soon-the-firefox-developer-toolbox/

  • Still practicing my CSS layout, and IE 7 issues.

    I've revamped my site, and I've been practicing with the last 4 sites or so with mostly CSS layout....definitely a work in progress. My site is the first I've tried with overlapping images and the whole z-index thing. Everything looks great, for the most part. My issue is ALWAYS ie7, and then my issue is monitors with lower screen resolution. My sticky notes are showing up at the top of the page in IE7, looks great in 8. Every other browser seems to look great as well, as long as the resolution of the monitor is higher. I'm hoping someone can help me with positioning my sticky notes, so they don't shove my flash out to the right side of the page. Here's the URL www.theresasheridan.com.
    Another site with another IE 7 issue....www.viewcamera.com. Here the issue is that the image in the maincontent div is shoved way down the page. I want to keep my width at 450 px so that I can have my side borders. Anyone have any other suggestions for me pretty please?
    Last IE 7 issue (thanks so much), www.losvaquerosridingclub.org. The background color is white under the spry menu, but again...only in IE7.
    Thank you!!

    You are absolutely right about the validator.  Some of it is way beyond me too!
    However, it seems to indicate that you have some tag confusion going on there, usually that's about missing a closing element.  Fixing that is a good thing because it can screw your layout.  Another thing the validator points out is the omission of a few of your alt="" text.  That won't muck about with any layout issues but is worth adding if you have the time or inclination.  I'm afraid I don't have time to look right now but if I get the chance I'll have a go later.
    With your sticky notes, it struck me that you could use absolute positioning.  The trick there is to place those elements in to a containing element, set that element to position: relative and then absolutely position the sticky notes using px dimensions where you want them in the page.  At the moment, you are using floats on those two parts of the page but again, I haven't quite got the time to look in detail now.
    With the float drop thing and width, you would do well to Google "Box Model CSS" or something similar.  Width is not just the content width but also takes into account margin, border and padding.  When you add those up, the width may be too big for the containing element  width which will cause the content to "drop" or to be forced into a space that can accommodate it.  The other snag with the Box Model is that different Browsers handle it differently.  Sometimes what you need to do to create space in the page is to put padding on the nested element which constrains it's content without affecting the width of the container.
    I'm a bit of a novice myself at this and it sounds a lot to get your head around.  However there is a a logic to it and once you crack it, it gets easier.
    One other tip is to use FireFox browser and get the Firbug plug-in.  That lets you view the page in the browser and you can tweak your CSS "live" to get an idea of how things work together.  Once you have what you want you then turn to DW to make your edits.
    I hope that helps rather than misleads!  As I say, I'll try to look later on but in the mean time, an expert might drop by.
    And while I'm here, my feeling is that you might have done better to put each of your queries in different threads.  Sometimes, to see several questions in one hit is a bit daunting and I think people here tend to leave the longer questions a bit until they have time.
    Regards
    Martin

  • CSS Layout Nightmare!

    OK, I've recently decided to convert from table based layout to div layouts using CSS. I'm pretty proud of the outcome and found it a nice approach to designing. HOWEVER, when i click to edit pages in contribute, it strips out all of the css outline visual aids (like you see in wysiwig editors like Dreamweaver). This is going to be a major problem for my client and wysiwig style editing. Does anybody know how i can get contribute to display this in edit mode and also the best option for my client to select divs in order to copy and paste content.  This would be pretty easy in table based layout as contribute lets you select a table and copy and paste it. Ideal way for my client to copy and paste additional news items  same format. Any help would be gratefully appreciated. Thanks in advance.

    Not.
    Walt
    "SamDesign.be" <[email protected]> wrote in
    message
    news:ets71o$ark$[email protected]..
    > Hallo Brandon,
    > Make de "<div id="divContent">" smaller
    > Sheers
    > www.SamDesign.be
    >
    >
    > "Brandon" <[email protected]>
    a écrit dans le message
    > de news: ets5tg$9fo$[email protected]..
    >> Working on CSS Layout for the first time (always
    have used Tables) . . .
    >> can you look at the page below (in initial stages)
    and tell me how I can
    >> move everything UP? It's driving me crazy. The
    picture in the center
    >> needs to come up, the main nav buttons need to move
    up, and the "boxes"
    >> in the left column all need to move up under each
    other.
    >>
    >>
    http://www.presentationsdirect.com/2007/
    >>
    >> --
    >> Brandon
    >>
    >>
    >
    >

  • Css layout problems - css and tables

    Hi guys,
    Well as some of you suggested months ago, I've been trying to
    learn to layout with CSS... It's actually getting a bit rewarding
    now as I start to figure a few things out but there's still plenty
    of questions!!!
    If anyone can take a look at what I'm working on at the
    moment and give me some help I'd REALLY REALLY appreciate it!!
    My main trouble (I think) is working with a drop-down menu
    system that I found on the web and I'm dying to use it because it's
    perfect for this design. It's layed out using a table so I'm trying
    to incorporate that...
    Click
    [url=http://home.iprimus.com.au/jediwdog/ltc/mockup2.jpg]here[/url]
    for a picture of what i'm trying to get this page to look like and
    [url=http://home.iprimus.com.au/jediwdog/ltc/example1.html]here[/url]
    to see how far I've got. You can download the stylesheet from
    [url=http://home.iprimus.com.au/jediwdog/ltc/example1.css]here[/url].
    Here's what I need to know:
    1. I'm trying to push the table down so it looks better lined
    up with the logo but when I tell it to be further from the top, it
    doesn't seem to move. Any ideas on why?
    2. As you can see, I've inserted some blank space into the
    middle of the menu so that the logo doesn't cover any of the menu
    items. I can't seem to get the same 1px black border on this
    section.
    I assume this is because the border on the other parts is a
    layer/div border? Will I have to somehow put a div in there so as
    to create the same border effect?
    3. I'd really like to keep the header and footer visible at
    all times, even if there's lots of content to scroll through. I
    found this:
    http://www.cssplay.co.uk/layouts/basics2.html#Top
    but when I tried to implement this on my page, it all went haywire!
    Is this going to be a possibility?
    4. I guess other than that, have I completely stuffed this
    up!? I don't think I have but it's worth asking I guess!
    THANKS IN ADVANCE! I'm really loving using css layout rather
    than tables - it's soooo much more versatile. I just need to get
    past some obstacles I think!
    Cheers
    Neil

    On Wed, 24 Jan 2007 22:17:20 +0000 (UTC), "Barb S."
    <[email protected]> wrote:
    >Ok, I made your suggested changes and have this:
    >
    > body {
    > font-family: Georgia, "Times New Roman", Times, serif;
    > text-align: center;
    > font-size: 1em;
    > font-style: normal;
    > text-decoration: none;
    > top: 15px;
    > background-image:
    url(/images/backgrounds/background1.gif);
    > padding-top: 15px;
    >>>> width: 70%;
    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    > }
    >
    > #body {
    > margin: 0 auto;
    > text-align:left;
    > width: 760px;
    > padding-right: 20px;
    > padding-bottom: 20px;
    > padding-left: 20px;
    > background-color: #FFFFCC;
    > padding-top: 20px;
    > font-family: Georgia, "Times New Roman", Times, serif;
    > font-size: 1em;
    > color: #003366;
    >
    > }
    >
    >
    http://www.japanesetemari.com
    >
    > The page is on the left size of the screen and the
    yellow box does not expand
    >out. Not exactly what I'd wanted. I like to take
    advantage of larger screens
    >and have the page expand out but not so far out so the
    lines of text are real
    >long.
    > Barb
    It's this in the body style that is limiting the width -
    change that
    to 100%
    >>>> width: 70%;
    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    > }
    ~Malcolm N....
    ~

  • CSS Layout issue!! Help Urgent!!

    I am having a problem with creating a css layout, in the past i used tables and am trying to convert my sites for my customers. I have layed out the website using divs and css and it looks great until i put in the cosing of the menu bar. when i put in the coding for the menu bar suddenly the bar has a padding around it but i cannot find a padding that would change this in the css coding. I need this done asap! so please help. ill show my coding below:
    this is the div coding:
    <div id=Nav>
       <ul class="dropdown" id="Bar"; width: 879px" name="Bar">
             <li class="style16" style="width: 161px; height: 22px">
       <a href="default.html" style="width: 146px">Home</a></li>
             <li class="style10" style="width: 169px; height: 23px">
       <a href="about.html" style="width: 153px">About</a></li>
         <li class="" style="height: 31px; width: 175px; left: 0px; top: 0px">
       <a href="Equipment.html" class="style18">
       <div class="style10" style="width: 156px; height: 20px;">
        Equipment</div>
       </a> <ul class="sub_menu">
                <li><a href="compressor.html">Air Compressors</a></li>
                <li><a href="compactions.html">Compaction</a></li>                            
                <li><a href="concrete.html">Concrete Equipment</a></li>
                <li><a href="forklifts.html">Fork Lifts</a></li>
                <li><a href="generators.html">Generators</a></li>                            
                <li><a href="groundthawing.html">Ground Thawing</a></li>
                <li><a href="heaters.html">Heaters</a></li>
                <li><a href="scissorlifts.html">Scissor Lifts</a></li>                            
                <li><a href="boomlifts.html">Boom Lifts</a></li>
                <li><a href="lighttowes.html">Light Towers</a></li>
                <li><a href="misc.html">Misc.</a></li>                            
                <li><a href="dirtequipment.html">Dirt Equipment</a></li>
                <li><a href="powertools.html">Power Tools</a></li>
                <li><a href="pumps.html">Pumps | Saws | Welders</a></li>                              
                     </ul>
             </li>
             <li style="width: 165px"><a href="locations.html">
       <div class="style10" style="width: 154px">
        Locations</div>
       </a>
               </li>
                 <li style="width: 180px"><a href="contact.html">
       <div class="style16" style="height: 24px">
        Contact Us</div>
       </a>         </li>
            </ul>
      </div>
    This is the css coding:
    #wrapper {
    width: 880px;
    margin-right: auto;
    margin-left: auto;
    background-color: #f4f4f4;
    #Navigation {
    background-image: url(Images/NAvigation%20BAr.jpg);
    background-repeat: no-repeat;
    width: 880px;
    visibility: visible;
    height: 3-px;
    vertical-align: top;
    Nav {
    vertical-align: top;
    margin: 0px;
    padding: 0px;
    clear: both;
    height: 20px !important;
    #wrapper1 {
    width: 876px;
    margin-right: auto;
    margin-left: auto;
    color: #F4F4F4;
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(left, #716375 0%, #E8E8E8 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(left, #716375 0%, #E8E8E8 100%);
    /* Opera */
    background-image: -o-linear-gradient(left, #716375 0%, #E8E8E8 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #716375), color-stop(1, #E8E8E8));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%);
    margin-bottom: auto;
    #Bar {
    background-repeat: no-repeat;
    width: 880px;
    height: 28pt;
    overflow: visible;
    background-image: url(Images/NAvigation%20BAr.jpg);
    position: relative;
    vertical-align: top;
    #container {
    width: 880px;
    color: #000;
    background-color: #EDEDED;
    dominant-baseline: 578px;
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(left, #716375 0%, #E8E8E8 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(left, #716375 0%, #E8E8E8 100%);
    /* Opera */
    background-image: -o-linear-gradient(left, #716375 0%, #E8E8E8 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #716375), color-stop(1, #E8E8E8));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%);
    margin-bottom: auto;
    #content {
    float: left;
    color: #090;
    width: 580px;
    padding-right: 6px;
    background-color: #033;
    margin-top: 20px;
    .container {
    color: #000;
    background-color: #ff6;
    width: 876px;
    #expect {
    height: 164px;
    width: 294px;
    float: right;
    position: relative;
    background-color: #C90;
    margin-left: 582px;
    padding-top: 10px;
    #hours {
    float: left;
    height: 55px;
    width: 294px;
    line-height: 4px;
    word-spacing: normal;
    white-space: normal;
    display: inline;
    letter-spacing: normal;
    padding-top: 10px;
    font-size: 13pt;
    color: #000;
    margin-left: 586px;
    background-color: #F99;
    #footer {
    height: 76px;
    width: 880px;
    background-color: #CC0;
    clear: both;
    #cards {
    float: right;
    height: 31px;
    width: 294px;
    margin-left: 582px;
    padding-top: 10px;
    background-color: #F36;
    #contact {
    float: left;
    height: 328px;
    width: 293px;
    word-spacing: normal;
    white-space: normal;
    line-height: 1px;
    color: #000;
    display: inline;
    font-size: 14pt;
    background-color: #FFF;
    padding-top: 10px;
    margin-top: 20px;
    #header {
    background-image: url(Images/Proquip%20Logo/Proquip%20logo2.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 885px;
    height: 126px;
    background-color: #000;
    margin-right: 2.5px;
    margin-left: 0px;
    #wrapper #container #contact p strong {
    color: #800000;
    font-size: 14pt;
    #wrapper #container #contact blockquote p a {
    color: #000;
    #wrapper #container #expect div {
    color: #900;
    font-size: 14pt;
    font-weight: bold;
    #wrapper #container #hours div {
    color: #900;
    font-size: 14pt;
    font-weight: bold;
    #box2 {
    background-image: url(Images/Option%201/Services/whitebox2.jpg);
    #box3 {
    background-image:url(Images/Option%201/Services/redbox2.jpg);
    background-repeat:no-repeat;
    background-position: center center;
    #gold {
    background-image:url(Images/Option%201/Logos/gold.gif);
    background-repeat:no-repeat;
    #white {
    background-image:url(Images/Option%201/ProQuip-Pics/box1.gif);
    background-repeat:no repeat;
    #forklift {
    background-image:url(Images/Option%201/ProQuip-Pics/34-01-4380.jpg);
    background-repeat:no-repeat;
    #scissorlift {
    background-image:url(Images/Option%201/ProQuip-Pics/jlg-scissor-lifts-21.jpg);
    background-repeat:no-repeat;
    /* Navigation Menu- Level one */
    ul {
    list-style: none
    ul.dropdown {
    font-size: 13pt;
    color: #000000;
    height: 25px;
    text-decoration: none !important;
    width: 860px;
    position: relative;
    vertical-align: top;
    ul#Bar.dropdown {
    width: 878px;
    position: relative;
    vertical-align: top;
    ul.dropdown li {
    font-weight: 600;
    float: left;
    zoom: 1;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13pt;
    display: block;
    width: 175px;
    color: #000000;
    top: 25px;
    text-decoration: none !important;
    text-align: center;
    ul.dropdown a:hover {
    color:#cc0000;
    ul.dropdown a:active {
    color: #000000;
    ul.dropdown li a {
    display: block;
    border-right: 1px solid#333;
    color: #000000;
    border-right-width: 1px;
    text-decoration: none !important;
    text-align: center;
    ul.dropdown li:last-child a {
    border-right:none; /* does not wotk in IE */
    text-decoration:none !important; } 
    ul.dropdown li.hover,
    ul.dropdown li.hover {
    color: #000000;
    position: relative;
    height: 28px;
    top: 0px;
    ul.dropdown li.hover a {
    color:#800000;
    /* Level Two Navigation */
    ul.dropdown ul {
    width: 180px;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 36%;
    display: block;
    float: left;
    color: #000000;
    text-decoration: none !important;
    height: 25px;
    ul.dropdown ul li {
    font-weight: normal;
    color: #000000;
    border-bottom: 1px solid #ccc;
    float: left;
    border-bottom-color: #c0c0c0;
    border-bottom-style: groove;
    display: block;
    background-color: #dbdbdb;
    text-decoration:none !important;
    /* IE 6&7 needs inline block */
    ul.dropdown ul li a {
    border-right: none;
    display: inline-block;
    height: 18px;
    line-height: 16px;
    color: #000000;
    width: 100%;
    text-decoration: none !important;
    /* Level Three Navigation */
    ul.dropdown ul ul {
    top: 100%;
    color: #000000;
    text-decoration: none !important;
    ul.dropdown li:hover>ul {
    visibility: visible;
    color: #000000;
    top: 30px;
    text-decoration: none !important;

    I have the site using tables up and running, this is a website for a client so I cant make a test site using that domain would it be ok if I screen shot'ed the problem?
    Date: Thu, 24 Apr 2014 12:19:44 -0700
    From: [email protected]
    To: [email protected]
    Subject: CSS Layout issue!! Help Urgent!!
        Re: CSS Layout issue!! Help Urgent!!
        created by Jon Fritz II in Dreamweaver support forum - View the full discussion
    Well, you're not using position:absolute, so you've got a big thumbs up from a bunch of us for that.
    Is there any chance you could post a link to this page on your server? It's much easier to troubleshoot from a browser than it is to rebuild the page from code fragments.
    If you haven't gone live with the page yet, create a folder called TEST in your site and save copies of the page and css there. Upload TEST and post a link to it here. Once the problem is found/fixed, delete TEST from the server.
    You can also attempt to use Firefox or Chrome to find your issue by right clicking > Inspect Element. All CSS that affects a given element will be displayed with file name and line numbers there.
         Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at http://forums.adobe.com/message/6327947#6327947
         Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/6327947#6327947
         To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/6327947#6327947. In the Actions box on the right, click the Stop Email Notifications link.
               Start a new discussion in Dreamweaver support forum at Adobe Community
      For more information about maintaining your forum email notifications please go to http://forums.adobe.com/thread/416458?tstart=0.

  • Creating from scratch, a css layout for my website

    I am building a website from scratch and I would like to use CSS.  I am conceptualizing the design, however, I am struggling with designing it and working with the div tags.  I would like to have two sidebars, one on each side, and for them to be tri-colored, which means I have to create three small boxes and align them closely together, each a different color (the colors are part of the theme to my website). Of course the links on the sidebars would be white, and then change colors when hovered over or clicked on.  I would like to have a header and a footer, with the header containing my logo and if and only if I can get real fancy; a scrolling message.  My footer would contain additional links such as 'additional links', and 'contact us' and all the necessary copywrite info.  Please let me know, if first, my conception of this layout makes sense, and if so, what tutorial you could recommend for me to view that would assist in my web site development.
    Thank you, all you great tech minds out there!

    I'm with Murray.  I don't think you should concern yourself with HTML5 and CSS3 yet. 
    Stick with XHTML and CSS2.  When I was learning to work with CSS positioning, it was immensely helpful to use a pre-built layout.   And I learned a great deal from looking at source code.
    Look at the DW Starter pages described below:
         Dreamweaver CSS Templates for beginners
         http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html
         New DW Starter Pages --
         http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
    If you have some money to spend, Project Seven has some excellent CSS Templates.  If you plan to do more projects, CSS Layout Magic is a nice extension for prototyping inside DW.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • Old CSS layout in new Dreamweaver 8

    I created a site with CSS layout in Dreamweaver MX. I defined
    the main page area with a div ID and then added other smaller div
    ID stacked on top with higher z indexes. This all worked fine in
    MX, but when I opened the site with Dreamweaver 8, I could not edit
    the content sections of the pages. I get a international no symbol
    and a box defining the larger page area. I assume that if I could
    select other areas, I could edit them. I tried selecting a layer,
    but there are no layers in the layers pallet. Originally I just
    hand coded the various div ids.
    I hope I'm just missing something simple. What am I doing
    wrong?
    Thank you for the help!

    > How do you recommend doing the layout if not in layers?
    It's not necessary to use any absolute positioned elements on
    a page like
    that. I would do it with stacked containers, some floated
    into position,
    some margined into position, and all just placed on the page
    by the normal
    flow of the code from top to botton. To read about what I
    mean, go here -
    http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
    http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "ooo11" <[email protected]> wrote in message
    news:edrvi0$ke1$[email protected]..
    > Removing the overflow property did work. Thank you!
    >
    > How do you recommend doing the layout if not in layers?

  • Trouble Understanding CSS Layout and Padding

    Hi,
    I'm having some serious problems understanding CSS layout techniques and the impact of padding and was hoping I could get some help.
    Here are a couple of pages that show examples of what I don't "get". The first has padding that causes the layout to look right. The second doesn't have padding but doesn't lay out as I would expect. Also, the amount of text affects the "bottom" div as well. I'm an old hand at HTML and could do this layout in my sleep using tables. Css is a different, frustrating story.
    http://www.libertywebmarketing.com/test/1.html
    http://www.libertywebmarketing.com/test/2.html
    Thanks.
    Fitz21

    Thank you for the help.There's a lot of valuable info in these answers that I'm going to have to study. I never thought of applying classes to Div tags, but I guess I have to start learning somewhere. I'm not sure how to use the technique, but I'll definately look into it. If I could wake up tomorrow and know what you all know simply by wishing it, I would.
    I see that there are many things I have to learn about using CSS and I'd really like to see some real world examples that don't look like typical cheesy CSS designs with columns. If I were going to design this page using HTML, I would probably do something like this: http://www.libertywebmarketing.com/test/3.html
    (The last two tables show the table structure and use of a spacer. I know this a seriously antiquated way of doing it, but it's to illustrate what I'm trying to accomplish: Namely, staggered, left/right alternating boxes that will expand properly depending on the amount of copy or the vertical height of the photo in them.) 
    Dreamweaver 101,
    I have "Dreamweaver 8 The Missing Manual" by David Sawyer McFarland, but I find it really concentrates on "typical CSS designs" that look like Content mangement templates. While I agree it's a valuable book, there's nothing in there I have found that addresses anything like what I'm trying to do. Is the Dummies book better for atypical layouts?
    Again, thank you all.
    Fitz21

  • Layout box from end to end of the screen

    The caprice is simple: I want to create 100px tall line (vertical gradient) from end to end of the screen at the top of it, independently of screen's size.
    I have already set up the header which is 80px tall and appears 5px from the top (so there is a space where background gradient should continue to appear). The sites main content (header included) is 930px wide-positioned at the center (once again - so the background gradient should appear at the both sides of main content field (crossing the wraper) and at scattered instances - at the gaps too.)
    I understand how to create gradient itself (1 pixel wide jpg or png which repeats over and over), but how and where to define layout box for current needs?
    Any suggestions?

    If you look at my website, there are several gradient background images used on the page that flow from top gradient to bottom solid color fills.
    http://alt-web.com/
    CSS:
    body {background: #E6E6E6 url (some-image.jpg) repeat-x}
    #content {
    background: #F0F0F0 url (some-other-image.jpg) repeat-x;
    margin: 0 auto;
    width: 970px;
    border: 2px solid #FFF;
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • CSS layout pointers

    Hope someone can keep me on the right track here - basicaly
    trying to recreate the general rounded box effect to hold the main
    content, as seen here :
    link
    I'm having a go with 9 divs within a wrapper div, like this :
    link
    With the CSS so far looking like :
    #topleft {
    background:#FFFFFF;
    float:left;
    width:20px;
    #topmiddle {
    background:#FFFFFF;
    float:left;
    width:740px;
    #topright {
    background:#FFFFFF;
    float:left;
    width:20px;
    #middleleft {
    background:#FFFFFF;
    float:left;
    width:20px;
    #maincontent {
    background:#FFFFFF;
    float:left;
    width:740px;
    #middleright {
    background:#FFFFFF;
    float:left;
    width:20px;
    #bottomleft {
    background:#FFFFFF;
    float:left;
    width:20px;
    #bottommiddle {
    background:#FFFFFF;
    float:left;
    width:740px;
    #bottomright {
    background:#FFFFFF;
    float:left;
    width:20px;
    But already going slight AWOL.
    Any pointers greatly appreciated - am I even barking up the
    right tree - or would I be better using a single image as a
    background? (Although I'd presume that would lead to less
    flexibility with regards holding page content.)
    Many thanks.

    Not.
    Walt
    "SamDesign.be" <[email protected]> wrote in
    message
    news:ets71o$ark$[email protected]..
    > Hallo Brandon,
    > Make de "<div id="divContent">" smaller
    > Sheers
    > www.SamDesign.be
    >
    >
    > "Brandon" <[email protected]>
    a écrit dans le message
    > de news: ets5tg$9fo$[email protected]..
    >> Working on CSS Layout for the first time (always
    have used Tables) . . .
    >> can you look at the page below (in initial stages)
    and tell me how I can
    >> move everything UP? It's driving me crazy. The
    picture in the center
    >> needs to come up, the main nav buttons need to move
    up, and the "boxes"
    >> in the left column all need to move up under each
    other.
    >>
    >>
    http://www.presentationsdirect.com/2007/
    >>
    >> --
    >> Brandon
    >>
    >>
    >
    >

  • Adding template break box model and font

    I have been working on this one for a few hours now and I can't figure it out. I am working with the HTML5 Boilerplate and recreating the home page for our company. When I do not include the template, the file works fine in IE. But the second I apply a template the whole page becomes broken and the IE box model applies and my font sizing gets messed up.
    I have included a link to the files on a testing server, if this is not allowed, let me know and I can put up the code.
    Excuse the cupcakes from FlexSlider, I have not yet finished that piece.
    Working (no template): http://www.qa.mpay.com/index.asp
    Not working (template): http://www.qa.mpay.com/copy.asp
    Do I just need to rework my entire code so that it is more compliant with the IE Box Model qualifications, ie. div inside of a div with width on one and padding/margin on the other?

    Alright here's the code for the one that's not working. After posting last night, I realized the links were probably only viewable internally.
    UPDATE: Just added <html> after <!doctype html> like I've seen you post about in another forum discussion. That seems to have fixed it. Why is that needed? Isn't it the html tag being opened in the line <html class="no-js" lang="en"> What I mean by this, is why does it work fine in other browsers when that is missing, but it messes up with IE?
    P.S. I'm starting to blame H5BP for poor documentation, but I'm learning a lot in the process.
    TEMPLATE: (without <html>)
    templates>template_page_home_new.dwt
    <!doctype html>
    <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
    <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
    <!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
    <!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
    <!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
    <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
      <meta charset="utf-8">
      <!-- Use the .htaccess and remove these lines to avoid edge case issues.
           More info: h5bp.com/b/378 -->
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>MPAY Inc.</title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="tags" -->
    <meta name='description' content='Payroll Software/Services- Business Process Outsourcing, Reseller and Referral Programs for Payroll Providers, Brokers, CPAs, and more offered by MPAY Inc'/>
    <meta name='keywords' content='MPAY, payroll, payentry.com, millennium, millennium payroll, payroll processing, payroll software, online payroll, outsourcing, business process outsourcing,  timekeeping, Boston, MA, Charlotte, NC, work comp, workers comp, SecureView, online tax forms'/>
    <!-- TemplateEndEditable -->
      <!-- Mobile viewport optimized: j.mp/bplateviewport -->
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
      <!-- CSS: implied media=all -->
      <!-- CSS concatenated and minified via ant build script-->
      <link rel="stylesheet" href="../css/style.css">
      <link rel="stylesheet" href="../css/flexslider.css" type="text/css" media="screen" />
      <!-- end CSS-->
        <!-- FlexSlider pieces -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
      <!-- All JavaScript at the bottom, except for Modernizr / Respond.
           Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
           For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
      <script src="../js/libs/modernizr-2.0.6.min.js"></script>
    </head>
    <body>
    <div id="container">
        <!-- Header Start -->
      <div id="navigation">
        <div id="logoregion">
              <div id="logo">
                  <a href="default.asp"><img src="../images/logo.gif" alt="mpay_logo" /></a>
              </div>
              <div id="headerlink">
                  <ul>
                          <li><a href="../client-login.asp"><p class="new">NEW!</p>  <img src="../images/blue_bullet_line.gif" alt=""> Client Login  </a></li>
                          <li><a href="contact_us.asp"><img src="../images/blue_bullet_line.gif" alt=""> Contact Us  </a></li>
                          <li><a href="careers.asp"><img src="../images/blue_bullet_line.gif" alt=""> Careers  </a></li>
                          <li><a href="about_us.asp"><img src="../images/blue_bullet_line.gif" alt=""> About Us</a></li></ul>
              </div>
              <div id="contact">
              (781) 810-9000<br />
              <a href="mailto:[email protected]">[email protected]</a>
              </div>
          </div>
          <div id="mainnav">
              <ul class="navigation-controls">
                      <li><a href="../index.html"><p class="navigation-text">Home</p></a></li>
                      <li><a href="../services.html"><p class="navigation-text">Services</p></a></li>
                      <li><a href="../products.html"><p class="navigation-text">Products</p></a></li>
                      <li><a href="../solutions.html"><p class="navigation-text">Solutions</p></a></li>
                      <li><a href="../support.html"><p class="navigation-text">Client Support</p></a></li>
                      <li class="nav-border-right"><a href="../resources.html"><p class="navigation-text">Resources</p></a></li>
               </ul>
          </div>
        </div> 
        <!-- Header End -->
      <!-- TemplateBeginEditable name="EditRegionContent" --><!-- TemplateEndEditable -->
        <!-- Footer Start -->
            <div id="footer">
              <div id="footercontent">
                  <div id="legal">
                  <a href="../index.html">MPAY Inc.</a>  |  
                  <a href="../legal.html">Legal Notices</a>  |  
                  <a href="../privacy.html">Your Privacy</a>
                  </div>
                  <div id="copyright">
                   <script type="text/javascript">
          now=new Date();
          year=now.getFullYear();
              </script>
                   &copy; Copyright
                   <script type="text/javascript">
          document.write (year);
                   </script>
                   MPAY, Inc. All Rights Reserved.</div>
             </div>
           </div>
      <!-- Footer End -->
       </div>
    <!-- JavaScript at the bottom for fast page loading -->
      <!-- TemplateBeginEditable name="JavaCode" --><!-- TemplateEndEditable -->
      <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../js/libs/jquery-1.6.2.min.js"><\/script>')</script>
      <!-- scripts concatenated and minified via ant build script-->
      <script defer src="../js/plugins.js"></script>
      <script defer src="../js/script.js"></script>
      <!-- end scripts-->
        <!-- Act-On Analytics Code -->
         <script type="text/javascript">
           /* <![CDATA[ */
           document.write (
              '<img src="http://marketing.mpay.com/acton/bn/1170/visitor.gif?ts='+
              new Date().getTime()+
              '&ref='+escape(document.referrer) + '">'
           /* ]]> */
           </script>
      <!-- Google Analytics Code -->
      <script>
        window._gaq = [['_setAccount','UA-12607129-1'],['_trackPageview'],['_trackPageLoadTime']];
        Modernizr.load({
          load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
      </script>
    </body>
    </html>
    File it's being applied to:
    copy.asp
    <!-- InstanceBegin template="/Templates/template_page_home_new.dwt" codeOutsideHTMLIsLocked="false" --><!doctype html>
    <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
    <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
    <!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
    <!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
    <!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
    <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
      <meta charset="utf-8">
      <!-- Use the .htaccess and remove these lines to avoid edge case issues.
           More info: h5bp.com/b/378 -->
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>MPAY Inc.</title>
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="tags" -->
    <meta name='description' content='Payroll Software/Services- Business Process Outsourcing, Reseller and Referral Programs for Payroll Providers, Brokers, CPAs, and more offered by MPAY Inc'/>
    <meta name='keywords' content='MPAY, payroll, payentry.com, millennium, millennium payroll, payroll processing, payroll software, online payroll, outsourcing, business process outsourcing,  timekeeping, Boston, MA, Charlotte, NC, work comp, workers comp, SecureView, online tax forms'/>
    <style type="text/css">
    <!--
    .style1 {color: #00274c}
    -->
    </style>
    <!-- InstanceEndEditable -->
      <!-- Mobile viewport optimized: j.mp/bplateviewport -->
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
      <!-- CSS: implied media=all -->
      <!-- CSS concatenated and minified via ant build script-->
      <link rel="stylesheet" href="css/style.css">
      <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
      <!-- end CSS-->
        <!-- FlexSlider pieces -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
      <!-- All JavaScript at the bottom, except for Modernizr / Respond.
           Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
           For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
      <script src="js/libs/modernizr-2.0.6.min.js"></script>
    </head>
    <body>
    <div id="container">
        <!-- Header Start -->
      <div id="navigation">
        <div id="logoregion">
              <div id="logo">
                  <a href="default.asp"><img src="images/logo.gif" alt="mpay_logo" /></a>
              </div>
              <div id="headerlink">
                  <ul>
                          <li><a href="client-login.asp"><p class="new">NEW!</p>  <img src="images/blue_bullet_line.gif" alt=""> Client Login  </a></li>
                          <li><a href="contact_us.asp"><img src="images/blue_bullet_line.gif" alt=""> Contact Us  </a></li>
                          <li><a href="careers.asp"><img src="images/blue_bullet_line.gif" alt=""> Careers  </a></li>
                          <li><a href="about_us.asp"><img src="images/blue_bullet_line.gif" alt=""> About Us</a></li></ul>
              </div>
              <div id="contact">
              (781) 810-9000<br />
              <a href="mailto:[email protected]">[email protected]</a>
              </div>
          </div>
          <div id="mainnav">
              <ul class="navigation-controls">
                      <li><a href="index.html"><p class="navigation-text">Home</p></a></li>
                      <li><a href="services.html"><p class="navigation-text">Services</p></a></li>
                      <li><a href="products.html"><p class="navigation-text">Products</p></a></li>
                      <li><a href="solutions.html"><p class="navigation-text">Solutions</p></a></li>
                      <li><a href="support.html"><p class="navigation-text">Client Support</p></a></li>
                      <li class="nav-border-right"><a href="resources.html"><p class="navigation-text">Resources</p></a></li>
               </ul>
          </div>
        </div> 
        <!-- Header End -->
      <!-- InstanceBeginEditable name="EditRegionContent" --><!--! start of #container -->
        <div id="slideshow">
            <!--=============================
            Markup for FADE animation
            =================================-->
            <div class="flexslider">
            <ul class="slides">
                <li>
                    <a href="#"><img src="img/planet_hollywood.jpg" />
                    <div class="flex-caption">
                        <div id="slideone">
                            <h2 class="gold" >MPAY Sales &amp; Product <br />Roadmap Workshop</h2><br />
                            <h3 class="white">
                            March 2, 2012 / Las Vegas
                            <br />
                            </h3>
                             <br /> <br /> <br />
                            <p class="gold underline">
                            Learn more about IPPA Event
                            </p>
                        </div>
                    </div></a>
                </li>
                <li>
                    <a href="#"><img src="img/inacup_samoa.jpg" />
                    <div class="flex-caption">
                        <h2 >Our Products</h2><br />
                        <h3 >Payentry.com
                        <br />Secure and reliable online solution for payroll and human resource management
                        Millennium
                        <br />User-friendly PC solution provides a flexible system with robust functionality
                        </h3>
                    </div></a>
                </li>
                <li>
                    <a href="#"><img src="img/inacup_donut.jpg" />
                    <div class="flex-caption">
                        <h2 >Our Solutions</h2><br />
                        <h3 >Business Process Outsourcing<br />
                    Reseller Program<br />
                    Referral Program<br />
                    Direct Services
                        </h3>
                    </div></a>
                </li>
                <li>
                    <a href="#"><img src="img/inacup_pumpkin.jpg" />
                    <div class="flex-caption">
                        <h2 >Compliance &amp; Security</h2><br />
                        <h3 >Payroll Processing and Tax Management<br />
                    Employee Management<br />
                    New Hire Reporting<br />
                    Workers’ Compensation<br />
                    Wage Garnishment<br />
                    COBRA Administration
                        </h3>
                    </div></a>
                </li>
                <li>
                    <a href="#"><img src="img/inacup_donut.jpg" />
                    <div class="flex-caption">
                        <h2 >Paperless Solutions</h2><br />
                        <h3 >Secure Document Delivery via SecureView<br />
                    Employee Self Service with Online Tax Forms<br />
                    Money Network Payroll Distribution Service
                        </h3>
                    </div></a>
                </li>
            </ul>
            <div >
            <ul class="custom-controls">
                    <li><a href="#">Upcoming Events</a></li>
                    <li><a href="#">Our Products</a></li>
                    <li><a href="#">Our Solutions</a></li>
                    <li><a href="#">Compliance & Security</a></li>
                    <li><a href="#">Paperless Solutions</a></li>
             </ul>
             </div>           
          </div>
        </div>
        <div id="main" role="main">
            <div id="banner">
              <div id="leftbanner" class="bluedropshadow">Learn how MPAY can find a <br />solution that’s right for you.</div>
              <div id="bannerdivision">
              <img src="img/banner_division.png" alt="" />
              </div>
              <div id="rightbanner">
                <div id="emailbutton">
                <a href="#"><img src="img/email_us_button.png" alt="Email Us!" /></a></div>
                <div id="or" class="bluedropshadow">or</div>
                <div id="callus">
                Call us today at<br />
                781-810-9000</div>
              </div>
            </div>
          <div id="bannerbottom">
              </div>
            <div id="leftcol">
              <div id="introduction">
              <p>MPAY Inc. is a <a href="#">payroll software</a> and <a href="#">services</a> company providing strategic <a href="#">business solutions</a> to employers and business partners nationwide. MPAY presents a variety of programs, including <a href="#">business process outsourcing</a>, to a wide range of <a href="#">industries</a>. MPAY’s offerings streamline processes, improve productivity, and simplify administration, allowing clients to get the most out of their workday.</p>
              </div>
              <div id="twitterfeed">
                  <div id="twitterlogo">
                  <h4>Twitter<br />Feed</h4>
                  </div>
                  <div id="twitter">  
                  </div>
                <p class="viewall"><a href="#">View All</a></p>
              </div>
            </div>
            <div id="rightcol">
              <div id="mediacenter">
                <div>
                <h4>Media Center</h4>
                </div>
                <div id="medialinks">
                <p class="medialinks"><a href="#"><img class="mediaicons" src="img/news_icon.png" alt="News Icon" />News</a></p>
                <p class="medialinks"><a href="#"><img class="mediaicons" src="img/press_icon.png" alt="Press Release Icon" />Press Releases</a></p>
                <p class="medialinks"><a href="#"><img class="mediaicons" src="img/calendar_icon.png" alt="Calendar Icon" />Calendar</a></p>
                <p class="medialinks"><a href="#"><img class="mediaicons" src="img/client_icon.png" alt="Client Testimonials Icon" />Client Testimonials</a></p>
                </div>
              </div>
              <div id="affandawards">
                <div id="affandawardstitle">
                <h4>Affiliates &amp; Awards</h4>
                </div>
                <div id="affandawardsframe">
                  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="200" height="150" title="sponsors_small">
                    <param name="movie" value="sponsors_small.swf">
                    <param name="quality" value="high">
                    <embed src="sponsors_small.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="150"></embed>
                  </object>
                </div>
              </div>
              <div id="socialmedia">
                <div id="reachout">
                Reach <br />Out To Us!
                </div>
                <div id="socialarrow">
                <img src="img/social_arrow.gif">
                </div>
                <div id="socialicons">
                <a href="#"><img class="socialmediaicons" src="img/facebook_30px.gif" alt="Facebook Icon" /></a>
                <a href="#"><img class="socialmediaicons" src="img/twitter_30px.gif" alt="Twitter Icon" /></a>
                <a href="#"><img class="socialmediaicons" src="img/linkedin_30px.gif" alt="LinkedIn Icon" /></a>
                </div>
              </div>
            </div>
        </div>
    <!--! end of #container -->
    <!-- InstanceEndEditable -->
        <!-- Footer Start -->
            <div id="footer">
              <div id="footercontent">
                  <div id="legal">
                  <a href="index.html">MPAY Inc.</a>  |  
                  <a href="legal.html">Legal Notices</a>  |  
                  <a href="privacy.html">Your Privacy</a>
                  </div>
                  <div id="copyright">
                   <script type="text/javascript">
          now=new Date();
          year=now.getFullYear();
              </script>
                   &copy; Copyright
                   <script type="text/javascript">
          document.write (year);
                   </script>
                   MPAY, Inc. All Rights Reserved.</div>
             </div>
           </div>
      <!-- Footer End -->
       </div>
    <!-- JavaScript at the bottom for fast page loading -->
      <!-- InstanceBeginEditable name="JavaCode" -->
            <!-- Hook up the FlexSlider -->
        <script type="text/javascript">
            $(window).load(function() {
                $('.flexslider').flexslider({
                    manualControls: '.custom-controls li a'
        </script>
        <!-- Twitter Feed -->
    <script type="text/javascript">
    $(document).ready(function(){
        $.getJSON('http://twitter.com/status/user_timeline/MPAYInc.json?count=3&callback=?', function(data){
            $.each(data, function(index, item){
                $('#twitter').append('<div class="tweet"><p>' + item.text.linkify() + '</p><p class="timestamp">' + relative_time(item.created_at) + '</p></div>');
        function relative_time(time_value) {
          var values = time_value.split(" ");
          time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
          var parsed_date = Date.parse(time_value);
          var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
          var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
          delta = delta + (relative_to.getTimezoneOffset() * 60);
          var r = '';
          if (delta < 60) {
            r = 'a minute ago';
          } else if(delta < 120) {
            r = 'couple of minutes ago';
          } else if(delta < (45*60)) {
            r = (parseInt(delta / 60)).toString() + ' minutes ago';
          } else if(delta < (90*60)) {
            r = 'an hour ago';
          } else if(delta < (24*60*60)) {
            r = '' + (parseInt(delta / 3600)).toString() + ' hours ago';
          } else if(delta < (48*60*60)) {
            r = '1 day ago';
          } else {
            r = (parseInt(delta / 86400)).toString() + ' days ago';
          return r;
        String.prototype.linkify = function() {
            return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {
                return m.link(m);
    </script><!-- InstanceEndEditable -->
      <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../js/libs/jquery-1.6.2.min.js"><\/script>')</script>
      <!-- scripts concatenated and minified via ant build script-->
      <script defer src="js/plugins.js"></script>
      <script defer src="js/script.js"></script>
      <!-- end scripts-->
        <!-- Act-On Analytics Code -->
         <script type="text/javascript">
           /* <![CDATA[ */
           document.write (
              '<img src="http://marketing.mpay.com/acton/bn/1170/visitor.gif?ts='+
              new Date().getTime()+
              '&ref='+escape(document.referrer) + '">'
           /* ]]> */
           </script>
      <!-- Google Analytics Code -->
      <script>
        window._gaq = [['_setAccount','UA-12607129-1'],['_trackPageview'],['_trackPageLoadTime']];
        Modernizr.load({
          load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
      </script>
    </body>
    <!-- InstanceEnd --></html>
    CSS
    css>style.css
    * HTML5 ✰ Boilerplate
    * What follows is the result of much research on cross-browser styling.
    * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
    * Kroc Camen, and the H5BP dev community and team.
    * Detailed information about this CSS: h5bp.com/css
    * ==|== normalize ==========================================================
    /* =============================================================================
       HTML5 display definitions
       ========================================================================== */
    article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
    audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
    audio:not([controls]) { display: none; }
    [hidden] { display: none; }
    /* =============================================================================
       Base
       ========================================================================== */
    * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
    * 2. Force vertical scrollbar in non-IE
    * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
    html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    body { margin: 0; font-size: 100%; line-height: 150%; }
    body, button, input, select, textarea { font-family: sans-serif; color: #222; }
    * Remove text-shadow in selection highlight: h5bp.com/i
    * These selection declarations have to be separate
    * Also: hot pink! (or customize the background color to match your design)
    ::-moz-selection { background: #496793; color: #fff; text-shadow: none; }
    ::selection { background: #496793; color: #fff; text-shadow: none; }
    /* =============================================================================
       Links
       ========================================================================== */
    a { color: #00e; }
    a:visited { color: #551a8b; }
    a:hover { color: #06e; }
    a:focus { outline: thin dotted; }
    /* Improve readability when focused and hovered in all browsers: h5bp.com/h */
    a:hover, a:active { outline: 0; }
    /* =============================================================================
       Typography
       ========================================================================== */
    abbr[title] { border-bottom: 1px dotted; }
    b, strong { font-weight: bold; }
    blockquote { margin: 1em 40px; }
    dfn { font-style: italic; }
    hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
    ins { background: #ff9; color: #000; text-decoration: none; }
    mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
    /* Redeclare monospace font family: h5bp.com/j */
    pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
    /* Improve readability of pre-formatted text in all browsers */
    pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
    q { quotes: none; }
    q:before, q:after { content: ""; content: none; }
    small { font-size: 85%; }
    /* Position subscript and superscript content without affecting line-height: h5bp.com/k */
    sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
    sup { top: -0.5em; }
    sub { bottom: -0.25em; }
    /* =============================================================================
       Lists
       ========================================================================== */
    ul, ol { margin: 0em 0; padding: 0 0 0 0px; }
    dd { margin: 0 0 0 40px; }
    nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
    /* =============================================================================
       Embedded content
       ========================================================================== */
    * 1. Improve image quality when scaled in IE7: h5bp.com/d
    * 2. Remove the gap between images and borders on image containers: h5bp.com/e
    img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
    * Correct overflow not hidden in IE9
    svg:not(:root) { overflow: hidden; }
    /* =============================================================================
       Figures
       ========================================================================== */
    figure { margin: 0; }
    /* =============================================================================
       Forms
       ========================================================================== */
    form { margin: 0; }
    fieldset { border: 0; margin: 0; padding: 0; }
    /* Indicate that 'label' will shift focus to the associated form element */
    label { cursor: pointer; }
    * 1. Correct color not inheriting in IE6/7/8/9
    * 2. Correct alignment displayed oddly in IE6/7
    legend { border: 0; *margin-left: -7px; padding: 0; }
    * 1. Correct font-size not inheriting in all browsers
    * 2. Remove margins in FF3/4 S5 Chrome
    * 3. Define consistent vertical alignment display in all browsers
    button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
    * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
    * 2. Correct inner spacing displayed oddly in IE6/7
    button, input { line-height: normal; *overflow: visible; }
    * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
    table button, table input { *overflow: auto; }
    * 1. Display hand cursor for clickable form elements
    * 2. Allow styling of clickable form elements in iOS
    button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
    * Consistent box sizing and appearance
    input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
    input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
    input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
    * Remove inner padding and border in FF3/4: h5bp.com/l
    button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
    * 1. Remove default vertical scrollbar in IE6/7/8/9
    * 2. Allow only vertical resizing
    textarea { overflow: auto; vertical-align: top; resize: vertical; }
    /* Colors for form validity */
    input:valid, textarea:valid {  }
    input:invalid, textarea:invalid { background-color: #f0dddd; }
    /* =============================================================================
       Tables
       ========================================================================== */
    table { border-collapse: collapse; border-spacing: 0; }
    td { vertical-align: top; }
    /* =============================================================================
       Eric Meyer Reset Snippet
       ========================================================================== */
    /* http://meyerweb.com/eric/tools/css/reset/ */
    /* v1.0 | 20080212 */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;   
    /* ==|== primary styles =====================================================
       Author:
       ========================================================================== */
    body {
        max-width: 49.6875em;
        text-align: center;
        margin: auto;
        #container{
        text-align: left;
        margin: auto;
    a {
            color: #6699CC;
            text-align:left;
            text-decoration:underline;
            border: none;   
        a:link { color: #6699CC;}
        a:visited { color: #6699CC;}   
        a:hover { color: #496793;}   
        a:active { color: #496793;}
    /* ==|== text styles ====================================================== */
    p{
        color:#444444;
        font-family:Verdana, sans-serif;
    h2{
        font-size:2.5em;
        line-height:1.25em;
        letter-spacing:.02em;
        color:#00274c;
        font-weight:bold;
        font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;   
    h3{
        font-size:1.5em;
        line-height:1.25em;
        letter-spacing:.02em;
        color:#00274c;
        font-weight:bold;
        font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;   
    h4{
        font-size:1.3125em;
        line-height:1.25em;
        letter-spacing:.02em;
        color:#00274c;
        font-weight:normal;
        font-family:Verdana, sans-serif;   
    h5{
        font-size:1.3125em;
        line-height:1.25em;
        letter-spacing:.02em;
        color:#00274c;
        font-weight: bold;
        font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;   
    /* ==|== navigation styles ====================================================== */
    /* Custom Nav */
    #navigation{
        margin:10px 20px 5px 20px;
        width:775px;
    #headerlink a:link { color: #666;}
    #headerlink a:visited { color: #666;}   
    #headerlink a:hover { color: #00274C;}   
    #headerlink a:active { color: #00274C;}   
    #headerlink li{
        font: .625em "Arial Narrow", sans-serif;
        display: inline;
        text-decoration: none;
        list-style-image:url(../images/blue_bullet.gif);
        letter-spacing:.08em;
    #headerlink a{
        text-decoration: none;
    #headerlink {
        padding: 2px 135px 0px 0px;
        float: right;
    .new {
        text-align:right;
        font: bold 1.175em "Arial Narrow", sans-serif;
        color:#8f9d4e;
        display:inline;
    #header {
        margin: 15px auto 0 auto;
        width:775px;
    #logoregion {
        width:775px;
        height: 91px;
        background:url(../images/header_small.gif) no-repeat 0 0;
    #contact{
        font: bold .75em/1.35em sans-serif;
        color: #919194;
        padding: 10px 135px 0 0px;
        float: right;
        text-align:right;
    .nav-border-right{
        border-right: 1px solid #6699cc;
    #logo {
        padding: 32px 0 0px 8px;
        float: left;
    #mainnav {
        width: 100%; width: 775px;
        height: 28px;
    .navigation-text{
        text-align: center;
        font-weight:bold;
        font-size:.75em;
        font-family: sans-serif;
        letter-spacing:.01em;
        padding-top:2px;}
    .navigation-controls {width: 100%;}
    .navigation-controls li {margin: 0 0 0 0px; float:left; display: inline-block; zoom: 1; *display: inline; list-style:none;}
    .navigation-controls li:first-child {margin: 0;}
    .navigation-controls li a {color: #00274c; text-align:center; width: 129px; height: 28px; display: block; background: url(../img/main_navigation_tab.gif) no-repeat 0 0; cursor: pointer; text-decoration:none;}
    .navigation-controls li a:hover {background-position: 0 -28px; color: #00274c; }
    .navigation-controls li a.active {background-position: 0 -28px; color: #00274c;  cursor: default; }
    #nav a:link { color: #000000;}
    #nav a:visited { color: #00274C;}   
    #nav a:hover { color: #919194;}   
    #nav a:active { color: #919194;}   
    #nav li{
        list-style-type: none;
        display: inline;
    div#nav a{
    float: left;
    text-decoration:none;
    padding-top: 2px;
    padding-right: 15px;
    /* ==|== slideshow styles ====================================================== */
    #slideshow {width: 100%; width: 775px; margin: 0 16px; }
    #slideone{
        width:60%;}
    .gold{
        color:#d79b00;}
    .white{
        color:#fff;}
    .underline{
        text-decoration:underline;}
    /* ==|== main styles =========================================================== */
    /* ==|== main content column styles ======================================================= */
    #main{
        background:url(../img/body_bg.jpg) no-repeat 0 0;
        width: 775px;
        height: 885px;
        display:inline-block;
        margin-top: 90px;
        padding: 30px 20px 0px 20px;
        background:url(../img/body_bg.jpg) no-repeat 0 0;
        width: 795px;
        display:inline-block;
        margin-top: 90px;
        padding: 30px 0px 0px 0px;
    #maincontent{
        height: 885px;
        padding: 0px 20px;
    /* ==|== banner styles ====================================================== */
    #banner{
        font-size:1.3125em;
        line-height:1.25em;
        letter-spacing:.02em;
        font-weight: bold;
        font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;
        height: 70px;
        width: 755px;
        margin: 0px 0px 0px -10px;
        padding: 0px 20px 20px 20px;
        -moz-border-radius-topleft: 2px;
        -moz-border-radius-topright: 2px;
        -webkit-border-top-left-radius: 2px;
        -webkit-border-top-right-radius: 2px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        -khtml-border-top-left-radius: 2px;
        -khtml-border-top-right-radius: 2px;
        background-color: #496793;
        background-image: url(../img/banner_bg.gif);
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#496793), to(#2c5079));
        background-image: -webkit-linear-gradient(top, #496793, #2c5079);
        background-image:    -moz-linear-gradient(top, #496793, #2c5079);
        background-image:     -ms-linear-gradient(top, #496793, #2c5079);
        background-image:      -o-linear-gradient(top, #496793, #2c5079);
    #leftbanner{
        float: left;
        padding-top:20px;}
    .bluedropshadow {
        color:#00274c;
        text-align:left;
        text-shadow: 1px 1px 1px #6882a4;}
    #bannerdivision{
        float: left;
        padding: 16px 20px 0 30px;}
    #rightbanner{
        float: right;
        padding-top:20px;
    #emailbutton{
        float: left;
        padding: 5px 0px 0px 0px;
    #or{
        float: left;
        padding: 13px 25px 10px 20px;}
    #callus{
        color:#ffffff;
        width: 180px;
        text-align:right;
        text-shadow: 1px 1px 1px #00274c;
        float: right;}
    #bannerbottom{
        height: 20px;
        background:url(../img/banner_bottom.jpg) no-repeat 0 0;
        width: 795px;
        margin: 0px 0px 0px -10px;
    /* ==|== left column styles ======================================================= */
    #leftcol{
        float: left;
        width: 485px;
    #introduction{
        padding: 15px;
        margin: 10px 30px 30px 30px;
        width: 390px;
        background-color:#FFFFFF;
        border: 1px solid #ededed;}
    #twitterfeed{
        text-align:right;
        margin: 30px;
        width: 415px;
    #twitterlogo{
        text-align:left;
        padding:37px 0 0 160px;
        height: 78px;
        background:url(../img/mpay_twitter_bird.png) no-repeat 0 0;
    .tweet {
        padding: 1px 0px 1px 0px;
        margin: 7px 0;
        text-align:left;
        font-family: Verdana, sans-serif;
        font-size:.75em;
        line-height:1.75em;
    .timestamp {
        text-align:right;
        font-weight: normal;
        color:#8f9d4e;
    .viewall {
        padding: 12px 0 0 0;
    /* ==|== right column styles ====================================================== */
    #rightcol{
        float: right;
        width: 290px;
    #mediacenter{
        margin: 10px 30px 50px 30px;
    #medialinks{
        padding: 10px 0 0 0;
    .mediaicons{
        vertical-align:middle;
        padding: 0px 10px 0 0;
    .medialinks{
        vertical-align:middle;
        padding: 10px 0 0 0;
    #viewall {
        padding: 12px 0 0 0;
    #affandawards{
        margin: 50px 5px 23px 14px;
    #affandawardstitle{
        margin: 0px 25px 0px 16px;
    #affandawardsframe{
        margin: 20px 0 0 0;
        padding: 27px 40px 50px 29px;
        background:url(../img/flash_bg.png) no-repeat 0 0;
    #socialmedia{
        margin: 23px 30px 30px 30px;
    #reachout{
        float:left;
        font-size:1.875em;
        line-height:1.25em;
        color:#8f9d4e;
        font-weight:bold;
        font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;   
    #socialarrow{
        float: right;
        padding: 20px 0 0 0;
    #socialicons{
        float: left;
        padding: 15px 0 0 0;
    .socialmediaicons{
        padding: 0 5px 0 0;
    /* ==|== footer styles =

Maybe you are looking for