Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Centering A Div Containing Image., I have a logo I need centered in a aujustable width page
sonesay
post Feb 15 2008, 10:35 AM
Post #1


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 643
Joined: 20-June 07
From: Auckland
Member No.: 45,102
http://sonesay.trap17.com/sonesayi/

Just a new layout I'm working on, Any ideas how I can get the logo to be centered? At the moment I can only float it left or right. I think is possible to get it done in tables but I would prefer to stay away from them in layouts. Any insight appreciated.

by the way source code and css is at

http://sonesay.trap17.com/sonesayi/index.html
http://sonesay.trap17.com/sonesayi/main.css

thanks


(list)

Go to the top of the page
 
+Quote Post
darran
post Feb 15 2008, 10:57 AM
Post #2


Privileged Member
*********

Group: Members
Posts: 660
Joined: 31-August 06
From: Singapore
Member No.: 29,189
You can always use the following code:

CODE
div.yourclass {margin: 0 auto 0 auto;}


Hope that helped you.

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Feb 15 2008, 02:29 PM
Post #3


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,882
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol
The above suggestion works to centre a div, but you have been using 'Min-width' which is not universally accepted, and also, you are trying to float:left a centred div, which will not work, either, so adjust the css to give it a width, drop the float, and apply the margin: 0 auto as per below.

CODE
#header_center {
background-image: url('si_07.png');
background-repeat: no-repeat;
margin: 0px auto;
width: 270px;
min-height: 140px;
}

Tests in FF2 okay, haven't tried IE7 or IE6 yet.

(list)

Go to the top of the page
 
+Quote Post
sonesay
post Feb 15 2008, 08:33 PM
Post #4


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 643
Joined: 20-June 07
From: Auckland
Member No.: 45,102
You are the man Jlhaslip. I'll test it on other broswers and update this post.

works under safari, IE7 and Oprea as well.

This post has been edited by sonesay: Feb 15 2008, 08:44 PM

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Feb 15 2008, 10:32 PM
Post #5


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,882
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol
Sonesay,

Upload the new css file and then someone else could check this using IE6 and report back here as to whether it centres the Header Image....

thanks.

(list)

Go to the top of the page
 
+Quote Post
sonesay
post Feb 15 2008, 11:03 PM
Post #6


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 643
Joined: 20-June 07
From: Auckland
Member No.: 45,102
with that current css and html code IE 6 fails. the only thing that will show up is the main tiling background.


heres the screenshot I have on my win xp machine running IE 6.


Attached File(s)
Attached File  ie6fail.png ( 81.41k ) Number of downloads: 7
 

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Feb 15 2008, 11:50 PM
Post #7


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,882
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol
Try adding text-align: center for IE6's benefit...
CODE
#header_center {
background-image: url('si_07.png');
background-repeat: no-repeat;
margin: 0px auto;
text-align:center;
width: 270px;
height: 140px;
}

and delete the "min-" on the height.

(list)

Go to the top of the page
 
+Quote Post
sonesay
post Feb 16 2008, 12:36 AM
Post #8


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 643
Joined: 20-June 07
From: Auckland
Member No.: 45,102
QUOTE(sonesay @ Feb 16 2008, 12:03 PM) *
with that current css and html code IE 6 fails. the only thing that will show up is the main tiling background.
heres the screenshot I have on my win xp machine running IE 6.


I've updated that part and removed all other min-width min-height to just height and width, and it seems to show up in IE 6 OK now. I will just change and boot into my windows with IE 7 to double check again. Safari and FF still works.

By the way you said earlier you had both IE 6 and IE 7 was that on the same windows or on different installations?

thanks again.

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Feb 16 2008, 01:12 AM
Post #9


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,882
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol
I have both IE6 and IE7 running on Windows XP using this link: http://tredosoft.com/Multiple_IE

IE6 will sometimes look okay, but it behaves the same as IE7. Internet Explorer was not designed to allow different versions running on the same machine, so, expect a 'problem' or two with the pages once in a while. It will appear that a page is Okay in IE6, but when a real IE6 Browser finds the page, it will display "normally" (for IE6) and be messed up still, so I do not depend on the IE6 I have installed. laugh.gif Who does?

On the positive side, IE6 is losing it customer base as IE7 and Vista gain strength. And Firefox/Opera, too...
Check the Stats over at the w3schools site and see the 10% reduction in IE6 for the last year or so. About 50% of what it was 4 years ago.

http://w3schools.com/browsers/browsers_stats.asp

Of course, these Stats are skewed by the nature of the people who visit the site. Many 'web-aware' Designers and Coders use alternative, more standard compliant Browsers, so you would expect the numbers to be higher for the non-IE browser because of that. At a Forum I run, the IE Browsers are still at 70+% but the Users are content with what they have.
Many Users have the original browsers (IE) they received with the machine. So be it.