CCS Overflow issue

[Dashsa]

Hello,
on my site I have a wrapper div that lets me have a rectangle in the middle of the screen and I have placed my content in this div

#wrapper {
   background-color:#97d4ff;
   width:960px;
   height:990px;
   margin:0px auto;
}

I have about 6 other Divs that fit into this wrapper
below is a sample of two of them.

#Logo{
position:relative;
top:0px;
left:0px;
z-index:1;
}

#mainContenta{
font-family:Verdana, Arial, Helvetica, sans-serif;
width:500px;
position:relative;
top:-1134px;
left:200px;
font-size:24px;
}

You will notice that I have reletive position on the divs so that the page will remain liquid. the issue I am having is that I have soo much room on the bottom of the pages due to the div having a top property of -1134.
How can I fix this?
Thanks

 

[traingamer]

A position of top:-1134px; will position your mainContenta 1134 pixels above its parent container (i.e. off the screen).

Your question really doesn't make any sense. What are you actually trying to accomplish?

Since your wrapper has a fixed width and height, in what way are you hoping to make it liquid?

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[Dashsa]

Hello, Sorry for being confusing
I have to position the div with a top attribute of -1134 to get in in the correct position .
Please have a look at

http://po.bay10ventures.com/test/ip/About.html

you will see at the bottom of the page ther is a lot of space that is empty. I am trying to remove this wasted space.
Thanks

 

[audiopro]

Looks like a standard layout to me and shouldn't need negative positioning elements.
Validate the page and sort out those errors first - There are 129 of them to fix.

Keith

http://www.studiosoft.co.uk

 

[Dashsa]

Hello Keith,
Thanks for taking a look.
I validated the About Page (

http://po.bay10ventures.com/test/ip/About.html)

as HTML 4.01 Transitional
and have no errors in that.
I will work on the other pages.
Even though it valid I am still having issues!
do you have any other ideas?
Thanks

 

[audiopro]

Looking at your style sheet, there are some complex settings there. Your layout is quite simple so shouldn't need all the negative numbers which may be the cause of the problem.
It looks like you have been adding new classes as you have been going along and it has all got confusing.
The appearance is good so if I were you I would create layout again only make it simpler.

Keith

http://www.studiosoft.co.uk

 

[traingamer]

As a start, try getting rid of all the positioning and starting with css something like this:

body { 
margin-top:0 ;}
#Aall {
	margin: 0px auto; width: 960px; height: 960px; background-color: #97d4ff;
}
#Logo img {
float: left;}
#TRGrapihc {
	 float: right;}
#LogoRight {
	clear: both; float: right;
}
#LeftNavMenu {
float: left; 
width: 125px;}

#ANewsBGa {
float:right; 
clear:right;
width: 200px;}

#AboutMainContent1a {
float: left;
width: 550px;
}
#aboutfooter { clear: both;

}
</style>

This isn't quite what I'd do, but since you're using fixed widths, just floating all of your pieces will be much simpler than all of the relative positioning (or absolute positioning, for that manner).
This will work without changing ANY of your html.

I misspoke earlier when I said that the top:-1134px would move the content above the parent container. What it actually does is move your content upward 1134 pixels from where it would normally fall while preserving the original space (this is why you have the large blank spots at the bottom - you moved everything up relative to their original positions).

I would make each of your three columns its own div and float them appropriately. That would change your html a little and simplify the css a little.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[Dashsa]

Hello Greg,
Thanks for the help!
Unfortunatly floats do not work well because I need the different logos etc located in the exact position and floats dont let me control that.
I will try to make 3 divs and put the other divs in there...

 

[Vragabond]

I use mostly floats to position elements side by side on my pages and I can always position them exactly where I want them. Why is it that you think you cannot position things exactly via floating?

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Dashsa]

I thought that with floats you can only align them to either left, right or middle?
I may very well be mistaken. but if I wanted to align an image slightly off center how would I achieve that?

Thanks again for all the help!

 

[Vragabond]

It is almost impossible to explain this without a specific example, because code could vary a lot. If it is just that thing I would use margins to position the image in the centre (or text-align, again depending on the use) and use padding for the slightly off portion). However, as I said, this is only valid for an isolated case.

In addition to that, there is no middle value to float. There's only left, right or none.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[PaulBricker]

Float values are left, right and none. There is no middle value for float. To move your element towards the center of the page, you would use a margin-left property. You can fine tune the position of your elements using a combination of these properties. Have a look at the W3C schools. It's great stuff.

Paul

 

[audiopro]

It would appear to be the crocodile thing on the right which will cause the most problems as it overlaps both the centre column and the top of the menu.
I would solve it by not having the overlap and using floats but how would those overlaps be achieved if there was no option, as it appears to be here?

Keith

http://www.studiosoft.co.uk

 

[traingamer]

There are quite a number of ways to do this. You could combine the two right-hand images into one and make it a background image, etc. etc.

The code I provided yesterday was more for proof of concept than for a complete solution.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[Dashsa]

Okay so I will try to recode the top line and make the three images fit into a single div or a background...
I am also working on the validation and have fixed three pages- This was a big help because it makes the pages work in Safari, Chrome and FF better -
Thanks for the tips!