Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS Layout issues based on Glish.com

    Hi Folks

    I hope someone can help me here!

    I have a layout that includes several divs based primarily on a layout that I found in http://www.glish.com/css (three columns centred)

    I have adapted this layout to include other layers as well, and everything centres fine apart from some of the latest DIVS I have added: (featboxmycareer, featboxcalendar, featboxplan, featboxlinks)

    The problem is when I resize the window they do not keep the central alignment as the other DIVS do

    They are within another DIV called: contentbottom

    Any suggestions would be great!

    The full code is below (hope I havent pasted in too much)

    Cheers

    Ben








    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html><head><title>Home Lending Academy / Homepage</title>

    <style type="text/css">

    body {
    text-align:center;
    font-family: arial, helvetica, serif;
    font-size: 76%;
    background: #CCCC99
    }


    ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    text-align:center;

    }

    li { /* all list items */
    float: left;
    position: relative;
    width: 7.5em;
    background-color:#000000;
    font-weight: bold;
    color: #ffffff;
    margin-top: 0px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    }

    li ul { /* second-level lists */
    display: none;
    position: absolute;
    top: 1.4em;
    left: 0;
    /* padding-top: 1; */

    }

    li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    top: auto;
    left: auto;
    }

    li:hover ul, li.over ul { /* lists nested under hovered list items */
    display: block;
    }

    /* Link styles for site */


    a {
    text-decoration: none;
    }

    a:link {
    color: #4255AD;
    }

    a:visited {
    color: #996699;
    }

    a:active {
    color: #FF6666;
    }

    a:hover {
    text-decoration: underline;
    }


    /* Link styles for Top Menu Navigation */




    A.navigation {
    COLOR: #FFFFFF; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; FONT-WEIGHT: bold; TEXT-DECORATION: underline
    }

    A.navigation:active {
    COLOR: #FFFFFF; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; FONT-WEIGHT: bold; TEXT-DECORATION: underline
    }

    A.navigation:visited {
    COLOR: #FFFFFF; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; FONT-WEIGHT: bold
    }
    A.navigation:hover {
    COLOR: #FFFFFF; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; FONT-WEIGHT: bold; TEXT-DECORATION: underline
    }


    A.newslink {
    COLOR: #999999; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; FONT-WEIGHT: bold; TEXT-DECORATION: underline
    }
    A.newslink:visited {
    COLOR: #999999; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; FONT-WEIGHT: bold
    }
    A.newslink:hover {
    COLOR: #999999; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; FONT-WEIGHT: bold; TEXT-DECORATION: underline
    }

    p,h1,pre {
    margin:0px 10px 10px 10px;
    }

    h1 {
    font-size:14px;
    padding-top:10px;
    }


    /* Layers for page Layout */

    #frame {
    width:771px;
    margin-right:auto;
    margin-left:auto;
    margin-top:10px;
    padding:0px;
    text-align:left;
    }

    #contentleft {
    width:450px;
    height:264px;
    padding:0px;
    margin:0px;
    float:left;
    background:#fff;
    }

    #contentcenter {
    width:321px;
    padding:0px;
    margin:0px;
    float:left;
    background:#eee;
    }

    #contentheader {
    width:771px;
    padding:0px;
    margin:0px;
    background:#000;
    }

    #navigation {
    width:771px;
    padding:0px;
    margin:0px;
    background:#000;
    }

    #cookietrail {
    width:771px;
    padding:0px;
    margin:0px;
    background:#E7E7CE;
    text-align:right;
    }

    #cookietrail P {
    font-size:12px;
    margin:0px;
    position: relative;
    right: 25px;
    }

    #contentheader h1 {
    font-size:14px;
    padding:10px;
    margin:0px;
    }

    #contentbottom {
    width:771px;
    height:136px;
    padding:0px;
    margin:0px;
    background:#FFFFF7;
    }

    #footer {
    width:771px;
    padding:0px;
    height:20px;
    margin:0px;
    margin-top: 0px;
    background:#E7E7CE;
    }


    #footermain {
    width:771px;
    height:35px;
    padding:0px;
    margin:0px;
    background:#4255AD;
    }

    #footermain P {
    font-size:10px;
    color: #ffffff;
    padding:0px;
    margin:0px;
    text-align:center;
    line-height:-20px;
    }

    #featboxmycareer {
    width:193px;
    height:114px;
    position: absolute;
    top: 401px;
    left: 116px;
    padding:0px;
    margin:0px;
    float:left;
    background:#000000;
    }

    #featboxcalendar {
    width:195px;
    height:114px;
    position: absolute;
    top: 401px;
    left: 309px;
    padding:0px;
    margin:0px;
    float:left;
    background:#4255AD;
    }

    #featboxplan {
    width:193px;
    height:114px;
    position: absolute;
    top: 401px;
    left: 504px;
    float:left;
    padding:0px;
    margin:0px;
    background:#FFFFFF;
    }

    #featboxlinks {
    width:193px;
    height:114px;
    position: absolute;
    top: 401px;
    left: 695px;
    padding:0px;
    margin:0px;
    float:left;
    background:#4255AD;
    }
    </style>


    <script type="text/javascript"><!--//--><![CDATA[//><!--
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace(" over", "");
    }
    }
    }
    }
    }
    window.onload=startList;

    //--><!]]>
    </script>



    </head>

    <body>

    <div id="frame">

    <div id="contentheader"> <img src="images/top_banner.gif" width="771" height="77"></div>

    <div id="navigation">
    <!-- menu tree -->
    <ul id="nav">
    <li><a href="L_D_team.htm" title="L & D Team" class="navigation">L&amp;D Team</a>
    <ul>
    <li><a href="central_team.htm" title="Central Team" class="navigation">Central
    Team</a></li>
    <li><a href="operation_training.htm" title"=Operation Training" class="navigation">Operation
    Training</a></li>
    </ul>
    </li>
    <li><a href="career_advice.htm" title="Career Advice" class="navigation">Career
    Advice</a> </li>
    <li><a href="professional_qual.htm" title="Professional Qual" class="navigation">Prof
    Quals</a></li>
    <li><a href="how_to_register" title="How to Register" class="navigation">Register</a>
    <ul>
    <li><a href="nominations_process.htm" title="Nominations Process" class="navigation">Nominations
    Process</a></li>
    <li><a href="training_calendar.htm" title="Training Calendar" class="navigation">Training
    Calendar</a></li>
    <li><a href="course_information.htm" title="Course Information" class="navigation">Course
    Information</a></li>
    </ul>
    </li>
    <li><a href="testimonials.htm" title="Testimonials" class="navigation">Testimonials</a></li>
    <li><a href="L_D_policies.htm" title="L & D Policies" class="navigation">L &amp;
    D Policies</a></li>
    <ul>
    <li><a href="HL_L_D_policies.htm" title="HL L & D Policy" class="navigation">HL L&D
    Policy</a></li>
    <li><a href="cancelation_policy.htm" title="Cancelation policy" class="navigation">Cancelation
    policy</a></li>
    <li><a href="pre_work.htm" title="Pre - Work" class="navigation">Pre - Work</a></li>
    <li><a href="professional_qual.htm" title="Professional Qual" class="navigation">Professional
    Qual</a></li>
    </ul>
    <li><a href="my_career.htm" title="My Career @ GE" class="navigation">My Career
    @ GE</a></li>
    <ul>
    <li><a href="tools.htm" title="Tools" class="navigation">Tools</a></li>
    <li><a href="tips.htm" title="Tips" class="navigation">Tips</a></li>
    <li><a href="articles.htm" title="Articles" class="navigation">Articles</a></li>
    <li><a href="professional_qual.htm" title="Professional Qual" class="navigation">Professional
    Qual</a></li>
    </ul>
    <li><a href="my_learning.htm" title="My Learning" class="navigation">My Learning</a></li>
    </ul>
    </div>

    <div id="cookietrail">
    <SCRIPT language="JavaScript1.2">
    <!-- Begin
    var months=new Array(13);
    font="ariel";
    size="1";
    months[1]="January";
    months[2]="February";
    months[3]="March";
    months[4]="April";
    months[5]="May";
    months[6]="June";
    months[7]="July";
    months[8]="August";
    months[9]="September";
    months[10]="October";
    months[11]="November";
    months[12]="December";
    var time=new Date();
    var lmonth=months[time.getMonth() + 1];
    var date=time.getDate();
    var year=time.getYear();
    if (year < 2000) // Y2K Fix, Isaac Powell
    year = year + 1900; // http://onyx.idbsu.edu/~ipowell
    document.write(lmonth);
    document.write(" "+ date + ", " + year + " | ");

    // End -->
    </SCRIPT>
    <a href="#" class="newslink" onClick='window.external.AddFavorite(location.href,document.title);'>Add To Favourites</a>
    </div>

    <div id="contentleft">
    <!-- Flash Movie area start -->
    <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
    id=flash width=449 height=265>
    <param name=movie value="images/image.swf">
    <param name=quality value=high>
    <param name=bgcolor value=#FFFFFF>
    <param name=wmode value=transparent>
    <embed src="images/image.swf" quality=high bgcolor=#FFFFFF width=449 height=265 type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
    </embed>

    </object>
    <!-- Flash Movie area end -->
    </div>
    <div id="contentcenter"><img src="images/colin_intro.gif" width="321" height="265"></div>

    <div id="contentbottom">

    <div id="featboxmycareer"></div>
    <div id="featboxcalendar"></div>
    <div id="featboxplan"></div>
    <div id="featboxlinks"></div>

    </div>

    <div id="footer"></div>
    <div id="footermain"><img src="images/footer_logo.gif" width="191" height="47"><p>1998-2005 General Electric Company. All Rights Reserved</p>
    </div>


    <br clear="all" />
    <!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
    </div>

    </body>
    </html>

  • #2
    New Coder
    Join Date
    Dec 2004
    Location
    Ontario, Canada
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Absolute positioning is messign up the centering

    Because you have each div positioned absolutely, they will remain where they are on the screen regardless of how you resize your screen. You are also using float:left for each division, which in this case should be sufficient. I have also noticed the total width of the div's in #contentbottom is 774, while div#contentbottom width is set to 774px. Clean these up and see how it looks, if you still have problems, post again.

    Code:
    Also use the code tags to post your code.
    You do this by wrapping you code with the the tag [ CODE ] at the start and [ /CODE ] at the end. ( Note: remove the spaces between the braces and the tags.


    HTH

    Nite.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    No code; the page

    Better still: don't post miles of code, post a link to the page so we can visualise what you are trying to accomplish.
    Everybody can get some server space for free from any of the providers like lycos, geocities, etc. It doesn't have to be pretty, as long as it works.

    Edit:
    Please go back to your original post and edit it to place the pasted code inside CODE tags; having to scroll up and down for miles is incredibly annoying, and the code tags generate a scrolling box of their own, keeping the post itself nice and short.
    For future use, the code tags can also be found in the edit window as a hash mark (octothorpe) icon ( # ) in the upper border for easy editing.
    Last edited by ronaldb66; 02-11-2005 at 10:42 AM.
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

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