8 Replies - 1522 Views - Last Post: 06 March 2009 - 04:24 PM

#1 theduke  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 13-February 09

keeping an image centered in CSS

Post icon  Posted 25 February 2009 - 01:16 PM

I am trying to center my logo on the website ... http://refugees.foru...n.com/forum.htm

i have tried margins and position and %'s width: height:
... but it wont stay centered if the page gets bigger or smaller



what am i missing here ?

i also know you like codes ... so i can retype out what ive tried if i must its not prob ... but hopefully its a simple quick fix

This post has been edited by theduke: 25 February 2009 - 02:10 PM


Is This A Good Question/Topic? 0
  • +

Replies To: keeping an image centered in CSS

#2 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1642
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Re: keeping an image centered in CSS

Posted 25 February 2009 - 01:23 PM

You can do it pretty easy with CSS. Here's a shorthand example

#HeaderImage 
{
	   text-align: center;
}



Then in your header image ass
<img src="YourHeaderImage.png" class="HeaderImage"/>


Hope that helps
Was This Post Helpful? 0
  • +
  • -

#3 theduke  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 13-February 09

Re: keeping an image centered in CSS

Posted 25 February 2009 - 01:36 PM

i tried that and nothing :/

the weird thing about this forum setup is ....

there is 2 sections of CSS:
the CSS style sheet
and
forum basic CSS (this is where i found....
/* ***************************Header*************************** */
div#logostrip {
	min-height: 68px;
	background-image: url('http://illiweb.com/fa/empty.gif');
	background-repeat: repeat-x;
	text-align: left;
	}
*+ html div#logostrip {
	min-height: 70px;
	}
div#logostrip #logo {
	display: block;
	margin: 0 10px;
	float: left;
	}
div#logostrip #main-title,div#logostrip #main-title h1 {
	padding-top: 25px;
	font-size: 24px;
	font-weight: bold;
	font-family: Arial,Verdana,Tahoma,sans-serif;
	}
div#logostrip #main-title h1 {
	padding-top: 0;
	}
#site-desc {
	margin: 8px;
	}




* html div#logostrip #logo {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://img17.imageshack.us/img17/7052/mainlogo1.jpg');
	height: 45px;
	width: 274px;
	cursor: hand;


this one is the actual image with the link ...

but both of those are in the basic CSS which is not able to be edited for some reason ...

so i have to use the CSS stylesheet and those codes i posted above are not in there
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,605
  • Joined: 20-January 09

Re: keeping an image centered in CSS

Posted 25 February 2009 - 03:28 PM

setup the div as follows:
* html div#logostrip #logo {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://img17.imageshack.us/img17/7052/mainlogo1.jpg');
	height: 45px;
	width: 274px;
	cursor: hand;
   text-align: center;


and then this
* html div#logostrip #logo img {
   margin: 0 auto;


Was This Post Helpful? 0
  • +
  • -

#5 theduke  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 13-February 09

Re: keeping an image centered in CSS

Posted 25 February 2009 - 04:15 PM

The Code i posted above in the other post can not be edited ...

so i put that code you gave me in the CSS style sheet that i could edit ...

this is what my code looks like now ...
div#logostrip {
	min-height: 68px;
	background-image: url('http://i42.tinypic.com/35jfsxj.gif');
	background-repeat: repeat;
	text-align: center;
}

* html div#logostrip #logo {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://img17.imageshack.us/img17/7052/mainlogo1.jpg');
	height: 45px;
	width: 274px;
	cursor: hand;
   text-align: center;
}

* html div#logostrip #logo img {
   margin: 0 auto;
}

div#logostrip {
	background-color: #000;
	color: #ffffff;

	}





nothing changed ... its still on the left side and not centered :/

did i copy and paste it in the wrong spot or what?

Posted Image

the above image is what im talking about ... the HTML codes i posted a few posts up whre from the 'See your forum basic CSS' which i can not edit ... i only can edit stuff in the CSS stylesheet

This post has been edited by theduke: 25 February 2009 - 04:25 PM

Was This Post Helpful? 0
  • +
  • -

#6 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,605
  • Joined: 20-January 09

Re: keeping an image centered in CSS

Posted 25 February 2009 - 08:05 PM

Quote

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://img17.imageshack.us/img17/7052/mainlogo1.jpg')


Is this your logo?
Was This Post Helpful? 0
  • +
  • -

#7 theduke  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 13-February 09

Re: keeping an image centered in CSS

Posted 25 February 2009 - 08:13 PM

yes the refugee is my logo

This post has been edited by theduke: 25 February 2009 - 08:14 PM

Was This Post Helpful? 0
  • +
  • -

#8 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,605
  • Joined: 20-January 09

Re: keeping an image centered in CSS

Posted 25 February 2009 - 08:20 PM

It is - that's your issue, we were all assuming that you were using an actual <img> in your div, but you're talking about the background. Here's your nugget:


* html div#logostrip #logo {
background: url(http://img17.imageshack.us/img17/7052/mainlogo1.jpg) top center no-repeat;
	height: 45px;
	width: 274px;
	cursor: hand;
}



If the filter is necessary you may want to look at some user guides for that forum. Let me know.
Was This Post Helpful? 0
  • +
  • -

#9 stanimal123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 20-February 09

Re: keeping an image centered in CSS

Posted 06 March 2009 - 04:24 PM

View Posttheduke, on 25 Feb, 2009 - 12:16 PM, said:

I am trying to center my logo on the website ... http://refugees.foru...n.com/forum.htm

i have tried margins and position and %'s width: height:
... but it wont stay centered if the page gets bigger or smaller



what am i missing here ?

i also know you like codes ... so i can retype out what ive tried if i must its not prob ... but hopefully its a simple quick fix




When working with divs its best practice to wrap your image in a div that's inside another div, for example:

<div id="header">
<div id="imageWrap">
<img src="#"/>
</div>
</div>

In CSS:
#header { padding:25px; } /*or however many pixels it takes to center*/

or

#imageWrap { margin:25px; }/*or however many pixels it takes to center*/

Another tip when dealing with padding and margins

margin or padding: top right bottom left (shorthand)

ex: margin: 5px 10px 5px 10px;

With CSS, in my opinion it's all about the wrap and float and clear.... :)

This post has been edited by stanimal123: 06 March 2009 - 04:25 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1