Need help creating a container.

**Cheng** · 07-26-2006, 06:43 PM

Hi Everybody.

This is the 1st time that I try to do a webpage with CSS and I'm having a lot of problems.
In fact only one at the moment.
I have this centered 2 column CSS layout script with a menu container on the left and now I want to add another container like this to the right but I can't manage.
Please someone of you guys help me to create this container on the right side.
The HTML and CSS is attached to this post.

Thank you very much in advance.

Tommy

**boogyman** · 07-26-2006, 10:04 PM

are you trying to make your page a 3column layout?

**Cheng** · 07-27-2006, 05:25 AM

.......yes, this is what I want to do but I tried and can't manage on my own.......Tommy

**jscheuer1** · 07-27-2006, 06:57 AM

Define:

container to the right

To the right of what element? How high and how wide do you want it to be?

In the meantime, you have a typo (red) in your existing css:

Code:

#header {
	height: 120px;
	border-top-color: #94BDD6;
	border-top-width: 10px;
	border-top-style: solid;
	text-align: left;
}
}
#innerContainer {
	background-color: #D4E5F7;
	color: #337ED6;
	width: 100%;
	border-top-width: 3px;
	border-bottom-width: 3px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
}

Remove it. It causes problems in many browsers (not IE).

**Cheng** · 07-27-2006, 10:30 AM

Hi John.

I want that in the innerContainer where now the menu is to right the same thing also to the left so that the innerContainer got 3 sections right left and middle.
Now there is "innerContainer" and than "menu" and I gues then it would be "menuright".
But I cant manage, as I said this is my 1st try on XHTML CSS.
Thanks for pointing out the mistake in the CSS, I'll get rid of it right away.

Thanks again.
Cheng

PS.
In the "innerContainer" we got "menu" and the same menu inside the "innerContainer" I want as "menuright" on the right side.
Here are the details of "menu":

}
#menu {
float: left;
text-align: center;
width: 11.9em;
margin-top: 2.5em;
border-top-color: #FFFFFF;
}

**boogyman** · 07-27-2006, 06:59 PM

From start to finish... with html tags n all.. hope it helps.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
<!--
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
-->
</style>


</head>
<body>

<div id="container">
	<div id="top">

		<h1>Header</h1>
	</div>
	<div id="leftnav">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
	</div>
	<div id="rightnav">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>

	</div>
	<div id="content">
		<h2>Subheading</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
		<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
	</div>
	<div id="footer">

		Footer
	</div>
</div>


</body>
</html>

**Cheng** · 07-28-2006, 01:23 PM

Hi Pissa.

Thanks for the CSS script.
I got it working but I put it into an external CSS file and made the whole thing centered.
Can you or someone else have a look at it now and tell me if it is ok like this or are there a lot of mistakes in it?
Also I got one problem with the text block in the center.
As you can see in the attached HTML the text is more to the left than the header above it.
If I add some padding the header block above is moving as well.
Can you tell me how I got the text in line with header without moving anything else except the text block in the center of the page.
Thank you very much.
I realy appreciate it.

Cheng

Here the HTML and CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<link href="/styles/layout.css" media="screen" rel="stylesheet" />
<link href="styles/layout.css" rel="stylesheet" type="text/css" />
<script SRC="FlashLoad.js"></script>
</head>
<body>
<div id="container">
<div id="top">
<h1 class="alt">First Future Corporation</h1>
<div align="left">
<p>
<script>FlashLoad(7,'TopMenu.swf','#fff',780,120);</script>
</p>
</div>
</div>
<div id="leftnav">
<div id="menu"> <a class="alt" href="#content"><strong>Skip to Content</strong></a>
<script>FlashLoad(7,'menu1.swf','#fff',144,365);</script>
</div>
</div>
<div id="rightnav">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="content">
<h2>Test</h2>
<p> </p>
<p></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec dolor. Curabitur enim quam, dignissim vel, blandit sed, mattis a, leo. Donec ullamcorper. Sed porttitor magna sit amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis, egestas id, neque. Integer at nulla. Nam fringilla mi ac augue commodo ornare. Donec ornare, dui vitae convallis congue, augue dui blandit sapien, in faucibus mauris massa consectetuer purus. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec dolor. Curabitur enim quam, dignissim vel, blandit sed, mattis a, leo. Donec ullamcorper. Sed porttitor magna sit amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis, egestas id, neque. Integer at nulla. Nam fringilla mi ac augue commodo ornare. Donec ornare, dui vitae convallis congue, augue dui blandit sapien, in faucibus mauris massa consectetuer purus. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec dolor. Curabitur enim quam, dignissim vel, blandit sed, mattis a, leo. Donec ullamcorper. Sed porttitor magna sit amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis, egestas id, neque. Integer at nulla. Nam fringilla mi ac augue commodo ornare. Donec ornare, dui vitae convallis congue, augue dui blandit sapien, in faucibus mauris massa consectetuer purus</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p align="justify"> </p>
</div>
<div id="footer">
<p>Copyright © - 2005 First Future Corporation - All rights reserved. </p>
</div>
</div>

</body>
</html>

And here the CSS:

* {
margin: 0;
padding: 0;
}
body {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
}
#container {
background-color: #D4E5F7;
width: 780px;
margin-left: auto;
margin-right: auto;
border: 3px solid #FFFFFF;
line-height: 130%;
}
.alt {
display: none;
}
#top {
height: 120px;
border-top-color: #94BDD6;
border-top-width: 10px;
border-top-style: solid;
text-align: left;
background-color: #FFFFFF;
}
#top h1 {
padding: 0;
margin: 0;
visibility: hidden;
}
#leftnav {
float: left;
width: 170px;
text-align: center;
background-color: #D4E5F7;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #FFFFFF;
padding-top: 2.5em;
}
#rightnav {
float: right;
width: 170px;
text-align: center;
background-color: #D4E5F7;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #FFFFFF;
padding-top: 2.5em;
}
#content {
margin-left: 170px;
margin-right: 170px;
max-width: 36em;
background-color: #E9F2F8;
border: 3px solid #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 1.2em;
padding-bottom: 0.75em;
}
#content h2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000099;
margin-top: 0;
margin-right: 180;
margin-bottom: 0em;
margin-left: 180;
text-align: left;
background-color: #D4E5F7;
padding-top: 5px;
padding-bottom: 5px;
background-position: top;
font-size: 1.25em;
line-height: 1.5em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
text-indent: 1em;
}
#footer {
color: #000000;
text-align: right;
font-size: 0.75em;
border-top-width: 10px;
border-top-style: solid;
border-top-color: #96C0D8;
background-color: #FFFFFF;
}
#leftnav p, #rightnav p { margin: 0 0 1em 0;
}

Thread: Need help creating a container.

Thread Tools

Search Thread

Need help creating a container.

Bookmarks

Bookmarks

Posting Permissions