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 12 of 12
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation I have given up on this for the time being.

    I have given up on this for the time being.

    I have altered the margins on the three main divs to ems. However, although it is better than before, the margins between the left, centre and right divs do not decrease equally.

    Can anyone explain why.

    Frank

    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>
    <title>Welcome to the CCLN Website</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <style type="text/css">
    *{
    margin:0;
    padding:0;
    }
    html, body{
    width:100%
    height:100%;
    }
    
    
    #container
    {
    width:100%;
    }
    
    A:link {text-decoration: none; color: #0000FF;}
    A:visited {text-decoration: none; color: #0000FF;}
    A:active {text-decoration: none}
    A:hover {text-decoration: underline; color: red;}
    img{border:0;}
    
    h1{font-size:19px};
    
    
    body{
    background-color:#ffffff;
    font:12px arial;
    }
    
    #topleftimage
    {
    float:left;
    }
    
    #topcentertext{
    margin: 25px 0 0;
    color:#ffffff;
    }
    
    #toprightimage
    {
    float:right;
    }
    
    
    #topPanel
    {
    height:100px;
    font-weight: bold;
    background-color: #008080;
    font-size: 26px;
    text-align:center;
    color: #0000EE;
    border:medium double #000080;
    margin: 10px 0 0 0;
    padding 7px 7px 7px 7px;
    }
    
    #leftPanel
    {
    float:left;
    height:400px;
    width:19%;
    font-weight: bold;
    background-color: #FFFF7E;
    text-align:center;
    border:medium double #000080;
    margin: 5px .25em 0 .25em;
    padding 6px 6px 6px 6px;
    }
    
    #rightPanel
    {
    float:right;
    height:400px;
    width:19%;
    font-weight: bold;
    background-color: #FFFF7E;
    text-align:center;
    border:medium double #000080;
    margin: .3em .25em 0 .25em;
    padding 6px 6px 6px 6px;
    }
    
    #centerPanel
    {clear:right;
    float:left;
    height:400px;
    width:57%;
    background-color: #FFFF7E;
    font-weight:bold;
    text-align:center;
    border:medium double #000080;
    margin: .3em 0.6em 0 0.6em;
    padding 6px 6px 6px 6px;
    
    }
    
    
    #bottomPanel
    {
    clear:both;
    height:100px;
    font-weight: bold;
    background-color: #ffffff;
    font-size: 20px;
    text-align:center;
    color: #0000EE;
    margin: 10px 90px 0 90px;
    padding 7px 7px 7px 7px;
    
    }
    
    </style>
    
    </head>
    <body>
    
    <div id="container">
    <div id="topPanel">
    
    	<div id="topleftimage">
    		<a href=""><img src="file:///H|/CCLNFiles/CCLNimage.jpg" height="90" width="145" alt=""/></a>
    	</div>
    
    	<div id="toprightimage">
    		<a href=""><img src="file:///H|/CCLNFiles/CCLNimage.jpg" height="90" width="145" alt=""/></a>
    	</div>
    
    	<div id="topcentertext">
    		Learning Network
    	</div>
    
    
    </div>
    
    <div id="leftPanel">
    	<h1><b>Partners</b></h1><br /><br />
    	<a href=""> Learning Service</a><br /><br />
    	<a href=""> College</a><br /><br />
    	<a href=""> Coleg Glan </a><br /><br />
    	<a href=""> WEA</a><br /><br />
    	<a href=""> Welsh for Adults</a><br /><br />
    	<a href=""> Voluntary Action</a><br /><br />
    	<a href=""> YMCA</a>
    </div>
    
    <div id="rightPanel">
    		<h1><b>Forthcoming Events</b></h1><br /><br />
    		Mon 12th January<br />
    		<a href="">Adult Learning Event - National Museum </a><br /><br />
        	  	Wed 15th February<br />
    		<a href="">Taster sessions - Central Library</a><br /><br />
    		Fri 7th February<br />
    		<a href="">Learning Network Meeting - Howardian</a><br />
    </div>
    
    <div id="centerPanel">
    
    	<div id="topCenter">
    		<br /><br /><br /><br />
    		<p>Centered Text</p>
    	</div></div>
    
    	<div id="bottomCenter">
    	</div>
    
    </div>
    
    
    
    <div id="bottomPanel">
    <a href=""><img src="file:///H|/CCLNFiles/image006.jpg" height="80" width="120" alt=""/></a>
    <a href=""><img src="file:///H|/CCLNFiles/image008.jpg" height="85" width="160" alt=""/></a>
    <a href=""><img src="file:///H|/CCLNFiles/image002.jpg" height="85" width="160" alt=""/></a>
    <a href=""><img src="file:///H|/CCLNFiles/image003.jpg" height="105" width="72" alt=""/></a>
    <a href=""><img src="file:///H|/CCLNFiles/image004.png" height="75" width="70" alt=""/></a>
    <a href=""><img src="file:///H|/CCLNFiles/image007.png" height="85" width="120" alt=""/></a>
    
    </div>
    
    
    </div>
    
    </body>
    </html>
    Last edited by effpeetee; 11-04-2008 at 07:50 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    centerPanel has a % width.

    Edit: ...and is a float left. It doesn't have anything to do with the rightPanel.


    By the way, is it intentional to have it at the bottom below the other two divs?
    Last edited by tomws; 11-04-2008 at 05:49 PM. Reason: clarification

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    The three columns all have percentage widths. It is the margins that I am concerned with. Why does the left center div margin not collapse as the right centre div margin does?

    On my monitor, the three divs are side by side. 1024x728 and they collapse progressively except that the left hand margin between the centre column and the left hand div does not collapse as the other side does.

    I dont, know about the rest of the page. It is not mine. See my first post.

    I am trying to get one thing right at a time. I have used and still do use the same methods to seperate three column layouts. I just cannot understand why it is not working properly this time. I have probably done something silly. I do not have good eyesight, and occasionally miss something mis-typed.

    Frank
    Last edited by effpeetee; 11-04-2008 at 05:59 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    gh05 (11-04-2008)

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    The previous post had the answer. The margins don't 'collapse' the same because of the percentage width on the center panel. Actually, the left gap doesn't 'collapse' at all. Since the center panel floats left, it stays a constant distance (1/4 em) from the left panel. Remove the center panel css clear and you'll see it in action (and will see centerpanel up where it's probably wanted, though the order is probably still wrong).

    Anyway, the center panel resizes itself as a percentage of the viewport and it's not 'attached' to the right panel through floating or div order. The layout problems have removed it from the expected location, so the marging isn't doing what you think it should be.

  • Users who have thanked tomws for this post:

    effpeetee (11-04-2008)

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks for your helpful reply. However I have been unable to make the site fluid enough so I'll leave it to the original poster to sort out.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    This layout might be helpful. Others are available, too.

  • #7
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Left - 19%
    Right - 19%
    Center - 57% ??? Shouldn't it be 62%? But wait, we have to account for the margins (em) and the padding (px). I'd change them all to percents just to save my mind on doing the math.

    I'm assuming the padding on them is correct in the real css (not missing the ":").
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #8
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    centerPanel has a % width.

    Edit: ...and is a float left. It doesn't have anything to do with the rightPanel.


    By the way, is it intentional to have it at the bottom below the other two divs?
    So should, the center panel not be a percentage width or a float left?

    I remember posting a while back about the order of panels in my document and i understood the advice to be to put the left panel first, then the right panel and then the centerpanel on a different line because it was like building a house and the left and right floats were like the building blocks and the centerpanel like the roof.

    Using float:left for the centerpanel seemed like the only way that i could get the centerpanel centered. What should i have done?

  • #9
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    I have given up on this for the time being.

    I have altered the margins on the three main divs to ems. However, although it is better than before, the margins between the left, centre and right divs do not decrease equally.

    Can anyone explain why.

    Frank

    Thanks, it looks a lot better.

    I don't understand why changing to em makes it more fluid? What's the difference between em and pixels and percentages?

    Should the same units be used throughout the document?

  • #10
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Also just noticed that firefox now doesn't ike the new margin settings..

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Hi there.

    This article may help you to understand the use of ems.

    I've got a headache and I'm now off to bed.
    Back tomorrow.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Quote Originally Posted by gh05 View Post
    So should, the center panel not be a percentage width or a float left?

    I remember posting a while back about the order of panels in my document and i understood the advice to be to put the left panel first, then the right panel and then the centerpanel on a different line because it was like building a house and the left and right floats were like the building blocks and the centerpanel like the roof.

    Using float:left for the centerpanel seemed like the only way that i could get the centerpanel centered. What should i have done?
    As I recall from looking at it earlier, I was able to get the center panel between the left and right by changing the div order or changing the float/clear order.

    For what it's worth, there are a ton of existing templates of that style (3 columns with a header) that are ready and waiting to have your own styling and content applied. One link is available in my previous post. Using them yields a double benefit: 1) your template base is done without headaches and lost time, and 2) you can see how someone else has accomplished the task.


  •  

    Posting Permissions

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