SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div alignment - Divs all disaligned again

    After adding I think the overflow: hidden or whatever else, I now have gaps in my buckets.

    I can't figure out how to get them to "snap back into place".


    /* 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%;
    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: 982px;
    height: 167px;
    float: left;
    }

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

    #MainContent
    {
    width: 970px;
    margin: 0px 0px 0px 0px;
    min-height:1000px;
    overflow: hidden;
    }

    #SubHeaderMain
    {
    float: left;
    height: 35px;
    width: 980px;
    border: 1px solid green;
    }

    /* ----- 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/horizline.jpg) no-repeat 0 100%;
    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/horzline.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: 184px;
    margin-right: 8px;
    height: 1100px;
    border: 1px solid green;
    }

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

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

    #ProductSubAreaMain
    {
    width: 625px;
    height: 88px;
    margin: -1px 10px 0px 0px;
    float: left;
    border: 1px solid green;

    }


    /* aligns the tabs horizontally & flush bottom */

    #tabs
    {
    display: inline-block;
    border: 1px solid green;
    }

    #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: 782px;
    float:left;
    border: 1px solid green;
    }

    #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">

    </div>
    <div id="ProductSubAreaMain">

    </div>
    <div id="tabs">

    <ul class="tabImages">
    <li><a href="#PTabContent"><span><img id="imgPTab" 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">

    <!-- Webform to go here -->
    </form>
    </div>

    </div>

    <div id="OthersPersonalizedContent">
    <!-- content to go here later -->
    </div>
    <div id="ReviewsAndRatingsContent">
    <!-- content to go here later -->
    </div>
    </div>
    </div>
    <div id="TabsMainBottom"></div>

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

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

    </div>
    </div>

    </body>
    Last edited by espresso; Apr 9, 2009 at 13:49.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, to "snap" it in place change the width on "#ProductRightNav" to 135px
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    damn it, I tried to make it smaller and it is smaller but I guess not enough. Weird because the outline of the div shows that it's definitely smaller than the width of the mainProduct div

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dude, you are good.

  5. #5
    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)
    Actually, to line up with the background graphic, the widths and margins need a little tweaking, and a few fixes for IE6 are needed :
    Code:
    #MainContent
    {
    width: 970px;
    margin: 0 auto;
    min-height:1000px;
    overflow: hidden;
    }
    * html #MainContent
    {
    height:1000px;
    }
    
    #LefNavMain
    {
    float: left;
    width: 175px;
    margin-right: 8px;
    min-height: 1100px;
    /*border: 1px solid green;*/
    }
    
    * html #LefNavMain
    {
    height: 1100px;
    }
    
    #ProductMainContent
    {
    float:left;
    width:625px;
    height:344px;
    /* no right margin */
    }
    
    #ProductRightNav
    {
    float: right;
    height: 434px;
    width: 150px;
    margin: 0px 0px 10px 0px;
    padding-bottom: 1px;
    margin-top: -1px;
    /*border: 1px solid green;*/
    }

  6. #6
    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)
    And I still don't know why the overflow:hidden is on the #MainContainer div, or why #HeaderMain and #SubHeaderMain are floated - none of these are needed.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    @Centauri,

    If you read the other thread, one he tried removing the float his layout crashed (or so he says)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    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)
    Yes I have been following these threads, and have the whole thing set up locally, including graphics. The top floats did cause a problem at one stage when a hidden overflow was added, and I think the other overflow I mention above overcame the issue, but it and the two floats aren't needed and is working fine locally.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    How did you get the images...did you create them?


    Edit:

    Yea you are right-I can't debug crap because I need the visual effects of the images <_<
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    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)
    Off Topic:

    The main background and body repeat graphics were posted very early on, and the rest I have made from the various stated sizes and screenshots - makes things much easier to see what is happening.


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
  •