Can’t Get Divs Right

[jmeyer0911]

I am running into a lot of problems here:
1. I can’t get my div to show up.
I created 4 divs…it looks like this:
HTML:

  <----Won't show up









  <---Won't show up

CSS:



div.mainContent

{

padding-bottom: 4px;

height: 100%;

text-align: left;

position: relative;

}

div.topContent

{

background: url('Images/Menu/topBorder.png');

clear: both;

}

div.conent

{

background-color: white;

clear: both;

}

div.bottomContent

{

background: url('Images/Menu/bottomBorder.png');

clear:both;

}

I’m not sure if you know what I’m doing. the top/bottomBorders are an image, which the content is suppose to line up with those images…But every time I run it, they never show up, only the div.content shows up. I checked everything to make sure my paths were correct. Everything is…just those images won’t show up. The images are just rounded borders. I did make a css3 type, but then, they won’t work if xp is the users os.
I think I’m writing it correctly.

[jmeyer0911]

I was told that if a user is using windows xp, that the css3 rounded border won’t work.

[jmeyer0911]

one more thing…I did a min-height, and they show up…

How do I get them to mesh together…the topContent, content, and the bottomContent…I have no padding or margin, so I thought they would join together…Unless there is another way to do it…
I was thinking since I’m writing it in css3, I could do this:

div.content

{

background: white url('Image/Menu/topBorder.png'), url('Image/Menu/bottomBorder.png');

}

Something like that…but, I’m thinking that won’t work either.

[jmeyer0911]

and how do you lay a div over a div?
this is what is looks like:

  <---Trying to have this div lay over  the head and conent divs


	

		

		
		#88856

		
		
		
	




	


		
		jmeyer0911
Member
		
		
	


	


		
		
ok…thanks…How about the div over div part like earlier

		
	



			
				

	

		

		
		#88871

		
		
		
	




	


		
		IamShaw
Member
		
		
	


	


		
		
In it’s simplest terms you can use ‘position’ to achieve that.






Navigation





Then the CSS would look a little some thing like this:


.content {

height: 150px;

position: relative;

}



.nav {

position: absolute;

top: 0;

left: 0;

z-index: 1;

}


This is the simplest way I would assume?

		
	



			
				

	

		

		
		#88882

		
		
		
	




	


		
		jmeyer0911
Member
		
		
	


	


		
		
Thanks…that worked…so, how would you put the links behind the images?

it looks like this
menu    specials  membership     <----(this is one image, and they are round balls)

The best example of what i’m trying to achieve is from this site:
http://www.lindsayjay.co.uk/Lindsay_Jay_Fitness/Class_timetable.html

		
	



			
				

	

		

		
		#88899

		
		
		
	




	


		
		jmeyer0911
Member
		
		
	


	


		
		
one last question…everything is starting to work.

I did the nav (which I am writing it in css3 and html5)

I wrote it like this:
















The only problem now, is that each round ball is far apart.  I’m trying to have them at like about 6px apart.

the diminsions of each ball is 400×400 (png img file). Each ball has it’s own shadow too.

Would I use margin or padding in css to push them closer together?

		
	



			
				

	

		

		
		#88900

		
		
		
	




	


		
		jmeyer0911
Member
		
		
	


	


		
		
it’s “float” right?

		
	



			
				

	

		

		
		#88934

		
		
		
	




	


		
		IamShaw
Member
		
		
	


	


		
		
I’m sure maybe you could set a width on the list items in your CSS document with margin/padding them (I’d use margins).

		
	



			
				

	

		

		
		#88946

		
		
		
	




	


		
		jmeyer0911
Member
		
		
	


	


		
		
ok…So i tried everything, the only problem is, when I zoom the page in or out, the round nav buttons don’t stay in the same spot, they either begin moving left or when I zoom in, they start stacking on each other.

		
	



			
				

	

		

		
		#88957

		
		
		
	




	


		
		jmeyer0911
Member
		
		
	


	


		
		
one last thing.

I created the PIE container…works great, the only problem know is, there is only one page that the content wont go into.

that page looks like this:






Registration Fee


One-Time Registration fee of $50 applies to all memberships


Annual Rate










Membership





Per/Month







...SO FORTH AND SO FORTH

The CSS looks like this:

div.MembershipContainer

{

clear: both;

margin: 0;

width: 950px;

}

div.MembershipContainerRow

{

clear:both;

}

div.MembershipDetailImage

{

float: right;

padding-bottom: 10px;

width: 290px;

}

div.MembershipDetail

{

float: left;

position: relative;

width: 650px;

...SO FORTH AND SO FORTH

The H1 “Membership” goes inside the PIE container, but, the other stuff wont. Not sure why

[jmeyer0911]

ok…thanks…How about the div over div part like earlier

[IamShaw]

In it’s simplest terms you can use ‘position’ to achieve that.

Navigation

Then the CSS would look a little some thing like this:

.content {

height: 150px;

position: relative;

}



.nav {

position: absolute;

top: 0;

left: 0;

z-index: 1;

}

This is the simplest way I would assume?

[jmeyer0911]

Thanks…that worked…so, how would you put the links behind the images?
it looks like this

menu specials membership <----(this is one image, and they are round balls)
The best example of what i’m trying to achieve is from this site:

http://www.lindsayjay.co.uk/Lindsay_Jay_Fitness/Class_timetable.html

[jmeyer0911]

one last question…everything is starting to work.
I did the nav (which I am writing it in css3 and html5)
I wrote it like this:

The only problem now, is that each round ball is far apart. I’m trying to have them at like about 6px apart.
the diminsions of each ball is 400×400 (png img file). Each ball has it’s own shadow too.
Would I use margin or padding in css to push them closer together?

[jmeyer0911]

it’s “float” right?

[IamShaw]

I’m sure maybe you could set a width on the list items in your CSS document with margin/padding them (I’d use margins).

[jmeyer0911]

ok…So i tried everything, the only problem is, when I zoom the page in or out, the round nav buttons don’t stay in the same spot, they either begin moving left or when I zoom in, they start stacking on each other.

[jmeyer0911]

one last thing.
I created the PIE container…works great, the only problem know is, there is only one page that the content wont go into.
that page looks like this:

Registration Fee


One-Time Registration fee of $50 applies to all memberships


Annual Rate










Membership





Per/Month

[Author]

Posts