Problems with CSS positioning

neilorourke · 02-04-2007, 02:31 PM

Hi all

I'm quite new to the principle of using CSS rather than tables for page layout so I'm probably missing something obvious here.

In both IE and firefox all the elements on http://www.teachban-artgallery.com/ are visable when the browser window is maximised. If the user reduces the size of the window they are unable to scroll to the top of the page as the header is truncated.

Please could someone advise me on as a way around this.

Thanks

monty · 02-04-2007, 11:46 PM

Just looked at it and even with the maximum screen size the header is truncated in Safari, FF and Opera.

I looked at your source code and noticed you are using frames... Any particular reason for this? If not, drop the frame and place your page in a div container with absolute positioning and place all page elements inside this container using relative positioning. That should work.

best of luck

neilorourke · 02-05-2007, 04:17 PM

I haven't used frames on this website. I changed the DIV elements within the page DIV container to relative positioning but this did not have any impact on the original issue.

Is there anything else which could be causing this?

Thanks for your time

Neil

groundctrl · 02-05-2007, 04:38 PM

show me the CSS for the #logo div.

Don · 02-05-2007, 06:45 PM

/* centre all elements*/
#centering-div {
position: absolute;
width: 770px;
height: 870px;
left: 50%;
top: 45%;
margin-left: -385px;
margin-top: -435px;
}

<body>
<div id="centering-div">

That is your problem.

You have a top margin of negative 435.

groundctrl · 02-05-2007, 08:46 PM

yeah, using negative margins is a hack.

neilorourke · 02-06-2007, 06:43 AM

Thanks for looking into this. I suspected this may be related to the negetive top margin.

This was recommended as a way of centering all content in the page. Do you know of any way of centering content without this problem occuring?

Cheers

Albino · 02-06-2007, 08:37 AM

centreing content is easy:

body{
text-align:center;
}

then in your #contatiner (or equivalent):

#container{
margin:0px auto;
}

works a treat!

Don · 02-06-2007, 10:14 AM

I'm with albino 100%...

#centering-div {
position: absolute;
width: 770px;
margin: 25px auto 0;
}

Because your content isn't a fixed height, I'd drop the vertical centering attempt altogether and simply set my left and right margins to auto, and the top margin to give the header a little space.

A breakdown of the margin:
-- 25px - From the top - to give the header a little breathing room, adjust it however you'd like.
-- Auto (left and right) - Is telling it to set the left and right margins equally, which will center it horizontally.
-- 0 - Just an unset bottom margin.

The only way, I believe, to use the previous hack and not run into problems with things disappearing - would be to set a minimum height/width, but I'm pretty sure IE ignores them, so the majority of your visitors will run into problems regardless.
????: NamePros.com http://www.namepros.com/web-design-discussion/290163-problems-with-css-positioning.html

G'luck.

Albino · 02-06-2007, 10:38 AM

there is a hack for ie min height, just put

_height:min height here;

weird, but it works.

neilorourke · 02-06-2007, 03:47 PM

Hi

I tried this but this threw the content over to the left. I have set a test page and css file so you can see what happens. This can be found at http://www.galleries-online.co.uk/teacban/indextest.cfm http://www.galleries-online.co.uk/teacban/indextest.cfm.

I remember trying these latest suggestions before but they did not work which led me to trying the negative values.

Please note if you do have a look at the above URL please use IE as I have not made any changes to the mozilla version of the css

Don · 02-06-2007, 04:19 PM

My bad, overlooked position, try...

#centering-div {
position: relative;
width: 770px;
margin: 25px auto 0;
}

neilorourke · 02-08-2007, 09:17 AM

Thanks, that's done most of trick although the footer now dissappears from the bottom! Not a big problem, I have other issues but will post them an other time to give you guys a break!

I've switched the changes over to the live version at http://www.galleries-online.co.uk/teacban/index.cfm

cheers

Neil

02-04-2007, 02:31 PM	THREAD STARTER #1 (permalink)
neilorourke New Member Join Date: Dec 2004 Posts: 20	Problems with CSS positioning Hi all I'm quite new to the principle of using CSS rather than tables for page layout so I'm probably missing something obvious here. In both IE and firefox all the elements on http://www.teachban-artgallery.com/ are visable when the browser window is maximised. If the user reduces the size of the window they are unable to scroll to the top of the page as the header is truncated. Please could someone advise me on as a way around this. Thanks

02-04-2007, 11:46 PM	#2 (permalink)
monty NamePros Member Join Date: Jun 2005 Location: Hat Yai, Thailand Posts: 165	Just looked at it and even with the maximum screen size the header is truncated in Safari, FF and Opera. I looked at your source code and noticed you are using frames... Any particular reason for this? If not, drop the frame and place your page in a div container with absolute positioning and place all page elements inside this container using relative positioning. That should work. best of luck __________________ ReportATerrorist.net -- myBlog -- Peaches International

02-05-2007, 06:45 PM	#5 (permalink)
Don Live Chat Operator Join Date: Jun 2005 Location: NY Posts: 932	/* centre all elements*/ #centering-div { position: absolute; width: 770px; height: 870px; left: 50%; top: 45%; margin-left: -385px; margin-top: -435px; } <body> <div id="centering-div"> That is your problem. You have a top margin of negative 435. __________________ ` ... .

02-06-2007, 10:14 AM	#9 (permalink)
Don Live Chat Operator Join Date: Jun 2005 Location: NY Posts: 932	I'm with albino 100%... #centering-div { position: absolute; width: 770px; margin: 25px auto 0; } Because your content isn't a fixed height, I'd drop the vertical centering attempt altogether and simply set my left and right margins to auto, and the top margin to give the header a little space. A breakdown of the margin: -- 25px - From the top - to give the header a little breathing room, adjust it however you'd like. -- Auto (left and right) - Is telling it to set the left and right margins equally, which will center it horizontally. -- 0 - Just an unset bottom margin. The only way, I believe, to use the previous hack and not run into problems with things disappearing - would be to set a minimum height/width, but I'm pretty sure IE ignores them, so the majority of your visitors will run into problems regardless. ????: NamePros.com http://www.namepros.com/web-design-discussion/290163-problems-with-css-positioning.html G'luck. __________________ ` ... .

02-06-2007, 03:47 PM	THREAD STARTER #11 (permalink)
neilorourke New Member Join Date: Dec 2004 Posts: 20	Hi I tried this but this threw the content over to the left. I have set a test page and css file so you can see what happens. This can be found at http://www.galleries-online.co.uk/teacban/indextest.cfm http://www.galleries-online.co.uk/teacban/indextest.cfm. I remember trying these latest suggestions before but they did not work which led me to trying the negative values. Please note if you do have a look at the above URL please use IE as I have not made any changes to the mozilla version of the css Last edited by neilorourke; 02-06-2007 at 03:52 PM.

02-05-2007, 04:17 PM	THREAD STARTER #3 (permalink)
neilorourke New Member Join Date: Dec 2004 Posts: 20	I haven't used frames on this website. I changed the DIV elements within the page DIV container to relative positioning but this did not have any impact on the original issue. Is there anything else which could be causing this? Thanks for your time Neil

02-05-2007, 04:38 PM	#4 (permalink)
groundctrl NamePros Regular Join Date: Feb 2007 Posts: 245	show me the CSS for the #logo div.

02-05-2007, 08:46 PM	#6 (permalink)
groundctrl NamePros Regular Join Date: Feb 2007 Posts: 245	yeah, using negative margins is a hack.

02-06-2007, 06:43 AM	THREAD STARTER #7 (permalink)
neilorourke New Member Join Date: Dec 2004 Posts: 20	Thanks for looking into this. I suspected this may be related to the negetive top margin. This was recommended as a way of centering all content in the page. Do you know of any way of centering content without this problem occuring? Cheers

02-06-2007, 08:37 AM	#8 (permalink)
Albino Munky Designs Join Date: May 2005 Posts: 996	centreing content is easy: body{ text-align:center; } then in your #contatiner (or equivalent): #container{ margin:0px auto; } works a treat!

02-06-2007, 10:38 AM	#10 (permalink)
Albino Munky Designs Join Date: May 2005 Posts: 996	there is a hack for ie min height, just put _height:min height here; weird, but it works.

02-06-2007, 04:19 PM	#12 (permalink)
Don Live Chat Operator Join Date: Jun 2005 Location: NY Posts: 932	My bad, overlooked position, try... #centering-div { position: relative; width: 770px; margin: 25px auto 0; } __________________ ` ... .

02-08-2007, 09:17 AM	THREAD STARTER #13 (permalink)
neilorourke New Member Join Date: Dec 2004 Posts: 20	Thanks, that's done most of trick although the footer now dissappears from the bottom! Not a big problem, I have other issues but will post them an other time to give you guys a break! I've switched the changes over to the live version at http://www.galleries-online.co.uk/teacban/index.cfm cheers Neil Last edited by neilorourke; 02-08-2007 at 09:23 AM.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)