content area not expanding

Lchad · #1 (**permalink**) Jan 29th, 2007, 12:15

Hi folks... I just posted this a while ago but can't find my post so I'm posting again.

I've been working on this site for 2 days and I'm at the point where I need help. I've "tried" long enough

!

The site is http://www.whitelightwitheeta.com

The problem I am having is that the #content area which holds two columns will not expand.
In firefox, I can't even see the content area to the right of the nav bar.
And in IE7 I can see some of the content area but it's not expanding.

Here's the css:

Code: Select all

body, html {
	padding: 0;
	margin: 0;
	border: 0;
	font-size: 100.01%;
	margin-top: 30px;
	margin-bottom: 30px;
	background-image: url(background_star.gif);
	background-repeat:repeat;
	}
	body {
	min-width: 779px;
	}
	#wrapper {
	width: 779px;
	margin: 0 auto;
	}
	#header {
	width: 779px;
	height: 164px;
	background: url(header_final.gif) no-repeat top;	
	}
	#content {
	width:779px;
	margin: 0 auto;
	background: #ABBDCC url(diamondback1.jpg) repeat-y center top;
	}
	#cola {
	background-image: url(navback.jpg);
	float:left;
	width:125px;
	height: 409px;
	margin-left:20px;
	margin-top:0px;
	position: absolute;
	}
	#colb {
	float:right;
	width: 625px;
	}
	ul.nav {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
	background: top;
	vertical-align: text-top;
	letter-spacing: normal;
	}
	ul.nav li {
	display:block;
	padding-bottom: 15px;
	text-align: center;
	vertical-align: top;
	padding-top: 11px;
	}
	ul.nav a{
	text-decoration: none;
	color:#02022A;
	font: italic bold small Georgia, "Times New Roman", Times, serif;
	text-transform: uppercase;
	background: url(none);
	}

Here's the html

Code: Select all

<body>
	<div id="wrapper">
		<div id="header"></div>
			<div id="content"><br />
				<div id="cola">
					<div class="nav">
						<ul class="nav">
						<li><a href="#">Home </a></li>
						<li><a href="#">Services</a></li>
						<li><a href="#">Bio</a></li>
						<li><a href="#">Products</a></li>
						<li><a href="#">Testimonials</a></li>
						<li><a href="#">Calendar</a></li>
						<li><a href="#">Media/Press</a></li>
						<li><a href="#">Articles</a></li>
						<li><a href="#">Links</a></li>
						</ul> 
					</div>
				</div>
			</div>
							<div id="colb">
							  <p class="style1">content</p>
							  <p class="style1">content</p>
							  <p class="style1">content</p>
							  <p class="style1">content</p>
							  </div>
		
		
															
	</div>
</body>

I am so frustrated..... so any help would be appreciated!

Lchad · #2 (**permalink**) Jan 29th, 2007, 12:18

Please note
#content {
width:779px;
margin: 0 auto;
background: #ABBDCC url(diamondback1.jpg) repeat-y center top;
}

The background image isn't showing in FF... sign

karinne · #3 (**permalink**) Jan 29th, 2007, 13:31

Ok ... I thought I'd give you hand to get you started in the right direction with this site here

You have alot of unnecessary divs in there. For example ... you #wrap, you can easily set the body { } element to center instead of creating a div for that.

Unzip this file and just add your background_star.gif, header_final.gif and diamondback1.jpg in the /i/ directory.

Well ... try that out and let me know.

EDIT: Bah ... I forgot the diamondback1.jpg image ... re-uploaded zip file

Lchad · #4 (**permalink**) Jan 29th, 2007, 13:39

Hi Karianne:
I can't open the .zip. I'm getting admin error...

Hopefully someone from admin can help with that???

Lchad · #5 (**permalink**) Jan 29th, 2007, 13:41

ok.. got it.. I think you were editing your post!

karinne · #6 (**permalink**) Jan 29th, 2007, 13:42

Let me know if you need help with it. Or understanding what I did versus what you had.

Lchad · #7 (**permalink**) Jan 29th, 2007, 13:53

I have to look closely at it to see what you did versus what I did.
However there is a portion missing in your design.
I have an overall page background which I understand can go into the html {}
portion.
But the part that is missing is the part where the diamondback1.jpg goes.
That photo goes behind the two columns. That's why I had a #content div with the two columns inside. That is what was causing the #content not to expand.

So that parts still an issue...
I'll play with it and see if I can't figure it out now...
Thanks Karianne!

karinne · #8 (**permalink**) Jan 29th, 2007, 13:55

Oh yeah ... just put your diamondback1.jpg image into the /i/ with the other ... sorry ... I was upload the new code when you tried to download it the first time and forgot to add it to my post.

Quote:

Originally Posted by Lchad

Thanks Karianne!

BTW... Who the hell's Karianne?!?

Lchad · #9 (**permalink**) Jan 29th, 2007, 13:58

Oh..........sorry...typo!!! My fingers were going too fast!!!!
I'm playing around with your code now!!! I'll probably screw it all up!

Lchad · #10 (**permalink**) Jan 29th, 2007, 14:00

Ok.. what? Put the diamondback1.jpg into what /i/?
It has to go behind the two columns... how can that be done without having something to hold it as a background?

karinne · #11 (**permalink**) Jan 29th, 2007, 14:02

Quote:

Originally Posted by Lchad

I'm playing around with your code now!!! I'll probably screw it all up!

It's okay ... I have a copy on my hard drive

Quote:

Originally Posted by Lchad

Ok.. what? Put the diamondback1.jpg into what /i/?

Yes ... put diamonback1.jpg with the others I told you to put in /i/

Quote:

Originally Posted by Lchad

It has to go behind the two columns... how can that be done without having something to hold it as a background?

What? I set it in the body and moved it down 164px which is you header image height.

Lchad · #12 (**permalink**) Jan 29th, 2007, 14:08

Take a peak. www.whitelightwitheeta.com

I attached a very primitive example of what the site should look like.
I think this will help you understand the "two backgrounds."

karinne · #13 (**permalink**) Jan 29th, 2007, 14:11

And that's pretty much what I gave you no?

FF.jpg

That diamond background goes underneath the menu and the content

Lchad · #14 (**permalink**) Jan 29th, 2007, 14:16

Ok.. just finished with it... it's perfect....!!!! YOU ROCK!!!!!!

HOW THE HECK DID YOU DO THAT??

I'm going to go study this now!

Thank you thank you thank you!!!

Lchad · #15 (**permalink**) Jan 29th, 2007, 14:18

Ok I get it!!! You dropped the diamondback.jpg down .... that's so much easier!

I'm giddy with happiness because I've been struggling for 2 days! Now I can sleep tonight! hahahahahaha

I feel like I owe you lunch or something! hahahaha

karinne · #16 (**permalink**) Jan 29th, 2007, 14:21

Practice, practice, practice

You just have to split it up properly to start. In this case you have 3 sections: header, side and content. So you start off by putting that in you html in the order in which you would want someone to "read" your site like screen reader do

Code: Select all

<div id="header"></div>
<div id="content"></div>
<div id="side"></div>

Then you go in your CSS and make it look good

karinne · #17 (**permalink**) Jan 29th, 2007, 14:22

Quote:

Originally Posted by Lchad

Ok I get it!!! You dropped the diamondback.jpg down .... that's so much easier!

I'm giddy with happiness because I've been struggling for 2 days! Now I can sleep tonight! hahahahahaha

I know the feeling! I've had those sleepless nights before and then someone just comes along and make you feel like you're on cloud 9

Quote:

Originally Posted by Lchad

I feel like I owe you lunch or something! hahahaha

Well ... I do have a paypal account

Just kidding. I come here to help I have learn stuff while doing it

Lchad · #18 (**permalink**) Jan 29th, 2007, 14:24

Karinne:
The navigation is sitting exactly on top of the left edge of the diamondback1.jpg. Is there a way to move it over about 10 px to the right to give the appearance of a margin?

I just tried a couple of things and they didn't work so since you were online, I'd thought I'd ask!

And yes.. practicing is all that I've been doing!

Lchad · #19 (**permalink**) Jan 29th, 2007, 14:27

nevermind.. I got it... I added a margin-left to the navigation li!
wahoo!

karinne · #20 (**permalink**) Jan 29th, 2007, 14:45

Hmmm ... I was looking over some things and there were a few issues with it in IE

Code: Select all

/* -------------- main separations ------------------*/
#header {
    width: 779px;
    height: 164px;
    background: #fff url(../i/header_final.gif) no-repeat 0 0;
}

#content {
    float: right;
    width: 615px;
}

#side {
    float: left;
    width: 124px; /* 154px; */
    margin: 0 10px;
}

/* -------------- main navigation -------------------*/

Just replace that section with this one. I've re-uploaded the zip but in case you made more modifications, this is the only part I change.

Not sure what you meant with "Is there a way to move it over about 10 px to the right to give the appearance of a margin?" but glad to see you go it working.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Expandable Content Script (Swtich Content)	Matc	JavaScript Forum	0	Apr 8th, 2008 10:53
Content area stretching?	PicoDeath	Web Page Design	7	Aug 15th, 2007 00:12
Problems making the content area have a dynamic height	blizeH	Web Page Design	41	Aug 13th, 2007 01:19
2 questions - expanding content and display in FF, IE	konnor5092	Web Page Design	8	Feb 25th, 2007 16:33

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
content area not expanding