...

View Full Version : I have given up on this for the time being.



effpeetee
11-04-2008, 04:13 PM
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.:confused:

Can anyone explain why.:D

Frank


<!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>

tomws
11-04-2008, 04:47 PM
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?

effpeetee
11-04-2008, 04:55 PM
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

tomws
11-04-2008, 05:09 PM
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.

effpeetee
11-04-2008, 06:46 PM
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.:o

Frank

tomws
11-04-2008, 07:41 PM
This layout (http://www.strictlycss.com/examples/three-column-layout-7.asp) might be helpful. Others are available, too.

jerry62704
11-04-2008, 09:43 PM
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 ":").

gh05
11-04-2008, 09:55 PM
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?

gh05
11-04-2008, 09:58 PM
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.:confused:

Can anyone explain why.:D

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?

gh05
11-04-2008, 10:00 PM
Also just noticed that firefox now doesn't ike the new margin settings..

effpeetee
11-04-2008, 10:07 PM
Hi there.

This article (http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css)may help you to understand the use of ems.:D

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

Frank

tomws
11-04-2008, 10:09 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum