May 16, 2008

Centering A Div Containing Image. - I have a logo I need centered in a aujustable width page

Free Web Hosting, No Ads > CONTRIBUTE > Computers > Programming Languages > CSS (Cascading Style Sheets)

free web hosting

Centering A Div Containing Image. - I have a logo I need centered in a aujustable width page

sonesay
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


Reply

darran
You can always use the following code:

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


Hope that helped you.

Reply

jlhaslip
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.

Reply

sonesay
You are the man Jlhaslip. I'll test it on other broswers and update this post.

works under safari, IE7 and Oprea as well.

Reply

jlhaslip
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.

Reply

sonesay
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.


Reply

jlhaslip
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.

Reply

sonesay
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.

Reply

jlhaslip
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.

 

 

 


Reply

sonesay
new css html layout
http://sonesay.trap17.com/sonesayi_v2

I did the orginal http://sonesay.trap17.com/sonesay with the template css of a 2 column fixed with and tried to work it into a expandable one which I had serious trouble with so I looked on the web and found a 3column expandable one that worked out better for what I wanted to do. It was simple enough too but just took time to rework it all. By the way photoshop slicing does suck alot renaming my slices on adjustments made it a night mare to update on the html.

the template for 3 col css expandable content.
http://www.sourcedevelop.com/showtutorial.php?id=89

can anyone recheck if my new layout displays ok in IE 6/7 my computer is bust again.

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Recent Queries:-
  1. centering div - 8.74 hr back.
  2. css image centered in expandable window - 14.15 hr back.
  3. html centre div on image - 36.79 hr back.
  4. centering div code - 43.40 hr back.
  5. internet explorer 6 centering div - 49.75 hr back.
  6. set div to image - 62.79 hr back.
  7. center a div to a page not the containing div - 64.33 hr back.
Similar Topics

Keywords : centering div image logo centered aujustable width

  1. Link Image Css Bug In Firefox - Can anyone help me? (7)
  2. Centering Background Image In Css - (8)
    Well, the title says what I need. Basically, I want a background image that can be used in the body
    or inside a div (or table), which is centered....
  3. Css Image Replacment - using CSS to change the image path (5)
    I was wondering if it is possable to change the path to an image using CSS, so that I could provide
    a sort of template system rather then having to change a bunch of thing I could have astandard page
    and then by changing the external CSS I could change not only styles but the whole image, I soo how
    I could change the background-color { url(image.gif)} but whatabout an actual image say change the
    src of an img tag?...
  4. Css Image Position Problem - align image left or right (1)
    I am having problems figuring out why my image will not align how I want it. Here , you can see
    that the image is aligned to the left. This is the code for that block: CODE <a
    href="http://img355.imageshack.us/img355/844/r25870774779uu.jpg"><img
    src="http://img355.imageshack.us/img355/844/r25870774779uu.th.jpg" alt="bush
    bathroom break note" align="left" style="margin-right:
    5px;"></a>[text goes here] But if you go here , you can see that the
    text does not stay to the right of...



Looking for centering, div, image, logo, centered, aujustable, width, page

Searching Video's for centering, div, image, logo, centered, aujustable, width, page
advertisement



Centering A Div Containing Image. - I have a logo I need centered in a aujustable width page



 

 

 

 

ADD REPLY / Got an Opinion! Remove these ADs! RAPID SEARCH! Free Web Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE