SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 42 of 42
  1. #26
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    *{margin:0;padding:0;}
    #HeaderMain
    {
    width: 910px;
    height: 167px;
    background:blue;
    float: left;
    }
    
    #MainContainer
    {
    background: url(/content/images/site/background.jpg) no-repeat center top ;
    margin: 0px auto 0px auto;
    width: 930px;
    background:green;
    overflow:hidden;
    }
    
    #MainContent
    {
    width: 929px;
    margin: 0px 0px 10px 0px;
    min-height: 170px;
    overflow: hidden;
    background-color: red;
    border: 1px solid black;
    }
    
    #SubHeaderMain
    {
    float: left;
    height: 35px;
    width: 910px;
    background:purple;
    }
    </style>
    </head>
    <body>
    <div id="MainContainer">
    
    	<div id="HeaderMain">HeaderMain
    			<div id="HeaderContainer"></div>
    	</div>
    
    	<div id="SubHeaderMain">SubHeaderMain</div>
    
    	<div id="MainContent">
    		<div id="FooterMain"></div>
    	</div>
    </div>
                
    </body>
    </html>
    Added overflow:hidden; to #MainContainer and it worked...just added colors soI could see too.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  2. #27
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    /* ========================================================================================
    NOTE: This stylesheet is only for styles specifically for the Pmall Website
    Multiple stylesheets should be used to separate out concerns and make
    it easier to manage and maintain our .CSS overall for the site
    ==========================================================================================*/


    /* CLEAR STYLES
    =====================================================================*/

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, 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&#37;;
    vertical-align: baseline;
    background: transparent;
    font-family: Helvetica, Arial, sans-serif;
    }

    * {
    padding:0;
    margin:0;
    }



    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }

    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }

    /* remember to highlight inserts somehow! */
    ins {
    text-decoration: none;
    }
    del {
    text-decoration: line-through;
    }

    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    .clearfix:after, .colrow:after
    {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }

    .clearfix, .colrow {display:inline-block;}
    /* Hide from IE Mac \*/
    .clearfix, .colrow {display:block;}
    /* End hide from IE Mac */

    /* Fixes gaps between images issue - Dave */
    img{display:block;}

    /*
    =====================================================================
    STYLES
    =====================================================================
    */



    /* Global Elements
    =====================================================================*/

    body
    {
    background-color: #FAF6F3;
    background-image: url(/content/images/site/backgroundfill.jpg);
    background-repeat: repeat-x;
    margin: 0 auto 0 auto;
    color: #666666;
    font-size: 11px;
    }

    input[type="text"]
    {
    height: 25px;
    vertical-align: middle;
    border: 1px solid #EAE8E1;
    background: transparent url(/content/images/site/textboxgradient.png);
    background-repeat: repeat-x;
    }

    input[type="radio"]
    {
    vertical-align: middle;
    }



    /* Global IDs & Classes
    =====================================================================*/

    #HeaderMain
    {
    width: 970px;
    height: 167px;
    float: left;
    }

    #MainContainer
    {
    background: url(/content/images/site/background.jpg) no-repeat center top ;
    margin: 0px auto 0px auto;
    width: 990px;
    }

    #MainContent
    {
    width: 970px;
    margin: 0px 0px 0px 0px;
    overflow: hidden;
    background-color: #fff;
    }

    #SubHeaderMain
    {
    float: left;
    height: 35px;
    width: 970px;
    }

    /* ----- Web Form related styles ----- */

    /* group form elements & also creates rows
    rather than "hacks" which would be: <br> or use of empty divs */
    fieldset
    {
    background: url(/content/images/site/horline.jpg) no-repeat 0 100%;
    background-position: bottom;
    margin: 5px 0px 0px 0px;
    }

    .formLabel
    {
    font-size: 14px;
    margin: 10px 37px 0px 0px;
    vertical-align:text-top;
    text-align: right;
    width: 220px;
    float: left;
    }

    /* for text next to radiobuttons, checkboxes, etc.
    that require a diff color */
    .fieldInlineLabel
    {
    color: #000;
    vertical-align: middle;
    }

    .formField
    {
    margin: 10px 10px 0px 0px;
    float: left;
    }

    .rowSeperator
    {
    background-image: url(/content/images/site/horline.jpg) no-repeat;
    }

    /* ----- Error related styles ----- */

    /* includes * next to form fields */
    .requiredText
    {
    color: #7F1517;
    text-align: right;
    margin: 10px 0px 0px 0px;
    float: left;
    }


    /* Product - Main Page
    =====================================================================*/

    #LefNavMain
    {
    float: left;
    width: 180px;
    margin-right: 8px;
    min-height: 100%;
    /*border: 1px solid green;*/
    }

    #ProductMainContent
    {
    float:left;
    width:625px;
    margin-right: 8px;
    height:344px;
    /*border: 1px solid green;*/
    }

    #ProductRightNav
    {
    float: right;
    height: 434px;
    width: 160px;
    margin: 0px 0px 10px 0px;
    padding-bottom: 1px;
    margin-top: -1px;
    /*border: 1px solid green;*/
    }

    #ProductSubAreaMain
    {
    width: 625px;
    height: 88px;
    margin: 0px 10px 0px 0px;
    float: left;
    }


    /* aligns the tabs horizontally & flush bottom */

    #tabs
    {
    display: inline-block;
    }

    #tabs li a
    {
    float: left;
    display: inline;
    vertical-align: bottom;
    }

    #tabs li
    {
    float: left;
    display: inline;
    vertical-align: bottom;
    }

    /* end horizontal alignment */

    #TabsMain
    {
    background: url(/content/images/product/sides.gif);
    background-repeat: repeat-y;
    width: 792px;
    float:left;
    }

    #TabsMainBottom
    {
    background: url(/content/images/product/bottom.gif) no-repeat;
    height: 24px;
    width: 782px;
    float: left;
    }

    #ButtonCrossSellMain
    {
    width: 775px;
    float: left;
    height: 178px;
    }

    /* Personalization Form */

    #PersonalizationTabContent
    {
    width: 740px;
    margin: 0px auto 0px auto;
    text-align: center;
    }

    #PersonalizationForm
    {

    display: inline;
    width: 739px;
    float: left;
    }

    <body>

    <div id="MainContainer">

    <!-- Header -->
    <div id="HeaderMain">
    HeaderMain
    <div id="HeaderContainer">

    </div>

    </div>

    <!-- TopNav Bucket -->
    <div id="SubHeaderMain">
    SubHeaderMain
    <!-- user control -->
    </div>

    <!-- Main Content -->
    <div id="MainContent">


    <div id="LefNavMain">LeftNavMain</div>
    <div id="ProductMainContent">

    </div>
    <div id="ProductRightNav">
    RightNav
    </div>
    <div id="ProductSubAreaMain">
    SubAreaMain

    </div>
    <div id="tabs">
    <ul class="tabImages">
    <li><a href="#PTabContent"><span><img id="imgTab" width="262" height="67" src="/Content/Images/Product/tabA_1.gif" /></span></a></li>
    <li><a href="#OContent"><span><img id="imgOTab" width="304" height="67" src="/Content/Images/Product/tabA_2.gif" /></span></a></li>
    <li><a href="#RContent"><span><img id="imgRTab" width="216" height="67" src="/Content/Images/Product/tabA_3.gif" /><img id="imgRTab_long" width="304" height="67" src="/Content/Images/Product/tabsB_2.gif" /></span></a><img id="imgTopRightTabFiller" width="216" height="67" src="/Content/Images/Product/tabsE_3.gif" /></li>
    </ul>
    <div id="TabsMain">
    <div id="PersonalizationTabContent">


    <div id="PersonalizationForm">
    <form action="/Home/HandleForm" method="post">
    <fieldset>

    <div class="formLabel"><div class="requiredText">*</div>Background Color</div>
    <div class="formField"><input id="rbBackgroundColorWhite" name="rbBackgroundColorWhite" type="radio" value="0" /><label class="fieldInlineLabel" for="">White</label></div>
    <div class="formField"><input id="rbBackgroundColorWhite" name="rbBackgroundColorWhite" type="radio" value="0" /><label class="fieldInlineLabel" for="">Black</label></div>
    </fieldset>

    <div class="rowSeperator"></div>
    <fieldset>
    <div class="requiredText">*</div>
    <div class="formLabel">B's First Name</div>
    <div class="formField"><input id="BFirstName" name="BFirstName" type="text" value="" width="100px" /></div>
    </fieldset>
    <fieldset>
    <div class="requiredText">*</div>

    <div class="formLabel">B's Ni Name</div>
    <div class="formField"><input id="BrideNickName" name="BrNName" type="text" value="" width="100px" /></div>
    </fieldset>
    <fieldset>
    <div class="requiredText">*</div>
    <div class="formLabel">Gr'ss Name</div>
    <div class="formField"><input id="GroomName" name="GName" type="text" value="" width="100px" /></div>

    </fieldset>
    <fieldset>
    <div class="requiredText">*</div>
    <div class="formLabel">Groom's Nick Name</div>
    <div class="formField"><input id="BrideNickName" name="BNickName" type="text" value="" width="100px" /></div>
    </fieldset>
    <fieldset>
    <div class="requiredText">*</div>

    <div class="formLabel">Backside Personalizatoin Line 3</div>
    <div class="formField"><input id="Pers3" name="Pers3" type="text" value="" width="100px" /></div>
    </fieldset>
    <fieldset>
    <div class="requiredText">*</div>
    <div class="formLabel">Couple's Last Name - Plural</div>
    <div class="formField"><input id="Pers4" name="Pers4" type="text" value="" width="100px" /></div>

    </fieldset>
    <fieldset>
    <div class="requiredText">*</div>
    <div class="formLabel">Wedding Date</div>
    <div class="formField"><input id="WeddingDate" name="WeddingDate" type="text" value="" width="100px" /></div>
    </fieldset>
    </form>
    </div>

    </div>
    <div id="OthersContent">


    </div>
    <div id="ReContent">



    </div>
    </div>

    </div>
    <div id="TabsMainBottom"></div>
    <div id="ButtonCrossSellMain"></div>



    <!-- Footer -->
    <div id="FooterMain"></div>

    </div>
    </div>


    </body>

  3. #28
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see though you changed the width to be 929 on MainContent? we need 970.

  4. #29
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Thank you for that..don't see it floating though..try my fix.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  5. #30
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I only changed that so I could fit it without scrollin.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  6. #31
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the 970 allowed this not to scroll. Let me review what you did on your side to compare.

  7. #32
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good God. Ok, I needed overflow: hidden on both. Not sure I understand that.

  8. #33
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    So is it working now?

    My resolution is very low so 970 caused a horizontal scrollbar. I just made it easier on myself.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  9. #34
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove the float from #HeaderMain and #SubHeaderMain. As #MainContent has the overflow set and the floats are not cleared, it will avoid the floats - the floats are not required, so can go.

  10. #35
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    geez. now, the tabs show up out of place at the top:

    before we ventured through this, the tabs were below:

    http://www.codezest.com/post/screenshot_1024.png

    now it jumped right to the top like it shoved all the divs out of the way inside MainContent:

    http://www.codezest.com/post/site3.png

    Again, my updated styles now:


    /* ========================================================================================
    NOTE: This stylesheet is only for styles specifically for the Pmall Website
    Multiple stylesheets should be used to separate out concerns and make
    it easier to manage and maintain our .CSS overall for the site
    ==========================================================================================*/


    /* CLEAR STYLES
    =====================================================================*/

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, 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&#37;;
    vertical-align: baseline;
    background: transparent;
    font-family: Helvetica, Arial, sans-serif;
    }

    * {
    padding:0;
    margin:0;
    }



    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }

    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }

    /* remember to highlight inserts somehow! */
    ins {
    text-decoration: none;
    }
    del {
    text-decoration: line-through;
    }

    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    .clearfix:after, .colrow:after
    {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }

    .clearfix, .colrow {display:inline-block;}
    /* Hide from IE Mac \*/
    .clearfix, .colrow {display:block;}
    /* End hide from IE Mac */

    /* Fixes gaps between images issue - Dave */
    img{display:block;}

    /*
    =====================================================================
    STYLES
    =====================================================================
    */



    /* Global Elements
    =====================================================================*/
    html, body
    {
    height: 100%;
    }

    body
    {
    background-color: #FAF6F3;
    background-image: url(/content/images/site/backgroundfill.jpg);
    background-repeat: repeat-x;
    margin: 0 auto 0 auto;
    color: #666666;
    font-size: 11px;
    }

    input[type="text"]
    {
    height: 25px;
    vertical-align: middle;
    border: 1px solid #EAE8E1;
    background: transparent url(/content/images/site/textboxgradient.png);
    background-repeat: repeat-x;
    }

    input[type="radio"]
    {
    vertical-align: middle;
    }



    /* Global IDs & Classes
    =====================================================================*/

    #HeaderMain
    {
    width: 982px;
    height: 167px;
    }

    #SubHeaderMain
    {
    height: 35px;
    width: 980px;
    }

    #MainContainer
    {
    background: url(/content/images/site/background.jpg) no-repeat center top ;
    margin: 0px auto 0px auto;
    background-color: #fff;
    width: 990px;
    }

    #MainContent
    {
    width: 970px;
    margin: 0px 0px 0px 0px;
    height: 1000px;
    }



    /* ----- Web Form related styles ----- */

    /* group form elements & also creates rows
    rather than "hacks" which would be: <br> or use of empty divs */
    fieldset
    {
    background: url(/content/images/site/horline.jpg) no-repeat 0 100%;
    background-position: bottom;
    margin: 5px 0px 0px 0px;
    }

    .formLabel
    {
    font-size: 14px;
    margin: 10px 37px 0px 0px;
    vertical-align:text-top;
    text-align: right;
    width: 220px;
    float: left;
    }

    /* for text next to radiobuttons, checkboxes, etc.
    that require a diff color */
    .fieldInlineLabel
    {
    color: #000;
    vertical-align: middle;
    }

    .formField
    {
    margin: 10px 10px 0px 0px;
    float: left;
    }

    .rowSeperator
    {
    background-image: url(/content/images/site/horline.jpg) no-repeat;
    }

    /* ----- Error related styles ----- */

    /* includes * next to form fields */
    .requiredText
    {
    color: #7F1517;
    text-align: right;
    margin: 10px 0px 0px 0px;
    float: left;
    }


    /* Product - Main Page
    =====================================================================*/

    #LefNavMain
    {
    float: left;
    width: 180px;
    margin-right: 8px;
    min-height: 100%;
    /*border: 1px solid green;*/
    }

    #ProductMainContent
    {
    float:left;
    width:625px;
    margin-right: 8px;
    height:344px;
    /*border: 1px solid green;*/
    }

    #ProductRightNav
    {
    float: right;
    height: 434px;
    width: 160px;
    margin: 0px 0px 10px 0px;
    padding-bottom: 1px;
    margin-top: -1px;
    /*border: 1px solid green;*/
    }

    #ProductSubAreaMain
    {
    width: 625px;
    height: 88px;
    margin: 0px 10px 0px 0px;
    float: left;
    }


    /* aligns the tabs horizontally & flush bottom */

    #tabs
    {
    display: inline-block;
    }

    #tabs li a
    {
    float: left;
    display: inline;
    vertical-align: bottom;
    }

    #tabs li
    {
    float: left;
    display: inline;
    vertical-align: bottom;
    }

    /* end horizontal alignment */

    #TabsMain
    {
    background: url(/content/images/product/sides.gif);
    background-repeat: repeat-y;
    width: 792px;
    float:left;
    }

    #TabsMainBottom
    {
    background: url(/content/images/product/bottom.gif) no-repeat;
    height: 24px;
    width: 782px;
    float: left;
    }

    #ButtonCrossSellMain
    {
    width: 775px;
    float: left;
    height: 178px;
    }


    #PersonalizationTabContent
    {
    width: 740px;
    margin: 0px auto 0px auto;
    text-align: center;
    }

    #PersonalizationForm
    {

    display: inline;
    width: 739px;
    float: left;
    }

  11. #36
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Let me ask you this-is there any reason you need the floats there? Perhaps for the tabs?
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  12. #37
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the floats provided that structure you see in my screenshot that I've had all along...in the 1024 screen shot.

    The floats for the tabs are needed to keep the tab images <li>s horizontally aligned.

  13. #38
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Then put that back in and let's work out the other issues. Be specific / provide a SS (and code)
    Off Topic:

    Sorry this is being such a hassle-we never havethis much issues
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  14. #39
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, 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;
    font-family: Helvetica, Arial, sans-serif;
    }
    
    * {
    padding:0;
    margin:0;
    }
    
    
    
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    
    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }
    
    /* remember to highlight inserts somehow! */
    ins {
    text-decoration: none;
    }
    del {
    text-decoration: line-through;
    }
    
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    
    .clearfix:after, .colrow:after 
    {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    
    .clearfix, .colrow {display:inline-block;}
    /* Hide from IE Mac \*/
    .clearfix, .colrow {display:block;}
    /* End hide from IE Mac */
    
    /* Fixes gaps between images issue - Dave */
    img{display:block;}
    
    /* 
    =====================================================================
    STYLES
    =====================================================================
    */
    
    
    
    /* Global Elements
    =====================================================================*/
    html, body
    {
    height: 100%; 
    }
    
    body
    {
    background-color: #FAF6F3;
    background-image: url(/content/images/site/backgroundfill.jpg);
    background-repeat: repeat-x;
    margin: 0 auto 0 auto;
    color: #666666;
    font-size: 11px;
    }
    
    input[type="text"]
    {
    height: 25px;
    vertical-align: middle;
    border: 1px solid #EAE8E1;
    background: transparent url(/content/images/site/textboxgradient.png);
    background-repeat: repeat-x;
    }
    
    input[type="radio"]
    {
    vertical-align: middle;
    }
    
    
    
    /* Global IDs & Classes
    =====================================================================*/
    
    #HeaderMain
    {
    width: 982px;
    height: 167px;
    background:red;}
    
    #SubHeaderMain
    {
    height: 35px;
    width: 980px;background:green;
    }
    
    #MainContainer
    {
    background: url(/content/images/site/background.jpg) no-repeat center top ;
    margin: 0px auto 0px auto;
    background-color: gray;
    width: 990px;
    }
    
    #MainContent
    {
    width: 970px;
    margin: 0px 0px 0px 0px;
    overflow:hidden;
    min-height:1000px;
    background:blue;
    }
    
    
    
    /* ----- Web Form related styles ----- */
    
    /* group form elements & also creates rows
    rather than "hacks" which would be: <br> or use of empty divs */
    fieldset
    {
    background: url(/content/images/site/horline.jpg) no-repeat 0 100%;
    background-position: bottom;
    margin: 5px 0px 0px 0px;
    }
    
    .formLabel
    {
    font-size: 14px;
    margin: 10px 37px 0px 0px;
    vertical-align:text-top;
    text-align: right;
    width: 220px;
    float: left;
    }
    
    /* for text next to radiobuttons, checkboxes, etc. 
    that require a diff color */
    .fieldInlineLabel
    {
    color: #000;
    vertical-align: middle; 
    }
    
    .formField
    { 
    margin: 10px 10px 0px 0px;
    float: left;
    }
    
    .rowSeperator
    {
    background-image: url(/content/images/site/horline.jpg) no-repeat;
    }
    
    /* ----- Error related styles ----- */
    
    /* includes * next to form fields */
    .requiredText
    {
    color: #7F1517;
    text-align: right;
    margin: 10px 0px 0px 0px;
    float: left;
    }
    
    
    /* Product - Main Page
    =====================================================================*/
    
    #LefNavMain
    {
    float: left;
    width: 180px;
    margin-right: 8px;
    min-height: 100%;
    background:black;
    /*border: 1px solid green;*/
    }
    
    #ProductMainContent
    {
    float:left;
    width:625px;
    margin-right: 8px;
    height:344px;
    background:white;
    /*border: 1px solid green;*/
    }
    
    #ProductRightNav
    {
    float: right;
    background:purple;
    height: 434px;
    width: 160px;
    margin: 0px 0px 10px 0px;
    padding-bottom: 1px;
    margin-top: -1px;
    /*border: 1px solid green;*/
    }
    
    #ProductSubAreaMain
    {
    width: 625px;
    height: 88px;
    margin: 0px 10px 0px 0px;
    background:yellow;
    float: left;
    }
    
    
    /* aligns the tabs horizontally & flush bottom */
    
    #tabs
    {
    display: inline-block;
    }
    
    #tabs li a
    {
    float: left;
    display: inline;
    vertical-align: bottom;
    }
    
    #tabs li
    {
    float: left;
    display: inline;
    vertical-align: bottom;
    }
    
    /* end horizontal alignment */
    
    #TabsMain
    {
    background: url(/content/images/product/sides.gif);
    background-repeat: repeat-y;
    width: 792px;
    float:left;
    }
    
    #TabsMainBottom
    {
    background: url(/content/images/product/bottom.gif) no-repeat;
    height: 24px;
    width: 782px;
    float: left;
    }
    
    #ButtonCrossSellMain
    {
    width: 775px;
    float: left;
    height: 178px;
    }
    
    
    #PersonalizationTabContent
    {
    width: 740px;
    margin: 0px auto 0px auto;
    text-align: center;
    }
    
    #PersonalizationForm
    {
    
    display: inline;
    width: 739px; 
    float: left;
    }
    </style>
    </head>
    <body>
    <div id="MainContainer">
    
    <!-- Header -->
    <div id="HeaderMain">
    HeaderMain
    <div id="HeaderContainer">
    
    </div>
    
    </div>
    
    <!-- TopNav Bucket -->
    <div id="SubHeaderMain">
    SubHeaderMain
    <!-- user control -->
    </div>
    
    <!-- Main Content -->
    <div id="MainContent">
    
    
    <div id="LefNavMain">LeftNavMain</div>
    <div id="ProductMainContent">
    
    </div>
    <div id="ProductRightNav"> 
    RightNav
    </div>
    <div id="ProductSubAreaMain">
    SubAreaMain
    
    </div>
    <div id="tabs">
    <ul class="tabImages">
    <li><a href="#PTabContent"><span><img id="imgTab" width="262" height="67" src="/Content/Images/Product/tabA_1.gif" /></span></a></li>
    <li><a href="#OContent"><span><img id="imgOTab" width="304" height="67" src="/Content/Images/Product/tabA_2.gif" /></span></a></li>
    <li><a href="#RContent"><span><img id="imgRTab" width="216" height="67" src="/Content/Images/Product/tabA_3.gif" /><img id="imgRTab_long" width="304" height="67" src="/Content/Images/Product/tabsB_2.gif" /></span></a><img id="imgTopRightTabFiller" width="216" height="67" src="/Content/Images/Product/tabsE_3.gif" /></li>
    </ul>
    <div id="TabsMain">
    <div id="PersonalizationTabContent">
    
    
    <div id="PersonalizationForm">
    <form action="/Home/HandleForm" method="post">
    <fieldset>
    
    <div class="formLabel"><div class="requiredText">*</div>Background Color</div>
    <div class="formField"><input id="rbBackgroundColorWhite" name="rbBackgroundColorWhite" type="radio" value="0" /><label class="fieldInlineLabel" for="">White</label></div>
    <div class="formField"><input id="rbBackgroundColorWhite" name="rbBackgroundColorWhite" type="radio" value="0" /><label class="fieldInlineLabel" for="">Black</label></div>
    </fieldset>
    
    <div class="rowSeperator"></div>
    <fieldset>
    <div class="requiredText">*</div>
    <div class="formLabel">B's First Name</div>
    <div class="formField"><input id="BFirstName" name="BFirstName" type="text" value="" width="100px" /></div>
    </fieldset>
    <fieldset>
    <div class="requiredText">*</div>
    
    <div class="formLabel">B's Ni Name</div>
    <div class="formField"><input id="BrideNickName" name="BrNName" type="text" value="" width="100px" /></div>
    </fieldset>
    <fieldset>
    <div class="requiredText">*</div>
    <div class="formLabel">Gr'ss Name</div>
    <div class="formField"><input id="GroomName" name="GName" type="text" value="" width="100px" /></div>
    
    </fieldset>
    <fieldset>
    <div class="requiredText">*</div>
    <div class="formLabel">Groom's Nick Name</div>
    <div class="formField"><input id="BrideNickName" name="BNickName" type="text" value="" width="100px" /></div>
    </fieldset>
    <fieldset>
    <div class="requiredText">*</div>
    
    <div class="formLabel">Backside Personalizatoin Line 3</div>
    <div class="formField"><input id="Pers3" name="Pers3" type="text" value="" width="100px" /></div>
    </fieldset>
    <fieldset>
    <div class="requiredText">*</div>
    <div class="formLabel">Couple's Last Name - Plural</div>
    <div class="formField"><input id="Pers4" name="Pers4" type="text" value="" width="100px" /></div>
    
    </fieldset>
    <fieldset>
    <div class="requiredText">*</div>
    <div class="formLabel">Wedding Date</div>
    <div class="formField"><input id="WeddingDate" name="WeddingDate" type="text" value="" width="100px" /></div>
    </fieldset>
    </form>
    </div>
    
    </div>
    <div id="OthersContent">
    
    
    </div>
    <div id="ReContent">
    
    
    
    </div>
    </div>
    
    </div>
    <div id="TabsMainBottom"></div>
    <div id="ButtonCrossSellMain"></div>
    
    
    
    <!-- Footer -->
    <div id="FooterMain"></div>
    
    </div>
    </div>
    
    
    </body>   
    </body>
    </html>
    I can't get to the imgaes, however I do not see the tabs at the bottom.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  15. #40
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let me play around with this for a while. I'll come back probably with a new post/thred just to keep it clean.

  16. #41
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #TabsMain also appears to be 10px too wide.

  17. #42
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >>>#TabsMain also appears to be 10px too wide

    good catch


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •