Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    May 2011
    Location
    Lexington, KY
    Posts
    1
    Member #
    27682
    Hello all, I am having some issues with a new site design. I did some very simple slicing and am having trouble with the vertical alignment of some layout elements.

    This should show the majority of my difficulties:
    http://www.ukwakeboardclub.com/Resou...0Wake/BugDemo/
    I need the left column to pull with the content cell as it grows with dynamically sized text inputs.

    Additionally the Footer should always align below everything. The left and right borders should grow with the size of the page. I have never had issues like this with other designs, Im not exactly sure what I am missing.

    The files for the site are located at:
    http://www.ukwakeboardclub.com/Resources/UK%20Wake

    I have also submitted the code here on the site!

    THank you!

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <LINK REL=StyleSheet HREF="frame.css" TYPE="text/css">
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>UK Wakeboard Club</title>
    
    </head>
    
    <body id="BodyColor">
    
    <div id="Wrapper">
    
    <div id="Left_Border"></div>
        <div id="Mid_Wrap">
            <div id="Mid_Row1">
                <div id="Block_2"></div>
                <div id="Block_3"></div>
                <div id="Block_5"></div>
    
            </div>
            <div id="Mid_Row2">
              <div id="Block_6"></div>
              <div id="Block_7"></div>
              <div id="Block_9"></div>
            </div>
          <div id="Mid_Row3">
    
    <!----------------------------------------------
    Left Content Bar
    ------------------------------------------------>
                <div id="Block_8">
                    <Center>
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
    
                    </Center>
                </div>
    <!----------------------------------------------
    Center Conent
    ------------------------------------------------>
                <div id="Block_10">
                    <Center>
    
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
                        Test Test Test
                        <br /><br />
    
                    </Center>
                </div>
            </div>
            <div align="center" id="Foot">
                <div id="Block_11"></div>
                <div id="Block_12"></div>
            </div>
        </div>
        <div id="Right_Border"></div>
    
    </div>
    
    </body>
    </html>

    HTML Code:
    @charset "utf-8";
    /* CSS Document */
    
    #BodyColor{
        background-color:#015daa;
    }
    
    #Wrapper{
        align: 0 auto;
        table-layout:fixed;
        width: 1152px;
        min-height:864px;
        margin-left:auto;
        margin-right:auto;
    }
    
    #Left_Border{
        position:relative;
        float:left;
        width:14px;
        min-height: 864px;
        background-image:url(images/wake_01.gif);
        background-repeat:repeat-y;
    }
    
    #Right_Border{
        position:relative;
        width: 12px;
        float:left;
        min-height:864px;
        background-image:url(images/wake_04.gif);
    }
    
    #Mid_Wrap{
        position:relative;
        float:left;
        width:1126px;
        min-height:864px;
    }
     
    #Mid_Row1{
        position:relative;
        width:1126px;
        float:left;
    }
     
    #Block_2{
        position:absolute;
        left:0;
        width: 613px;
        height: 215px;
        background-image:url(images/wake_02.gif);
    }
    #Block_3{
        position:absolute;
        right:0;
        width: 513px;
        height: 172px;
        background-image:url(images/wake_03.gif);
    }
    #Block_5{
        position:absolute;
        right:0;
        top:172px;
        width:513px;
        height: 203px;
        background-image:url(images/wake_05.gif);
        z-index:0;
    }
    
    #Mid_Row2{
        margin-top:215px;
        width:1126px;
    }
    
    #Block_6{
        position:absolute;
        left:0;
        width:343px;
        height: 91px;
        background-image:url(images/wake_06.gif);
    }
    #Block_7{
        position:absolute;
        left:343px;
        width:270px;
        height: 259px;
        background-image:url(images/wake_07.gif);
    }
    #Block_9{
        position:absolute;
        right:0;
        margin-top:160px;
        width:513px;
        height: 99px;
        background-image:url(images/wake_09.gif);
    }
     
    #Mid_Row3{
        position:relative;
        margin-top:306px;
        width:1126px;
    }
    #Block_8{
        position:absolute;
        left:0;
        width:343px;
        min-height: 537px;
        background-image:url(images/wake_08.gif);
        background-repeat:repeat-y;
    }
    #Block_10{
        position:absolute;
        right:0;
        width:783px;
        margin-top:168px;
        min-height: 369px;
        background-image:url(images/wake_10.gif);
        background-repeat:repeat-y;
    }
    
    #Foot{
        position:relative;
        width:1126px;
        margin-top:839px;
    }
    #Block_11{
        position:absolute;
        left:0;
        width:343px;
        height: 25px;
        background-image:url(images/wake_11.gif);
    }
    #Block_12{
        position:absolute;
        right:0;
        width:783px;
        height: 25px;
        background-image:url(images/wake_12.gif);
    }

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:03 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com